ステッパー対スライダー
短い答え
ステッパーは、決まった刻みで数字を変えます。スライダーは、範囲の中から1つの場所を選びます。
小さく厳密な変更にはステッパーを使います。正確な数字を入力するよりもおおよその位置が重要な場合はスライダーを使います。常に値を表示し、キーボードをサポートします。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
macOS Stepper
↗ macOS Stepper
macOS Stepper には、足すボタンと引くボタンが一つずつあるよ。決まった範囲内で、一定の刻みずつ値を変えるよ。
レイアウトの確認ツールが、gridの列を4つから5つに変えます。ユーザーは数字を入力しなくて済みます。
- 以下の場合に使用します
- 明確な制限と小さなステップを伴う数値にはこれを使用してください。人々が一度に1または2ステップずつ変更すると最もうまく機能します。
- 以下の場合は使用しないでください
- 幅広すぎる、滑らかすぎる範囲、大きく速い変化は避ける。厳密な値を入力または比較する必要がある場合は、数字欄を追加する。
- コードで使用する名前
AppKit NSStepper / SwiftUI Stepper
macOS Slider
↗ macOS Slider
macOS Slider には、トラックと動かせるつまみがあるよ。決められた範囲内で値を選ぶよ。自由に動かしたり、決まった刻みで動かしたりして、目盛りを見せることもあるよ。
音声エディターは、音量を無音から最大まで動かせます。VoiceOverにもその数字が読み上げられます。
- 以下の場合に使用します
- 範囲をドラッグして、一度に結果を見ることが役立つ場合に使用してください。スムーズな範囲またはティックやキーボードキーで明確なステップをサポートしてください。
- 以下の場合は使用しないでください
- カテゴリ、無制限の範囲、安全上重要な精度にはそれを使用しないでください。正確な値を繰り返す必要がある場合は、対応する数字フィールドを追加してください。
- コードで使用する名前
AppKit NSSlider / SwiftUI Slider
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| macOS SteppermacOS Stepper | 明確な制限と小さなステップを伴う数値にはこれを使用してください。人々が一度に1または2ステップずつ変更すると最もうまく機能します。 | 幅広すぎる、滑らかすぎる範囲、大きく速い変化は避ける。厳密な値を入力または比較する必要がある場合は、数字欄を追加する。 | AppKit NSStepper / SwiftUI Stepper |
| macOS SlidermacOS Slider | 範囲をドラッグして、一度に結果を見ることが役立つ場合に使用してください。スムーズな範囲またはティックやキーボードキーで明確なステップをサポートしてください。 | カテゴリ、無制限の範囲、安全上重要な精度にはそれを使用しないでください。正確な値を繰り返す必要がある場合は、対応する数字フィールドを追加してください。 | AppKit NSSlider / SwiftUI Slider |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
04
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをmacOS Stepper (macOS Stepper)、macOS Slider (macOS Slider)から選んでください。このルールを使用してください: ステッパーは、決まった刻みで数字を変えます。スライダーは、範囲の中から1つの場所を選びます。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。