江苏龙网

  1. 首页 > 人文 > >

UI组件系列：选择控件


编辑导读：开关不仅是生活中必不可少的组件 ， 在产品设计中的地位也是非常重要 。 本文作者基于自身工作经验 ， 围绕选择控件展开分析 ， 希望对你有帮助 。
UI组件系列：选择控件
本文插图
“toggle”这个词是指一个带有短柄的开关 ， 每次启动时 ， 它都会在两种状态之间切换 ， 每次 “开关 “车灯的时候都会使用上它 。
至于“Radio Buttons”这个词来自于汽车收音机 ， 通常的做法是在仪表盘下有一组按钮 ， 可以机械地存储电台预设 ， 以便用户更快地在电台之间切换 。 按下其中一个按钮会使其保持向下 ， 直到按下另一个按钮 ， 才会弹出 。
UI组件系列：选择控件
本文插图
一、选择类控件的类型
复选框（Checkboxes）—— 当有一个或多个独立选项时 ， 用户可以选择任意数量的选项 ， 包括零个、一个或多个选项 。
单选按钮（Radio Buttons）—— 当有两个或更多互斥的选项时 ， 用户只能选择其中一个时 。
切换开关（Toggle Switches）—— 当有两个互斥选项并且总是有一个默认值时使用 。 拨动开关即立即生效 。
选择标签（Choice Chips）—— 是单选按钮的一个替代方案 。 包含至少两个选项 ， 选择标签代表用户可以做出的单一选择 。
多选标签（Multi-select chips）—— 是复选框的一个替代方案 。 允许用户选择多个选项 ， 主要用于移动端上进行筛选 。
UI组件系列：选择控件
本文插图
选择类型的控件在用户界面中已经使用了很长一段时间 ， 所以我们对它们的行为有了强烈的期望 。 下面是一个简单的备忘单 ， 你可以根据它为正确的情况选择正确的类型 。
UI组件系列：选择控件
本文插图
怎么样知道什么时候该使用什么类型的控件？
上图的灵感来源于Nilsen Norman Group的文章“复选框 vs. 单选按钮”（注：上图看不懂的同学可以看下图） 。
UI组件系列：选择控件
本文插图
二、选择类控件的状态
复选框和单选按钮可以选择或取消选择 ， 切换开关可以关闭或开启 。 所有这些都有启用、禁用、悬停、聚焦和按下状态 。 我知道这看起来很多 ， 但是为了可靠的交互 ， 创建所有这些状态是好的 。
UI组件系列：选择控件
本文插图
选择类控件的状态
三、不要忘记为“不确定（indeterminate）”设计不同状态
“indeterminate”表现为既不勾选也不取消勾选的复选框的状态 。 该状态并非完全肯定 ， 因此命名为“indeterminate” 。 可以理解为当一个父复选框有多个子复选框时 ， 有些子复选框被选中 ， 有些则未被选中 。
UI组件系列：选择控件
本文插图
“indeterminate”的不同状态
四、禁止滥用切换开关
不要为切换开关创建层次结构 。 这在视觉上更容易分散注意力 ， 而且会造成一种错误的印象 ， 即所有的子选项都是开着/关着的 。
UI组件系列：选择控件
本文插图
实用技巧：禁止滥用开关按钮 。
五、当选择即生效时 ， 请使用开关
切换开关是一种数字开关 。 任何由切换开关触发的效果应立即生效 。 如果不是这样 ， 最好用单个复选框替换切换开关 。


推荐阅读


上一篇：考生|北京高招录取8月6日开始！全部远程网上进行

下一篇：5G手机入门级5G手机硝烟弥漫：华为麦芒9、红米10XPro和vivoS6，咋选