web-dev-qa-db-ja.com

複数行のタブがあっても大丈夫ですか?

私たちは職場でUIに取り組んでおり、特定の領域のタブの数を柔軟な幅にしたいと考えているため、特定の状況では、タイトルの長さとタブの数に応じて、タブの行が2または3行でも。

複数行のタブを配置しても問題ないかと思います。私にとっては、それがタブのメタファーを壊しているように見え、タブの場所の変更について心配する必要があります。

しかし、同時に、リストやアコーディオン以外の優れた選択肢があるかどうかはわかりません。

21
Damon

それは明らかにタブを壊します メタファー

Yahooの デザインパターンライブラリは明示的に述べています それらは単一行である必要があります:

サイトのブランドとヘッダーの下の水平バーにタブの単一行を表示する

そして、1999年にはかなり厄介な例がいくつかあります 情報アーキテクチャ会社のページ

別の Webアプリケーションでのタブパターンの使用に関する記事 は、さまざまな理由でその使用を推奨していません。

タブの複数の行は、特に目的のタブを見つけるのが難しい新規ユーザーにとって、混乱して威圧的です。さらに、画面の領域が損なわれ、タブを最前列​​に再配置すると、途方もない混乱と複雑さが生じます。

とは言っても、MS Officeで見たことがあるので、それは悪くないはずです。正しい?

enter image description here

更新:他のアプローチは次のとおりです:垂直タブ、カテゴリによるタブのグループ化、またはアイコン付きの前の画面。

enter image description here

enter image description here

27
Naoise Golden

私は1年前に同じ問題を抱えていて、次の解決策を講じました:

タブの幅がコンテナの幅より小さい場合、すべてのタブが表示されます。

enter image description here

タブがコンテナよりも広い場合、矢印が隅に表示され、クリックすると非表示のタブにアクセスできます。選択したタブは常に表示されます。

enter image description here

18
Emil

現在のタブを表す1つの行を追加することにより、複数の行を持つオプションを検討できます。たとえば、上の行にタブ「foo」があり、それを選択すると、タブは無効になり、下の行は単一のタブ「foo」を持つように変更されます。ただし、元のタブは移動しません。

これにより、メタファーをある程度維持しながら、タブを再配置する必要があるという問題が回避されます。物理ファイルフォルダーの内容を削除し、フォルダーはそのままにしておくようなものだと考えてください。

私はこれが行われるのを見たことがありませんが、もう1つのタブ行に十分な垂直方向のスペースがある場合、それは良い妥協かもしれません。

1
Bryan Oakley

MS Excelのようにタブが多すぎる場合にタブをスクロールすることもできますか?

それが最善のアプローチであると言っているのではなく、複数の行の代わりです。

1
CaffGeek

はい。このようなプレゼンテーションが許容されるEdgeのケースがあります。 MS Windowsのプロパティダイアログでは、少なくともWindows 95以降で使用されています。マルチプロトコルのインスタントメッセージングクライアントであるディグスビーは、チャットウィンドウの幅が狭すぎてすべての会話が1行に収まらない場合に使用します(その後、垂直スクロールになります)タブ行)。

とはいえ、インターフェイスが煩雑になるため、タブを2行以上にすることはお勧めしません。最初に情報を再編成してください。他に利用できるオプションがない場合は、タブを論理的に配置し、サイズを考慮して、Microsoftの複数行の例に従ってください。また、各タブタイトルの両側にほぼ同じ余白があることに注意してください。 enter image description here

0
dnbrv