読者です 読者をやめる 読者になる 読者になる

iOS HIG iOS向けの設計 メモ

iOS HIG

ソース

https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html#//apple_ref/doc/uid/TP40006556-CH66-SW1

iOSと他のプラットフォームを区別する3つのテーマ

  • 控えめであること
  • 明瞭であること
  • 奥行きを与えること

メモ

  • UI自身は目立たさないこと
  • 文字、アイコンは機能を明確に表すこと
  • 視覚的重なりや本物らしい動きがあると、楽しさ、分かりやすさが向上する

これまでのアプリを設計し直す時

  • UIとアプリの中心となる機能を見直し、関連性を確認する
  • iOSのテーマに基づきUI設計や使いがってを検討する
  • UIが様々なデバイスやモードに対応するデザインであることを確認し、ユーザーができるだけ多くのコンテキストで楽しめるようにする

機能を重視し、内容を尊重する設計を生み出す考え方

画面全体を有効に活用する

  • weather Appは全画面を利用した画像である地域における天気を一目で表す
  • 開いた領域に1時間ごとのデータを配置する

質感や本物らしさを考え直す

以下を多用すると「重い」UI要素になり、肝心の中身が見劣りしかねない。

  • ベゼル
  • グラデーション
  • ドロップシャドウ

内容に着目し、UIは補助的要素と捉える

ブラーを使って奥に何があるか見えるようにする

  • ブラーを使うと作業の流れを示す。
    • より詳しい内容があることを示す(ツール画面)
    • 一時的な要素であることを明示する

明瞭性を与える

最も重要な情報や機能が明確に分かり、容易に操作するいくつかの手法を以下に示す

何もない空間を活かす

うまく活かすと、重要な情報や機能に目がいき理解しやすくなる。 また、落ち着いた雰囲気を作り集中しやすくなる

簡潔な色使いにする

キーとなる色で重要箇所を強調し、操作可能な場所であることをそれとなく示す。

システムフォントを使って読みやすさを確保する

  • iOSのシステムフォントは文字感や行間を自動で調整する。
  • ダイナミックタイプ(設定.appでフォントサイズを設定するとアプリに自動的に反映される仕組み)に準拠して、ユーザーがテキストの大きさを変更した時に対応できるようにしてください

境界なしのボタンを活用する

  • デフォルトではボタンは全て境界はありません。 境界なしボタンはコンテキストや色、操作を促すようなラベル(タイトル)により対話型要素であることを示すようになっている。 状況によっては細い境界線や単色の背景を使って際立たせることもある

奥行きを利用して情報を伝える

iOSでは情報をここのレイヤに分けて表示し、階層間駅や位置関係を示すことがある。 これにより画面上のオブジェクト間の関係が分かりやすくなる。

  • ホーム画面のフォルダはフォルダの中身を画面上の部分から分離している
  • リマインダーはリストを階層表示する
  • カレンダーは奥行きを利用して、年・月・日単位でうまく遷移できるようになっている