【HIG和訳】ビジュアル・デザイン / 適応性とレイアウト①
アップルのヒューマン・インターフェース・ガイドライン、ビジュアル・デザインについての和訳です。
適応性とレイアウトについて2回にわたって和訳します。
第1回の和訳項目は下記になります。
適応性とレイアウト
一般的に、ユーザーは自分の好きなアプリをすべての端末やあらゆる状況で使用できるようにしたいと考えています。 iOSでは、さまざまなデバイス、iPad上のマルチタスクに置ける分割ビュー、画面の回転やその他の場合も、シェイプとサイズを自動的に変更するようにインターフェイスエレメントとレイアウトを設定できます。どんな環境でも優れたエクスペリエンスを提供する適応可能なインターフェイスを設計することが不可欠です。
デバイスの画面サイズと方向
iOSデバイスはさまざまな画面サイズで提供され、縦向きまたは横向きのいずれかで使用できます。
Device | Portrait dimensions | Landscape dimensions |
---|---|---|
12.9" iPad Pro | 2048px × 2732px | 2732px × 2048px |
11" iPad Pro | 1668px × 2388px | 2388px × 1668px |
10.5" iPad Pro | 1668px × 2224px | 2224px × 1668px |
9.7" iPad | 1536px × 2048px | 2048px × 1536px |
7.9" iPad mini 4 | 1536px × 2048px | 2048px × 1536px |
iPhone XS Max | 1242px × 2688px | 2688px × 1242px |
iPhone XS | 1125px × 2436px | 2436px × 1125px |
iPhone XR | 828px × 1792px | 1792px × 828px |
iPhone X | 1125px × 2436px | 2436px × 1125px |
iPhone 8 Plus | 1242px × 2208px | 2208px × 1242px |
iPhone 8 | 750px × 1334px | 1334px × 750px |
iPhone 7 Plus | 1242px × 2208px | 2208px × 1242px |
iPhone 7 | 750px × 1334px | 1334px × 750px |
iPhone 6s Plus | 1242px × 2208px | 2208px × 1242px |
iPhone 6s | 750px × 1334px | 1334px × 750px |
iPhone SE | 640px × 1136px | 1136px × 640px |
画面解像度がアプリケーションのアートワークにどのように影響するかを知るには、「画像サイズと解像度(Image Size and Resolution - Icons and Images - iOS - Human Interface Guidelines - Apple Developer)」を参照してください。
自動レイアウト
自動レイアウトは、適応インタフェースを構築するための開発ツールです。自動レイアウトを使用すると、アプリ内のコンテンツを管理するルール(「制約」と呼ばれる)を定義できます。たとえば、使用可能な画面領域に関係なく、画像を常に水平方向に中央に配置し、画像の下に8ポイントの位置に配置するようにボタンを制限することができます。
自動レイアウトは、特定の環境変動(「特性」と呼ばれる)が検出されたときに、指定された制約に従ってレイアウトを自動的に再調整します。次のようなさまざまな特性に動的に適応するようにアプリを設定できます:
- さまざまなデバイスの画面サイズ、解像度、色域(sRGB / P3)
- さまざまなデバイスの向き(縦/横)
- スプリットビュー
- iPadのマルチタスクモード
- ダイナミックタイプのテキストサイズの変更
- ロケールに基づいて有効化された国際化機能(左から右へ/右から左へのレイアウト方向、日付/時刻/数値書式、フォントのバリエーション、テキストの長さ)
- システム機能の可用性(3D Touch)
開発者向けのガイダンスについては、「自動レイアウトガイド」および「UITraitCollection」を参照してください。
レイアウトガイドとセーフエリア
レイアウトガイドは、画面上に実際には表示されないが、コンテンツの配置および間隔を助ける矩形領域を定義します。このシステムには、コンテンツの周りに標準マージンを簡単に適用したり、テキストの幅を最適な読みやすさに制限したりするためのレイアウトガイドが含まれています。カスタムレイアウトガイドを定義することもできます。
UIKitで定義された安全領域とレイアウトマージンを遵守してください。これらのレイアウトガイドは、デバイスとコンテキストに基づいて適切な挿入を保証します。安全領域は、コンテンツがステータスバー、ナビゲーションバー、ツールバー、およびタブバーの下になるのを防ぎます。標準的なシステム提供のビューは、安全領域レイアウトガイドを自動的に採用します。
②に続く