3.04. ユーザインタフェース設計
この章では、Android における UI の設計について解説します。
参考：Application Structure
参考：Navigation with Back and Up | Android Developers
参考：Action Bar | Android Developers
参考：Navigation Drawer | Android Developers
参考：Multi-pane Layouts | Android Developers
参考：Swipe Views | Android Developers
参考：Selection | Android Developers
参考：Confirming & Acknowledging
参考：Notifications | Android Developers
参考：Metrics and Grids | Android Developers
参考：Iconography | Android Developers
- [ActionBar とナビゲーション](#ActionBar とナビゲーション)
- [TopLevel Views](#TopLevel Views)
- [Category Views](#Category Views)
- [Detail/Edit Views](#Detail/Edit Views)
- [Navigation with Back and Up](#Navigation with Back and Up)
- ActionBar
- マルチペインレイアウト
- [Contextual ActionBar](#Contextual ActionBar)
動画：Structure in Android App Design
一貫したナビゲーションと、期待通りの振る舞いは、良い UX の基本です。
Android では、これらを実現するためのナビゲーションコンポーネントとして、ActionBar を始めとする様々なコンポーネントを用意しています。
また、各々のアプリの構成は、そのコンテンツと利用の仕方に大きく依存した構造となります。
一方、一般的には、アプリの構成は、トップレベルのビューと、詳細を見たり、編集をしたりするビューに分けられます。アプリが大きく複雑になると、両者をつなぎこむカテゴリのビューが使われます。
- Top Level Views
- トップレベルのビューは、多くの場合、異なる種類のコンテンツを表示する。同じデータを異なる見せ方で表示する場合もあれば、根本的に異なる機能のファセットをトップレベルビューにまとめることもある。
- Category Views
- カテゴリビューでは、より深い階層へ入り、詳細を見たり、編集をしたりするための入り口を提供する。
- Detail/Edit Views
- このビューでは、ユーザがデータを編集したり、見たり、作成したりするためのインタフェースを提供する。
ユーザが最初に目にする画面です。 アプリを使用して、ユーザが最もやりたいと思うことをこのトップレベルビューで実現するのが良いでしょう。
ほとんどのアプリでは、コンテンツの表示のためにトップレベルビューを使用します。ナビゲーションだけのビューではなく、コンテンツを主体にしたビューを作ると良いでしょう。
ナビゲーションのために、すべての画面において、ActionBar を表示すべきです。
ActionBar で一貫したナビゲーションを提供し、重要なアクションをすぐに実行できるようにしておきましょう。
- ActionBar を用いて、アプリのアイコンと名前を表示する
- トップレベルビューが複数のビューを持つ場合、それらのビューに対する制御が出来るアクションを、ActionBar に含めておく
- アプリの中でコンテンツを作ることが出来る場合、コンテンツの作成ビューへのアクセスをトップレベルビューから出来るようにする
- コンテンツが検索可能な場合、検索アクションを ActionBar に置いて、ナビゲーションの階層構造を横断することができるようにする
トップレベルビューに様々な異なるコンテンツを表示する場合、下記のようなコンポーネントを用いて、それぞれのコンテンツへとスイッチできるようにします。
トップレベルビューに、並列でコンテンツを表示する場合に使います。
通常、並列に並ぶコンテンツが 3 つまでの場合に用いられます。
これ以上コンテンツが有る場合は、Fixed Tabs は不向きです。
タブは常に表示されているので、いつでもタブをクリックして切り替えることができます。
タブのクリック以外にも、横スワイプでのタブ切り替えもサポートしておくと良いでしょう。
この場合、ViewPager を用いて、ViewPager の現在位置と Fixed Tabs の選択を同期する必要があります。
ユーザが、並列に並んだコンテンツを頻繁に切り替える場合に、Fixed Tabs が最も適しています。
Fixed Tabs と同じように、トップレベルビューの切り替えのための、ドロップダウンリストです。
Fixed Tabs の場合、Fixed Tabs 専用の領域を必要とするため、縦方向に広く場所を確保したい場合に不向きです。
その代わりに、Spinner を用いることで、より広く縦方向の場所を確保することができます。
同じデータセットに対して、複数の異なったビューに切り替える目的で Spinner を用いることが最適です。
画面左側に隠れているメニューの表示で、ActionBar のアプリのアイコンをタップすることで表示できるものです。
トップレベルビューの上の一部に覆いかぶさる形で表示されるため、非常に多くの項目を入れることができます。
トップレベルビュー以外にも、この Navigation Drawers を適用することができます。
複雑な構造を持つアプリによく用いられ、特に、トップレベルビューとして扱うものがたくさんある場合や、直接下位のビューへ素早く遷移させたい場合などに最適です。
トップレベルビューのナビゲーション (Fixed Tabs、Spinner、Navigation Drawers) は、複数組み合わせてはいけません。
カテゴリビューを間に挟む事によって、多種多様な詳細ビューへのナビゲーションを実現します。
カテゴリごとにタブを用意する方法です。
カテゴリが、よく知らたものであれば、スクロール可能なタブを用いることができます。
スクロール可能なタブは、すべてのタブが画面上に表示されるわけではなく、常に現在位置とその両隣が表示されます。
これにより、多くのタブを実現できますが、あまりに多すぎると逆効果です。5〜7 個以上のタブは推奨されません。
各々のカテゴリが、あまり関連性がなく並列に並ぶ場合は、Fixed Tabs が最適です。
ListView や GridView で表示される各項目に対してのアクションを、ドロップダウンメニューなどでショートカット的に実行できるようにするものです。
これによって、階層構造を辿って詳細ビューへナビゲートすることなく、直接アクションを実行できるようになります。
詳細ビューにおいて実行可能なアクションは、カテゴリビュー上で、複数項目に対して同じアクションを実行できるようにしておくと良いでしょう。
たとえば、詳細ビューでデータの削除が出来るのであれば、カテゴリビュー上で、複数のデータに対して削除が実行できるようにする、ということです。