FRMSKI開発ブログ

プログラミング、UI / UX、仕事、読書のことなど、日々の記録を綴ります

【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で定義された安全領域とレイアウトマージンを遵守してください。これらのレイアウトガイドは、デバイスとコンテキストに基づいて適切な挿入を保証します。安全領域は、コンテンツがステータスバー、ナビゲーションバー、ツールバー、およびタブバーの下になるのを防ぎます。標準的なシステム提供のビューは、安全領域レイアウトガイドを自動的に採用します。

f:id:frmski:20181118211628p:plain:w500

②に続く