Androidデザイン アプリの構造

2012/1/22 14238hit

アプリの構造

アプリは様々な需要により様々な種類があります。

・電卓やカメラのような1画面からなる1つのActivityを中心として作られるアプリ
・電話のような主要な機能のおいて深いナビゲーションなしで異なるActivity間を切り替えていくアプリ
・GmailやMarketのような深いナビゲーションを伴う幅広いビューの集まりを集約したアプリ
ユーザーへコンテンツとタスクをどのように見せるかにアプリの構造は大いに依存します。

標準的構造

典型的なAndroidアプリはトップレベルと詳細/編集ビューからなります。
もし、ナビゲーション階層が深く複雑ならばカテゴリービューがトップレベルとディテールビュー間をつなぎます。

トップレベルビュー

アプリのトップレベルは一般的にあなたのアプリがサポートする異なる複数のビューを含みます。
複数のビューは同じデータの異なる表現を演出したり、アプリの全く異なる機能の一面に触れさせます。

カテゴリービュー

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

詳細/編集ビュー

詳細、編集ビューはデータを堪能したり作ったりします。

トップレベル

スタート画面のレイアウトは特別に注目される必要があります。
これは人々がアプリを開始した後、最初に見る画面です。
そのため、初めて触る人にも、何度も起動した人にもどちらも同じように価値がある経験でなければいけません
自分自身に聞いて見てください。
典型的なユーザーが私のアプリで一番やりたそうなことは何だろう?
それによって、スタートスクリーンで提供する経験を構築してください。

コンテンツを全面に置く

多くのアプリはコンテンツの表示にフォーカスします。
ナビゲーションのみの画面をさけてコンテントをスタートスクリーンの目玉とし瞬間的にアプリの見所を見せてください。
視覚的に惹かれて、データの種類や画面サイズにふさわしいレイアウトを選んでください。

Marketのスタートスクリーンは主にアプリ、音楽、書籍、ゲーム向けのストアへ導かせます。
ユーザーが関心を持つおすすめやプロモーションのコンテンツを見せる事によってリッチになっています。
アクションバーですぐに検索可能です。

ナビゲーション操作のためのアクションバーをセットアップする

一貫した操作性を提供し、重要なアクションを見せるために、アプリの全画面でアクションバーを表示する必要があります。
トップレベルではアクションバーに対して特別に考えべき事があります。
・アプリアイコンやタイトルを表示するのに使います
・トップレベルが複数のビューからなるか、異なるユーザーアカウントによりデータを変えるのが主要な使用例であるならば、ビューコントロールをアクションバーに加えてナビゲートが簡単になるようにしてください。。
アプリでコンテンツを作成できるのであれば、トップレベルから直接そのコンテントにアクセスできるようにしてください。
コンテンツが検索可能ならナビゲーションの階層をショートカットできるように検索アクションをアクションバーに含めてください。

Emailは比較的生産的なので、よりデータ密度が高く簡単に取得するためのリストは効果的です。
ナビゲーションはアカウントと最近のラベルの間で切り替えをサポートします。
新しいメッセージを作ったり検索するためのアイコンが下のスピリットアクションバーで見られます。

アプリのためにアイデンティティを作る

アプリにアイデンティティを持たせることはアクションバー以上に重要です。
アプリはデータのアレンジと操作方法によってアイデンティティを伝えます。
特にメディアリッチアプリケーションは退屈で単調なリストを超えるユニークなレイアウトのショーケースを作ってみてください。

3D回転台はカバーアートを飾り立て、音楽アプリのための独特なアイデンティティを確立します。
デフォルトのリーセントビューでは最近聞いていた音楽へのフォーカスを保ちます。

カテゴリー

一般に、データを重視したアプリの目的は組織的なカテゴリーを介して、データを閲覧・管理できる、詳細レベルにナビゲートすることです。
そこでデータを見たり管理したりできます。
アプリを浅く保ち、意識的なナビゲーション操作を最小にしてください。
一般にトップレベルから詳細ビューまでの垂直ナビゲーションのステップ数がアプリコンテントの構造によって記されていたとしても、
面倒なナビゲーションをショートカットする方法がいくつかあります。

タブを使ってカテゴリーを選択しデータを表示する

カテゴリーが一般的かカテゴリーの数が少なければ、これは良い方法かもしれません。
階層が取り除かれ、ユーザーによる一番の関心がデータに残る事がその利点です。
データリッチなカテゴリー間を横へナビゲートするのは、明示的なナビゲーションステップというよりも普段のブラウジング体験に似ています。

カテゴリーが一般的か、予測可能か、互いに密接に関係しているのであれば(すべてのアイテムが同時に表示される訳ではない)スクロールタブを使ってください。
操作の苦労を最小にするために、スクロールするタブの数を管理できるレベルに押さえてください。
経験則:
5〜7を超えない

マーケットはタブを使いカテゴリーの選択とコンテンツを同時に見せます。
ユーザーは左右のスワイプでコンテンツのカテゴリー間をナビゲート出来ます。

タブのカテゴリーが密接に関連しないならFixedタブを薦めます。それによりすべてのカテゴリーが同時に見えます。

YouTubeはFixedタブを使い、複数のあまり関係のない機能の領域を切り替えます


階層を飛び越えさせる

人々がより早く目的を達成できるショートカットを利用してください。
リストやグリッドビュー内からデータへのトップレベルのアクションを出来るように、ドロップダウンやスプリットリストアイテムを利用して主なアクションを直接リストビューに表示してください
これにより、階層深くまでナビゲートしなくてもデータへのアクションを実施できます。

Musicはユーザーがカテゴリー表示(アルバム)内からデータ項目(歌)を操作できます。
それにより歌の詳細ビューまで操作する必要がなくなります。

複数のデータ項目に作用する

概してカテゴリービューはコンテントの詳細ビューへガイドするためのものですが、しばしば複数のデータへのアクションに使えることも記憶に留めておいてください。
例えば、詳細ビューでアイテムを削除する事を許すなら、カテゴリービューで複数のアイテムを削除できるようにする必要があります。
どの詳細ビューでのアクションがアイテムのコレクションへ適用できるか分析してください。
そして、カテゴリービューでそれらの複数のアイテムへアクションを適用できるようにマルチ選択を使ってください。

詳細

詳細ビューはデータを見て操作させます。
詳細ビューのレイアウトは表示するデータの形に依存します。そのためアプリによってとても大きく異なります。

レイアウト

詳細ビューで行う操作を考慮してレイアウトを作ります。
興味深いコンテンツのために、消灯モードを利用して、フルスクリーンのコンテンツを観る事へ集中させてください。



Google Booksの詳細ビューは本物の本を読む感覚を追体験するのが全てです。
ページフリップアニメーションがその感じを強化します。
没頭できるようにアプリは消灯モードになり、システムUIの表示を隠します。
ピープルアプリの詳細ビューはコミュニケーションオプションのためにあります。
リストビューは電話番号、電子メール、アドレスやその他情報を素早く閲覧しアクセスさせます。
スプリットアイテムは、呼び出しとメッセージングをコンパクトな一行の項目にまとめるのに使われます。

詳細ビューの間で優秀な操作性を作る

ユーザーが順番に複数のアイテムを見ると考えられるならば詳細ビューの内部で異なるアイテムへナビゲート出来るようにしてください。
これを実現するためにスワイプビューやその他テクニック(フィルムストリップなど)を使ってください。


Gmailは詳細ビュー間のナビゲートにスワイプビューを使います。


イメージを通して左右に移動するためにスワイプジェスチャーをサポートするのに加えて、ギャラリーは素早く特定の画像へジャンプできるフィルムストリップコントロールを提供します。

チェックリスト

・スタートスクリーンで有益なコンテンツを表示する方法を探す
・アクションバーを使って一貫した操作性を提供する
・水平操作やショートカットを使って浅い階層を維持する
・複数選択を使用してユーザーが複数のデータに操作できるようにしてください。
・スワイプビューを使って詳細アイテム間を素早くナビゲートするようにしてください。

次へ
前へ
目次に戻る

原文
Except as noted, this content is licensed under Creative Commons Attribution 2.5.

前:Androidデザイン ジェスチャー 次:Androidデザイン ナビゲーション

関連キーワード

[Android][モバイル][IT][翻訳]

コメント

名前:ひさねこ|投稿日:2012/01/23 11:35

こんにちはです。

●私の典型的なユーザーは、私のアプリで何をしたいのだろう?

"What are my typical users most likely going to want to do in my app?"

most を意図的に翻訳した方が良いと思います。

典型的なユーザーが私のアプリで一番やりたそうなことは何だろう?

名前:ひさねこ|投稿日:2012/01/23 11:44


●スタートスクリーンをコンテンツによって装飾し、・・・

"centerpiece"が翻訳されていません。

making content the centerpiece of your start screen


「コンテントをスタートスクリーンの目玉とし、・・・」

名前:ひさねこ|投稿日:2012/01/23 11:47



layouts that are ・・・ appropriate for the data type and screen size.

"the data type"が翻訳されていません。

データ(コンテント)の種類や画面サイズにふさわしいレイアウトを選んでください。

名前:ひさねこ|投稿日:2012/01/23 11:58

●一貫した操作性と画面上の重要なアクションを行えるように、

to provide consistent navigation and surface important actions.

一貫した操作性を提供し、重要なアクションを見せるために

※「画面上の」に対応する単語が元の英文にありません。
"surface"は、見えるようにするという意味の動詞と思います。

名前:ひさねこ|投稿日:2012/01/23 12:01

●アプリアイコンかタイトル

app's icon or title

→ アプリのアイコンやタイトル

名前:ひさねこ|投稿日:2012/01/23 12:14

●それらの操作が簡単になる事を確認します。

make sure that it's easy for the user to
make sure that it's easy for the user to navigate

make sure: 必ず〈…するように〉手配する[計らう]

ナビゲートが簡単になるようにしてください。

名前:ひさねこ|投稿日:2012/01/23 12:18

●アプリによって人々がコンテンツを創造できるのであれば、トップレベルから正しくアクセスできるようにする。

right: 直接。ここでは「正しく」という意味ではありません。

アプリでコンテントを作成できる場合は、トップレベルから直接そのコンテントにアクセスできるようにしてください。

名前:ひさねこ|投稿日:2012/01/23 12:23

●検索アクションをアクションバーに含めて人々が階層を飛び越えていけるようにする

include the Search action in the action bar so people can cut through the navigation hierarchy.

ナビゲーションの階層をショートカットできるように検索アクションをアクションバーに含めてください

※この場合、日本語では people を翻訳する必要はありません。

名前:ひさねこ|投稿日:2012/01/23 12:32

Emal→Email

名前:ひさねこ|投稿日:2012/01/23 12:35

●簡単に取得できる

easy-to-skim:簡単に目を通せる

名前:ひさねこ|投稿日:2012/01/23 13:14

●アプリのためにアクションバーを超えるアイデンティティを作ってください。

→『アクションバーを超えるアイデンティティ』の意味がよくわかりません。

Creating an identity for your app goes beyond the action bar.

アプリにアイデンティティを持たせることはアクションバー以上に重要です。

名前:ひさねこ|投稿日:2012/01/23 13:18

●そのアイデンティティはデータを通じてデータをアレンジする方法と、相互作用する方法を伝えます。

Your app communicates its identity through its data, the way that data is arranged, and how people interact with it.

アプリはデータのアレンジと操作方法によってアイデンティティを伝えます。

※主語と目的語、修飾句を正しく把握していないように思えます。

名前:ひさねこ|投稿日:2012/01/23 13:36

●一般的に深いデータへ行くためにアプリは組織的なカテゴリーを通して詳細レベルに行きます。
そこでデータを見たり管理したりできます。

Generally, the purpose of a deep, data-driven app is to navigate through organizational categories to the detail level,
where data can be viewed and managed.

一般に、データを重視したアプリの目的は組織的なカテゴリーを介して、
データを閲覧・管理できる、詳細レベルにナビゲートすることです。

※内容的に元の英文と少し違うような気がします。

名前:ひさねこ|投稿日:2012/01/23 14:04

●たとえ、詳細ビューまでトップレベルから降りていくナビゲーションのステップ数が
アプリの構造上典型的な方法だとしても面倒なナビゲーション操作を意識するのを
減らすためのいくつかの方法があります。


Even though the number of vertical navigation steps from the top level down to the detail views
is typically dictated by the structure of your app's content,
there are several ways you can cut down on the perception of onerous navigation.

一般にトップレベルから詳細ビューまでの垂直ナビゲーションのステップ数が
アプリコンテントの構造によって記されていたとしても、
面倒なナビゲーションをショートカットする方法がいくつかあります。

※英文の内容と少し違う気がします。
「ナビゲーションのステップ数がアプリの構造上典型的な方法だ」の意味が全く分かりません。

名前:ひさねこ|投稿日:2012/01/23 14:09

●タブはを使いカテゴリーを選びデータを表示

「はを」にタイプミスがあります。
全体的に日本語も修正した方が良いと思います。

名前:ひさねこ|投稿日:2012/01/23 14:13

●階層が取り残され、

a level of hierarchy is removed

階層レベルが取り除かれ

名前:ひさねこ|投稿日:2012/01/23 14:26

●たくさんのカテゴリー間で水平方向に操作するのは
多くのナビゲーションステップによりカジュアルなブラウジングと
同等の体験があります。

Navigating laterally between data-rich categories is more akin to
a casual browsing experience than to an explicit navigation step.

データリッチなカテゴリー間を横へナビゲートするのは、明示的なナビゲーションステップというよりも普段のブラウジング体験に似ています。

※元の日本語訳の文章の意味がよくわかりません。

名前:ひさねこ|投稿日:2012/01/23 14:28

苦労を細小にするため

苦労を最小にするために

名前:ひさねこ|投稿日:2012/01/23 14:38

●異なる比較的異なる機能を持つ領域を切り替えます

switch between different, relatively unrelated functional areas

複数の、比較的関係のない機能の領域を切り替えます

名前:ひさねこ|投稿日:2012/01/23 14:44

"This lets people invoke actions on data without having to navigate all the way down the hierarchy." が翻訳されていません。

名前:ひさねこ|投稿日:2012/01/23 14:51

●直接ドロップダウンを使いリスト一覧のアイテムに主なアクションを表示するか、
リストアイテムを挟んでください、

display prominent actions directly on list view items using drop-downs or split list items.

ドロップダウンやスプリットリストアイテムを利用して主なアクションを直接リストビューに表示してください

※元の英文の内容と異なる翻訳だと思います。

名前:ひさねこ|投稿日:2012/01/23 15:02

●たとえ、カテゴリービューが多くの場合においてコンテンツの詳細にガイドするのに役立つとしても
データのコレクションに対して操作を行う正当な理由があることを覚えておいてください。

Even though category views mostly serve to guide people to content detail,
keep in mind that there are often good reasons to act on collections of data as well.

概してカテゴリービューはコンテントの詳細ビューへガイドするためのものですが、
しばしば複数のデータへのアクションに使えることも記憶に留めておいてください。

※もう少し日本語らしくすると良いと思います。
その他: "as well" が翻訳されていません。

名前:ひさねこ|投稿日:2012/01/23 15:07

●活動的に人々は詳細ビューの中に入っていると考えて

Consider the activities people will perform in the detail view

詳細ビューで行う操作を考慮して

※「活動的に人々は詳細ビューの中に入っていると考えて」:
日本語の内容がよく分かりません。

名前:ひさねこ|投稿日:2012/01/23 15:26

●興味深いコンテンツのために、

For immersive content,

イマーシブ(=実体験のように感じる)コンテントの場合、

※immersiveは「興味深い」という意味ではないと思います。

名前:ひさねこ|投稿日:2012/01/23 15:32

●スピリットアイテムは、電話とメッセージ発信を小さな項目に結合するのに使われます。

Split items are used to combine calling and messaging into one compact line item.

スプリットアイテムは、呼び出しとメッセージングをコンパクトな一行の項目にまとめるのに使われます。

名前:ひさねこ|投稿日:2012/01/23 15:36

●詳細ビュー内のアイテム間をナビゲートする

navigate between items from within the detail view


詳細ビューの内部からアイテム間をナビゲートする

※翻訳がやや不正確と思います("from within" の部分)。

名前:ひさねこ|投稿日:2012/01/23 15:42

●詳細アイテムでスワイプビューにより素早い操作をさせる。

Allow for quick navigation between detail items with swipe views.

スワイプビューを使って詳細アイテム間を素早くナビゲートするようにしてください。

名前:ひさねこ|投稿日:2012/01/23 15:45

●コレクションデータにユーザーが操作できるように複数選択を許す

Use multi-select to allow the user to act on collections of data.

複数選択を使用してユーザーが複数のデータに操作できるようにしてください。

※英文には「複数選択を許す」とは記載されていません。

コメントを投稿する

名前URI
コメント