タブとセグメントコントロールの比較
短い答え
タブはコンテンツのセクション間を切り替えます。セグメント化されたコントロールは同じビュー内で小さなモード、フィルター、または値を変更します。
別々のコンテンツセクションにはタブを使用します。同じ内容を変更する短い選択肢がいくつかある場合は、セグメント化されたコントロールを使用します。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
Tabs
↗ タブ
タブはラベルを使って、1つの共有パネル内のコンテンツを切り替えます。メインタスクは開いたままです。
概要、アクティビティ、および権限は、同じプロジェクトを開いたまま、下のパネルを変更します。
- 以下の場合に使用します
- ラベルを常に表示しておきたい同じレベルのセクションがいくつかある場合、タブを使用します。
- 以下の場合は使用しないでください
- 関連のないページへの小さなリンクとしてタブを使用してはいけません。
- コードで使用する名前
role="tablist"
Toggle Group
↗ トグルグループ
オンかオフにできるボタンの、ラベルの付いたグループです。一つ、あるいは複数の選択肢を押したままにできます。
トグルグループ
テキストエディターでは、「太字」と「斜体」を同時にオンにできます。それぞれのボタンが押されているかどうかを伝えます。
- 以下の場合に使用します
- 少数の小さく、元に戻せるモードで、現在の状態を表示する必要がある場合にこれを使用してください。
- 以下の場合は使用しないでください
- 選択肢が1つだけ提出できる場合はラジオボタンを使用してください。通常のフォーム選択肢にはチェックボックスを使用してください。
- コードで使用する名前
button[aria-pressed] in a labeled group
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| タブTabs | ラベルを常に表示しておきたい同じレベルのセクションがいくつかある場合、タブを使用します。 | 関連のないページへの小さなリンクとしてタブを使用してはいけません。 | role="tablist" |
| トグルグループToggle Group | 少数の小さく、元に戻せるモードで、現在の状態を表示する必要がある場合にこれを使用してください。 | 選択肢が1つだけ提出できる場合はラジオボタンを使用してください。通常のフォーム選択肢にはチェックボックスを使用してください。 | button[aria-pressed] in a labeled group |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
04
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをタブ (Tabs)、トグルグループ (Toggle Group)から選んでください。このルールを使用してください: タブはコンテンツのセクション間を切り替えます。セグメント化されたコントロールは同じビュー内で小さなモード、フィルター、または値を変更します。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。