ホーム‎ > ‎Patterns‎ > ‎

Action Bar


ホームページ移転のお知らせ
1月1日にリニューアルを実施いたしました。
これに伴い、ページのURLが以下のアドレスに変更となりました。
http://android-design.teamegg.co.jp/
お手数をおかけしますが、リンク集やお気に入り登録情報などの修正をお願いします。

アクションバー


アクションバーはどのアプリでも画面の上部に実装されている、特定の目的を果たすための機能です。

デベロッパードキュメント
Action Bar

アクションバーの主な機能:
  • 新規作成や検索などの重要なアクションを目立たせることで、アクセスが簡単になります。
  • 一貫したナビゲーションやアプリ内のViewの切り替えをサポートします。
  • めったに使われないアクションをアクションオーバーフローで提供することで見た目をスッキリさせます。
  • アプリの名称・アイコンなどを表示するスペースを確保できます。
Androidアプリを書くことに慣れていな場合、アクションバーはあなたが実装することができる最も重要な設計要素の1つであることに注意してください。ここで説明するガイドラインに従えば、あなたのアプリのインタフェースをAndroidのコアとなるアプリと同じものにすることができます。

一般的な構成

アクションバーの機能はどのアプリでも、大きく4つに分けることができます。
1.アプリアイコン
アプリアイコンはロゴやブランドに置き換えることで、アプリのアイデンティティを構築します。重要:アプリが現在表示している画面がトップ画面でない場合、階層を移動できるようにUPキャレットをアプリアイコンの左側に表示するようにしてください。UPナビゲーションについてのさらなる情報はナビゲーションパターンを参照してください。
「アップ」がある場合とない場合のアプリアイコン
2.ビューコントロール
様々なビューにアプリがデータを表示する場合、アクションバーのこの機能を使ってビューを切り替えることができます。ビュー切り替えの例としてはドロップダウンメニューやタブコントロールが挙げられます。
アプリが様々なビューにデータを表示しない場合は、アプリタイトルや長いブランド情報などの静的コンテンツを表示するためのスペースとして使うことができます。ビュー切り替えの詳細については、App Structureパターンを参照してください。

3.アクションボタン
アクションセクションでアプリの最も重要なアクションを表示します。アクションバーに収まらないアクションは、アクションオーバフローに自動的に移動されます。アクションの名前を表示するには、アイコンを長押しします。

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

スクリーンサイズ・画面の向きの調整

アプリを作成する際に考慮すべき最も重要なUIの問題の1つは、アプリを様々な画面サイズや画面の向きに合わせて調整する方法です。

このような変化に対して、アクションバーの内容をメインアクションバーの下または画面の下に複数のバーにまたがって配置するスプリットアクションバーを使うことで調整出来ます。

 
垂直方向下部にアクションボタンを表示するスプリットアクションバー

スプリットアクションバーのレイアウトについて

コンテンツを複数のアクションバーで分割するとき、アクションバーのコンテンツを下記の三箇所に配置することができます。
  1. メインアクションバー
  2. トップバー
  3. ボトムバー
ユーザが指定した画面から階層を上に移動する場合は、メインアクションバーは最低限アップキャレットを含みます。

ユーザがViewを素早く切り替えられるよう、トップバーにはタブやスピナーを実装してください。

アクションの表示や概要の表示が必要なら、ボトムバーを使用します。


アクションボタン

アクションバー上のアクションボタンは最も重要な活動を表示します。最も頻繁に使われるかとそれに応じた並びを考えてください。利用可能な画面領域に応じて、システムは最も重要なアクションをアクションボタンとして表示し、残りはアクションオーバフローに移動します。アクションバーはユーザが利用可能なアクションのみが表示されるはずです。現在のコンテキストでアクションが利用可能でない場合、非表示にします。「無効」として、絶対に表示してはいけません。

Gmailアプリの様々な場所で使用するアクションボタンのサンプル

優先順位をつける指針については、FITのスキームを使用してください。

F-Frequent(触れることが頻繁) I-Important(一番重要) T-Typical(典型的)
  • この画面に来た時に、このアクションを10回中7回使いますか?
  • 通常、連続して何度も使いますか?
  • 毎回負担になる余分なステップを踏みますか?
  • そのアクションが最も重要であり、アプリの売りであって欲しいと考えますか?
  • その機能が稀にしか必要でないのならそれは本当に必要な機能ですか?
  • 類似のアプリケーションでも重要な機能とされていますか?
  • その機能がアクションオーバフローに埋められた場合、ユーザーが混乱しますか?
F、I、Tのどれかに一致する場合はアクションバーに加えるべきです。それ以外の場合は、アクションオーバフローに回すのが適切です。

「更新」や「共有」などのすでに定義されたグリフは、共通のアクションとして使われるべきです。下記のダウンロードリンクは様々な画面密度にスケーリングし、Holo LightとHolo Darkテーマに適したアイコンパッケージを提供しています。また、パッケージはテーマに合わせて編集可能なスタイルなしのアイコン(さらにカスタマイズするためのAdobe(R) Illustrator(R)のソースファイル)を含んでいます。

Download the Action Bar Icon Pack

アクションオーバフロー
アクションバー内のアクションオーバフローは、使用頻度の低いアクションへのアクセスを提供します。ハードウェアキーを持たない電話にはオーバーフローアイコンを、持つ電話ではメニューキーを押した時にアクションオーバフローが表示されます。
右側に固定されたアクションオーバフロー
どのくらいのアクションがメインアクションに収まるのでしょう?アクションバーの容量は次のルールでコントロールされています。
  • メインアクションバーの幅の50%以上を占めない。ボトムアクションバーはアクションボタンでバー全体を使用できる。
  • ピクセル非依存の密度(dp)の画面幅で、メインアクションバーに収まる項目数が決まります。
    • 360dp未満 = 2アイコン
    • 360-499dp = 3アイコン
    • 500-599dp = 4アイコン
    • 600dp以上 = 5アイコン
上記の表で「o」はアクションバーの項目、「=」はオーバフローアイコンを示します。

データの共有
アプリが画像や動画のようなデータの共有を許可する場合は、アクションバーのシェアアクションプロバイダを使用してください。シェアアクションプロバイダは、最近使用した共有サービスを、他の共有オプションが含まれているスピナボタンの隣に表示することで、共有を高速化できるように設計されています。

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

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

コンテキストアクションバーは(CAB)は、特定のサブタスクの実行中にアプリのアクションバーに重なって表示される一時的なアクションバーです。一般的にCABは選択されたデータやテキストの動作に伴うタスクとして扱われます。
ブラウザやGmailに表示されるコンテキストアクションバー

選択可能なデータ項目の長押しで選択モードを起動した後、選択したCABが表示されます。

コンテキストアクションバーの表示によりできること
  • タッチした項目の追加要素の選択。
  • ナビゲーションバーのバックボタンやCABのチェックマークボタンを介してCABを非表示にする。これにより選択したハイライトと一緒にCABを削除する。
ユーザが長押しによってデータを選択する際にはCABを使用してください。あなたはユーザが実行したいアクションを挿入できるように、CABの実行内容をコントロールできます。

さらなる情報は、「Selection pattern」を参照してください。

アクションバーのチェックリスト

スプリットアクションバーを設計するときは、これらの点に注意してください。

タスクへのビューの移動はどのくらい重要ですか?

タブ(ビュー切り替えが最も早い)やスピナを使用したビューの移動はアプリにとってとても重要です。

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

アクションがトップレベル表示されるか、アクションオーバフローに移動するか決めるためにFIT(Frequent、Important、Typical)スキームを使用してください。トップレベルアクションの数がメインアクションバーの容量を超える場合は、ボトムアクションバーで別々に表示します。

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

常にアプリのコンテキスト情報を表示することが重要な場合があります。例えば、受信ボックスビューの未読メッセージの数やミュージックプレイヤーの再生中の情報です。表示したい重要な情報を慎重に設計し、それにしたがってアクションバーを構築してください。



原文はこちら > Action Bar

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

Comments