web-dev-qa-db-ja.com

モバイル用のカルーセルタブに代わるものはありますか?

私はエンタープライズ向けのモバイルアプリケーションを設計しているため、デスクトップビューでは、下の画像にあるようにタブを使用しています。モバイルでも同じように設計したいので、カルーセルタブナビゲーションを使用する場合は、スワイプして最後のタブにアクセスする必要があり、見つけにくくなる可能性があります。

enter image description here

モバイルビュー

  1. カルーサルタブナビゲーション

enter image description here

  1. ドロップダウンの多いタブ

enter image description here

だからこれにより良い代替があるかどうか知りたいですか?

3
Ashish Mohan

ダッシュボードを配置する方法はいくつかあります。最適なコントロールは、状況によって異なります。

  • カルーセルタブ:2〜3つのオプションをすばやく切り替えることができます。他のオプションは非表示です。一般に、タブはオプションを常に表示したままにするため、オプションをすばやく簡単に切り替えることができます。一方、貴重なスペースを取る。

  • 「その他」ドロップダウンのあるタブ:2つの最も一般的なアクションをすばやく切り替え、他のすべてのオプションは非表示になります。ユーザーがカルーセルタブに慣れていない場合は、ドロップダウンを使用して非表示のオプションを簡単に見つけることができます。 「一般的な」ダッシュボード(タブ上のダッシュボード)とそれほど重要ではない(ドロップダウン内の)ダッシュボードも区別します。これらを同等に重要なものとして伝えたい場合、これは適切ではない可能性があります。

  • 単一のドロップダウン:すべてのオプションは同じように重要です。ドロップダウンは、タブバーよりもスペースが少ない可能性がありますが、最初は選択されたオプションのみが表示されます他のすべてのオプションは表示されませんが、ドロップダウンが一般的に使用されているため、発見可能性はそれほど大きな問題ではありません。オプションを切り替えるには、常に2タップ/クリックが必要です。ドロップダウンを使用する場合は、まずNielsen Norman Groupの これらのガイドライン を必ずお読みください。

  • ハンバーガーメニュー:上部隅の1つにあるハンバーガーボタン。クリック/タップするとメニューが開きます。上記のすべてのオプションよりも使用するスペースが少ない可能性がありますが、ダッシュボードの選択メカニズムが初期画面から完全に隠されているため、発見しにくくなります( ハンバーガーメニュー )。

詳細とインスピレーションについては、この記事の モバイルナビゲーションの基本パターン についてお勧めします。

要約するには:状況によっては、さまざまなコントロールが適している場合があることに注意してください。適切な解決策を探す前に、ここで特定の状況について考えてください。発見可能性は方程式の1つの要素にすぎません。これらのオプションの視覚的な重み/「重要性」を考慮することもできます。他よりも一般的に使用されるオプションはありますか、クリック数、画面の面積、内部の一貫性(アプリ内の一貫性)、外部の一貫性(他の類似アプリとの一貫性)など。

1
QWERTZdenker

うーん、ウィジェットが表示する情報の量によって異なりますが、100%に1つを使用するのはかなりのスペースです。

  1. このタイプのコントロールを使用して、ユーザーが選択する機会を与え、それに適したリストを表示できます。

enter image description here

  1. タブ-の時点で、材料設計に基づいているため、このシステム設計では、使用した方法は必ずしも適切ではありません。

enter image description hereenter image description here

0
Piotr Żak