Windows桌面应用程序设计指南(控件篇14-滑动条)

用户使用滑动条在一系列连续值中进行选择。滑动条包含一个表示范围的数值栏、一个指示当前值的指针,以及一个可选的刻度标记。


一个典型的滑动条

何时使用该控件

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

当用户能理解当前的值是相对数量而不是绝对数值的时候,使用滑动条是一个很好的选择。例如调节音量时,用户在意的是将音量调到低或者中等,而不会关注音量是2还是5。

考虑以下几点:

  • 需要设置的是否是相对的值?如果不是,使用单选按钮、下拉控件或者单选列表。
  • 需要设置的是否是一个明确的数字值?如果是,使用数字文本框。
  • 变更设置时的即时反馈是否对用户有帮助?如果这样,使用滑动条。例如在选择颜色时,用户如果能实时看到色相、纯度和明度的变化效果,选择起来会更直观。
  • 可设置值是否超过四个?如果没有,使用单选按钮。
  • 用户可以对值进行更改吗?滑动条的作用是供用户交互操作使用。如果用户不能自行更改值的话,使用只读的文本框代替。

当使用滑动条和数字文本框都可以时,以下情况倾向于使用数字文本框:

  • 屏幕空间有限
  • 用户更倾向于使用键盘
    以下情况则使用滑动条:
  • 变更设置的即时反馈对用户有帮助

设计指南

  • 使用更自然的方向。例如,若滑动条代表的值在现实世界中就是竖向表示的(例如温度),则使用竖直方向滑动条。

  • 根据目标用户的文化背景设置滑动条方向。例如,西方文化圈的阅读顺序是从左至右,所以对于水平滑块来说,最小值放置在最左边,最大值放置在最右边。而对于阅读顺序从右至左的国家和地区,则需要相反设置。

  • 合理设置控件尺寸,保证用户能方便地设置到理想的值上。对于离散值的设置,确保用户能使用鼠标选择到想要的值。

  • 如果值的范围很大,而且用户很有可能去选择在范围某一端的数值,考虑将滑块标尺设置为非线性的。例如,时间刻度尺可以设置为1分钟,1小时、1天或1个月。

  • 如果可行,在用户做出选择时或之后立即给予反馈。例如,microsoftwindows音量控制器在音量调整后会立即发出哔哔声以表示调整结果。

  • 使用标签文字显示值的范围。

例外: 如果滑块是垂直方向的,顶部的标签是最大值、最高、更多,或者类似文字,你可以省略其他的标签,因为意思很清楚。


示例
  • 当用户需要知道设置的大概数值时,使用刻度标尺。

  • 当用户需要知道设置的确切数值时,使用刻度标尺以及表明值范围的文字标签。当用户需要知道设置值的单位以保证设置正确时,一定要使用文字标签进行说明。

    该例中,文字标签显示了用户选择的确切数值

  • 在水平方向的滑动条中,刻度标尺放置在滑动条下方。对竖向的滑动条,从左到右阅读习惯的国家和地区,刻度标尺放在滑动条右边;从右至左的地区则相反。

  • 将值标签完全放置于滑动条下方,以明确逻辑关系。

    错误示例:没有完全放置于滑动条下方的值标签文字会引起歧义

  • 禁用滑动条时,也要同时禁用所有相关的标签。

  • 对一个设置,不要同时使用滑动条和数字文本框。选择更合适的那个使用。
    例外情况: 当用户既需要即时反馈,又需要设置精确数值的能力时,同时使用这两个控件。

  • 不要使用滑动条作为进程指示器。

  • 不要更改滑动指针的默认尺寸。

    错误示例:指针过小

    正确示例:默认尺寸

  • 不要对每个刻度都标注数值标签。

建议尺寸和间距

滑动条的建议尺寸和间距

标签

滑动条标签

  • 使用以冒号结尾的静态文本标签,或者使用没有结尾标点符号的分组框标签。
  • 为每个标签分配一个唯一的访问键。
  • 使用句式大小写规则。
  • 滑动条标签放置在滑动条的左边,或在滑动条的上方与其或其最左边范围的标识符左对齐。

范围标签

  • 除了垂直方向的滑动条不需要,横向滑动条的的两端都需要标出范围。
  • 如果可能的话,每个标签只使用单词表达。
  • 不要在结尾使用标点符号。
  • 确保这些标签是描述性、并且结构是平行的。例如: 最大 / 最小值,多 / 少,低 / 高,柔和 / 响亮。
  • 使用句式大小写规则。
  • 不要给范围标签分配存取键。

数值标签

  • 如需要展示数值标签,将它放置于滑动条下方。
  • 将文本相对于控件居中并包含单位(例如像素)。


    示例:数值标签相对控件居中

说明

在提到滑动条时:

  • 使用确切的标签文本,包括其大小写,并包括单词 slider | 滑动条文字描述。 不要包含访问键下划线或冒号。
  • 要描述用户交互,请使用 move(滑动)。
  • 如果可能,使用粗体文本格式化标签。 否则,只有在需要时才将标签加上引号,以防混淆。
    示例:要提高屏幕分辨率,请将屏幕分辨率滑动条向右滑动。

你可能感兴趣的:(Windows桌面应用程序设计指南(控件篇14-滑动条))