在UI界面中的14个按钮和框架选择的设计经验

在UI界面中，我们可以看到各种开关按钮和一些组件/控件，下面跟随我们一起梳理14个按钮和框架选择的设计经验，很实用的哦。

在UI界面中，各种开关、按钮和框架选择控制都是非常常见的组件。它们看起来并不复杂，但在实际使用中要注意很多。它们不仅关系到体验，还涉及一些界面逻辑问题。

单选按钮（Radiobuttons），起源自汽车收音机的按钮。旧的汽车控制面板上有一排机械按钮，可以存储预设电台。用户可以快速按下按钮，切换不同的电台。按下其中一个按钮，其他按钮就会弹起。这里的按钮相互排斥，多个按钮不能同时激活。

复选框(Checkboxes)通常有一个或多个选项供用户选择。复选框中的选项通常不相互排斥，用户可以选择一个或多个。

拨号开关(Toggle-Switch)是最常见的按钮样式，点击即可切换状态。

选择按钮(ChoiceChips)是单选按钮的简化模式，通常至少包含两个选项，用户可以选择其中一个，选择按钮大多出现在移动终端界面上。

多选按钮(Multi-selectchips)是复选框的通用替代品，用户可以选择多个选项，而且这个按钮大多用于移动设备。

各种选择控件在用户界面已经存在了很长一段时间，因此用户对其功能、认知和期望都很清楚。以下是一个非常简单的列表，列出了大多数常见的选择控件的类型和使用场景：

1、熟悉按钮的不同显示状态

复选框和单选按钮有两种状态：选择和未选择，拨动开关有两种状态：打开和关闭。在实际使用过程中，它们都有不同的状态，如启用、禁用、悬停、聚焦和按压。虽然这些状态看起来很多，但它们涉及实际交互的需求和不同的场景，是实现可靠交互的基础。

2、不要忘记未定状

对于复选框，通常只有两种状态：选择和未选择。如果涉及多层次、有父子结构的复选框体系，可能会因为选择了复选框的一部分，而不选择一部分，使得父复选框的状态介于全选和未选之间，容易被忽略。

3、不要错用拨动开关

当涉及到层次结构选项时，不要使用拨动开关。它不仅在视觉上容易分散注意力，而且在使用时也容易导致误判。

4、当功能触发立即生效时，使用拨动开关。

拨动开关是标准的数字开关功能。当您使用拨动开关时，确保其触发的功能立即打开/关闭。如果没有，最好使用单个复选框代替拨动开关。

5、避免非常规的控件样式。

按钮风格与整个平台的传统风格相差太大，很容易带来额外的认知负担。例如，圆形复选框很容易与传统的单选按钮混淆。

6、在列表中使用方便用户扫读的排版。

左对齐复选框+标签样式效果最好。这保证了用户能够尽快理解和完成操作，减少了错误的发生。事实上，右对齐复选框是可以的。在移动终端上显示也有优势——单手操作更容易选择，点击勾选时手指不会覆盖标签内容，但标签文本和复选框不能相距太远。

7、如果垂直空间不够，请用按钮代替选框。

使用选框控择控制的问题是它与相应的标签分离。在垂直控制有限的情况下，水平排版将非常此时，用按钮代替框架选择要好得多。

8、尽量使用单选按钮而不是下拉菜单。

使用单选按钮可以使选项始终可见，方便用户直观比较和查看，从而减轻认知负荷，使表单内容更加清晰透明。

9、使用下拉菜单携带大量类似的选项。

如果选项超过6个，最好考虑放在下拉菜单中，因为用户无论如何都无法快速记住和比较所有选项，这也适用于大量类似或可预测的选项，如10%、20%、30%等。

10、单选按钮最好提供默认选项。

通常，一旦选择了单选按钮，用户就不能取消选择并恢复原状态。因此，有些用户可能不愿意做出选择，此时应该提供一个无选项。最好提供默认选项并按逻辑顺序排序。

11、使用清晰的文本标签内容。

在文本标签内容中，尽量不要使用否定的表达方式，这样可以避免误解，方便用户正确理解内容。

12、突出被选选项吸引用户注意力。

在视觉上区分被选择的选项尤为重要。

13、支持批量选择和清除。

对于用户来说，一次选择和清除多个选项应该是一件简单而容易的事情，因此需要支持批量选择和清除功能。

14、确保点击热区足够大。

触发热区是确保用户在移动终端上交互的基础，让触发热区域包含重要信息，如按钮、文本...，提升易用性，根据费茨定律，点击区域的大小对交互起到非常直接的影响。因为一些控件，如：复选框、单选的按钮非常小，不太容易点击准确。