Androidデザイン アクションバー

2012/1/22 31009hit

アクションバー

アクションバーは間違いなくAndroidアプリで最も大切な構成要素です。
それは、通常アプリを通じて一貫して各スクリーンの最上部を占める専用の部分です。

アクションバーの主な目的

・重要なアクションを行う(新規作成、検索等)目立ち予想できる方法でアクセスできます。
・アプリ内でビューを変えても一貫したナビゲーションと表示をサポートしてください。
・滅多に使われないアクションに対してアクションのオーバーフローを提供して複雑さを減らす。
・アプリケーションのアイデンティティを与える専用のスペースを提供する。
あなたがAndroidアプリを作るのに慣れていないなら、アクションバーはあなたが実装できる最も重要なデザイン要素の一つである事に注意してください。
ここに記載されるガイドラインに従う事で、あなたのアプリのインターフェイスをAndroidのコアアプリと一致させる効果があります。

一般的な機構

アクションバーは殆どのアプリケーションで機能で区切られたエリアがあります。

1.アプリアイコン

アプリアイコンはアプリのアイデンティティを確立します。必要であれば別のロゴやブランドに置き換える事が出来ます。
重要:もし、アプリが今表示している画面が最上位でないなら、Up用の印をアプリアイコンの右側に表示する必要があります。それによりユーザーは上位の階層へ移動できます。
Upナビゲーションについての詳しくはナビゲーションパターンを見てください。

Upがある場合と無い場合のアプリアイコン

2.コントロールビュー

もしアプリがデータを異なる複数の見せ方で見せるならアクションバーのこの部分でユーザーが見せ方を切り替えられるようにします。
ビューを切り替えるコントロールの例はドロップダウンメニューやタブです。

もし、アプリが異なるビューをサポートしていなければアプリタイトルや長いブランド情報などの静的なコンテンツをこのスペースに表示する事も出来ます。

3.アクションボタン

アプリの最も重要なアクションをアクションセクションで見せます。
アクションバーに収まらないアクションは自動的にアクションオーバーフローに移されます。

4.アクションオーバーフロー

あまり頻繁に使用されないアクションをアクションオーバーフローに移動します。

回転と異なる画面サイズへの適応

アプリを作る上で最も重要なUIについて考えるべき事は、どのようにして異なる画面サイズの回転に対応するかという事です。
スピリットアクションバーを使用する事でその変化に対応できます。
アクションバーのコンテンツをメインのアクションバーの下か画面の一番下に置かる複数のバーに割り当てます。

縦方向の画面に置いてアクションボタンを表示するアクションバーを画面下に分割する。

スピリットアクションバーのレイアウトに関する考慮点

コンテンツを複数のアクションバーに分割するとき、通常3つの場所があります。
1.メインアクションバー
2.トップバー
3.ボトムバー
もし、ユーザーが今の画面から上の階層へ移動できるならメインアクションバーには小さな印が表示されます。
ユーザーがアプリケーションが提供するビューを素早く切り替えるようにするにはトップバーにタブかスピーナーを使ってください。
アクションと必要によってアクションオーバーフローを表示するにはボトムバーを使ってください。


コンテキストアクションバー

コンテキストアクションバー(CAB)は特定のサブタスクの間アプリのアクションバーを上書きする一時的なアクションバーです。
CABの最も一般的な使用例は選択されたデータやテキストに作用する関連したタスクのために使われます。

ブラウザーやーGmailに表示されるコンテキストアクションバー

それからユーザーが出来る事:

・それにタッチする事で追加の要素を選択する
・CABによって選ばれた全てのデータアイテムにアクションを実行する。CABは自動的に自分自身を非表示にする。
・ナビゲーションバーのBackボタンかCABのチェックマークボタンを使ってCABを閉じる。これにより全ての選択ハイライトとともにCABを消します。
ユーザーが長押しでデータを選択できる時はいつもCABを使ってください。
あなたは、ユーザーが行いたい行動を加えるためにCABの内容をコントロールできます。
より詳細は選択パターンを参照してください。

アクションバーの要素

タブ

タブはアプリビュー間で素早くかつ簡単に探索し、切り替える事が出来ます。
ユーザーが頻繁にビューを切り替えると予想される場合タブを使います。

タブのタイプは固定とスクロールがあります。

スクロールできるタブ

スクロール可能なタブは常に今アクティブな表示アイテムが中央にあり、全ての横幅を占有します。
そのため、専用のバーに入っている必要があります。
スクロール可能なタブはより多くのタブを表示できる様に水平にスクロールさせる事が出来ます。

たくさんの数のビューを使う場合や、アプリが動的にタブを加える(例えばメッセージアプリで開いているチャットをユーザーが行き来できるようにする場合)のでいくつのタブを使うかが不確かな場合にスクロール可能なタブを使ってください。
スクロールタブは常にコンテンツエリアをスワイプするだけでなく、タブ自身をスワイプしてもビュー間をナビゲート出来るようにしてください。

Androidマーケットにおけるスクロールタブ

固定タブ

固定タブは常に画面に表示されています。そしてスクロールタブのように追い出せません。
固定タブはメインアクションバーにあり画面の向きが変わったときに移動できます。

Holo DarkとLightにおける標準のタブの見た目

スピナー

スピナーはアプリ内でユーザーがビューを切り替えられるドロップダウンメニューです。
次のような場合、メインアクションバーでタブよりスピナーを使う方が適切と考えられます。
・タブバーのために使われる専用の領域を手放したくない
・アプリのユーザーがビューを滅多に切り替えないと思われるとき

カレンダーアプリケーションのアクションバースピナー

アクションボタン

アクションバーのアクションボタンはアプリの最も重要なアクションを表に示します。
どのボタンが多く使われるかを考え、それにより並べてください。
利用可能なスクリーン領域により、システムはアクションバーに最も重要とされるアクションを表示し、残りをアクションオーバーフローへ移します。

Gmailアプリケーションの各所で使われているアクションボタンのサンプル。
アクションに優先度をつけるためのガイドラインはFITスキーマを使ってください。

F ― Frequent(頻繁)

・人々はこの画面を10回開くうち7回は使いますか?
・一般的に何度か連続して使いますか?
・毎回余分なステップを踏むのは大変ですか?

I ― Important(重要)

・それはことさらクールか、セールスポイントなので必ず見つけてほしい物ですか?
・それが必要なのはまれなケースで楽にする必要がありますか?

T ― Typical(典型)

・それは類似のアプリで一般的に大切なアクションとされていますか?
・人々はアクションオーバーフローへ隠れると驚きますか?

FITのいずれかに該当したらそれはアクションバーが適切です。それ以外はアクションオーバーフローに属します。

アクションオーバーフロー

アクションバーのアクションオーバーフローはアプリのあまり使われないアクションへのアクセスを提供します。
オーバーフローアイコンはメニューの物理キーを持たない電話機のみで表示されます。
メニューキーをもつ電話機はキーを押すとアクションオーバーフローが表示されます。

どれくらいのアクションがメインのアクションバーに収まるだろうか?アクションバーは以下の規則に基づきます。
・メインアクションバーのアクションボタンはバーの50%を占めない事があります。下のアクションバーに収まるアクションボタンは全ての幅を使えます。
・ピクセルから独立した密度(dp)での画面幅がメインのアクションバーに収まる項目数を決定します。
・360dp未満 2つ
・360〜499dp 3つ
・500〜599dp 4つ
・600dp以上 5つ

このテーブルは"o"がアクションバーのアイテム"="がオーバーフローアイコンを示す。

データーの共有

あなたのアプリが画像や動画などのデータを共有を許す時は常に、share action provicerをアクションバーで使ってください。
share action provicerは最後に使った共有サービスを示し、次に他の共有オプションを示すスピナーを示す事で素早く操作できるようにデザインされています。

ギャラリーアプリの共有アクションプロバイダと追加の共有オプション拡張スピナー

データーの共有

スピリットアクションバーを計画するとき、以下のような質問を自答してください。

タスクのビューナビゲーションはどの程度重要ですか?

もし、アプリにとってビューナビゲージョンがとても大切ならタブを使う(素早くビューを移すために) またはスピナーを使う。

アプリアイコンはアクションバーから直接一貫して必要ですか?アクションオーバーフローに移動できますか?

アクションがトップレベルで表示されるべきか、オーバーフローに移動できるかを決めるためにFITスキーマーを使ってください。もし、トップレベルアクションの数がメインアクションバーのキャパシティを超えたら下の区切られたアクションバーに表示されます。

他に一貫して表示するのに何が重要ですか?

コンテンツの情報をアプリで常に表示するのが重要である事があります。
例えば、INBOXビューの未読メッセージの数や今再生している音楽の情報です。
それにより、アクションバーに表示して構築する重要な情報を決めていきます。

次へ
前へ
目次に戻る

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

前:Androidデザイン ナビゲーション 次:Androidデザイン マルチペインレイアウト

関連キーワード

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

コメント

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

こんにちはです。

●重要なアクションを行う(新規作成、検索等)目立ち予想できる方法でアクセスできます。

Make important actions (such as New or Search, etc) prominent and accessible in a predictable way.

新規作成、検索等の重要なアクションを目立させ、予想できる方法でアクセスできるようにします。

※「・・・を行う・・・」あたりが日本語として不完全です。

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

●アクションバーは殆どのアプリケーションで機能で区切られたエリアがあります。

The action bar is split into four different functional areas that apply to most apps.

アクションバーは以下のように大抵のアプリに適用される異なる4つの機能的領域に分割されます。

※"four different"が翻訳されていません。「・・・で機能で・・・」のあたりの日本語に問題があります。

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

●アプリアイコンの右側に表示する

display the Up caret to the left of the app icon

アプリアイコンの左側に表示する

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

●もしアプリがデータを異なる複数の見せ方で見せるならアクションバーのこの部分で
ユーザーが見せ方を切り替えられるようにします。

If your app displays data in different views, this segment of the action bar allows users to switch views.

アプリがデータを複数のビューで表示する場合、
アクションバーのこの部分を使ってユーザーはビューを切り替えることができます。

※ view は「ビュー」のままで良いです。

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

●あまり頻繁に使用されないアクションをアクションオーバーフローに移動します。

Move less often used actions to the action overflow.

あまり使用されないアクションはアクションオーバーフローに移動してください。

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

●アプリを作る上で最も重要なUIについて考えるべき事は、

One of the most important UI issues to consider when creating an app

アプリを作る際に考慮すべき最も重要な UI の問題の一つとして・・・・があります

※ "One of the most ・・・" が翻訳されていません

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

●アクションバーのコンテンツをメインのアクションバーの下か画面の一番下に置かる複数のバーに割り当てます。

which allow you to distribute action bar content across multiple bars
located below the main action bar or at the bottom of the screen.

それ(=スピリットアクションバー)により、メインのアクションバーの下または画面の一番下に配置される、
複数のバーに跨ってアクションバーコンテントを分散できます。

※少し日本語を補う必要があります。

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

●縦方向の画面に置いてアクションボタンを表示するアクションバーを画面下に分割する。

Split action bar showing action buttons at the bottom of the screen in vertical orientation.

ポートレートの向きのとき、スピリットアクションバーが画面の一番下にアクションボタンを表示しています。

※Split action bar:「スピリットアクションバー」です。

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

●メインアクションバーには小さな印が表示されます。

the main action bar contains the up caret, at a minimum.

メインアクションバーには、少なくとも up を表す "

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

●メインアクションバーには小さな印が表示されます。

the main action bar contains the up caret, at a minimum.

メインアクションバーには、少なくとも up を表す "<" 印が含まれます。

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

The selection CAB appears after a long press on a selectable data item triggers selection mode.

が翻訳されていないので、それ以降の日本語が理解できません。

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

こんばんはです。

●CABによって選ばれた全てのデータアイテムにアクションを実行する。CABは自動的に自分自身を非表示にする。



全ての選択されたデータアイテムに適用するCABからアクションを起動します。その後、CABは自動的に消えます。

Trigger an action from the CAB that applies to all selected data items. The CAB then automatically dismisses itself.

※関係代名詞that の先行詞は the CAB

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

●ユーザーが行いたい行動

ユーザーが行えるようにしたい行動

the actions you would like the user to be able to perform

※『ユーザーが行いたい』のではなく、『開発者がユーザーに行えるようにしたい』という意味。

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

●それからユーザーが出来る事

上にありますが、
The selection CAB appears after a long press on a selectable data item triggers selection mode.
を翻訳するとこの文章の意味が明確になります。

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

●タブはアプリビュー間で素早くかつ簡単に探索し、切り替える事が出来ます。



タブはアプリの複数のビューを同時に表示し、探索したり、切り替えることが簡単にできます。

Tabs display app views concurrently and make it easy to explore and switch between them.

※display app views concurrentlyが翻訳されていません。『素早くかつ』は元の英文にありません。

名前:kenz|投稿日:2012/01/24 00:18

いつもたくさんのご指摘ありがとうございます。
例文まで出していただき本当に勉強になります。
BUILDING BLOCKSをアップした後にご指摘を元に修正を入れていきたいと思います。

名前:ひさねこ|投稿日:2012/01/24 00:21

●スクロールタブは常にコンテンツエリアをスワイプするだけでなく、タブ自身をスワイプしてもビュー間をナビゲート出来るようにしてください。

スクロール可能なタブは、常に、
ユーザーがタブそのものだけでなくコンテントエリアを左右にスワイプすることでもビュー間をナビゲートできるようにすべきです。

Scrollable tabs should always allow the user to navigate between the views by swiping left or right on the content area as well as swiping the tabs themselves.

※ A as well as B では、BよりもAが強調されるように翻訳します。

名前:ひさねこ|投稿日:2012/01/24 00:27

固定タブはメインアクションバーにあり画面の向きが変わったときに移動できます。



メインアクションバーにある固定タブは、画面の向きが変わるとき、トップバーに移動することがあります。

Fixed tabs in the main action bar can move to the top bar when the screen orientation changes.

※正確に翻訳されていません。Fixed tabs in the main action barとmove to the top barのあたり。
can は可能性をあらわす助動詞と思います。

名前:ひさねこ|投稿日:2012/01/24 00:29

●Holo DarkとLightにおける標準のタブの見た目

Default fixed tabs shown in Holo Dark & Light.

※fixed が翻訳漏れです。

名前:ひさねこ|投稿日:2012/01/24 00:36

●ビューを滅多に切り替えない

ビューを頻繁には切り替えない

switch views infrequently.

※「滅多に・・・ない」と「頻繁には・・・ない」はニュアンスが少し異なります。

名前:ひさねこ|投稿日:2012/01/24 00:59

●素早く操作できるようにデザインされています。



素早く共有できるようにデザインされていま
す。

designed to speed up sharing

※sharingは「共有する」と翻訳した方がよいです。

名前:ひさねこ|投稿日:2012/01/24 01:03

●最後に使った共有サービスを示し、次に他の共有オプションを示すスピナーを示す事で



最後に使われた共有サービスを他の共有オプションを含むスピナーボタンの隣に表示することで


by displaying the most recently used sharing service next to a spinner button that contains other sharing options.

※next to が正しく翻訳されていません。spinner buttonのbuttonが翻訳漏れです。

名前:ひさねこ|投稿日:2012/01/24 01:05

●タブを使う(素早くビューを移すために) またはスピナーを使う。

※日本語が不自然です。

名前:ひさねこ|投稿日:2012/01/24 01:10

●アプリアイコンはアクションバーから直接一貫して必要ですか?

アプリのアクションのうちどれが直接アクションバーから一貫して利用可能である必要がありますか?

Which of the app's actions need to be consistently available directly from the action bar

※ app's actionsは「アプリアイコン」ではありません。

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

●下の区切られたアクションバーに表示されます。



ボトムアクションバーに分けてそれらを表示します。

display them separately in a bottom action bar

※bottom action bar:ボトムアクションバー
separately:別々に

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

●他に一貫して表示するのに何が重要ですか?

What else is important enough to warrant continuous display?

※continuousは「一貫して」ではなく「連続して」という意味です。

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

●それにより、アクションバーに表示して構築する重要な情報を決めていきます。



何れの重要情報を表示したいのか慎重に計画し、それに従ってアクションバーを構成してください。


Carefully plan which important information you would like to display and structure your action bars accordingly.

※英文の内容と異なる翻訳になっている気がします。

コメントを投稿する

名前URI
コメント