Human Interface Guidelinesの学びとデデザイン例をまとめてみた Vol.4 【/visual-design編】
HIGレポートの第4弾となる今回は、Human Interface Guidelinesの/visual-design編をまとめました。
今回はできるだけ実サービスから参考事例を元に紹介しています。ぜひご覧ください。
Adaptivity and Layout
要約・学び）
アプリをすべてのデバイスで、どのような状況でも使用できること。どのような環境でも適応性のあるインターフェースを設計することが重要。
またiOSデバイスにはさまざまな画面サイズがあり、縦向きまたは横向きのどちらでも使用できます。
Auto Layoutは適応性のあるインターフェイスを構築するための開発ツールで、アプリのコンテンツを管理するルール（constraints）を定義できる。例えば、画面のサイズに関係なく、ある画像の下にXXpxのマージンで配置などができるとのこと。
またAuto Layoutは制約に沿ってレイアウトを自動的に再調整してくれる。
▼例
・さまざまなデバイスの画面サイズ、解像度、色域（sRGB / P3）
・さまざまなデバイスの向き（ポートレート/風景）
・分割ビュー
・iPadのマルチタスクモード
・動的タイプのテキストサイズの変更
・ロケールに基づいて有効になる国際化機能（左から右/右から左のレイアウト方向、日付/時刻/数値の書式設定、フォントのバリエーション、テキストの長さ）
・システム機能の可用性（3D Touch）
Layout Guides and Safe Area
レイアウトガイドは、コンテンツの配置や間隔などをサポートしてくれる。例えばコンテンツの周囲に標準の余白を適用したり、読みやすくするためにテキストの幅を制限したりなど。
Size Classes
サイズクラスは、サイズに基づいてコンテンツ領域を自動的に割り当てるもので、regular（拡張的スペース）とcompact（制約付きスペース→固定的と解釈？）の2種がある。
任意で組み合わせ
- Regular width, regular height
- Compact width, compact height
- Regular width, compact height
- Compact width, regular height
→横を固定し高さをレスポンシブに的なことかな？
イメージとしてはユーザーがデバイスを横向きから縦向きに回転させるといったように高さが変わると、タブバーが高くなるなど。
General Layout Considerations ※超重要
アプリのデザインの原理的な話で、情報設計的に重要度が高いものを伝えるためには視覚的な重みとバランス（コントラスト？）で表現する。
・大きなアイテムは目を引きやすく（小さなアイテムよりも重要に見えるため）、大きなアイテムもタップしやすくなる
・主要なアイテムは画面の上半分に配置したり、画面の左側近くに配置したりする。
・デザイン4原則のように、インデントと配置でコンテンツのグループの関連性を表現できる。それによってユーザーは情報を見つけやすくなる。
・タップする要素（インタラクティブな要素）は、最小領域を44pt x44ptにすること。
・大きなデバイスではテキストを読みやすくするためにマージンを使う。この余白によってテキスト行（複数塊？）を十分に短くし読みやすくなる。
→原理として頭に入れておきたい事項。
Adapting to Changes in Context
コンテキストが変更しても（デバイス間の違いなど環境が変わるような）コンテンツの焦点を変えないこと。というのも、ユーザーにとってコンテンツは最優先事項で、そのフォーカスが変わるとユーザーはアプリの制御を失ったように感じるらしく、フラストレーションが溜まる可能性があるとのこと。要はどのデバイスにもレスポンシブに対応すること。
Designing a Full-Screen Experience
背景をディスプレイの端まで伸ばす必要があり、例えば余白など上から下まで設置すること。それと同じく、画面の一番下や隅にインタラクティブなコントロール（例えばボタンなど）を配置してはいけない。理由としてはユーザーが下端からスワイプジェスチャをしてホーム画面に戻るなどの挙動をしたときに、バッティングし誤操作を起こす可能性があるため。
クリッピングを防ぐために重要なコンテンツを中央に配置し、対称的にする必要がある。そのことによってどの方向でも見栄えが良くなる。
他にも、ステータスバーの高さに注意が必要で、ステータスバーの高さ固定的ではなく、現在のデバイスに基づいてコンテンツを動的に配置しなければいけない。
Animation
要約・学び）
アニメーションは、ステータスを伝えフィードバックをもたらすことができ、あたかも直接操作している直感的な体験を作ることができる。
一方で取扱いには注意が必要で、過度のアニメーションや不必要なアニメーションは体験を遮断される感覚や気が散る感覚を生み出す可能性がある。
iOSの思想・原理として物理世界・物理法則に沿わなければいけない。物理法則に反しているように見えると混乱を生じる可能性がある。他にも奥行きの概念が存在する。
Branding
要約・学び）
（個人的に意識が弱かったが）ブランディングはiOSのアセットを使用するだけでは不十分で、フォント、色、画像によって独自のブランドアイデンティティを作られる。
ただし非カスタマイズ部分をしっかり実施した上でだと思われる。実際ガイドラインにはアプリをiOSアプリのように感じさせることを推奨し、直感的で、ナビゲートしやすく、使いやすく、コンテンツに意識が向いているかが重要とのこと。
またあくまでコンテンツが主で、コンテンツの邪魔にならない範囲でブランディングを行うには、例えば配色やフォントを使用したり、背景を微妙にカスタマイズしたりするとよいとのこと。
参考デザイン）
Color
要約・学び）
色の検討は慎重にしなければいけない。例えば、赤は重大な警告の役割を担うが、重要ではない場面で利用すると赤の効果が弱まる。
アクセントカラーはインタラクティブ性があり、Notesアプリでは黄色で、カレンダーアプリは赤がインタラクティブな要素になる。
アクセントカラーの2つのバージョンを提供して、ライトモードとダークモードの両方で見栄えを良くしなければいけない。そしてシステムカラーを使用すると両方の外観モードが自動的に反映する。
インタラクティブ要素と非インタラクティブ要素に同じ色にしてはいけない。というのも同じだった場合、非をタップしても動かないという誤操作が起きうるため。
さまざまな照明条件でアプリの配色をテストをすることを推奨。照明は、部屋の雰囲気、時間帯、天気などに基づいて、屋内と屋外の両方で大幅に異なるとのこと。※確かにモバイルアプリの場合は外で利用することもあるため、このテストは有効そう
System Colors
iOSは、コントラストの増加や透明度の低下などで自動的に適応するシステムカラーがある。ゆえにシステムの色の値をハードコーディングしてはいけない。
グレーについて。グリッド内の線や棒など交差または重なり合う要素は、不透明度が高いほど見栄えが良くなる。
Dark Mode
要約・学び）
ダークモードでは、アクセントカラーを使用すると、前景のコンテンツを暗い背景に対して目立つ効果がある。
ダークモードでも同じく、明るい外観と暗い外観の両方でデザインをテストする必要があり。
また色彩にはより注意が必要で、コンテンツを快適に読みやすくしなければいけない。暗い背景に暗いテキストがあると読みにくくなる。
ダークモードでコントラストを上げるをオンにすると、暗いテキストと暗い背景の間の視覚的なコントラストが低下する場合があり、中には判読できない可能性があるとのこと。詳細はガイダンスについては、色とコントラストに記載。
Dark Mode Colors
システムは2セットの背景色（ベースとエレベーテッドと呼ばれる）を使用する
>1つの暗いインターフェイスが別のインターフェイスの上に重ねられたときの奥行きの知覚を強化します。基本色が暗くなり、背景のインターフェイスが後退しているように見え、高架の色が明るくなり、前景のインターフェイスが進んでいるように見えます
こういうことを指しているのかな？
ダークモードは動的で、システムの背景色を優先される。そのため、カスタムで背景色を使用すると、システムが提供するものと違いを認識しづらくなる可能性がある。それがやがてユーザーの誤操作を生み出すのか。
カスタムカラーの場合、特に小さいテキストの場合は、コントラスト比を7：1にすること。
ダークモードの白いコンテンツがある場合、周囲の暗いコンテンツに対して背景が光らないように、少し暗い白を選択すること。
Launch Screen
要約・学び）
起動画面はアプリの起動時にすぐに表示するものであり、芸術的な表現の機会ではない。おそらく時間を使って、ブランディングという名の無駄な遊びをせずに。※実際ガイドラインに起動画面はブランディングの機会ではないと明記されている
起動が早いことによって、最初の画面に素早くアクセスでき高速で応答性が高いという印象を与えることができる。
アプリの最初の画面とほぼ同じ起動画面を設計すること。画面が異なっていると、（不具合といった？）不快なフラッシュが発生したかと勘違いする可能性あり。
そもそもユーザーは早いと高評価するものであり、さっきの起動画面と最初の画面の一致の話で、逆に似たものだとすぐに起動したかのような錯覚を起こすので、より早く思う効果がある。
テキストはローカライズできないため、起動画面にテキストを含めないようにすること。
他には広告を出さないこと。
Materials
要約・学び）
iOSには、奥行き感を表現でき、それを表現するために半透明やぼかし効果のマテリアルが用意されている。マテリアルの効果によって前景コンテンツの邪魔をすることなく、背景コンテンツを示唆できたり、背景コンテキストをぼかして読みやすさを提供できたりする。
System-Defined Materials and Vibrancy
iOSは、特定の領域で使用できるマテリアルを定義して、前景コンテンツと背景の外観の間の視覚的な分離を制御する。
素材を選択するときは、コントラストと視覚的な分離に考慮すること。例えば、より厚い素材は、他の要素のコントラストを上げたり、半透明性は、バックグラウンドにあるコンテンツを視覚的に表示させられユーザーがコンテキストを維持できたりする。
参考デザイン）
Terminology
要約・学び）
アプリ内のすべての単語は、ユーザーとの会話の一部で、なじみのある、理解しやすい単語やフレーズを使用すること。理解できないかもしれない頭字語や専門用語は避けること。
インターフェイスのテキストは明確かつ簡潔にして、ユーザーはすばやく理解できるようにする。そのために目立つようにすることも大事。というのもユーザーは長い文章を読むことを余儀なくされることを好まない。
意外と注意だったのが、私たち、私たち、私、そして私のものは避けること（たとえば、「私たちのチュートリアル」や「私のトレーニング」）。というのもこれを見たユーザーの中には侮辱的またはひいきとして解釈される可能性があるため。
また親しみやすい口調を目指すこと。イメージは昼食時に人々と話すようなもの。そのためにときどき縮約を使用する。
しかし、ユーモアを使うときは注意する必要がある。というのもユーザーはテキストを何度も読む可能性があり、時間の経過とともにイライラする可能性がある。また文化的違いもあるため注意。
（これは別にアプリだけではなくどんな文章にも言えるけど）今日の〇〇や明日の〇〇ではなく、日付を書くこと。あるタイムゾーンでは、イベントは本日開始される場合がありますが、別のタイムゾーンでは、同じイベントが昨日開始された可能性がある。
参考デザイン）
Typography
要約・学び）
Appleは、San FranciscoとNew Yorkという2つのタイプのファミリを提供。
San FranciscoはSF Pro、SF Pro Rounded、SF Mono、SF Compact、SF CompactRoundedがあり、例えばSF ProはiOS、macOS、およびtvOSのシステムフォントで使われ、SF Compactは、watchOSのシステムフォントで使われている。プラットフォームUIの視覚的な明瞭さに一致するように設計されているとのことで、SF CompactはSF Proと比較してスペースが狭い特徴があると思い、小さい画面でも読みやすいのかなと考えている。
各特徴）
・SF ProとSF Compactは、すべてのポイントサイズで最適な読みやすいフォントで、アプリ全体で正確な植字に必要な幅と深さを提供。
・SF Pro RoundedとSF Compact Roundedは、丸みを帯びているフォントで、ソフトや丸みのあるUIに溶け込めたり、テキストを代替した音声(??)を提供したりするとのこと。
・SF Monoは、すべての文字の幅が等しいフォント。コーディング環境などでテキストの列を揃えるのに役立ち、XcodeとSwiftPlaygroundsでデフォルトで使用される。
New Yorkはセリフ書体で、読書コンテキストやグラフィック表示コンテキストで使われる。
Choosing Fonts to Enhance Your App
可能な限り、組み込みのテキストスタイルを使用すること。テキストの選び方・使い方は、情報の優先度によっても変わると考えられる。
フォントの太さ、サイズ、色を使って、重要な情報を強調する。コンテンツに優先順位を付ける。ユーザーが気になるコンテンツを読みやすくする。
またUI上のフォントの種類を最小限に抑えること。多くの異なる書体を混在すると断片化されてずさんなように見える可能性があるとのこと。
行間のスペースをリードと呼び、読みやすさを向上させるためにはスペースを節約するかリードを改善になってくる。
ある行から次の行に移動するときに場所を維持しやすくなるという影響はイメージできていないが、幅の広い列または長いパッセージでテキストを表示する場合、行間のスペースを増やすと、良いのかな？
たとえ高さが制限されている領域でも、3行以上のテキストを表示する必要がある場合はタイトなリードを避けるとのこと。
またリードは、テキストサイズによって動的に設定される（？）。
Video
要約・学び）
ビデオプレーヤーには、フルスクリーン（アスペクトフィル）と画面に合わせる（アスペクト）の2つの表示モードがある。
またビデオプレーヤーの操作としてスペースを押すと、メディアの再生を再生または一時停止するようにする。スペースを押してメディアの再生を制御することは、使用しているキーボードに関係なく、人が期待する操作のため。
振り返り
/visual-design編は、割と人間中心的といいますか、原理原則みたいな本質部分が多く、一個抽象度を上げるとまた読んでいて楽しいものになりました。
次回は/controls編を公開します。
この記事が気に入ったらサポートをしてみませんか？