ホームページ移転のお知らせ 1月1日にリニューアルを実施いたしました。 これに伴い、ページのURLが以下のアドレスに変更となりました。 http://android-design.teamegg.co.jp/ お手数をおかけしますが、リンク集やお気に入り登録情報などの修正をお願いします。 ナビゲーションドロワー
ナビゲーションドロワーを引き出すと、コンテンツの上にドロワーが重なりますが、アクションバーには重なりません。ドロワーが完全に引き出されると、現在表示されているアクションバーのタイトルをアプリ名に置き換え、ナビゲーションドロワーの下にあるViewの全アクションが削除されることにより内容が修正されます。設定とヘルプと言った標準的なアクションアイテムが含まれるオーバフローメニューは表示されたままです。
ユーザはドロワーインジケータをタッチしてドロワーパネルを開くことができます。
ドロワーパネルの表示は一時的なため、ナビゲーションドロワーは画面をスッキリとさせます。また、ナビゲーション階層が深い場合にも使えるため、ユーザはアプリのどこからでも主要な画面に切り替えることができます。
画面の左端をスワイプすることで、アプリ内のどこからでもドロワーを開きます。
ナビゲーションドロワーの非表示
ユーザは4つの方法のうちいずれかでナビゲーションドロワーを非表示にすることができます。
ナビゲーションドロワーを使用する場合
|
|
ナビゲーションドロワーには、アプリ内のすべてのナビゲーションハブが含まれます。これには、トップ階層と同じくらい重要な低い階層へのハブも含まれています。ナビゲーションドロワーからナビケーションハブへのアクセスを容易にするために、すべての画面のアクションバーのアプリアイコンの隣に、ナビゲーションドロワー内のエントリに対応するナビゲーションドロワーインジケータを表示するべきです。アプリアイコンをタッチすると、ナビゲーションドロワーが左側にスライドします。
ナビゲーションハブに含まれない他の低い階層の画面には、これまでと同様にアプリアイコンの隣にアップインジケータを表示します。ドロワーはエッジスワイプでもアクセス可能ですが、アクションバーの項目では取り上げていません。
|
アプリアイコンとナビゲーションドロワーインジケータ
|
ナビゲーションドロワーのコンテンツ
アプリのナビゲーションに焦点を当ててナビゲーションドロワーのコンテンツを設置してください。ナビゲーションドロワー内部のリスト項目（行ごとに1項目）として、アプリのナビゲーションハブを開きます。
|
タイトル、アイコン、カウンタ
タイトルを追加することでナビゲーションの対象を構成しますタイトルはインタラクティブではありませんが、機能的なトピックにナビゲーションの対象が合うようにまとめます。多くのナビゲーション対象がある場合は、ドロワー内にユーザのためのタイトルを使用します。
ナビゲーションの対象には末尾のカウンタのようなアイコンをオプションで付けることができます。関連するビューのデータが変更されたことをユーザに通知するためにカウンタを使用してください。
|
ドロワーをまとめるための、タイトルとアイコンの使用
|
折りたたみ可能なナビゲーション項目が分割されます。ナビゲーション用の左側の項目を使用し、右に折りたたみと展開の項目を使用します。
|
ナビゲーション項目の折りたたみ
従属する多くのビューがある場合、スペースを節約するために折りたたみ可能な項目の実装を検討してください。この際、ナビゲーションドロワーの親は、スプリットアイテムに変わります。左側を操作することで親アイテムのビューへナビゲーションし、右側を操作することで子アイテムのリストを開いたりたたんだりすることができます。
折りたたみ可能な項目の初期状態は、自由に決められます。原則として、すべてのトップ階層ビューのエントリにナビゲーションドロワーを表示するようにしてください。多くの折りたたみ可能なアイテムが含まれている場合には、ユーザがトップ階層のビューを全て表示できるようにすべての項目をたたむことを検討してください。
ユーザが低い階層からドロワーを開いた場合、現在の画面階層を強調するためにトップ階層のビューに関連する枝分かれの画面を展開し、アプリ内でのユーザの現在位置が目標のナビゲーションに近いことを強調して表示します。
|
ナビゲーションドロワーとアクションバー
ユーザがナビゲーションドロワーを展開すると、タスクの焦点はドロワーからアイテムに切り替わります。ドロワーはアクションバーにかぶさっていないため、ユーザはアクションバー内の項目が、ナビゲーションドロワーに関係していないことに気づかない場合があります。
混乱を減らすために、完全にドロワーが展開された後に、次のようにアクションバーの内容を調整します。
- アプリアイコン
- アプリ名
- ドロワーの裏側にあるビューに設定されたアクションバーからアクション（新規作成、更新など）を消す。検索などのグローバルなアクションはそのまま置いておく
- ナビゲーション対象として想定される、設定やヘルプのようなオーバフローメニュー
ドロワーが完全に表示されたら、アクションバーからアクションを取り除きます。必要でないアクションを削除し、タイトル部分にアプリ名を表示します。
アクションバーの右側とオーバフローにアクションを置きます。
|
ナビゲーションドロワーにアクションを置かないでください。アクションはアクションバーに属するとユーザは考えています。すべてのアプリがナビゲーションドロワーパターンを使用しているわけではないことに注意してください。1箇所にアプリの機能を全て詰め込みたいと考えがちですが、全体の調和を考えてアプリを設計してください。アプリの機能は表示すべき場所に表示されるべきです。
|
|
ヘルプや設定のような一般的なナビゲーションターゲットについてもこれは当てはまります。スタイルガイドの規約によりヘルプと設定は常にアクションオーバフローに配置します。
|
オーバフローにヘルプと設定が配置されています。
|
コンテキストアクションバー
アクションバーの代わりにコンテキストアクションバー（CAB）が表示されている場合があります。これは通常、ユーザがテキストを選択した際や、プレスホールドにより複数の項目を選択した際に起こります。CABが表示されている間は、ユーザがエッジスワイプによってナビゲーションドロワーを開けるようにする必要があります。しかしナビゲーションドロワーが開いている間はCABを閉じて、通常のアクションバーに置き換えてください。ユーザがドロワーを閉じたら、CABを再度表示してください。
ドロワーが表示されている間は、コンテキストアクションバーを隠します。
ユーザが選択したコンテンツから他のコンテンツに移動した時には、新しいビューに移動する前にコンテンツの選択を解除します。
インタラクションの詳細
初回利用時にドロワーを表示する
アプリの初回起動時に自動的にナビゲーションドロワーを開いて、ユーザにドロワーを紹介します。これにより、アプリにナビゲーションドロワーがあることをユーザに知らせることができ、内容を確認することでアプリの構造を素早く伝えることができます。 ユーザが手動でナビゲーションドロワーを一度でも開くまで、起動時にドロワーを表示し続けます。ユーザがドロワーを開く方法を理解したら、ナビゲーションドロワーを閉じた状態でアプリを起動します。
初回使用時にユーザがアプリの機能や構造を学ぶことを助けるために、ナビゲーションドロワーを自動的に表示します。
ユーザに素早く見せる
ユーザが画面の左端（左から20dp以内）に触れると、指と画面が一致するようにドロワーが表示されるようにします。これによりドロワーを偶然見つけられるようにし、よりリッチなフィードバックを提供することができます。
ユーザが画面の左端をタッチするナビゲーションドロワーが表示されます。
強調
ドロワーの中に存在する画面からナビゲーションドロワーを開くと、ドロワーが強調表示されます。ドロワーの中に無い画面からドロワーを開いた場合には、ドロワーのアイテムをどれも強調するべきではありません。
ドロワーがアプリ全体のナビゲーションに及ぼす影響
ナビゲーションドロワーは他のトップ階層のナビゲーションパターンの代わりとして機能します。タブやスピナパターンが使われているアプリで一貫してナビゲーションドロワーを動作させるために、システムのバックとアップのナビゲーション要件が適用されることを忘れずにアプリを構築してください。
次の状況では特に注意してください。
アプリのトップ階層のバックボタン
アプリのトップ階層でバックボタンを押すと、ナビゲーションドロワーは開きません。
バックボタンはタスク内の前のアプリへの移動やホーム画面への移動のような、トップ階層のナビゲーション規約に従って動作します。
トップレベルのナビゲーション規約に従い、バックボタンを押してもドロワーは表示されません。
低い階層へのクロスナビゲーション後のバックボタン使用
ナビゲーションドロワーから低い階層の画面に移動する際に、画面が直接の親を持っている場合は、バックスタックが対象の画面の親画面にリセットされ、そこがバックで戻るポイントになります。このバック動作はユーザが通知からアプリに移動した時と同じ動作です。
低い階層のナビゲーションターゲットが直接の親をもつ場合、バックスタックがリセットされます。
スタイル
ナビゲーションドロワーは表示したい内容によりますが、240dp〜320dpの間でなければいけません。それぞれの行の高さは48dpを下回ることがないようにしてください。パディングと空白に関する推奨事項については、以下のレイアウトガイドラインを参照してください。
ナビゲーションドロワーのレイアウトガイドライン
最もマッチするアプリのテーマに合わせて、ドロワーの背景を選択してください。Holo light、Holo darkをテーマにしたドロワーは以下の例を参照してください。
Holo lightとHolo darkテーマのアプリのナビゲーションドロワー
ナビゲーションドロワーのチェックリスト
すでにナビゲーションドロワーに似たものをサポートしている場合でも、ドロワーのパターンをより良くするために以下の項目を参照してください。
- アクションバーのコンテンツが調節され、画面上に残っている
- ナビゲーションドロワーはコンテンツを覆う形になる
- ドロワーの中に表示されたすべてのビューには、アプリアイコンをタッチすることでドロワーを開く、ナビゲーションドロワーインジケータをアクションバー内に持っている
- 新しい視覚的なドロワーの変化を活用できる
- ドロワー内に表示されていないすべてのビューのアクションバーには、これまでと同様にアップインジケータが含まれる
- 一般的なナビゲーションパターンであるアップとバックを組み合わせて使用する
原文はこちら > Navigation Drawer
Except as noted, this content is
licensed under
Creative Commons Attribution 2.5. For details and
restrictions, see the Content
License.