Human Interface Guidelines(iOS版)に向き合うその1

2020.07.14
Apple iOS

最近は1日1回必ずApple関連のニュースを検索します。Apple信者のmaitaです。

より良いアプリを作るため、今一度Appleが出している「Human Interface Guidelines」を読み直してみました。少しずつ読んでいって、解釈した結果をブログに上げていこうと思います。今回はその1、基本的な部分です。

本文はこちら
Human Interface GuideLine :
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

1. ■iOSデザインの原則
2. ■設計の原則
3. ■インターフェイスの要点

■iOSデザインの原則

アプリの品質・機能性を高めるために以下3つの原則をテーマにデザインをする必要がある。

Clarity
▼わかりやすいデザイン
システム全体を通してコンテンツをわかりやすくするようなデザインを意識する。
例えば以下のようなデザインを意識する。
- テキストは読みやすいサイズであること
- わかりやすい色やフォントを使用すること
- アイコンは目的に沿ったわかりやすいデザインであること
- 装飾は控えめにして機能面に重点を置くようにすること
- ネガティブスペース(コンテンツ間のちょうど良い余白)を意識すること
Deference
▼コンテンツを尊重したインターフェイス
※「Deference」をそのまま翻訳すると「尊敬」という意味になる。
おそらく、インターフェイスがコンテンツを尊敬する、尊重するという意味合い。

滑らかな動きとわかりやすくて美しいインターフェイスにより、コンテンツの邪魔をすることなく、ユーザーはコンテンツの内容を理解して操作することができる。コンテンツは画面全体に表示されるが、例えばタップできないものは半透明にする、上に重なっているメニューの背景をぼかす等が施されているとよりわかりやすくなる。

枠・グラデーション・影の使用を最小限に抑えてインターフェイスが主役にならないようにする。
Depth
▼奥行きを意識する
Viewの分かりやすい重なり方の表現、リアルな動きによってコンテンツを分かりやすくする。
触れられること・見つけやすいことは、次にどのコンテンツを見れば良いのかを見失わず、ストレスなく次の機能やコンテンツにアクセスすることが可能になる。

■設計の原則

アプリのインパクトを高めていくためのアイデンティティを考える際には、以下を原則に設計していくこと。

Aesthetic Integrity
▼デザイン面の整合性
アプリの主要な機能と見た目・動作の整合性が取れているかを考慮する。例えば、機能をメインとしたアプリの場合、目立ちすぎないグラフィック・iOS標準のコントローラー・予測が可能な動作を取り入れることで、機能実行に集中できる。逆にゲームなどの世界観を大事にするアプリの場合、雰囲気にあったワクワクするような見た目を提供する必要がある。
Consistency
▼一貫性
iOSシステムが提供するインターフェイス、見慣れたアイコン、標準のテキストスタイル(フォント等)、統一して使われる用語を使用して使い慣れた見た目や動きを提供する必要がある。
Direct Manipulation
▼コンテンツの直接操作
画面上のコンテンツを直接操作することで、操作した結果を簡単に理解することができる。
例えば、次のページにいくためのスワイプや項目を並び替える時のドラッグ操作。画面向きを変更するためのデバイスの回転等のこと
Feedback
▼操作に対するフィードバック
実行した操作によって得られた結果をユーザーに提供し続ける必要がある。
例えば、タップされた項目をハイライトする、実行した処理の進行状況をインジケーターで知らせる、処理が完了したら完了アニメーション、サウンドによってユーザーに結果を知らせる等のこと
Metaphors
▼慣れ親しんだ体験をアプリ上でも再現する
アプリ上のオブジェクトや操作が、現実の慣れ親しんだ体験の隠喩であること。ユーザーは画面を物理的に操作(タッチ操作等)するので、このメタファーはiOS上で機能します。例えば、スイッチの切り替え、ピッカーのスクロール操作、コンテンツの別部分を見るためにスクロールをする等のこと
User Control
▼操作はユーザーが主役
操作の主導権はユーザーである必要がある。
アプリ側から、操作の提案をしたりその操作による危険性を警告することは可能だが、アプリが意思決定をユーザーから奪うことは誤り。
例えば、項目を削除する場合、この項目を削除することが可能であると提案し、削除の危険性を警告することができる。かつ削除処理中にその操作をキャンセルできるようにすること。
削除操作の開始から終了まで、一切コントロールできない状況を作らず、常にユーザー自身がコントロールしていると感じられるようにする。

■インターフェイスの要点

▼UIKitについて

ほとんどのiOSアプリは、共通のインターフェイス要素を定義するフレームワーク「UIKit」を使用して構築されている。
このフレームワークによって、アプリはシステム全体で一貫した外観になり、かつ高度なカスタマイズを提供できる。
UIkitはどのiOSデバイスでも見栄えの良い一貫したアプリを設計でき、大元のシステムが外観の変更をおこなうと、アプリで使用している外観も自動的に変更される。
UIKitに関する公式ドキュメント : https://developer.apple.com/documentation/uikit

▼UIKitが提供するインターフェイス要素

Bars
自身がアプリ内のどの部分にいるのかを伝えたり、アクションを開始したり、情報を伝えたりするためのボタン等のこと
例 : ナビゲーションバー・検索バー・タブバー・ステータスバー
Views
テキスト・見た目・アニメーション・双方向のやりとりといった、ユーザーがアプリで見るコンテンツのこと。
ビューはスクロール・挿入・削除・設置などの動作を可能にする。
例 : テキストビュー・イメージビュー・アラート
Controls
操作を開始して、現在の情報を伝える。
例えば、ON状態のスイッチをタップして切り替える動作を開始し状態をOFFにする、そしてスイッチを非活性状態にして現在のスイッチの情報をユーザーに伝えること。
例 : ボタン・スイッチ・テキスト入力フィールド・インジケーター