Human Interface Guidelinesを読んでみる〜コンポーネント/コンテンツ〜
こちらの続きです
コンポーネントを読んでいきます
コンポーネント
慣れ親しんだ一貫性のある操作感を提供できるように、システムで定義されたコンポーネントを使用およびカスタマイズする方法について説明します。
日々の業務ではコンポーネント化がうまくできずに困っているのでここはしっかり理解したいところです。
コンテンツ
レイアウトと編成
メニューとアクション
ナビゲーションと検索
表示
選択と入力
コンポーネントの内容は6つに分かれていましたが、それぞれさらに子テーマに分かれているので、まずはコンテンツから見ていきます。
コンテンツ
現在業務で開発しているアプリにグラフのコンテンツは存在しないので、他3つに絞って見ていきます。
イメージビュー
イメージビューには、透明または不透明な背景の上に1つのイメージが表示されます。場合によっては、イメージのアニメーションシーケンスが表示されることもあります。
イメージビューはビューの主な目的が単にイメージを表示することである場合に使用する。まれにあることですが、イメージをインタラクティブにしたい場合は、イメージビューにボタンの挙動を追加するのではなく、システムで提供されるボタンにイメージを表示してください。
インターフェイスにアイコンを表示したい場合は、イメージビューの代わりにシンボルまたはインターフェイスアイコンを使用することを検討する。SF Symbolsでは、ベクトルベースのシンプルなイメージの充実したライブラリが提供されます。これらのイメージはさまざまなカラーや不透明度でレンダリングできます。アイコン（グリフまたはテンプレートイメージとも呼ばれます）は一般にビットマップ画像で、透明でないピクセルにカラーを適用できます。シンボルでもインターフェイスアイコンでも、ユーザが選択するアクセントカラーを使用できます。
内容は実装観点のようです。まれにあることと表現している通り、特別な実装方法をあえて選択しない限りアンチパターンを踏むことはなさそう。
テキストビュー
テキストビューは、複数行のスタイル付きテキストコンテンツを表示します。任意で編集可能にできます。
長いテキストや編集可能なテキスト、特殊なフォーマットのテキストを表示する場合に使用する。テキストビューは、テキストフィールドやラベルとは異なります。テキストビューには、特殊なテキストを表示したり、テキスト入力を受け取ったりするためのほとんどのオプションが用意されています。表示するテキストが少量の場合は、ラベルまたはテキストフィールド（編集可能なテキストを扱う場合）を使う方がシンプルです。
これも実装的な話です。特にUIKitで実装している場合は考慮が必要そう。
テキストを読みやすくする。さまざまなフォント、カラー、配置で工夫することはできますが、コンテンツの可読性を維持することが肝心です。ユーザがデバイスでテキストのサイズを変えても読みにくくならないように、Dynamic Typeを採用することをおすすめします。文字を太くするなどのアクセシビリティオプションをオンにしてコンテンツをテストすることを忘れないでください。ガイダンスは、アクセシビリティおよびタイポグラフィを参照してください。
文字サイズの対応はデザインにも大きく影響するので、新規リリース時もしくはリニューアルレベルの改修時に検討したいところ。
有用なテキストは選択可能にする。エラーメッセージ、シリアル番号、IPアドレスなどの有用な情報がテキストビューに含まれる場合は、ユーザがその情報を選択してほかの場所にコピー&ペーストできるようにすることを検討してください。
なぜ表示するのかを考えると、コピー＆ペーストの必要性は明確になりそう。
Webビュー
Webビューは、埋め込まれたHTMLやWebサイトなどのリッチなWebコンテンツをアプリ内に直接読み込んで表示します。
ベストプラクティス
進む/戻るナビゲーションに適宜対応する。Webビューは進む/戻るナビゲーションに対応していますが、デフォルトでは使用不可になっています。ユーザがWebビューで複数のページを閲覧する可能性がある場合は、進む/戻るナビゲーションを有効にし、それぞれに対応するコントロールでこれらの機能を呼び出してください。
リロードは実装すること多いけど、進む/戻るも状況次第で検討するべきなのか。
Webビューを使ってWebブラウザを構築することはしない。アプリの操作環境を離れずに簡潔にWebサイトにアクセスできるようにする目的でWebビューを使うのはかまいませんが、Webブラウジングの主な手段はあくまでSafariです。Safariの機能をアプリ内で複製する必要はありません。むしろ、そうしないでください。
ですよね。
続きます〜