单选按钮必填会有红色选中提示吗_为什么单选按钮和复选框不能共存?

26d54ed2c84e3456e5e3aadd60ccb219.png

以下内容由摹客团队翻译整理,仅供学习交流,摹客设计+协作一站式云平台,从产品、设计到开发,摹客来解决。
单选按钮和复选框长期以来一直都是容易导致用户困惑的组件。这两个组件通常用于相同的情景下,但看起来又完全不同。设计人员和开发人员一般比较清楚两者的区别,因为他们在工作中会接触到。那么,普通用户知道吗?
事实上,用户也需要知道这两个组件的区别(ps:间接说明了这两个组件并不直观)。它们的外观本身并不能反映它们在功能上的细微差别。视觉线索上只有圆点和复选框的区别;除了选项之外,其他对用户毫无意义。因此,单选按钮和复选框同时存在违反了用户体验中的一致性原则。
设计师和开发人员从来没有质疑过它们的共存,因为一直以来都是这样的。然而,如果它们的共存引起了用户的困惑并违反了用户体验原则,那么就需要进行逻辑分析和重新考虑了。违反用户体验一致性原则
用户体验的一致性原则规定:具有相似功能和相同用法的组件应该具有统一的外观。单选按钮和复选框具有类似的功能,并在相同的上下文中使用,但它们的外观并没有统一之处。

b0268a5f15f02349922419b98c4106c4.png
单选按钮和复选框


单选按钮表示相互排斥的选项,而复选框表示相互包含的选项。这两种组件通常都用于从列表中选择选项的场景。然而,它们是两种不同的视觉提示,单选按钮的是一个圆里面有一个点,而复选框是一个正方形里面有一个勾选标记。
可能有人会觉得它们功能不同,所以它们看起来应该是不同的。但准确地说,它们只是功能略有不同,而用法是相同的,这不足以证明外观不一致是合理的。同样功能的组件设计不同的外观会产生不一致性,让用户感到困惑。互斥/包容不是用户关心的问题
如果你问一个普通用户什么是互斥或包含选项,他们可能无法回答你。因为他们在使用时并不会考虑互斥性或包容性,只有设计师和开发人员设计页面才会考虑这些。
用户只需阅读标签提示并选择想要的选项。他们关注的是提示上的内容,而不是组件功能。因此,互斥性和包容性应该在标签提示中体现,而不是组件外观。设计人员和开发人员正在把他们的思维方式强加给用户。用户如何知道是单选还是多选?
组件上提供的标签提示通常能告知用户可以进行多选还是单选。当用户可以选择多个选项时,标签单词后缀是复数形式。当用户只能选择一个选项时,标签单词后缀是单数形式。在标签提示中提及互斥或包含的标签时,请确保使用正确的名词形式。用户很容易遗忘这些标签提示,但它们传递了最重要的信息。

ae9c764d6684037210e1d0b65e15f1a6.png
标签单复数


与复选标记和圆点相比,标签的名词形式更能清楚地说明相斥/包容的关系。一个勾选标记或一个圆点并不能表示互斥还是包容关系,只有设计师、开发人员和精通技术的用户才熟悉这个约定。普通用户看到相同的上下文环境中使用了不同组件,他们就会想知道这些视觉差异意味着什么。这种差异虽然不足以阻碍用户进行交互,但肯定会转移他们的注意力。

9e68e2007494b1cc8e750080ecf59887.png
组件对比

使用Check Circles代替
如果用户需要一个组件用于在列表中选择选项,与其使用单选按钮和复选框,不如直接使用Check Circles。它结合了单选按钮的外部形状和复选框的复选标记提示,如下图所示。

bf9ce2f1ead2a78e10aa4ebfd3de86cd.png
Check Circle示例


之所以使用复选标记,是因为它比圆点更具选择提示性,通常它被认为是“肯定”或“是”的象征。而圆点是一个微弱的视觉线索,它可以包含任何含义。
而圆形轮廓有助于区别于复选框。它还有一个额外的好处就是更吸引人,更容易被识别。
把Check Circles用于列表选项选择,用户就不会被单选按钮和复选框之间的差异分散注意力了。他们可以更多地关注选项标签,选择最适合自己的选项。用户是否只能选择一个或多个选项并不重要。他们将根据选项标签的指示进行选择,而不是组件的类型。旧的设计实践在不断发展
单选按钮和复选框已经共存很久了。然而,由于对用户体验渐渐有了更好的理解,过去许多旧的设计实践也在不断发展演变。例如,清除表单的重置按钮、必填字段上的红色星号和密码确认字段现在几乎都消失了。单选按钮和复选框可能很快也会这样做,因为和生活中的一些事情一样,界面设计也在不断发展和变化。原文作者:Anthony原文地址:https://uxmovement.com/forms/why-radio-buttons-and-checkboxes-cant-co-exist/学习工具,但不受限于某种工具。摹客,为企业团队提供原型设计和全流程的设计协作。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/539278.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

程序包org.junit.jupiter.api不存在

在跑项目的时候遇到这个问题&#xff0c;去看pom文件一切正常&#xff0c;也引入了这个依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.13.2</version> <scope>test</scope&…

thrift介绍及应用(一)—介绍

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12157151 ------------------------------------------------------------------------------------ 一、概述 Thrift是Apache下的一个子项目&#xff0c;最早是Facebook的项目&#xff0c;后来Facebook提供给Apa…

matlab双目相机标定校正_基于双目视觉的无人机避障算法(一)

讲述在10月到12月所做的所有工作对于一个无人机自主避障来说&#xff0c;存在着以下流程&#xff1a;感知&#xff1a;障碍物检测、行人检测、目标检测SLAM&#xff1a;为无人机提供位置估计&#xff0c;构建稀疏环境地图路径规划&#xff1a;规划一条从当前位置到目标位置的移…

计算机无法播放,如果无法播放计算机mp4文件怎么办?

FireStar365接受1. 下载并安装最新版本的视频播放器(例如: Storm Video).2. 在硬盘中找到MP4视频文件.3. 右键单击该文件&#xff0c;然后选择打开方法“ Storm Video”.4. 可以双击打开页面.zxc942128835将mp4链接到计算机&#xff0c;打开磁盘&#xff0c;单击菜单栏上的工具…

thrift介绍及应用(二)—简单应用

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12162131 ----------------------------------------------------------------------------------- 【接上文“thrift介绍及应用&#xff08;一&#xff09;—介绍”】 六、一个最简单的实例 Thrift文件&#xf…

打游戏的教育意义

夜色已深&#xff0c;一个男孩子还在打游戏。门忽然开了&#xff0c;妈妈走了进来&#xff0c;她把一碗阳春面摆在桌子上。说&#xff1a;"歇息一会儿&#xff0c;趁热把这碗面吃了吧。"孩子嗯了一声&#xff0c;眼睛没有离开屏幕。妈妈生怕打搅孩子&#xff0c;悄悄…

标准评分卡分数计算原理_评分卡的形式、刻度及应用场景

&#xfeff; 看到有伙伴提问&#xff1a;①我们的评分卡做好后&#xff0c;后续的使用策略是什么呀&#xff0c;都有哪些方向&#xff1f; ②评分卡分数切割点如何定&#xff0c;制定的业务逻辑是什么&#xff1f;其实&#xff0c;这个问题不好回答&#xff0c;也好回答。一方…

hexeditor 复制二进制值_MySQL复制全解析 Part 6 MySQL GTID 生命周期

实验环境此次实验的环境如下MySQL 5.7.25Redhat 6.10操作系统账号:mysql数据库复制账号:repl复制格式:基于行的复制通过前面的介绍我们知道MySQL的复制有两种方法基于二进制日志文件位置基于GTID上一节的内容为GTID的格式和存储&#xff0c;这节根据官方文档我们说GTID的生命周…

自动ip的计算机共享打印,局域网内自动获取ip地址怎么设置打印机共享文件夹...

在局域网环境中,为了尽可能地节省办公成本,很多用户都会选择在局域网中架设、部署共享打印机,以便在单位的任何角落处都能方便、自如地进行打印操作。下面是学习啦小编为大家整理的关于局域网内自动获取ip地址怎么设置打印机共享文件夹&#xff0c;一起来看看吧!局域网内自动获…

高级数据分析1代码_用Python进行数据分析,让你一看就会

本书详细介绍利用Python进行操作、处理、清洗和规整数据等方面的具体细节和基本要点。虽然本书的标题是“数据分析”&#xff0c;重点却是Python编程、库&#xff0c;以及用于数据分析的工具。第1章 准备工作第2章 Python语法基础&#xff0c;IPython和Jupyter Notebooks第3章 …

工期日历天计算器_天津实地告诉你:房建项目是怎样保节点,抢工期的?

工程概况天津实地蔷薇花园住宅地块项目共计由24栋单体住宅、2栋配建及地下人防车库组成&#xff0c;其中12层小高层4栋、13层小高层1栋、19栋7层洋房。总建建筑面积为139348.62㎡&#xff0c;地上99348㎡&#xff0c;地下40000㎡&#xff0c;人防面积为14236㎡。工期目标项目施…

测试fps游戏反应速度软件,FPS反应速度提速

静谧无声&#xff0c;生死一瞬&#xff0c;说的就是FPS游戏&#xff0c;没有哪一个种类的游戏可以比拟我们FPS玩家对于反应速度的追求&#xff0c;更快更准哪怕提速只是1毫秒&#xff0c;无数高手之所以为高手就是因为他们可以打出我们看起来不可能完成的击杀&#xff0c;特别是…

html5中单选框被选中把值传给后台_HTML5的表单设计

使用过Delphi的程序员&#xff0c;对Form这个词应该比较熟悉。在Delphi中&#xff0c;Form被翻译为“界面、窗口”&#xff0c;作用是&#xff1a;为用户提供界面&#xff0c;供用户输入信息&#xff0c;向用户展示处理结果。HTML5中也有Form&#xff0c;功能与Delphi中的Form差…

python科赫曲线绘制正方形_Python数据处理从零开始----第四章(可视化)(14)使用seaborn绘制热图...

目录 Python数据处理从零开始----第四章&#xff08;可视化&#xff09;①③多变量绘图 Python数据处理从零开始----第四章&#xff08;可视化&#xff09;&#xff08;14&#xff09;使用seaborn绘制热图 seaborn.heatmapHeat maps显示数字表格数据&#xff0c;其中单元格根据…

Hive的系统架构

一、架构图 二、各组件 用户接口&#xff1a;包括 CLI&#xff08;控制台命令&#xff09;&#xff0c;JDBC/ODBC&#xff0c;WebUI。 CLI&#xff0c;即Shell命令行 JDBC/ODBC 是 Hive 的Java&#xff0c;与使用传统数据库JDBC的方式类似 WebGUI是通过浏览器访问 Hive --…

坐标不显示_Simpack不显示坐标轴方向的解决方法

经常有用户咨询Simpack软件打开模型时&#xff0c;不能显示坐标轴的x、y、z方向&#xff0c;这个问题对建模有很大的影响。本文是兰州交通大学陈龙同学提供的解决方法&#xff0c;供大家参考。使用Simpack软件建模时&#xff0c;会遇到这种情况&#xff1a;比如要创建标记点时&…

th:text为null报错_为vue3.0的学习TS解读高级类型

知识点摘要本节课主要关键词为: 自动类型推断 / 类型断言 / 类型别名(type) / 映射类型(Pick/Record等...) / 条件类型(extends) / 类型推断(infer)自动类型推断(不用你标类型了,ts自己猜)大家现在写ts的时候一定会在每个变量后面都加上类型吧? 但是?现在告诉大家有些情况下你…

Hive与Hadoop的调用关系

一、调用图 二、步骤解析 1、提交sql 交给驱动 2、驱动编译&#xff1a;解析相关的字段表信息 3、去metastore查询相关的信息 返回字段表信息 4、编译返回信息 发给驱动 5、驱动发送一个执行计划 交给执行引擎 6、执行计划 6.1、DDLs 对数据库表的操作的 直接和metastore交互 …

简述计算机文件的命名办法,如何进行文件命名-如何进行文件管理

如何进行文件命名-如何进行文件管理电脑的管理事实上就是文件和文件夹的管理。想要我们的电脑干净整齐&#xff0c;就需要我们正确的进行文件管理。我们知道了文件和文件夹的概念之后&#xff0c;现在我们再来看看单独的文件&#xff0c;认识一下文件的构成以及文件命名和命名规…

网页加载出现没有合适的负载均衡器_分布式必知必会-七层负载和四层负载到底是什么?...

背景我们在使用负载均衡器的时候&#xff0c;往往会听到七层负载或四层负载这两个名词&#xff0c;许多负载均衡软件提供的方式也不同&#xff0c;那么七层和四层区别在哪呢&#xff1f;为什么有的支持有的不支持呢&#xff1f;负载均衡简介负载均衡建立在现有网络结构之上&…