出自UXGuide.net

滑块

Sliders

目录 1 它用在这里合适吗？ 2 设计规范 3 推荐尺寸与间距 4 标签 4.1 滑块标签 4.2 范围标签 4.3 值标签 5 文档编写

滑块（Slider）用于在一个连续的取值范围内进行选择。滑块具有显示范围的条块以及显示当前值的指示器。刻度标记是可选的，用于显示数值。

典型的滑块

注：与布局相关的设计规范请参考各自相应的章节。

它用在这里合适吗？

当你希望用户对已定义的连续值（如音量或亮度）或某范围内的离散值（如屏幕分辨率设置）进行设定的话，应当使用滑块。

当你知道用户会把数据视为相对量而非数据值的时候，滑块是一个很好的选择。例如，用户考虑将音量调节为低或中等——而不是把值设为 2 或者 5。

考虑下列问题以进行判断：

• 该设置是否像一个相对量？如果不是，则应使用选项按钮或者是下拉或单选列表。
• 该设置是否是精确可知的数值？如果是，则应使用数字文本框。
• 用户是否更需要在更改设置的同时立即得到反馈？如果是，应使用滑块，也可以与文本框一起使用。例如，用户使用滑块可以很方便地选择颜色，因为他们改变色相、饱和度、亮度的时候可以立即看到效果。
• 该设置范围内是否包括四个或四个以上的值？如果不是，则应使用选项按钮。
• 用户是否能够对值进行更改？滑块是用于用户交互的。如果用户根本无法对值进行更改，则应改用只读的文本框。

如果符合下列情况，则应当使用数值文本框：

• 屏幕空间紧张。
• 用户更愿意使用键盘。

如果符合下列情况，则应当使用滑块：

• 用户需要即时反馈。

设计规范

• 使用自然的方向。例如，如果滑块所表现的真实世界中的值通常是垂直显示的（比如温度），则应当使用垂直方向。
• 调整滑块的方向以符合用户的文化习惯。例如，西方文化中的阅读习惯是从左至右，因此对于水平滑块来说，应当把最低值放在左侧，而最高值放在右侧。对于阅读习惯从右至左的文化，则正好相反。
• 调整控件尺寸以便于用户设置想要的值。对于离散值设置，确保用户能够使用鼠标方便地选择任何值。
• 如果取值范围很大且用户很可能选择范围某端的值的话，考虑使用非线性比例。例如，时间值可能是 1 分钟、1 小时、1 天、1 个月。
• 如果可行，应当立即或当用户完成选择后给予反馈。例如，Microsoft® Windows® 音量控件会鸣叫以指示音量结果。
• 使用标签显示值范围。

例外：如果滑块是垂直方向的，且顶端的标签为“最大”、“高”、“更多”或其他等价情况的话，你可以省略其他标签，因为其含义已经明确。

在这个示例中，滑块的垂直方向使范围标签没有必要。

• 当用户需要知道大致的设置值时，应当使用刻度标记。
• 当用户需要知道他们为该设置所选的准确值时，应当使用刻度标记及值标签。如果用户需要知道单位以明确设置的话，应当始终显示值标签。

在这个示例中，标签用于明确指示所选值。

• 对于水平方向的滑块，应当将刻度标记放在滑块下方。对于垂直方向的滑块，应当在西方文化下将刻度标记放在右侧；对于左右向左方向的文化，则正好相反。
• 将值标签全部放在滑块控件的下方以明确关系。

错误：

在这个示例中，值标签没有在滑块下对齐。

• 当禁用滑块时，应当同时禁用所有关联的标签。
• 不要为相同的设置同时使用滑块和数值文本框。仅使用更为合适的控件。

例外：当用户既需要立即反馈又需要设置精确数值的能力时才同时使用两种控件。

• 不要将滑块用作进度条。
• 不要更改滑块指示器的默认大小。

错误：

在这个示例中，其尺寸比默认的要小。

正确：

在这个示例中，使用的是默认尺寸。

• 无须为每个刻度标记都添加标签。

推荐尺寸与间距

用于滑块的推荐尺寸与间距。

标签

滑块标签

• 应当使用以冒号结尾的静态文本，或者是不带句末标点的分组框标签。
• 为每个标签分配唯一的访问键。相关设计规范，参见键盘。
• 使用句子大写样式。
• 对于静态文本标签，应将标签放置于滑块的左侧或上方，并将其与滑块的左边对齐（或者是左侧的范围指示，如果显示的话）。

范围标签

• 应当为滑块范围的两端添加标签，除非垂直方向使其不再必要。
• 如果可能的话，每个标签只用一个词。
• 不要使用句末标点。
• 确保这些标签是描述性且并列的。例如：最大/最小、较多/较少、低/高、弱/强。
• 使用句子大写样式。
• 不要分配访问键。

值标签

• 如果需要值标签，则显示在滑块下方。
• 将文本与控件居中对齐，并包括其单位（如像素）。

在这个示例中，值标签在滑块下方居中，并包含其单位。

文档编写

当提及滑块时：

• 原样引用标签文本，包括其大小写及“slider（滑块）”字样，但无须包含访问键下划线和冒号。
• 使用“move（移动）”描述用户的交互行为。
• 应尽可能为标签文本应用粗体样式。对于英文来说，仅当需要避免歧义时才在其两侧添加引号；对于中文来说，则应总是使用引号。

示例：To increase your screen resolution, move the Screen resolution slider to the right.（要提高屏幕分辨率，将“显示分辨率”滑块向右移动。）