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

iOS HIG 次へ前へ iOSアプリケーションの解剖 メモ

基本的なUI要素の名前、役割、能力を知っていれば設計時に役立つよ

UIKitの要素の4分類

バー

  • コンテキスト 全体における画面の位置付けを表す

  • コントロール 別の画面に遷移、もしくはアクションを起動するためのもの

コンテンツビュー

アプリの処理対象であるコンテンツの収容

コントロール

アクションの起動、あるいは情報の表示

一時ビュー

必要に応じて短時間だけ出現し、重要な情報を表示したり追加の選択肢や機能を提供する

ViewController

一群のビューやその階層を管理するのに使う。 書くビューの表示を調整し、ユーザーが操作を実行する機能を実装し、画面間の遷移を管理する。

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

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