TL;DR
AppleのHuman Interface Guideline(iOS)をGoogle翻訳に突っ込みながら読んでいくシリーズです。
- Apple Human Interface Guidelines(英語)
https://developer.apple.com/design/human-interface-guidelines/ - ユーザインターフェイスのデザインのヒント(日本語)
https://developer.apple.com/jp/design/tips/
【シリーズ記事まとめ】
Apple iOS Human Interface Guideline を読み込む【序章編】←この記事
Apple iOS Human Interface Guideline を読み込む【App Architecture編】
Themes(テーマ)
iOSのデザインテーマ
アプリデザイナーとして、App Storeチャートのトップに浮上する並外れた製品を提供するチャンスがあります。
そのためには、品質と機能に対する高い期待に応える必要があります。
iOSを他のプラットフォームと区別する3つの主要なテーマがあります。
-
明快さ
システム全体で、テキストはどのサイズでも読みやすく、アイコン(が表す意味)は正確かつ明快で、装飾はかすかで適切にし、機能性に焦点を絞ることがデザインの動機となっています。
好ましくないスペース、色、フォント、グラフィックス、その他のインターフェイス要素は、重要なコンテンツを微妙に強調してしまい、相互関係を示唆します。 -
敬意
滑らかな動きと鮮明で美しいインターフェースにより、人々はコンテンツと競合することなくコンテンツを理解し、対話することができます。
通常、コンテンツは画面全体に表示されますが、半透明性とぼかしが多くの場合より多くをほのめかします。
ベゼル、グラデーション、ドロップシャドウの使用を最小限に抑えることで、コンテンツを最重要視しながら、インターフェイスを明るく風通しの良い状態に保てます。 -
深度
明確な視覚層と現実的な動きがアプリ内の階層を伝え、活力を与え、理解を促進します。
触れて発見することで喜びが高まり、コンテキストを失うことなく機能や追加コンテンツにアクセスできるようになります。
トランジションは、コンテンツ内をナビゲートするときに階層の意識を示します。
設計原理
インパクトとリーチを最大化するためには、アプリのアイデンティティを想像する際に次の原則に留意してください。
-
美的整合性
美的整合性とは、アプリの外観と動作がその機能とどの程度うまく統合されているかを表します。
たとえば、重要なタスクの実行を支援するアプリでは、繊細で控えめなグラフィックス、標準的なコントロール、予測可能な動作を使用することで、アプリの使用に集中させ続けることができます。
一方、ゲームなどの没入型アプリでは、発見を促し、その中で楽しさと興奮を約束するような魅力的な外観が求められます。 -
一貫性
一貫性のあるアプリは、システムが提供するインターフェイス要素、よく知られているアイコン、標準のテキストスタイル、統一された用語を使用することで、ユーザーがよく知る規格と枠組みを実装します。
そのようなアプリには、ユーザーが想定する方法での機能と動作が組み込まれています。 -
直接操作
画面上のコンテンツを直接操作することで、ユーザーを引き付け、理解を促進します。
ユーザーは、デバイスを回転させたり、ジェスチャを使用して画面上のコンテンツに作用を与えた時に、直接操作を経験します。
直接操作を通して、ユーザーは自身の行いによる結果を即座に目に見える形で知ることができます。 -
フィードバック
フィードバックはアクションを受け取り、結果を表示することで人々に情報を提供します。
組み込みのiOSアプリは、すべてのユーザーアクションに応じて知覚可能なフィードバックを提供します。
インタラクティブな要素はタップすると簡単に強調表示され、プログレスインジケータは長時間の動作の状況を伝え、アニメーションとサウンドはアクションの結果を明確にしてくれます。 -
メタファー
アプリの仮想オブジェクトとアクションが身近な体験のメタファーである場合、その体験が実世界由来であるか、デジタル世界由来であるかに関わらず、ユーザーはより迅速にアプリの使用方法を学習します。
人々は物理的に画面を操作しているので、メタファーはiOSにおいてうまく機能します。
ユーザーはビューを移動させて、下にあるコンテンツを、見ることができます。
コンテンツをドラッグやスワイプすることができます。
スイッチの切り替え、スライダーの移動や、ピッカーをスクロールすることもできます。
彼らは本や雑誌のページをめくることも可能です。 -
ユーザーをコントロールする
iOSでは、アプリではなく人がコントロールされます。
アプリは一連のアクションを提案したり、危険な結果について警告したりできますが、通常はアプリが意思決定を引き継ぐのは間違いです。
最高のアプリでは、ユーザーが可能な操作と、望ましくない結果を回避することの間の正しいバランスが存在します。
アプリは、インタラクティブな要素を使い慣れた予測可能なものにしておき、破壊的なアクションには確認をし、すでに進行中であっても操作を簡単にキャンセルできるようにすることで、あたかもユーザーがアプリをコントロールしているように感じさせることができます。
iPad Apps for Mac
iPadOSも出てきたということで割愛させていただきます...
HIGにも近いうちにiPadOS版が追加されるのかな。
Interface Essentials(インターフェースの基本)
ほとんどのiOSアプリは、共通のインターフェイス要素が定義されたプログラミングフレームワークであるUIKitのコンポーネントを使用して構築されます。
このUIKitを使うことで、アプリにシステム全体で一貫した外観を実現すると同時に、高度なカスタマイズを提供することができます。
UIKitの要素は柔軟で使いやすいです。
これらは適応性があり、どのiOSデバイスでも見栄えの良い単一のアプリを設計でき、システムが外観の変更を導入すると自動的にアップデートされます。
UIKitが提供するインターフェース要素は、次の3つの主要なカテゴリーに適合します。
-
Bars
アプリのどこにいるのかを伝え、ナビゲーションを提供します。
アクションの開始や情報を伝えるためのボタン、その他の要素を含めることもできます。 -
Views
テキスト、グラフィックス、アニメーション、インタラクティブな要素など、ユーザーがアプリで見る主要なコンテンツが含まれています。
ビューに対しては、スクロール、挿入、削除、配置などの動作が可能です。 -
Controls
アクションを開始し、情報を伝えます。
ボタン、スイッチ、テキストフィールド、およびプログレスインジケーターは、コントロールの例です。
iOSのインターフェースの定義に加えて、UIKitはアプリが採用できる機能を定義します。
たとえば、このフレームワークを通じて、アプリはタッチスクリーン上のジェスチャーに応答し、描画、アクセシビリティ、印刷などの機能を有効にできます。
iOSは、Apple Pay、HealthKit、ResearchKitなどの他のプログラミングフレームワークやテクノロジーとも緊密に統合されているため、驚くほど強力なアプリを設計できます。