15
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

iOSのHuman Interface Guidelinesを読み直してみる💨

Last updated at Posted at 2018-03-26

動機

iOS, Swiftがすきだけど、あれそういえばiOSのガイドライン読んでないやん、、、と思っていたもののちゃんと読むことなく数ヶ月経っていました。
で、最近こんなツイートを見つけました⬇️

スクリーンショット 2018-03-26 11.35.44.png
tweet

このツイートに触発され
今更ですが、iOSのデザインガイドライン(Themesだけですが)をちゃんと読んでみました。
翻訳したものを自分なりに備忘録的にまとめたものです。

ではでは以下本題です。

本家:Human Interface Guidelines iOS

iOSデザインにおける基本3原則

iOSデザインの特徴って何?、といわれると以下の3つです😏

Clarity:明瞭性

  • 見やすいテキストサイズである
  • アイコンは正確でわかりやすいものである
  • 装飾は不自然でなく(無駄にごちゃごちゃさせない)適切なものである
  • 機能性をより高めるにはデザインが大事である
  • 空白、色、フォント、グラフィックス、インターフェース要素(ボタンとかテキストボックスなど)は、重要なコンテンツを不自然なく強調し、ユーザーにインタラクティブ性があることを伝えられる

👉わかりやすさを追求し、無駄な装飾はしないようにしよう!

Deference:(機能性.コンテンツへの)尊重

  • デザインにはその内容を分かりやすく表示し、ユーザとやり取りする働きがあるが、コンテンツよりそれ自身の方が目立つようであってはいけない。機能を重視し内容を尊重することが大切である
  • ベゼル(枠縁)、グラデーション、およびドロップシャドウの使用を必要最小限に抑えたインターフェイスであり、コンテンツを邪魔してはいけない

👉あくまで主役は機能やコンテンツであることを忘れずに!

Depth:奥行き

  • 重なりの表現や本物らしい動きを加えることで、要素の階層を認識させたり、活き活きとした動きを伝えたり、コンテンツへの理解がしやすくなる
  • 触れたり、見つけやすくなることで、ユーザーの体験はより良いものとなり、文脈を見失うことなく、機能や次のコンテンツにアクセスすることができる
  • トランジションはユーザーが深層性を理解する助けとなる

👉機能やコンテンツの文脈に適した階層構造を導入して、
ユーザーがアプリを使いやすくしよう!

アプリのアイデンティティを高めるための6原則

上記の主要3原則に加えて。iOSのデザインガイドラインでは、アプリのインパクトやリーチを最大化するために気をつけるべき、以下の6つの原則を定義しています😏

Aesthetic Integrity:美しさへのこだわり

  • アプリの見た目と挙動は、機能とうまく整合性がとれているべきだ。機能にフォーカスを当てるべきアプリでは、その機能に集中できるようなUI(過度な装飾や行き過ぎたアニメーションは控える)にすべきであり、一方でゲームのようなアプリでは、楽しくてわくわくするような、心を掴む見た目にすべきである

👉機能・コンテンツとデザインは独立したものではないので、それらが一致したイメージを提供しているか確認しよう!

Consistency:一貫性

  • 一貫したアプリとは、標準のインターフェイス要素、見慣れたアイコン、標準的なテキストスタイル、統一された単語を使用し、違和感のない規則やパラダイムを構築するものである。アプリはユーザーが想定するような形式で機能や挙動を提供すべきである

👉一貫性を持たせてユーザーに無駄な意志力を使わせないように!

Direct Manipulation:直接操作性

  • 画面上のコンテンツを直接操作することで、ユーザーの エンゲージメントが高まり、何が起きているかを理解しやすくなる。直接操作を行うことで、ユーザーは自分が取ったアクションの結果をすぐにはっきりと理解することができるようになる。例えば、要素の並べ替えでは直接指でドラッグして移動できるようにすべきだ。

👉コンテンツを直接操作できるようにしてユーザーが自然なアクションを行えるようにしよう!

Feedback:フィードバック

  • フィードバックはユーザーが取ったアクションを認識し、アクションによって起こった結果を伝える役割がある。インタラクティブなUIはタップされたときにすぐにハイライト表示され、時間のかかる操作のステータスはプログレスバーが表示される。アニメーションやサウンドはアクションの結果をはっきりと示すのに役立つ。

👉アクションに対してはフィードバックを!フィードバックの種類も考えよう!

Metaphors:比喩

  • アプリ内のオブジェクトやアクションに対してユーザーが経験したことのある比喩(メタファー)を用いることで、学習の敷居を下げることができる。iOS上ではメタファーがうまく機能してる。例えば、画面からはみ出た要素があると、そこはスワイプして移動できるスクロール(巻物)と認知することができます。ボタンやスイッチ、スライダーは現実にあるオブジェクトを模しているので、一目見てそれがどのように作用するかを理解することができます。

👉日常のアクション、ものを使ってメタファー効果を利用しよう!

User Control:ユーザーコントロール

  • iOS全体では、アプリではなくユーザーがコントロールする側である。一連のアクションを提案したり、危険な結果について警告したりするアプリもあるが、通常、意思決定をアプリが行うのは間違いである。ユーザーのコントロール範囲を増やすことと、望まない結果を避けることのちょうどよいバランスを最高のアプリは見出している。インタラクティブ要素がよく見かけたり想定できたりするもので、(コンテンツが)削除されたことが確認でき、(処理中だとしても)操作をキャンセルするのが簡単であることで、ユーザーは自分たちがそのアプリをコントロールしている感覚を感じられる。

👉ユーザーの意思決定を尊重しよう!

おわりに

抽象的なものが多く、これを見たからといってすぐにデザインが固まるというものではないですが、
iOSが求めるエッセンスを詰め込んだシンプルかつ独自性のあるガイドラインだと思いました!
ではでは(・◇・)/~~~

15
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?