决策指南 · 02

数值步进器和滑块怎么选?

一句话做出判断

数值步进器会按固定幅度增加或减少数字。滑块会在一段范围中选择位置。

少量又精确的调整,用数值步进器。大概位置比精确输入重要时,用滑块;仍要显示数字并支持键盘。

01

看看每个界面模式会做什么

先试试每个例子,再看它适合处理什么工作。

macOS Stepper

macOS 步进器

↗

macOS 步进器(Stepper)有增加和减少两个按钮,会用固定幅度调整有上下限的数值。

1 张票券
布局检查器把网格从四列改成五列。用户不必手动输入数字。
什么时候用
当数值有上下限、每次调整幅度小而有意义,而且用户通常只改一两步时使用。
什么时候不要用
避免用于宽广或连续范围、快速大幅调整,或在没有数字字段辅助时要求精确输入与比较。
代码里的名称
AppKit NSStepper / SwiftUI Stepper
打开完整指南
macOS Slider

macOS 滑块

↗

macOS 滑块(Slider)由轨道和可移动的滑块组成,用来在固定范围内自由调节数值,或按设定步长调节,也可以显示刻度。

声音编辑器把音量从静音调到最大。VoiceOver 也会播报数值。
什么时候用
当拖动范围并立即看到结果有助于操作时使用。可提供连续范围,或搭配清晰刻度和键盘操作的固定步长。
什么时候不要用
避免用于任意类别选项、无上限范围、安全关键的精度,或必须精确复现却没有同步数字字段的数值。
代码里的名称
AppKit NSSlider / SwiftUI Slider
打开完整指南
02

快速比较

界面模式最适合不适合代码里的名称
macOS 步进器macOS Stepper 当数值有上下限、每次调整幅度小而有意义,而且用户通常只改一两步时使用。 避免用于宽广或连续范围、快速大幅调整,或在没有数字字段辅助时要求精确输入与比较。 AppKit NSStepper / SwiftUI Stepper
macOS 滑块macOS Slider 当拖动范围并立即看到结果有助于操作时使用。可提供连续范围,或搭配清晰刻度和键盘操作的固定步长。 避免用于任意类别选项、无上限范围、安全关键的精度,或必须精确复现却没有同步数字字段的数值。 AppKit NSSlider / SwiftUI Slider
03

上线前检查

  1. 01

    先写下用户要完成什么事。

  2. 02

    测试键盘、焦点、触控、缩放、加载、空白与错误状态。

  3. 03

    不用鼠标悬停或动画,也要能取得相同信息。

  4. 04

    放入真实内容,并在小屏幕和大屏幕上测试。

04

可以直接复制的比较需求

团队还不知道该选哪一种界面模式时,可以复制这段需求。

请在 macOS 步进器(macOS Stepper)、macOS 滑块(macOS Slider) 中,为真实用户流程选出最合适的界面模式。判断规则:数值步进器会按固定幅度增加或减少数字。滑块会在一段范围中选择位置。。请写下任务、内容量和打断流程的代价,并检查键盘、触控、加载、错误与减少动态效果。说明选择理由,再沿用项目的设计系统,做出最小且无障碍的版本。

自行复制

浏览器无法自动复制。请选择下方文字,再自行复制。