各ユースケースに最適なスケールステップを学びましょう。
各スケールには 12 のステップがあります。各ステップは、少なくとも 1 つの特定のユースケース向けに設計されています。
この表は、各ステップの最も一般的なユースケースの簡単な概要です。ただし、例外や注意点も多く、以下で詳しく説明します。
ステップ | ユースケース |
|---|---|
1 | アプリの背景 |
2 | 控えめな背景 |
3 | UI 要素の背景 |
4 | ホバーした UI 要素の背景 |
5 | アクティブ/選択された UI 要素の背景 |
6 | 控えめな境界線と区切り線 |
7 | UI 要素の境界線とフォーカスリング |
8 | ホバーした UI 要素の境界線 |
9 | ソリッド背景 |
10 | ホバーしたソリッド背景 |
11 | 低コントラストテキスト |
12 | 高コントラストテキスト |
1
2
ステップ1と2は、アプリの背景と控えめなコンポーネントの背景用に設計されています。目指す雰囲気に合わせて、これらを相互に使用できます。
適切なアプリケーションには、以下が含まれます。
3
4
5
ステップ3、4、および5は、UI コンポーネントの背景用に設計されています。
3は通常の状態用です。4はホバー状態用です。5は、押下状態または選択状態用です。コンポーネントのデフォルト状態の背景が透明な場合は、ホバー状態にステップ3を使用できます。
6
7
8
ステップ6、7、および8は、境界線用に設計されています。
6は、インタラクティブではないコンポーネントの控えめな境界線用に設計されています。たとえば、サイドバー、ヘッダー、カード、アラート、区切り線などです。7は、インタラクティブなコンポーネントの控えめな境界線用に設計されています。8は、インタラクティブなコンポーネントとフォーカスリングの強い境界線用に設計されています。9
10
ステップ9と10は、ソリッド背景用に設計されています。
ステップ9は、スケール内のすべてのステップの中で最も彩度が高くなっています。言い換えれば、最も純粋なステップ、つまり白または黒の混合量が最も少ないステップです。9は最も純粋なステップであるため、幅広い用途があります。
ステップ10は、ステップ9がコンポーネントの通常状態の背景である場合に、コンポーネントのホバー状態用に設計されています。
11
12
ステップ11と12は、テキスト用に設計されています。
11は、低コントラストテキスト用に設計されています。12は、高コントラストテキスト用に設計されています。