web-dev-qa-db-ja.com

UIにタブを表示する最良の方法

タブを追加する必要があるUIで作業しています。現在、すべて同じサイズのタブを追加していますが、各タブ内のテキストのサイズは異なる場合があります。以下に示すように、選択したタブは異なる色で表示されます。

enter image description here

しかし、UIを見ると、選択したペインとその関連領域の間にリンクがありません。また、各タブ内のテキストのサイズに応じて異なるサイズのタブを表示するように求められますが、UIに関しては、異なるサイズのタブが奇妙に見えます。現在のタブもボタンに似ています。

そのようなタブに対処するためのいくつかのより良いアイデアを提案できますか？また、Appleタブに関するUIガイドラインを読みましたが、関連するものは何も見つかりませんでした。UIに最適なタブを用意するのを手伝ってください。

gui-designuser-behaviorusertabshuman-interface-guideline
6
Ayse

これからヒントを得てください。このスキームはほぼどこでも守られています。

enter image description here

選択されたタブシームレスにコンテンツ領域とマージされます他のタブは一般的に暗い色調になります。

15
kBisla

これは「タブ付きドキュメントインターフェース」と呼ばれているので、グーグルできます。

私の経験から：

  1. アクティブなタブの背景色は、ページの背景色と一致する必要があり、2つを区切る線はありません。

  2. すべてのタブは同じ最大幅である必要があり、フィットする可能性のあるより多くのタブが開かれると、タブ幅は減少するはずです。プログラムで使用される通常のタブの数によっては、タブの幅が小さすぎて、収まらないタブのメニューに右端のボタンを追加する必要がある場合があります。

  3. もう一度言いますが、すべてのタブは同じ幅にする必要があります。このように、ユーザーはタブ間の移動距離を記憶し、マウスを使ってタブをほぼ反射として切り替えることができます。可変幅のタブがある場合、運動をクリックするたびに時計になります。

  4. 非アクティブなタブの背景色は濃くする必要があります。

  5. 他のタブを開くオプションを選択するメニューを備えた、閉じられない固定された最初のタブを持つことができます。このタブは、他のタブの半分の幅にすることも、「ホーム」アイコンとして十分な幅にすることもできます。

  6. タブのキャプションは中央揃えではなく左揃えにする必要があります。これらはボタンのキャプションではなくタブ名です。タブ名がすべて左揃えになっていると、タブ名が読みやすくなります。

  7. タブ幅に収まらない長いタブキャプションは省略記号で短くする必要があり、ツールチップは完全なキャプションで利用できる必要があります。

  8. オプションで、ユーザーはタブをドラッグアンドドロップして並べ替えることができます。タブの右側の境界近くに閉じるボタンが必要です。

チェックアウトする3つの主要なTDIの例：Internet Explorer、Firefox、およびGoogle Chrome。

Actual example from my TDI Class for Visual FoxPro

6
Carlos Alloatti

このようなものはどうですか

enter image description here

実際には、ここで選択したタブは選択していない他のタブとは異なる必要があると言いたいのです。これにより、選択したタブのサイズ、テキストの色、タブの背景色が異なるはずです。それが私が良いと思うものです。

3
keshav

簡単な方法は、実際にタブの色を反転させて、選択したタブの背景が白になり、フォントの色が黒になるようにすることです。これにより、表示領域はタブと同じ色になり、ユーザーはリンクを作成できます。

タブがボタンに似ているという意味がわかりません。彼らはクリックできることを示す必要があるので、これは大きな問題ではないと思います。おそらく、タブラベルを左揃えにして、見栄えがよくなるかどうかを確認してみてください。

2
Michael Lai

サイズの問題について：

ラベルの80〜90％が収まるタブのサイズはありますか？その場合は、そのサイズをデフォルトとして使用することをお勧めします。大きなタブの場合は、コンテンツに応じて大きくすることができます。そうすれば、ほとんどのユーザーにとって適切なソリューションが得られ、タブの名前が大きいいくつかの選択されたものに対応することができます。

タブとコンテンツの区別について：

それは本当にグラフィックデザインにかかっています。他のコメント投稿者の一部が指摘したように、ドキュメント内のタブの背景色をフローさせることは、視覚的な表示を提供するために最も一般的に使用されます。これがモックアップの例です。

enter image description here

ただし、問題により適した代替手段があります。以下はOutlookの例ですが、選択できる項目はたくさんあります。

  • Microsoftリボンで適用されるタブの通常の使用。 'Bestand'（ファイル）メニューの異なる色に注目して、それがキータブであることを明確にしてください。 

  • タブ付きナビゲーションメニュー。コンテンツとタブ項目の間のリンクを視覚化する別の方法に注意してください。

enter image description here

  • タブリスト：これは、大量のタブ（5以上）を処理する良い方法です。タブ付きページが多すぎて1行に表示できない場合は、タブの数を再検討するか、このようなリストの使用を開始する必要があります。
    enter image description here

これがあなたがあなたのデザインの問題を処理する方法についていくつかのアイデアを得ることを助けることを望んで

1
GWv