英文 | https://uxplanet.org/how-to-design-better-checkbox-radio-and-toggle-buttons-197b85fa0820

翻译 | 杨小二

选择控件使用户可以完成涉及选择的任务，例如选择选项，打开或关闭设置或添加或删除项目。

单选按钮不是复选框。复选框不是切换。切换不是单选按钮。这些元素中的每一个都有不同的含义，并用于不同的目的。

尺码

使用正确大小的单选按钮，复选框和切换按钮，以实现更好的视觉实现，效率和可读性。

单选按钮

单选按钮是允许用户选择在其相应的文本标签中写入的值的组件。与复选框不同，用户一次只能从一个组中选择一个单选按钮。

最好将它们用于2-4个元素。他们只允许用户选择1件东西，而不是更多。

记住这些事情：

• 单选按钮始终垂直列出。
• 单选按钮的标签首字母大写。

复选框

复选框是允许用户选择写在其相应文本标签中的值的组件。用户可以同时从一个组中选择多个内容。

一个复选框控制有三种状态：未选中状态，选择和不确定的。

当可以选择多个选项时，请使用复选框，并将复选框的标签内容首字母大写。

开关按钮

开关按钮是一种界面元素，通过激活或取消激活，可以触发屏幕上的即时操作。

但是，不需要使用CTA按钮进行确认。使用开关按钮进行激活。

注意水龙头区域

单选按钮，复选框和开关按钮是所有UI设计中最小的交互式元素之一，因此它们需要有一个易于访问的点击区域。

让用户不仅通过单击或点击该小方块，还可以单击标签或相关联的单词来选择一个选项。

颜色和不同状态

始终在不同的条件下使用不同的颜色，并尝试使用渐变颜色以获得更好的视觉吸引力。

结论

如果可能，请始终使用垂直显示选项列表。水平对齐的选项可能很难阅读且难以区分。如果必须以水平方式显示列表，请务必密切注意项目与其相应复选框之间的距离以及列表项目之间的间隔。

学习更多技能

请点击下方公众号