モバイルアプリのUIパターンを手軽に参照できるリファレンス。主要なプラットフォームで動くモバイルアプリの画面例を400点以上使いながら、ユーザーインタフェースの定番パターンをグラフィカルに解説します。本書で紹介する68個の基本パターンと5個のアンチパターンが、使いやすいモバイルアプリをデザインするうえでクリアしなければならない設計上の課題を解決してくれます。
掲載UIパターン:ナビゲーション、フォーム、テーブルとリスト、検索、並び替え、フィルター、ツール、グラフ、誘導、フィードバック、アフォーダンス、ヘルプ、アンチパターン
本書は、モバイルアプリ（スマートフォン上で動くアプリ）の UI デザインの定石をパターンとして紹介しているものになります。いいアプリを作っても、UI や見た目が悪いとそれだけで価値が下がってしまいます。アプリにとって本当に良い UI デザインを導ける人は、まだまだ少数だと思います。
本書は、そんな良いデザインというのはどういうものなのか、使いやすい UI というのはどういうものなのかを名前をつけてパターン化し紹介しています。内容はとてもグラフィカルなので、かるく読み流すことも出来ますし、中身を熟読してさらに自分流のパターンを産み出していくのも良いと思います。
ますます熱くなってくるであろうモバイルアプリ開発の現場で、デザインができなくて泣いている人にオススメの一冊です。スマートフォンアプリの開発者は、手元に置いておくと便利です。
おぼえがき
本書で紹介されているパターンの参考イメージ
Mobile Design Pattern Gallery:UI Patterns for iOS, Android and More
Mobile Design Pattern Gallery’s photostream - flickr
ナビゲーション
- Springboard（スプリングボード）
起動直後に表示されるメニューが、アプリ利用のきっかけになる。パーソナライズによって表示項目を変えてもよい。各メニュー項目が同じ重要度の場合はグリッドレイアウトを、そうでない場合は変則的なレイアウトを検討する。
- List Menu（リストメニュー）
起動直後にメニューが並ぶ点は、スプリングボードと同じだが、メニュー項目の名前が長い場合や、サブタイトル等が必要な場合に利用する。
- Tabs（タブ）
タブは標準的な Web サイトでのナビゲーションパターンに基づいているため、ユーザにとって馴染みが深い。
- Gallery（ギャラリー）
個々のコンテンツを通じてナビゲーションを行う。コンテンツが頻繁に変わるような場合に利用すると良い。
- Dashboard（ダッシュボード）
それぞれのデータや指標の要約が一目でわかるため、財務管理、データ分析、マーケティングアプリなどで使える。コンテンツの詰め込みすぎに注意する。
- Metaphor（メタファー）
最初に表示される画面が何かのメタファーになっているのが特徴で、ゲームなどで使える。また、ユーザのメモをカタログ化したようなアプリにも応用しやすい。分かりにくいメタファーを使ってしまうと使いにくい UI になってしまうため注意。
補助的なナビゲーション
メニューとしては使いづらいが、一つのコンテンツの補助メニューとして利用しやすいパターン。
- Carousel（カルーセル）
コンテンツをよく見せたい場合に使える。コンテンツの数が多くなった場合（8個以上）は、リスト表示を検討する。
- Expanding List（伸縮リスト）, アコーディオンメニュー
徐々に詳細なオプション項目を表示させたい場合に適している
テーブルとリスト
- Basic Table（基本的なテーブル）
行間に細い線を表示したりすると見やすさが向上する。縦の罫線や色の濃い罫線は使わない。文字列は左寄せ、数値は右寄せ。
検索、並び替え、フィルター
- Explicit Search（明示的な検索）
入力内容をクリアするためのボタンを入力フィールド内に用意する。検索をキャンセルできるボタンを用意する。検索中であることがわかるフィードバックを用意する。
- Dynamic Search（動的な検索）
アドレス帳、ユーザのメディアライブラリなどの有限なデータ集合に対して、入力ごとに動的に検索を行うパターンは有効になる。
- Saved and Recent Searches（検索結果の履歴）
成功を収めたモバイルインターフェースはいずれも「ユーザの活動を尊重する」というユーザビリティ原則を守っている。
ツール
- Call to Action Button（アクションボタン）
画面内でユーザに行わせたいアクションが1種類だけの場合、目立つボタンを画面内に用意するとよい。
- Bulk Action（操作の一括実行）
画面上のコンテンツを一括して実行できるモードを提供する場合、編集モードというのを用意するとよい。編集モードから復帰するための手段も明確に提供する。
誘導
- Tip（ツールチップ）
ツールチップは対象の機能に隣接して表示されるようにする。
- Tour（ツアー）
アプリが持つ重要な機能をユーザに明らかにするために使う。ユーザにとってのゴールは何かという観点で設計する。
- Transparency（透過表示）
画面上のコンテンツに重なった半透明のレイヤーで使用方法を表示する。ユーザが操作を始めたら、レイヤーを非表示にする。
フィードバックとアフォーダンス
- Error Messages（エラーメッセージ）
モーダルダイアログとして表示するよりも現在内の画面内にメッセージを配置する方が望ましい。
- Tap（タップ）
立体表現や影をデザインとして取り入れることで、それがタップ可能であることを示せる。
- Flick（フリック）
表示可能なコンテンツが他にもあるということを示す方法として、フリック可能なことを認識させるという方法もある。
アンチパターン
- Idiot Box（作業を妨げる愚行）
確認ダイアログを表示するのはもとに戻せない操作をする場合だけにする。