分享界面设计经验~ 以下内容由抄客团队翻译整理，仅供学习交流。


抄客是设计的 合作的一站式云平台。


单选按钮和复选框长期以来一直是用户困惑的组件。


这两个组件通常用于相同的场景，但看起来完全不同。


设计师和开发人员通常知道两者之间的区别，因为他们在工作中会接触到它们。


那么，普通用户知道吗？ 事实上，用户也需要知道这两个组件的区别（ps：间接说明这两个组件不直观)。


它们的外观本身并不能反映它们在功能上的细微差别。


视觉线索上只有圆点和复选框的区别；除了选项，其他对用户毫无意义。


因此，单选按钮和复选框违反了用户体验中的一致性原则。


设计师和开发人员从未质疑过它们的共存，因为它们一直都是这样。


然而，如果它们的共存引起了用户的混淆，并违反了用户体验的原则，则需要进行逻辑分析和重新考虑。


违反用户体验一致性的原则 用户体验的一致性原则规定，功能相似、用法相同的组件应具有统一的外观。


单选按钮和复选框具有相似的功能，并在相同的上下文中使用，但外观不统一。


单选按钮表示相互排斥的选项，而复选框表示相互包含的选项。


这两个组件通常用于从列表中选择选项的场景。


然而，它们是两种不同的视觉提示。


单选按钮在圆圈中有一个点，而复选框在正方形中有一个勾选标记。


有些人可能会认为它们有不同的功能，所以它们应该看起来不同。


但准确地说，它们只是有点不同的功能，使用相同，这不足以证明不一致的外观是合理的。


不同的外观会产生不一致性，让用户感到困惑。


互斥/包容不是用户关心的问题 如果你问一个普通用户什么是相互排斥或包含选项，他们可能无法回答你。


因为他们在使用时不考虑相互排斥或包容设计师和开发人员设计页面。


用户只需阅读标签提示并选择他们想要的选项。


他们关注的是提示上的内容，而不是组件功能。


因此，相互排斥和包容性应反映在标签提示中，而不是组件的外观上。


设计师和开发人员正在将他们的思维方式强加给用户。


用户如何知道是单选还是多选？ 组件上提供的标签提示通常可以通知用户是多选还是单选。


当用户可以选择多个选项时，标签单词的后缀是复数形式。


当用户只能选择一个选项时，标签单词的后缀是单数形式。


当标签提示中提到相互排斥或包含的标签时，请确保使用正确的名词形式。


用户很容易忘记这些标签提示，但它们传达了最重要的信息。


与复选标记和圆点相比，标签的名词形式可以更清楚地解释排斥/包容的关系。


只有设计师、开发人员和精通技术的用户熟悉这一协议，才能表示相互排斥或包容。


当普通用户看到不同的组件在相同的上下文环境中使用时，他们会想知道这些视觉差异意味着什么。


虽然这种差异不足以阻止用户交互，但肯定会转移他们的注意力。


使用Check Circles代替 如果用户需要一个组件来选择列表中的选项，与其使用单选按钮和复选框，不如直接使用Check Circles。


它结合了单选按钮的外部形状和复选框的复选标记，如下图所示。


复选标记的使用是因为它比圆点更有选择性，通常被认为是肯定或是的象征。


圆点是一个微弱的视觉线索，可以包含任何意义。


圆形轮廓有助于区分复选框。


它的另一个优点是更有吸引力，更容易被识别。


把Check Circles用于列表选项的选择，用户不会被单选按钮和复选框之间的差异分散注意力。


他们可以更多地关注选项标签，选择最合适的选项。


用户是否只能选择一个或多个选项并不重要。


他们将根据选项标签的说明而不是组件的类型进行选择。


旧的设计实践在不断发展 单选按钮和复选框已经共存了很长一段时间。


然而，由于对用户体验的逐渐更好的理解，许多旧的设计实践也在不断发展和演变。


例如，清除表单的重置按钮、必填字段上的红星号和密码确认字段现在几乎消失了。


单选按钮和复选框可能很快就会这样做，因为界面设计和生活中的一些事情一样不断发展和变化。


(本文首发于微信官方账号:抄客) 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。


本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。


如有侵权行为，请联系网站管理员删除，。