ホーム‎ > ‎Patterns‎ > ‎

App Structure

アプリケーションの構造


Androidプラットフォームにはニーズに合わせていろいろなアプリがあります。
  • 電卓、カメラのように1画面を中心として機能が完結しているアプリ
  • 電話のような深いナビゲーションのない異なるアクティビティの切り替えが主な目的であるアプリ
  • GmailやPlayストアのように深いナビゲーションと広いビューの集まりを集約したアプリ
アプリの構造はユーザに見せたい内容・コンテンツ・タスクに大きく依存します。

一般的な構造

典型的なAndroidアプリはトップレベルビューと詳細/編集ビューから構成されています。ナビゲーション階層が深く複雑な場合は、カテゴリビューがトップレベルと詳細ビューの間を埋めてデータを掘り下げます
トップレベルビュー
アプリのトップレベルには一般的に、アプリがサポートする様々なビューが表示されます。これらのビューは表現の違いによりデータの見え方を変化させたり、アプリの新たな機能の一面を示します。



カテゴリビュー
カテゴリビューはデータの深い部分まで掘り下げます。



詳細/編集ビュー
詳細、編集ビューではデータを使用・作成します。

トップレベル

スタート画面のレイアウトには十分注意を払いましょう。これはアプリを起動した後に表示されるので、初めて触る人も何度も起動した人も同じように満足してもらう必要があります。

「ユーザが私のアプリに一番求めているものはなんだろう?」と自分自身に問いかけ、それに応じてスタート画面を構築してください。

コンテンツを前面に置く
多くのアプリはコンテンツの表示に注目します。ナビゲーションのみの画面をさけてコンテンツをスタート画面の中核とし、瞬間的にアプリの長所を見せるようにしましょう。データの見せ方や画面サイズにふさわしいレイアウトを選んでください。
Play Musicはリッチなコンテンツ表示を通して、アーティスト、アルバム、プレイリスト間のナビゲーションを可能にします。また、あなたへのおすすめやユーザの関心のあるコンテンツのプロモーションで体験を豊かにします。検索はアクションバーから簡単に利用できます。
ナビゲーションとアクションのためにアクションバーをセットアップする
一貫した操作性を提供したり重要なアクションを表示するために、アプリの全ての画面にアクションバーを表示する必要があります。

トップレベルでは、アクションバーに対する以下の特別な注意事項を適用してください。
  • アプリアイコンやタイトルを表示するためにアクションバーを使用してください。
  • トップレベルが複数のビューで構成されるか、ユーザアカウントの切り替えによりデータを変えるのが主要な使用例である場合、アクションバーにビューコントロールを追加し、必ず簡単にナビゲーションができるようにしてください。
  • アプリでコンテンツを作成できる場合は、トップレベルから直接そのコンテンツにアクセスできるようにしてください。
  • コンテンツが検索可能なら、検索アクションをアクションバーに含めて、ナビゲーションの階層をショートカットできるようにしてください。
カレンダーは生産性に関連したアプリなので、高密度のデータを簡単に認識できるような表示が効果的です。ここでのナビゲーションは日、週、月、予定リストの表示切り替えをサポートします。

ビューコントロールを用いたトップレベル切り替え

トップレベルでは、主な機能領域にユーザを導入することで、アプリの機能を通知します。多くの場合、トップレベルでは、複数のビューから構成され、ユーザが効率的にそれらの間を移動できることを確認する必要があります。Androidは、このタスクのためのいくつかのビューコントロールをサポートしています。最高のアプリのナビゲーションニーズに最適なコントロールを使用します。
固定タブ
固定されたタブが同時にトップレベルのビューを表示し、それらの間で探索し切り替えやすくなります。タブは常に画面上に表示され、スクロール可能なタブのように邪魔にならない所へ移動させることができません。固定されたタブは常に、ユーザがコンテンツ領域の左または右にスワイプでビュー間をナビゲートできるようにする必要があります。

以下の場合にタブを使用してください。
  • ユーザが頻繁にビューを切り替えることを期待している。
  • 最大3つのトップレベルのビューを持っている。
  • ユーザが交互に切り替わるビューを強く意識してほしい。
Holo Dark と Lightのデフォルトの固定タブ表示
スピナー
スピナーは、ユーザがあなたのアプリのビューを切り替えるためのドロップダウンメニューです。

以下の場合、メインアクションバーにスピナーを使用してください。
     
  • 専用のタブバーを実装せずに、垂直スクリーンの実際の領域を確保しておきたい
  • ユーザが同じデータのセット(日、週、または月単位で見てカレンダーイベントなど)や同じデータの種類(二つの異なるアカウントのコンテンツなど)をビュー間で切り替える。
 
カレンダーアプリのアクションバースピナー
ナビゲーションドロワー
ナビゲーションドロワーは、ユーザがアプリのビューを切り替えるためのスライドアウトメニューです。ナビゲーションドロワーには多数のアイテムを保持されており、アプリのどこへでもアクセスすることができます。また、アプリのトップレベルのビューを表示するだけでなく、低レベルの画面へもナビゲーションを提供することができます。このため、構造が複雑なアプリケーションに特に適しています。

以下の場合、ナビゲーションドロワーを使ってください。
  • 専用のタブバーを実装せずに、垂直スクリーンの実際の領域を確保しておきたい。
  • トップレベルのビュー数が多い。
  • より低いレベルの画面に直接アクセスしたい。
  • お互いに直接の関係を持たないビューに素早くナビゲーションを提供したい。
  • 特に深いナビゲーションの分岐をもっている。
Keepアプリのナビゲーションドロワー

混ぜ合わせない
アプリケーションに最適なトップレベルのナビゲーションを選択した後にパターンを混ぜ合わせないでください。トップレベルの切り替え用のタブを使用すると決めたなら、ナビゲーションの枝が深い場合でもドロワーを追加しないでください。このケースでは、ナビゲーションドロワーは、タブの情報を単純に複製するだけの働きしかしないので、ユーザを混乱させてしまいます。

カテゴリ

一般にデータの扱いを重視したアプリの目的は、構造化したカテゴリを通じてデータを詳細なレベルへとナビゲーションし、閲覧・管理できるようにすることです。アプリの階層を浅く保つことでナビゲーションの手間を最小限に抑えることができます。

トップレベルから詳細ビューまで掘り下げるナビゲーションのステップ数が、アプリの構造によって決まっていたとしても、面倒なナビゲーションを減らす方法がいくつかあります。

カテゴリの選択やデータ表示の統合にタブを使用する
一般的なカテゴリの表示またはカテゴリの数が少ない場合には、タブの使用が効果的です。階層レベルが除去され、ユーザの注目をデータに集めるという利点があります。データがリッチなカテゴリの横断的なナビゲーションは、明示的なナビゲーションステップというよりも、普通のブラウジング体験に似ています。
カテゴリが一般的、予測可能あるいはカテゴリ間の関係が強い場合、タブのスクロールを使用してください(このタブは全てのアイテムが同時に表示されるわけではありません)。ナビゲーションをシンプルにするために、スクロールのタブを管理できるレベルに抑えてください。経験則:5-7個のタブを越えてはいけない。
タブのカテゴリが独立しているなら、すべてのカテゴリが同時に表示されるように固定されたタブが適切です。
GooglePlayアプリは、選択したカテゴリとコンテンツを同時に見せるためにタブを使用します。カテゴリ間を移動するにはコンテンツを左右にスワイプします。
Peopleアプリでは、独立した機能の切り替えに固定タブを使います。
更なる詳細はTabsのデザインガイドを見てください。

階層を飛び越える
ユーザが目的に早く到達できるようにショートカットを活用します。リストやグリッドビューからデータ項目をアクションのトップレベルで呼び出せるようにするために、ドロップダウンやスプリットリストアイテムを利用して主なアクションを直接リストビューに表示してください。これによりユーザは階層を下らなくても、データに対する操作を直接呼び出すことができます。


Musicアプリではユーザがカテゴリ表示(アルバム)からデータ項目(曲)を直接操作できるため、曲の詳細ビューを開く必要がありません。

複数のデータ項目に作用する
カテゴリビューは、コンテンツの詳細を表示するときに役立ちますが、多くの場合、データを取捨選択するときにも上手く働きます。

例えば詳細ビューでデータの削除が可能であるなら、カテゴリビューで多数のデータをまとめて削除できるようにするべきです。詳細ビューのどのアクションが項目の取捨選択に適応可能か分析する必要があります。その後、カテゴリビュー内の項目にそれらのアクションを適用するために複数選択を行います。

更なる詳細は、デザインガイドのSelectを参照してください。

詳細

詳細ビューの目的はデータの表示や動作をさせることです。詳細ビューのレイアウトはデータの型に依存するので、アプリ間で大きく異なります。項目のコレクションに適用可能な詳細ビュー アクションを分析してください。

レイアウト
ユーザが詳細ビューで行う操作を考慮し、それに応じてレイアウトをアレンジします。
Peopleアプリの詳細ビューの目的はコミュニケーションのオプションを表示することです。リストビューにより、効率的な情報のピックアップ、電話番号、Eメールアドレスやその他情報項目への素早いアクセスが可能です。スプリットアイテムは、1つのコンパクトな行項目に通話やメッセージの送信を組み合わせるために使用されます。

詳細ビューの間で効果的なナビゲーションを作る
ユーザが、シーケンス内の複数のアイテムを見てみたいと思う場合、詳細ビューの項目間を移動することができます。このためにはスワイプビューまたは他のテクニックを使用してください。(以下のサムネイルビューを参照)

Gmailは詳細ビュー間のナビゲーションにスワイプビューを使用します。

左右にページを移動しスワイプジェスチャーをサポートするだけでなく、Magazineはユーザが素早くに特定のページにジャンプすることができるサムネイルビューコントロールを提供します。

更なる詳細は、デザインガイドのSwipe Viewsを参照してください。

チェックリスト

  • 有益なコンテンツが表示されるスタート画面を構築する。
  • アクションバーを使用して、一貫性のあるナビゲーションを提供する。
  • 横断的なナビゲーションやショートカットを使用してアプリの階層をシンプルにする。
  • ユーザが一度にデータを操作できるように、複数選択を実装する。
  • 詳細アイテムでスワイプビューにより素早い操作をさせる。



原文はこちら > Application Structure

Except as noted, this content is licensed under Creative Commons Attribution 2.5. For details and restrictions, see the Content License.

Comments