web-dev-qa-db-ja.com

トグルボタンとタブ

タブの代わりにトグルボタンを使用する場合の問題は何ですか?アクションボタンとタブが同じ行を共有するデザインがあります。

アクションボタンが1行あります。この同じ行で、タブを使用してさまざまなページビューを表示します。これらのタブを従来のフォルダタブまたはトグルボタンとして表示するオプションがあります。これらの2つのオプションのうち、最も使いやすいのはどれですか。

2
stephenz

私にとって、トグルボタンは、デスクトップアプリケーションにうまく転送できないタッチスクリーンデバイス用に作成されたメタファーです。マウスボタンを押したままにすることは困難な動作ですが、タッチ、ホールド、スライドの相互作用と水平方向の動きを示します。

多数のトグルボタンを使用しないと、デザインによっては、ボタンがオンになっているモードを表現するのに苦労する場合もあります。たとえば、ボリュームのオン/オフ切り替えの場合、ユーザーが反対の状態を理解する必要なく、デザインに現在の状態が明確に表示されますか?

考えられる3つ目のオプションは、ページビューを表すアイコンが付いたボタンです。次に、クリックするとシンプルなメニューが2つのオプションとともに下にドロップされます。 1つのオプションの横にある「チェックマーク」アイコンは、現在の状態を示します。例としてスクリーンショットをご覧ください。enter image description here

0
Paul Wallas

アプリケーションの性質によっては、必ずしも問題がない場合もあります。 「フラット」スタイルのデザインの傾向は、ユーザーが機能を見つけるためにユーザーインターフェイスを探索することを奨励していることを意味します。このように、ヘルプマニュアルやガイドに目を通さなくても、機能を操作して学習できます。

覚えやすいようにトグルボタンとタブのデザインを区別し、それに応じてラベルを付けることをお勧めします。また、トグルボタンとタブの状態が競合するかどうか(つまり、一部のボタンが特定のタブで非アクティブになる)かどうか、およびユーザーがこれに気づくかどうかを検討する必要があります。情報とレイアウト階層のため、アクションボタンとタブを同じ行に配置することはおそらく最も一般的なデザインパターンではありませんが、特定の状況で正常に適用できるとは限りません。

1
Michael Lai

私の見立てでは:

  • トグルボタンはfor selection-つまり、ユーザーからデータを収集します(これを「オン」に設定し、これの代わりにこれを使用し、オプションのリストから選択します)など)アプリ内のユーザーの「場所」を変更する必要はありません。 たとえば、「青または赤が好きですか?」
  • tabsnavigationのためのものです。つまり、データを変更せずに、アプリケーションのさまざまな部分をユーザーに表示します(この画面を表示し、この「場所」に移動します)。 たとえば、「青が好きな人を表示」または「赤が好きな人を表示」
1

私はあなたが求めていることを理解していると思います。 BootstrapのNav製品をご覧ください。 TabsPillsの間で決定しようとしていますか?

http://getbootstrap.com/components/#nav

その場合、それは微妙な選択です。最大の違いは、タブが表示されているページビューに接続され、やや明確な関係が作成されることです。ピルは、タブを少し抽象化したものです。

タブは伝統的ですが、錠剤はより現代的でしょうか?あなたのビジュアルデザインがアフォーダンスをうまくサポートしているなら、錠剤と一緒に行ってください、しかしタブは誤解されることは決してありません。

あなたのコールデザイナー!

1
Itumac

@Sam Pierce Lollaの回答に同意します。もう1つ追加があります。

タブは異なるビューとして認識されます。つまり、ユーザーが別の場所に移動してからタブに戻ったときに、タブの状態が保持されることを期待できます。

これはトグルボタンについては言えません。持続性の強い相関はトグルボタンではありません。

  • 単一のコンポーネントの異なるビューがある場合は、トグルを使用できます。
  • まったく異なるセクション/ビューがある場合は、タブの方が適切です。
0
Sol