首页 > 建站资源 > 网站优化 > UI设计规范:单选按钮vs复选框要怎么用?

UI设计规范:单选按钮vs复选框要怎么用?

时间:2017-07-01    来源:产品100

无论是网页设计,还是移动app设计,都经常用到单选按钮和复选框这两个组件。这两个组件看似意义明确,很好区分,但在实际设计中却很容易用错,带来不好的用户体验。

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

使用原型工具:Mockplus

单选按钮和复选框的区别

什么时候使用单选按钮?

有两个或两个以上的互斥选项,用户必须且只能从中选择一个。换句话说,如果你选择了其中一个没有被选中的选项,那么原本被选中的选项就自动被取消。

什么时候使用复选框?

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

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

错误一:用错对象

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

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

以上的几个例子是比较夸张的,但的确反映了一些UI/UX设计中存在的问题。如果我们在复选框选项中使用否定句式,用户必须浏览完所有的选项,才能确保自己不喜欢的事情不会发生。

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

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

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

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

1. 能使用单选按钮时,尽量不使用下拉菜单。在所有选项都被清晰地列举出时,用户更容易进行比较,做出正确的选择。

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

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

4. 选项句式不宜过长,最好能让用户迅速抓住关键信息。

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

相关推荐
有效提高网站销售转化率的16个UI设计秘诀
32条优秀UI设计建议 助你提升网页易用性及转化率(1)
32条优秀UI设计建议 助你提升网页易用性及转化率(2)
2017版“我的淘宝”可能是迄今为止最懂你的设计
iOS 11 设计中的几个 UI 设计细节
老年用户的体验思考:如何保证界面适合阅读
UI界面设计:空心图标是否比实心图标难以识别?
24个UI案例对比 教你如何提升APP设计品质
怎么做才能防止用户对界面优化的不满?
交互设计优化:什么是界面设计?
在UI设计中如何科学地提高文本可读性?
干货:移动端响应式的7种UI布局解析
9个UI界面设计灵感来源的网站推荐
UI设计:如何实现完美的文本排版设计?
从iOS 11看怎样设计APP图标
5种技巧教你如何提高移动端用户体验
关于用户体验你应该知道的8件事
设计优化教程:购物车设计的总结
APP设计:如何打造优质移动页面提高用户体验?
移动用户体验设计之列表视图与网格视图
APP设计:内容呈现更友好易用的5种常见导航设计模式
那些方法可以让搜索框的体验更好?
APP界面设计:关于卡片设计、分割线、无框设计的思考
APP设计:悬浮按钮设计规范和经典实践
UI设计:那些是改版设计的正确姿势?
Web界面设计如何让用户心动?
UI设计趋势:沉浸式设计指南
WEB设计:注册登录怎么设计才能提升用户体验?
新手引导如何设计?有这8种引导方式和7个设计要点
界面设计不能忽略的这些设计细节
设计教程:「以用户为中心」的图标设计法
UI文案设计技巧分享 视觉与内容兼具不再是梦
APP设计案例:拼多多小程序分享里的13个魔鬼细节
干货:什么是用户界面和体验设计?
UI设计:APP结构指南之注册和登录
分享:功能可见性在用户界面中的使用

精彩推荐

热门教程