iOSのUI設計に欠かせない、ヒューマンインターフェイスガイドライン(Human Interface Guidelines)のテーマとデザイン原則
UIデザインを勉強するにあたって、デザインや開発のガイドラインとしてiOSはヒューマンインターフェイスガイドライン、Androidはマテリアルデザインという考え方を採用していると知りました。
iOSとAndroidではガイドラインの他にも画面遷移の考え方や表示される位置やパーツも変わってくるので、どちらも把握しておく必要があります。
今回はiOSのヒューマンインターフェイスガイドラインのテーマとデザイン原則についてまとめてみます。
※勉強中の自分が忘れないための備忘録です。 日本語訳をわかりやすく勝手に解釈しているところがあるので、ニュアンスなど違ったらすみません。雰囲気理解でお願いします。
★3つの主要なテーマ
1. Clarity:明快さ
テキストはあらゆるサイズで読みやすい
アイコンは正確でわかりやすい
装飾は繊細で適切
機能性を重視した動き
余白、色、フォント、グラフィックス、インターフェイス要素は、重要なコンテンツをわずかに強調し、インタラクティブ性(双方向での情報発信)があることを伝える
2. Deference:敬意
滑らかな動きと鮮明で美しいインターフェイスは、コンテンツとぶつかることなく、わかりやすく操作を可能にする
通常、コンテンツは画面全体に表示されるが、半透明とぼかしは多くの場合、表示のヒントになる
ベゼル、グラデーション、ドロップシャドウの使用を最小限に抑えることでコンテンツが最優先されるよう、インターフェイスを明るく風通しの良い状態に保つ
3. Depth:奥行き
はっきりした見た目とリアルな動きが階層・ページの重なりを伝え、わかりやすくする
操作しやすく見つけやすくすることが、文脈を失うことなく機能や次のコンテンツへのアクセスを可能にする
トランジション(動きの変化)は、コンテンツを遷移する際に階層の重なりをわかりやすくする
★6つのデザイン原則
1. Aesthetic Integrity:美的完全性
美的完全性は、アプリの外観と動作がその機能とどれだけうまくマッチしているかを表しています。
たとえば、ビジネスのようなタスクを実行するアプリは、落ち着いていて目立たないグラフィック、標準的な操作性、予測可能な動作を取り入れて、集中力を維持します。
一方、ゲームなどの没入型アプリは、新しい発見や楽しさが伝わる魅力的な外観である必要があります。
2. Consistency:一貫性
一貫性のあるアプリは、システムが提供するインターフェイス、よく知られたアイコン、標準のテキストスタイル、および統一された用語を使用して、標準の使い慣れたUIをしています。人々が期待、想像する機能と動作を表現します。
3. Direct Manipulation:直接操作
画面上のコンテンツを直接操作することで、人々を引き付け、理解を深めることができます。
ユーザーは、デバイスを回転させたり、指でドラッグするなど直接操作をして画面の変化を体感することで、自分のアクションの結果をすぐに理解することができます。
4. Feedback:フィードバック
フィードバックはユーザーアクションを認識し、結果を返して情報を伝えます。内臓されているiOSアプリは、すべてのユーザーアクションに応じて認識可能なフィードバックを返します。
インタラクティブな要素をタップするとすぐにハイライトが表示され、進行状況インジケーターが時間のかかる操作のステータスを伝え、アニメーションやサウンドはアクションの結果をはっきりと表示します。
5. Metaphors:メタファー(比喩)の使用
アプリの仮想オブジェクトとアクションが、現実の世界とデジタルの世界のどちらに根付いているかにかかわらず、身近な体験のたとえであると人はより早く理解します。
アプリは人が物理的に画面を操作するため、現実の世界に存在するものでたとえることでiOSでうまく機能します。
ビューを邪魔にならないように移動して、下のコンテンツを公開します。コンテンツをドラッグしてスワイプします。スイッチを切り替えたり、スライダーを移動したり、ピッカーの値をスクロールしたりします。それらは本や雑誌のページをめくったりもします。
6. User Control:ユーザーによる制御
iOS全体で、人がアプリをコントロールします。
アプリは動作を提案したり、危険な結果を警告したりできますが、通常、アプリが意思決定を引き継ぐことはありません。
良いアプリは、ユーザーの実行したいことと望ましくない結果を回避することの間のちょうど良いバランスを見つけます。
アプリは、インタラクティブな要素をユーザーが使い慣れた状態に保ち、削除など(破壊的なアクション)の実行を確認し、すでに進行中の場合でも操作を簡単にキャンセルできるようにすることで、ユーザーが自分でコントロールしているように感じさせます。