🍎HIGざっくりまとめ Foundations編 vol. 5 レイアウト

2022年11月11日 11:47

　2022年6月7日、AppleのHuman Interface Guidelinesが改訂されました。これを期にしっかり読み込み、個人的視点からのざっくりなまとめを記していきます。

※私はブラウザで動くWEBアプリーケーションのUIをデザインしています。その視点から大切だと思った点を残してくので、対象外のデバイスや各プラットフォームの細やかな話は端折っています。

Layout（レイアウト）

レイアウトガイドは、画面上のコンテンツの位置や配置、間隔を調整するのに役立つ長方形の領域を定義します。システムには、コンテンツの周囲に標準的なマージンを適用し、読みやすさを最適化するためにテキストの幅を制限することが簡単にできる、定義済みレイアウトガイドが含まれています。また、カスタムレイアウトガイドを定義することもできます。

セーフエリア
ナビゲーションバー、タブバー、ツールバー、またはウィンドウやシーンが提供する他のビューによってカバーされていないビュー内の領域を定義します。セーフエリアは、iPhoneのDynamic Islandや一部のMacモデルのカメラハウジングなど、デバイスのインタラクティブ機能や表示機能を回避するのに不可欠です。

SwiftUI や Auto Layout を使うことで、あなたのインターフェイスが幅広い特性やコンテキストに動的に適応するようにすることができます。

異なるデバイスの画面サイズ、解像度、カラースペース
さまざまなデバイスの向き（縦向き／横向き）に対応
スプリットビュー
iPadの外部ディスプレイ対応、Display Zoom、マルチタスクモードなど
Dynamic Typeの文字サイズ変更
ロケールに応じた国際化機能（左から右、右から左のレイアウト方向、日付・時刻・数字の書式、フォントのバリエーション、テキストの長さ）をシステムで実現できる。
システム機能の有無

要点

できるだけ同じコンテンツを表示しながら、コンテキストの変化に優雅に適応する一貫したレイアウトを設計します。
システムで定義されたセーフエリア、マージン、ガイドを尊重し、レイアウト修飾子を指定して階層内のビューの配置を微調整することで、適応性の高いインターフェイスを確保します。
相対的な重要性を伝えるために、配置を工夫する。
一般に、主要な項目は、画面またはウィンドウの上半分、先頭付近に配置します。画面を見ている人も、VoiceOverなどのスクリーンリーダーを使っている人も、通常このエリアから始めます。
十分なスペースを確保することで、必要な情報を上位に表示します。
人々は最も重要な情報を瞬時に見たいと思うので、画面やウィンドウを必要のない詳細情報で散らかさないようにします。スクロールすることで、二次的な情報にも簡単にアクセスできるようにします。
必要な情報を見つけやすくするために、視覚的なグループ分けをする。
例えば、ネガティブスペース、背景の形状、色、素材、区切り線などを使って、関連する要素や情報を明確なエリアに表示することができます。
視覚的なスキャンを容易にし、組織や階層を伝えるために、整列を使用します。
整列は、アプリをすっきりと整理して見せ、スクロール中の集中力を高め、情報の検索を容易にします。また、インデントとアラインメントは、情報の階層構造を視覚化するのにも役立ちます。
アスペクト比に注意してください。
画面サイズが異なるとアスペクト比が異なるため、アートワークが切り取られたり、レターボックスやピラーボックスで表示されることがあります。このような場合、アートワークのアスペクト比を変更せず、画面いっぱいに拡大縮小することで、どのディスプレイサイズでも重要なビジュアルコンテンツが表示されたままになります。
テキストサイズの変更に備える。
ほとんどのアプリケーションは、異なるテキストサイズを選択したときに、それに対応することを期待しています。テキストサイズの変更に対応するために、レイアウトを調整する必要がある場合があります。
可能であれば、画面外の要素を部分的に表示することで、隠されたコンテンツを暗示することを検討してください。
コンテンツが1画面に収まらないような大きなコレクションでは、画面外のアイテムの一部を表示することで、追加コンテンツを示唆できるかもしれません。
タッチスクリーンでは、インタラクティブなコンポーネントのために十分なタッチターゲットを提供してください。
すべての操作部について、タップ可能な領域を44x44ポイント以上確保してください。
複数のデバイスで、異なる方向、ローカライゼーション、およびテキストサイズを使って、アプリをプレビューします。
一般的に、ワイドカラーなどの機能は実際のデバイスでプレビューするのがベストですが、Xcode Simulatorを使用して、クリッピングやその他のレイアウトの問題をチェックすることができます。

ピラーボックス
テレビ放送などで画面の左右に表示される黒帯のことだそうです。

レターボックス
アプリ最大または最小アスペクト比がデバイスのディスプレイのアスペクト比と互換性がない場合には、表示領域の両側に出る黒いバーのこと。
※上記２つの違いがわからない・・・

iOS, iPadOS

縦向きと横向きの両方をサポートすることを目指します。
アプリが単一の向きで動作することが不可欠な場合は、それに合わせてデバイスを回転させるように指示しないでください。自動的に回転しない場合、ユーザーは本能的に回転させることを理解します。横向き専用のアプリの場合は、デバイスを左にしても右にしても同じように動作するようにしてください。
特定のデバイスで動作するアプリの場合、そのデバイスのすべての画面サイズで動作することを確認します。
フルウィドスボタンの挿入
フルウィドスボタンのサイドは、システムで定義された標準的なマージンを尊重してください。画面下部のフルウィドスボタンは、一般的に角が丸く、セーフエリアの底に揃うようにすると見栄えが良くなります（これにより、ホームインジケータと衝突しないようにすることもできます）。
ビジュアルコンテンツを画面いっぱいに広げる。
背景はディスプレイの端まで、テーブルやコレクションなど縦方向にスクロールできるレイアウトは下まで続くようにしましょう（←つまりmaxwidthであわせるってことか・・・）。
iPadでは、横向きの画面の両脇に操作系を配置することを検討してください。
画面の左右に操作系があると、デバイスを持ったまま両手で簡単に操作系に手が届きます。
画面の下端にインタラクティブなコントロールを配置することは、可能な限り避けてください。
ディスプレイの下端のシステムジェスチャーと競合してしまう。
また、画面の隅に操作系を配置すると、快適に手を伸ばすことが困難な場合があります。
画面の下部（セーフエリアより下）にコントロールを配置する必要がある場合は、画面の上部と下部に配置するときに一致するインセットを使用し、誤ってホームインジケータにヒットしないように、その周囲に十分なスペースを確保してください。
ステータスバーの高さが変わっても大丈夫なように、準備しておきましょう。
ステータスバーの下にコンテンツを表示する場合、セーフエリアを使用することで、必要に応じてコンテンツを動的に再配置することができます。
ステータスバーを隠すのは、それが付加価値を生むか、体験を向上させるときだけです。
ステータスバーには、人々が有用と考える情報が表示され、ほとんどのアプリが完全に使用していない画面の領域を占めているため、通常は表示したままにしておくとよいでしょう。

感想

大事なものはなるべく上位にや、視覚的グルーピングなどはWEBとも共通。
冒頭のリストにあるように、縦横の向きの変更だけでなくて表示領域が変わるシーンは色々あって、デバイスサイズ以外の色んな表示領域を考慮しなければいけない。
デバイスの向き固定の場合、いちいち指示を出さなくていいはちょと意外でした。「ユーザーは本能的に回転させることを理解します」もうスマホにみんな慣れてるから確かにそうだなぁ。
フルウィドスのボタンについて、ハードの丸みに（に沿ったセーフエリアの底）にコンテンツのデザインも合わせるという発想はなかった。四角アートボード上でデザインしてたら忘れそう。
操作系の配置は画面の向きやサイズごとに操作しやすい位置が違う。さらにシステムジェスチャーと競合しないようになどの注意も必要

この記事が気に入ったらサポートをしてみませんか？