通过上下（旋转）控件，用户可以单击箭头按钮，渐进地更改其关联的数字文本框中的值。上下（旋转）框（spin box）指的是一个文本框及其相关的旋转三角符号控件的组合。

一个典型的上下控件

用户通常更喜欢上下控制，因为他们可以在不移动鼠标的情况下对数据进行更改。当旋转控件与文本框配对出现时，用户可以直接在文本框中键入或粘贴输入数据，此时旋转控件的使用是可选的。

尽管上下控件是用来输入数字的，但也可以不完全是纯数字。输入内容可以是十进制数，可以带有负号、分隔符(如冒号或连字符)和单位修饰符。

何时使用该控件

思考以下问题：

• 该控件是否用来输入数字？如果不是，请使用其他控件（如下拉列表或滑块等）在一系列固定值中进行选择。使用滚动条进行滚动操作。

• 用户是否认为值是一个相对量、而不是一个绝对数字？如果这样，请使用滑动条代替。上下控件仅用于明确的已知数值。例如，用户会想将音量调高或调低，但不会关心音量值是2还是5。

• 控件是否需要和文本框配套使用？如果不是，不要使用上下控件。上下控件不能单独使用，也不能和除了文本框之外的其他控件结合使用。
  

  错误示例

• 连续范围内的值都有效吗? 如果不是，请使用含有所有有效值的下拉列表。
  

  示例：硬盘驱动数量有效值有限，因此下拉菜单是更好的选择

• 上下控件的使用是否高效？上下控件主要适用于：
  1.输入数字小于100；
  2.对已有的默认数值进行微小的改动。
  虽然旋转控件可以用于任何数字输入，但是在其他情况下效率很低。

• 旋转控件是否有利于交互？控件是否用于用户可能正在使用鼠标的上下文环境中？如果不是，可以考虑使用旋转控件。

• 同级控件是否是下拉列表? 如果有其他下拉列表，请考虑继续使用下拉列表以保持一致性。
  

  在本例中，使用旋转控件是可行的，但为了保持上下文一致，还是使用下拉列表控件

• 触屏和触控笔使用用户是否是主要用户群体？如果是，考虑使用下拉列表。旋转控件的三角箭头按钮很小，不利于触屏和触控笔的操作。

当滑动条和旋转控件都适用的时候，以下情况使用旋转控件：

• 屏幕空间很有限。
• 用户更有可能正使用键盘操作。

以下情况使用滑动条：

• 即时反馈效果对用户有帮助。

设计指南

总述

• 当使用旋转控件实用和有效的时候，就使用它。
  例外情况：为了与同一用户界面(UI)上的其他文本框保持一致，请使用旋转控件，即使它们并不总是最实用的。
  

  正确示例：该例中对“年”使用旋转控件并不是最实用的，但能保证一致性
  
  
  错误示例：在该例中，旋转控件没有起到实用的作用

• 永远保证旋转控件是对应文本框的“好伙伴”。这就要求将旋转控件放置在文本框内部。
  

  正确示例
  
  
  错误示例

• 当相关的文本框被禁用时，也要禁用该旋转控件。旋转控件永远不是唯一的输入方式，它只是一种辅助的输入手段。

数值

• 定义上方的按钮为增加一个单位，下方的按钮为减少一个单位。一般情况下单位是1，但它应该是值中最小的公变量。理想情况下，旋转控件应该包含所有有效值，并且操纵它应该比输入文本更方便。
  

  在此示例中，单击一次旋转控件，值更改量为1，这是常见的最小变更值。 如果使用更小的单位，也能覆盖有效值的范围，但旋转控件将不易于使用。

• 使用旋转控件将输入限制为有效值。使用旋转控件永远不会输入错误的值。

• 在有效值范围结尾，重启该值范围。旋转控件的隐喻是用户正在旋转一个数值轮，因此也该具有轮回的性质。
  例外情况：如果结果值肯定不正确，则不要重新启动范围。
  

  在本例中，单击向下箭头按钮不会重新启动范围(回到最大值) ，因为该值肯定是不对的。

• 使用文本而不是特殊的数值。允许用户使用这些特殊值，而不必知道它们并亲自输入。
  

  该例中，“永不”是一个特殊值，但用户可以通过旋转控件选择到它

• 如果数值有分隔符，则关联的文本框应该有多个输入焦点。这样做允许对各数值字段进行单独操作。
  

  示例

• 如果数值有单位，可也以使用旋转控件切换单位。
  

  示例

标签文字

应用文本框-标签一章中的指南来标记相关的文本框。旋转控件从不直接使用标签文字。

说明

当提到旋转控件时：

• 不要在用户文档中直接提到旋转控件。用其相关联文本框的标签文字指代它。
• 只在程序或其他技术文档中谈论旋转控件或旋转框。
  例如：在日期框中，输入或选择你想要更改的日期部分。