elementui 单选按钮-UI设计规范:单选按钮 vs 复选框,没那么简单

无论是网页设计还是移动应用程序设计,都经常使用单选按钮复选框这两个组件。 这两个组件看似含义明确,易于区分,但在实际设计中很容易被错误使用,带来不好的用户体验。

在本文中,我列出了几种典型的误用,以帮助设计者在设计 UI/UX 时以更标准化的方式使用单选按钮和复选框这两个组件。

使用原型工具:Mockplus

单选按钮和复选框的区别

elementui 单选按钮_elementui图标库_按钮单选变多选

何时使用单选按钮?

有两个或多个互斥的选项,用户必须从中选择一个且仅一个。 换句话说,如果您选择了未选中的选项之一,则选中的选项将被手动取消。

什么时候使用复选框?

有一个选项列表elementui 单选按钮,用户可以从中选择一个或多个,甚至不选择。 换句话说,每个选项都是相互独立的。

elementui 单选按钮_按钮单选变多选_elementui图标库

看完定义,你觉得这两个组件好用吗? 但在设计实例中,经常出现以下错误用法:

错误一:使用错误的对象

提供早餐订购服务的应用程序在允许用户选择送货时间时使用复选框组件。 这不仅违背了设计的初衷(希望用户可以选择一个时间段),而且给用户带来了困惑。 如果我同时检查前两个时间段,则意味着在整个大时间间隔内的送餐是可能的。 关于什么?

错误#2:在选项文本中使用否定词

上面的例子有些夸张,但确实反映了UI/UX设计中的一些问题。 如果我们在复选框选项中使用否定句,用户必须检查所有选项以确保他们不喜欢的事情不会发生。

有一个例外elementui 单选按钮,当浏览器弹出“不再提示此信息”时,类似的选项可以使用否定词。

错误3:选项的排列不遵循逻辑顺序

图中的选项并不遵循一定的逻辑顺序。按照订阅时长,应该是:包月>按季订阅>按年订阅

以上三个是单选按钮和复选框的 UI/UX 设计中的常见错误。 除了防止此类错误外,设计人员在使用这两个组件时还应遵循以下四个建议:

elementui 单选按钮_按钮单选变多选_elementui图标库

1. 可以使用单选按钮时尽量不要使用下拉菜单。 当所有选项都清晰列出时,用户更容易进行比较并做出正确的选择。

2. 使用单选按钮时,请确保提供已选择的默认选项。

3. 单选按钮和复选框均不用于触发任何操作。

4、可选句型不宜太长,最好能让用户快速掌握关键信息。

以上三个错误和四个建议是利用好单选按钮和复选框这两个组件的关键。 了解更多相关设计规范以及如何使用组件,请查看Mockplus官网教程。