web-dev-qa-db-ja.com

タブ付きペイン:複数行スタイル。ジャンプするかしないか?

タブ付きペインを持つほとんどのアプリケーションは、複数行のタブを処理する標準のWindowsスタイルを使用します。つまり。後ろの行のタブをクリックすると、WHOLE行が前にジャンプし、前の行が後ろにジャンプします。例えば ​​:

enter image description here

「ハードウェア」をクリックすると、WHOLEの後ろの行が前に移動し、前の2つのタブが後ろに移動します。

最初に私は言いたいだけです...私はそれが嫌いです。物事の視覚的な配置は乱雑になっており、それは私に本当の頭痛を与えます。

これには別の方法があります。たとえば、Java Swingの場合、後ろの行は後ろに留まりますが、「ハードウェア」タブの色/強調表示が異なるため、ユーザーが見ているものであることをユーザーに明確に伝えます。フォルダーのメタファーを少し壊すことは知っていますが、脳の方がはるかに簡単だと思います。

タブ付きペインに関する人々の意見は何ですか?そして、このWindowsジョルティングジャンプスタイルのタブ付きペインには名前がありますか?クライアントでいくつかの命名法を使用できるようにしたい。

4
Oliver Watkins

実際には多くの解決策がありますが、それはこれらのタブの使用に依存します。

前述のとおり、理想的なのはラベルを短くするか、複数のタブを1つに再配置することですが、多くの場合簡単ではありません。

他の方法は、例えば左のメニューをVLCとして使用することです(同じ使い方ではありませんが、何に到達したいかによります)

VLC Left menu

または、矢印付きのメモ帳スタイル(Webブラウザーによく似ています)。

enter image description here

または、クリエイティブな場合は、多くのWebサイトのようにサブレベルのタブを使用できます。ユーザーのすべての習慣を妨げることなく、何かできることが確実にあります。

enter image description here

そして、balsmiqで最後にもう1つ、タブの後に右側のリストボックスを使用します。 enter image description here

1
François D.

まず、タブをグループ化できる場合、間違いなくそれを実行してください。 「一般」または「詳細」ページにいくつかのタブのコンテンツを配置することで逃げることもできます。

しかし、場合によっては、これは単に不可能です。

Microsoftの恐ろしい方法のいくつかの代替オプションを次に示します。

最後のドロップダウンメニュー

MoreOtherAdvancedドロップダウンタブで重要性の低いオプションを非表示にします。

Addition of the More dropdown menu

スクロール可能なタブバー

これは複数の方法で実装できます:

  • 矢印をタップするとバーがスクロールします
  • バーを左にドラッグしてスクロール
  • ページを左にドラッグしてスクロール

Tab overflow pagination, Step 2

サブメニュー/サブタブ(?)

タブは実際にはメニュードロップダウンに似ています

Menu expanded

参照: Google Material Design

1
Vince Caregnato

タブ名を短くするだけで何か問題がありますか... one line of tabs ...またはタブフォントを縮小しますか?

大量のタブがある場合、おそらく象徴的なアイコンで、1つまたは2つの文字のスペース内の各タブの目的を示すことができます。

0
Henry Taylor

通常、コンテンツを2つまたは3つのタブにグループ化し、それらの主要なタブ内でさらにオプションを提供できます。他のタブ内でオプションを「非表示」にすることについて懸念があるかもしれませんが、一般的には、最も一般的なユースケースを解釈/学習して、それらをできるだけ明確に示すことができます。

タブの数が不明/時間の経過とともに増加する場合は、左/右の垂直タブを検討して、ユーザーが下にスクロールしてさらにタブにアクセスできるようにすることもできます。この事件は私の考えではありそうもない。

0
Adnan Khan

タブ付きペインの跳躍ジャンプスタイルには名前があります:悪いデザイン。

複数行のタブがあると、ユーザーがどのタブにアクセスしたかを覚えるのが非常に難しくなります。さらに、これがどのように機能するかを理解しようとすると、多くの時間がかかります。つまり、時間を浪費することになります。ここでは他のデザインを選択する必要がありましたが、代わりにコンテンツを簡略化またはグループ化してみてください。

0
aslet