关闭
云鸿学院 公司新闻 行业动态 产品技术 运营推广 常见问题 最新签约

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

发布时间:2017-06-17  编辑:admin  点击:747

无论是网页设计,还是移动app设计,都经常用到单选按钮和复选框这两个组件。这两个组件看似意义明确,很?#20204;?#20998;,但在?#23548;?#35774;计中却很容易?#20040;恚?#24102;来不好的?#27809;?#20307;验。

本文中我通过列举几个典型的错误用法,帮助设计师在进行UI/UX设计时,更加规范地使用单选按钮和复选框这两个组件。

使用原型工具:Mockplus

单选按钮和复选框?#37027;?#21035;

什么时候使用单选按钮?

有两个或两个以?#31995;?#20114;斥选项,?#27809;?#24517;须且只能从中选择一个。换句话说,如果你选择?#20284;?#20013;一个没有被选中的选项,那么原本被选中的选项就自动被取消。

什么时候使用复选框?

有一系列选项,?#27809;?#21487;以从中选择选择一个或多个,甚至不选也可以。换句话说,每一个选项是互不影响的。

看了定义,你是否觉得这两个组件使用起来很容易呢?但在设计实例中,以下几个错误用法是频频出现的:

错误一?#27827;么?#23545;象


一个提供午餐外卖服务的app, 在让?#27809;?#36873;择送餐时间时,使用了复选框组件。这既违背了设计初衷(希望?#27809;?#20174;中选择一个时间段),又给?#27809;?#24102;来了困扰,是不是我同时勾选前两个时间段,就代表在这整个大?#37027;?#38388;内送餐都是可以的呢?

错误二:选项文本中使用否定词


以?#31995;?#20960;个例子是比较夸张的,但的确?#20174;?#20102;一些UI/UX设计中存在的问题。如果我们在复选框选项中使用否定句式,?#27809;?#24517;须浏览完所有的选项,才能确保?#32422;?#19981;?#19981;?#30340;事情不会发生。

有一个例外?#37027;?#20917;,当浏览器中弹出“不要再提示该信息”时,类似的选项中可以使用否定词。

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


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

以?#20808;?#20010;是单选按钮和复选框在UI/UX设计中常见的错误,除了避免这些错误之外,设计师在使用这两个组件时,最好能遵循以下四点建议:

1. 能使用单选按钮时,尽量不使用下拉菜单。在所有选项都被清晰地列举出时,?#27809;?#26356;容易进行比?#24076;?#20570;出正确的选择。

2. 使用单选按钮时,一定要提供一个已经选中的默认选项。

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

4. 选项句式不宜过长,最好能让?#27809;?#36805;速抓住关键信息。

以?#20808;?#28857;错误和四条建议,是用好单选按钮和复选框这两个组件的关键。




呼市体彩11选5走势图