Androidの10のアンチナビゲーションパターン





この記事では、多くの初心者(だけでなく)がAndroidアプリケーションインターフェイスを作成できるAndroidの10のアンチナビゲーションパターンを検討します。















メインナビゲーション(メイン画面、ストア、注文など)がアクションバーのオーバーフローに配置されるいくつかのアプリケーションに出会いました。 これは、このタイプのナビゲーションに最適な場所ではありません。 基本的なナビゲーションにオーバーフローを使用しない主な理由は、ユーザーインターフェイスを作成するための推奨事項をリッスンする多くのアプリケーションが使用しないためです。 この目的のために、ナビゲーションドロワーまたはタブを使用することをお勧めします。 もう1つの理由は、古いデバイスにはアクションバーのオーバーフローがないため、メニューを開くには、ハードキーメニューボタンをクリックする必要があることです。





Androidには多くのUIナビゲーションパターンがあります。 たとえば、ナビゲーションドロワー、アクションバースピナー、タブ。 これらのテンプレートを使用する厳密な順序があります。 アプリケーションを見ると、ツリーのような特定の情報階層をすぐに判断できます。 ルートはメイン画面で、2番目のレベルはカテゴリです。各カテゴリにはサブカテゴリなどがあります。 そして、この情報を整理するために、これらのテンプレートが使用されます。 それらの誤った使用(たとえば、トップレベルナビゲーションのタブ、次のレベルのアクションバースピナー、最も深いレベルのナビゲーションドロワー)は、ユーザーを混乱させる可能性があります。 これは、ナビゲーションを整理する間違った方法です。







正しいオプション:







ナビゲーションドロワーは常に最高レベルを表し、アクションバースピナーは2番目のレベルを表し、最後にタブは3番目のナビゲーションレベルを表す必要があります。 また、アクションバースピナーを使用せず、引き出しとタブ(Google Playミュージックなど)のみがある場合、メインナビゲーションはナビゲーションドロワーで実行し、次にタブでのみ実行する必要があります。





Androidのタブには固有のジェスチャーがあります-左または右にスワイプします。 タブが表示されたら、水平スクロールジェスチャを使用して、タブ間を移動できることを確認する必要があります。 この場合、水平方向のスワイプを使用してスクロールされるページ分割されたコンテンツがあると、ジェスチャの競合が発生します。







これを修正するには、コンテンツを複数の画面に分割するか、水平ナビゲーションを垂直に変更します。







ただし、コンテンツがタブの一部である場合-たとえば、さまざまな方向にドラッグできる画像ギャラリーまたはマップを使用している場合、通常は普通に認識されます。 ただし、これを避ける方が適切です。より適切なナビゲーションアーキテクチャを検討する必要があります。





タブのナビゲーションが多すぎてはいけません。 アイテムの並べ替え順序の変更やコンテンツのスクロールなどを使用できます。 ただし、階層ナビゲーションを使用することは強くお勧めしません。 たとえば、この例では、GridView要素の1つを選択すると、コンテンツが現在のタブに直接表示され、戻るボタンをクリックすると、GridViewが再び表示されます。







これは、タブ内の深いナビゲーションの例です。 最初の理由は、プラットフォームが異常なアプリケーション動作であることです。 2番目の理由-別のタブに移動するとどうなるかわかりません。 前のタブは、ユーザーにとって不明確な状態になります。 また、「戻る」ボタンをクリックして発生するアクションは定義されていません。



アンチパターンの別の例は、永続的なタブです。 これらは、アプリケーション全体のグローバルナビゲーションを提供するこのようなタブです。 戻るボタンの未定義のアクションの問題もここに表示されます。 そのため、コンテキストを変更できるナビゲーションドロワーが作成されました。



例の正しいバージョンは次のとおりです。









タブナビゲーションはアクション履歴に保存しないでください。 この例では、戻るボタンをクリックすると、前のタブに移動します。 代わりに、前の画面に移動します。









ナビゲーションドロワーを使用した同様のアンチパターン。 適切なデザインの良い例は、Google +アプリです。 ナビゲーションドロワーのアイテムをクリックすると、別のアプリケーションが開きます。 したがって、ナビゲーションドロワーで次のアイテムを開くと、タスクのバックスタックがクリアされ、「戻る」ボタンをクリックすると、アプリケーションが閉じます。 または、これがユーザーに明らかでない場合は、アプリケーションのメイン画面を表示できます。















ナビゲーションドロワーは、アプリケーションの個々の部分間を明確かつ安定して移動するために作成されました。 マルチレベルナビゲーションドロワーは避けてください。



ただし、折りたたみ可能なサブパラグラフはまったく受け入れられます。







この問題の別の解決策は、ナビゲーションドロワーでアイテムを選択すると、ナビゲーションのある画面が開くことです。









ここで、「遷移」という言葉は、アニメーションと画面間の遷移の両方を意味します。 たとえば、ナビゲーションドロワーを開いて[セクション1]をクリックすると、アクションバーの[戻る]ボタンで新しい画面が開かないはずです。







規則に従って、ナビゲーションドロワーにある各画面にはドロワーインジケーターが含まれている必要があります。 この例では、ナビゲーションドロワーアイコンの代わりに戻るボタンを使用します。 正しいオプション:







画面の外観のアニメーションも重要です。 ナビゲーションドロワーでアイテムを選択すると、新しい画面の外観のアニメーションは表示されません。 この場合の通常の動作は、ナビゲーションドロワーを「残す」ことと、画面の透明度が単純に滑らかに増加することです。



また、開発者には質問があるかもしれません-何を使用するのが良いか:ナビゲーションドロワーのセクションの異なるアクティベーションまたはフラグメント。 この質問に対する絶対的な正解はありません。 それは状況に大きく依存します。 しかし、基本的に、解決策はアプリケーションのさまざまな部分がどれほど複雑であるかによって決まります。





上記の規則に従って、ナビゲーションドロワーに表示される各画面にはドロワーインジケーターが含まれている必要があります。 この例では、詳細なコンテンツ(図)を含む特定の開いている画面にナビゲーションドロワーアイコンがありません。







代わりに、ボタンを使用して、アクションバーでアプリケーションの前のレベルに移動する必要があります。 正しいオプション:















最後のアンチパターンは、右ナビゲーションの使用です。 アプリケーションで右ナビゲーションを使用することは強くお勧めしません。 「見出しの詳細」モデルを使用する場合、見出しは常に右側に、アイテムの詳細情報は左側に配置する必要があります。ほとんどすべての人が左から右に読み、右から左に書く言語の場合のみ、右側のナビゲーションを実行できます。



正しいオプション:







これらのアンチパターンが、アプリケーションのナビゲーションと構造をよりよく考えるのに役立つことを願っています。 それらの一部は常に厳密に実行する必要はありません。そのため、まず既存のアプリケーションを調べて、使いやすいユーザーインターフェイステンプレートを実装できます。



All Articles