【Human Interface Guidelines 翻訳 vol.1】iOS - Themes
UIの勉強のため、最新版の Human Interface Guidelines を読もうと思います。
ほぼ Google 翻訳です。
なんども見返すことになると思うので記事として残しておきます。
まずは iOS から。本記事は下記ページの翻訳となります。
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
iOS Design Themes
As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality.
アプリデザイナーは、App Storeチャートのトップに立つ並外れた製品を提供する機会があります。
そのためには、品質と機能に対する高い期待に応える必要があります。
Three primary themes differentiate iOS from other platforms:
iOSを他のプラットフォームと区別する3つの主要なテーマ：
- Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.
- 明快さ。 システム全体を通して、テキストはあらゆるサイズで読みやすく、アイコンは正確で明快であり、装飾は微妙で適切であり、機能性に重点を置くことがデザインの動機となります。
余白、色、フォント、グラフィックス、およびインターフェイス要素は、重要なコンテンツを微妙に強調し、双方向性を伝えます。
- Deference. Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it. Content typically fills the entire screen, while translucency and blurring often hint at more. Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.
- 尊重。 滑らかな動きと鮮明で美しいインターフェイスにより、ユーザーはコンテンツと競合することなく、コンテンツを理解して操作することができます。
通常、コンテンツは画面全体に表示されますが、半透明性とブラーは、多くの場合ヒントになります。
ベゼル、グラデーション、ドロップシャドウの使用を最小限に抑えることで、コンテンツを最優先に（尊重）しながら、インターフェイスを明るく風通しの良いものに保ちます。
- Depth. Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality and additional content without losing context. Transitions provide a sense of depth as you navigate through content.
- 奥行き。 明確な視覚レイヤーとリアルな動きが階層を伝え、活力を与え、理解を容易にします。
タッチと発見可能性は喜びを高め、コンテキストを失うことなく機能や追加コンテンツへのアクセスを可能にします。
トランジションは、コンテンツをナビゲートするときに奥行きを与えます。
Design Principles（設計時の原則）
To maximize impact and reach, keep the following principles in mind as you imagine your app’s identity.
インパクトとリーチを最大化するには、アプリのアイデンティティを想像するときに、次の原則を覚えておいてください。
Aesthetic Integrity（審美的整合性）
Aesthetic integrity represents how well an app’s appearance and behavior integrate with its function. For example, an app that helps people perform a serious task can keep them focused by using subtle, unobtrusive graphics, standard controls, and predictable behaviors. On the other hand, an immersive app, such as a game, can deliver a captivating appearance that promises fun and excitement, while encouraging discovery.
審美的整合性は、アプリの外観と動作が機能とどの程度うまく統合されているかを表します。
たとえば、人々が真剣なタスクを実行するのを支援するアプリは、微妙で目立たないグラフィックス、標準コントロール、および予測可能な動作を使用することで、集中力を維持できます。
一方、ゲームなどの没入型アプリは、発見を促進しながら、楽しさと興奮を約束する魅惑的な外観を提供できます。
Consistency（一貫性）
A consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. The app incorporates features and behaviors in ways people expect.
一貫性のあるアプリは、システム提供のインターフェース要素、よく知られたアイコン、標準のテキストスタイル、統一された用語を使用して、使い慣れた標準とパラダイムを実装します。
アプリには、人々が期待する方法で機能と動作が組み込まれています。
Direct Manipulation（直接操作）
The direct manipulation of onscreen content engages people and facilitates understanding. Users experience direct manipulation when they rotate the device or use gestures to affect onscreen content. Through direct manipulation, they can see the immediate, visible results of their actions.
画面上のコンテンツを直接操作することは、人々を惹きつけ、理解を容易にします。
ユーザーは、デバイスを回転させたり、ジェスチャーを使用して画面上のコンテンツに影響を与えたりするときに、直接操作を体験します。
直接操作することで、彼らは自分の行動の即時の目に見える結果を見ることができます。
Feedback（フィードバック）
Feedback acknowledges actions and shows results to keep people informed. The built-in iOS apps provide perceptible feedback in response to every user action. Interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound help clarify the results of actions.
フィードバックはアクションを認め、結果を示して人々に情報を提供し続けます。
組み込みのiOSアプリは、すべてのユーザーアクションに応答して、認識可能なフィードバックを提供します。
インタラクティブな要素がタップされると簡単にハイライト表示され、進行状況インジケーターが長時間実行オペレーションのステータスを通知し、アニメーションとサウンドがアクションの結果を明確にします。
Metaphors（メタファー：比喩）
People learn more quickly when an app’s virtual objects and actions are metaphors for familiar experiences—whether rooted in the real or digital world. Metaphors work well in iOS because people physically interact with the screen. They move views out of the way to expose content beneath. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines.
アプリの仮想オブジェクトとアクションが、現実世界とデジタル世界のどちらに根付いているかにかかわらず、慣れ親しんだ体験の比喩である場合、人々はより迅速に学習します。
人々は画面を物理的に操作するので、メタファーはiOSでうまく機能します。
それらは、ビューを邪魔にならない場所に移動して、下のコンテンツを公開します。コンテンツをドラッグしてスワイプします。スイッチの切り替え、スライダーの移動、ピッカー値のスクロールを行います。またそれらは本や雑誌のページをめくります。
User Control（ユーザーコントロール）
Throughout iOS, people—not apps—are in control. An app can suggest a course of action or warn about dangerous consequences, but it’s usually a mistake for the app to take over the decision-making. The best apps find the correct balance between enabling users and avoiding unwanted outcomes. An app can make people feel like they’re in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations, even when they’re already underway.
iOS全体を通じて、アプリではなく人がコントロールします。
アプリは一連の行動を提案したり、危険な結果について警告したりできますが、通常、アプリが意思決定を引き継ぐのは誤りです。
最高のアプリは、ユーザーを有効にすることと望ましくない結果を回避することの間の正しいバランスを見つけます。
アプリは、インタラクティブな要素を使い慣れた予測可能な状態に保ち、破壊的なアクションを確認し、すでに進行中の場合でも操作を簡単にキャンセルできるようにすることで、ユーザーが自分がコントロールしているように感じることができます。
補足
下記の記事が、端的でわかりやすい説明をしてくれていました。
常にキャッチアップしよう！iOSヒューマンインターフェイスガイドライン - Mie Kwon - Medium
常に iOS のUIデザイン基本3原則 と 設計時の6原則 を忘れないようにしましょう。
