滑杆 (设计基础)

备注

此设计指南是针对 Windows 7 创建的,并且尚未更新 Windows 的更新版本。 本指南中的大部分内容仍适用,但演示和示例并不反映我们 当前的设计指导

使用滑块时,用户可以从一系列连续的值中进行选择。 滑块具有显示范围的栏和显示当前值的指示器。 可选刻度线显示值。

显示条形、滑块和刻度线的图

典型滑块。

备注

布局 相关的准则显示在单独的文章中。

这是正确的控件吗?

如果希望用户能够 将定义的连续值 (如音量或亮度) 或一系列离散值 (如屏幕分辨率设置) , 请使用滑块。

当你知道用户用户将该值视为相对数量而不是数值时,滑块是最好的选择。 例如,用户考虑将其音量设置为低或中—而不是考虑将该值设置为 2 或 5。

在决定之前,请考虑以下问题:

  • 该设置是否是相对数量? 如果不是,则使用 单选按钮,或使用 下拉 列表或单选 列表
  • 该设置是否为确切的已知数值? 如果是这样,请使用 数值文本框
  • 用户是否会从设置更改效果的即时反馈中获益? 如果是,请使用滑块。 例如,用户可以通过立即查看色调、饱和度或亮度值更改的效果,从而更加轻松地选择颜色。
  • 该设置是否包含四个或更多值? 如果不是,请使用单选按钮。
  • 用户是否可以更改该值? 滑块用于用户交互。 如果用户不能更改该值,请改用只读 文本框

如果可以使用滑块或数字文本框,请在以下情况下使用数字文本框:

  • 屏幕空间紧凑。
  • 用户可能更喜欢使用键盘。

在以下情况下使用滑块:

  • 用户将获得即时反馈所带来的好处。

指南

  • 使用自然方向。 例如,如果滑块代表一个真实值(通常垂直显示),例如温度,请使用垂直方向。

  • 调整滑块的方向,以反映用户的文化。 例如,西方区域性从左到右读取,因此对于水平滑块,将范围的低端置于左侧,将高端置于右侧。 对于从右到左读取的区域性,执行相反的操作。

  • 调整控件的大小,以便用户可以轻松地设置所需的值。 对于具有离散值的设置,请确保用户可以使用鼠标轻松选择任何值。

  • 如果值的范围很大,并且用户可能会在该范围的一端选择值,请考虑使用非线性刻度。 例如,时间值可能是1分钟、1小时、1天或1个月。

  • 如果可行,请在用户进行选择时或之后提供即时反馈。 例如,Microsoft Windows 音量控制发出嘟嘟声,指示产生的音频音量。

  • 使用标签显示值范围。

    异常: 如果滑块为垂直方向并且顶部标签为 "最大值"、"高"、"更大" 或 "最大值",则可以省略其他标签,因为含义清晰。

    垂直滑块图

    在此示例中,滑块的垂直方向会使范围标签成为不必要的。

  • 当用户需要知道设置的近似值时,请使用刻度线。

  • 当用户需要知道所选设置的准确值时,请使用刻度线和值标签。 如果用户需要知道设备的设置,请始终使用值标签。

    显示选定像素数的滑块图

    在此示例中,标签用于清楚地指示选定的值。

  • 对于水平方向的滑块,在滑块下放置刻度线。 对于垂直方向的滑块,将刻度线置于适用于西方文化的右侧;对于从右到左读取的区域性,执行相反的操作。

  • 将值标签完全置于滑块控件的下方,使关系清晰。

    不正确:

    一个长度超过其滑块的标签图

    在此示例中,值标签在滑块下不对齐。

  • 禁用滑块时,还将禁用任何关联的标签。

  • 不要同时使用滑块和数字文本框来实现相同的设置。 只使用更合适的控件。

    异常: 当用户同时需要即时反馈和设置精确数值时,可以使用这两个控件。

  • 不使用滑块作为进度指示器。

  • 请勿更改滑块指示器的大小(默认大小)。

    不正确:

    小于默认值的滑块图

    在此示例中,将使用小于默认值的大小。

    正确:

    显示默认滑块的图

    在此示例中,使用默认大小。

  • 请勿标记每个刻度线。

推荐的滑块大小调整和间距图

建议的滑块大小和间距。

标签

滑块标签

  • 使用以冒号结尾的静态文本标签,或使用无结束标点的分组框标签。
  • 为每个标签分配一个唯一的访问密钥。 有关分配准则,请参阅 键盘
  • 使用句式大写。
  • 将滑块标签放到滑块的左侧,或上方,并与滑块的左边缘对齐 (或其左范围标识符(如果有)) 。

范围标签

  • 标记滑块范围的两端,除非垂直方向使得不必要这样做。
  • 如果可能,请为每个标签使用单词。
  • 不要使用结束标点符号。
  • 确保这些标签具有描述性且相对应。 示例:最大/最小,更多/更少,高/低、温和/高声。
  • 使用句式大写。
  • 不要分配访问密钥。

值标签

  • 如果需要值标签,将它显示在滑块下。

  • 相对于控件居中放置文本,并包括单位(例如像素)。

    位于滑块下的标签图

    在此示例中,值标签位于滑块下,并包含单位。

文档

引用滑块时:

  • 使用确切的标签文本(包括其大小写),并包含 "单词" 滑块。 不要包含访问键下划线或冒号。
  • 若要描述用户交互,请使用 move。
  • 如果可能,请使用粗体文本设置标签的格式。 否则,仅在需要时才将标签放在引号中以防止混淆。

示例:若要增加屏幕分辨率,请将 屏幕分辨率 滑块向右移动。

术语表