Skip to content
This repository has been archived by the owner on Jun 20, 2023. It is now read-only.

3.04. ユーザインタフェース設計

KeithYokoma edited this page May 21, 2013 · 32 revisions

この章では、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

目次

Application Structure

各々のアプリの構成は、そのコンテンツと利用の仕方に大きく依存した構造となります。
一方、一般的には、アプリの構成は、トップレベルのビューと、詳細を見たり、編集をしたりするビューに分けられます。アプリが大きく複雑になると、両者をつなぎこむカテゴリのビューが使われます。

Top Level Views
トップレベルのビューは、多くの場合、異なる種類のコンテンツを表示する。同じデータを異なる見せ方で表示する場合もあれば、根本的に異なる機能のファセットをトップレベルビューにまとめることもある。
Category Views
カテゴリビューでは、より深い階層へ入り、詳細を見たり、編集をしたりするための入り口を提供する。
Detail/Edit Views
このビューでは、ユーザがデータを編集したり、見たり、作成したりするためのインタフェースを提供する。

Top Level Views

ユーザが最初に目にする画面です。 アプリを使用して、ユーザが最もやりたいと思うことをこのトップレベルビューで実現するのが良いでしょう。

ほとんどのアプリでは、コンテンツの表示のためにトップレベルビューを使用します。ナビゲーションだけのビューではなく、コンテンツを主体にしたビューを作ると良いでしょう。

ナビゲーションのために、すべての画面において、ActionBar を表示すべきです。
ActionBar で一貫したナビゲーションを提供し、重要なアクションをすぐに実行できるようにしておきましょう。

  • ActionBar を用いて、アプリのアイコンと名前を表示する
  • トップレベルビューが複数のビューを持つ場合、それらのビューに対する制御が出来るアクションを、ActionBar に含めておく
  • アプリの中でコンテンツを作ることが出来る場合、コンテンツの作成ビューへのアクセスをトップレベルビューから出来るようにする
  • コンテンツが検索可能な場合、検索アクションを ActionBar に置いて、ナビゲーションの階層構造を横断することができるようにする

Category Views

Detail/Edit Views

ActionBar とナビゲーション

一貫したナビゲーションと、期待通りの振る舞いは、良い UX の基本です。
Android では、これらを実現するためのナビゲーションコンポーネントとして、ActionBar を始めとする様々なコンポーネントを用意しています。

Navigation with Back and Up

ActionBar

Fixed Tabs

Spinner

Drawer

マルチペインレイアウト

Fragments

SlidingPaneLayout

スワイプビュー

ViewPager

FixedTab ActionBar との併用

Contextual ActionBar

お知らせ

メトリクス

アイコン

GitHub Pagesへ移行しましたmixi-inc.github.ioへお願いします。

Clone this wiki locally