Ui设计中单选按钮与复选框详解
来源:互联网 发布:nba总决赛个人数据统计 编辑:程序博客网 时间:2024/06/04 23:14
无论是网页设计,还是移动app设计,都经常用到单选按钮和复选框这两个组件。这两个组件看似意义明确,很好区分,但在实际设计中却很容易用错,带来不好的用户体验。
本文中我通过列举几个典型的错误用法,帮助设计师在进行UI/UX设计时,更加规范地使用单选按钮和复选框这两个组件。
使用原型工具: Mockplus
单选按钮和复选框的区别
什么时候使用单选按钮?
有两个或两个以上的互斥选项,用户必须且只能从中选择一个。换句话说,如果你选择了其中一个没有被选中的选项,那么原本被选中的选项就自动被取消。
什么时候使用复选框?
有一系列选项,用户可以从中选择选择一个或多个,甚至不选也可以。换句话说,每一个选项是互不影响的。
看了定义,你是否觉得这两个组件使用起来很容易呢?但在设计实例中,以下几个错误用法是频频出现的:
错误一:用错对象
一个提供午餐外卖服务的app, 在让用户选择送餐时间时,使用了复选框组件。这既违背了设计初衷(希望用户从中选择一个时间段),又给用户带来了困扰,是不是我同时勾选前两个时间段,就代表在这整个大的区间内送餐都是可以的呢?
错误二:选项文本中使用否定词
以上的几个例子是比较夸张的,但的确反映了一些UI/UX设计中存在的问题。如果我们在复选框选项中使用否定句式,用户必须浏览完所有的选项,才能确保自己不喜欢的事情不会发生。
有一个例外的情况,当浏览器中弹出“不要再提示该信息”时,类似的选项中可以使用否定词。
错误三:选项的排列不遵循逻辑顺序
图中的选项没有遵循一定的逻辑顺序。按照订阅时间长短,应该是:月订阅>季订阅>年订阅
以上三个是单选按钮和复选框在UI/UX设计中常见的错误,除了避免这些错误之外,设计师在使用这两个组件时,最好能遵循以下四点建议:
1. 能使用单选按钮时,尽量不使用下拉菜单。在所有选项都被清晰地列举出时,用户更容易进行比较,做出正确的选择。
2. 使用单选按钮时,一定要提供一个已经选中的默认选项。
3. 单选按钮和复选框都不用于触发任何动作。
4. 选项句式不宜过长,最好能让用户迅速抓住关键信息。
以上三点错误和四条建议,是用好单选按钮和复选框这两个组件的关键。如需了解更多相关的设计规范以及组件的使用方法,请查看 Mockplus 官网的教程。
来源:简书
阅读全文
0 0
- Ui设计中单选按钮与复选框详解
- 复选框与单选按钮
- NGUI v2.0 Interaction_10_11:UIButtonTween UI按钮补间类 UICheckbox UI复选框
- 创建复选框按钮
- android基本 UI(三)—单选RadioButton与复选按钮CheckBox
- java图形界面——复选框与单选按钮
- 单选按钮RadioGroup与复选框CheckBox
- Java图形界面——复选框与单选按钮
- Android UI控件--单选与复选框
- android-UI组件实例大全(四)------单选按钮(RadioButton)和复选框(CheckBox)
- UI设计规范:单选按钮 vs 复选框,没那么简单
- 11、Selenium + Python 实现 UI 自动化测试-操作按钮、复选框
- SkinUI入门教程(六) 第三组UI组件:按钮、单选框和复选框
- iOS UI设计与开发 按钮、图标和图片
- 按钮-全选复选框
- 按钮和复选框控件
- javascript 按钮复选框选择
- JavaScript前端按钮复选框
- 断点续传
- 操作sqlite3数据库
- 操作系统之存储器管理
- 【CodeM初赛A 5】数列互质 题解
- 变量的存储方式和生存期
- Ui设计中单选按钮与复选框详解
- 关于python多线程的爬虫的一些实践
- 简单记录N个动态规划的例子
- 读书笔记-大型网站系统与Java中间件8
- C++ 求两个集合的交集和并集
- Happy Number【202】
- 《linux命令行与shell脚本编程大全》第三版
- tomcat 的配置
- python 初学者的第一天