产品经理B端设计指南：选择录入

1、编辑导语：在前两篇文章中，我们主要讲到 B 端产品最为重要的信息展示组件 “表格 ”的设计思路，根据不同的场景对表格进行了答疑。今天本文作者和我们简单聊聊在数据录入场景中的一个小点：选择录入。提前说一句：其实这篇文章快写完时发现已经有类似的文章，由于自己写文章并不会在乎市面上是否有同类型的文章，文章的灵感也多来源于自己的工作中遇到的实际问题。其实我在评审许多设计师的稿件中，经常发现大家对它使用的场景并不了解。比如在一个表单中，让用户选择性别时，是采取下拉选择、单选框、多选框甚至是开关呢？那如果我们选择家庭住址又应该如何设计呢？这一系列问题都需要去解决。由于知识点很多，想要把它们完整讲清楚需要花

2、大量时间，因此我会在后续的文章中与大家逐一拆解，掰开揉碎慢慢消化，篇幅有限，今天我们先来聊聊前面几个稍微容易理解的：单选框、多选框、开关，究竟应该如何设计单选框，也常叫做单选按钮、单选，它最早来源于收音机上的物理按钮，当时用于收音调频之间的相互切换。当一个按钮被按下时，另一个按钮将会被弹起，使收音机只能拥有一个 “按下状态的 ”按钮。而早在计算机用户界面诞生之初( The Xerox Alto )就已经有了单选框的出现。同时在HTML的底层中，Radio就作为一个最基础的标签，拥有无法撼 动的地位所以在各大设计系统中一直作为基础组件被沿用至今。但随着移动互联网的普及，单选框这一形式在用户心中被

3、逐渐的弱化，取而代之的是各类功能相同但形式繁多的按钮，这也是目前很多 B 端设计师存在的认知误区之一。单选框：允许用户从多个选项中，选择一个选项，且选项之间存在互斥关系，这也是单选名称的由来。单选框的外观一般是一个空白的圆洞，旁边则通常有文字标签；标签的用途除了描述之外，还可以作为操作热区，当用户点击标签，所应的单选框就会被选中；已选上的单选按钮一般会在圆洞内加上一小圆点。说一个我实际工作中遇到的内容，在我之前负责的一个关于医美客户系统的的 SCRM 中，当客户到店后需要由医美咨询师为每一位顾客新建一个客户资料，而医美行业的特殊性导致我们的大多数医美客户都为女性，因此在设计表单中的性别一栏上便

4、可将默认值选择为女性，这样方便医美咨询师快速补充用户信息，可以进行更高效的信息录入。当然，我说了双刃剑肯定代表它也有弊的一面，我举一个反例，比如我们在设计一个调查问卷中，去预设一些默认值就不太合理，因为问卷中需要减少对选项值的干预，保证其真实性，才能让默认选项会导致录入的数据产生准确，避免为后期的数据分析埋下 “深坑” 。多选框，也常叫做复选框、勾选框，它允许用户选择一个或多个独立选项，将自己想要的选项作为值，多个条件间的逻辑关系为并列关系。多选框在实际业务中其实也分为两种不同形态：单个多选框与多选框。1)单个多选框英文叫做（single checkbox只出现一个多选框提供给用户进行选择，只

5、包 含 是“与 否”两种逻辑，用户可以选择其一。它与之后开关 Switch的逻辑 十分接近，但两者的适用场景也有很大不同。比如在我们经常遇到的用户协议的页面中，同意协议通常都是采取单个多选框的形式，而开关相比单个多选框，更加强调选中的状态。之后会与开关进 行深度对比，不做延展。2）多选框是多选框的一种通用样式，允许用户选择多个项，主要用于各类表单设计中，所以用户对于它的认知、功能以及行为操作有明确的心理预期和感知。多选框相比其它控件，增加了两个较为特殊的状态 “半选中 ” 禁用（已选“ 中） ” ，因此这里仅仅单独讲解，其他状态便不做过多赘述。半选中X犬态（Indeterminate出现的条件

6、必须具备以下两点：上面说到需要父子联动，全选是选中其下所有的选项，而我只选择了其下一个选项时，就应该展示半选中状态。同时，当前多选框正在处于半选中状态时，点击多选框会执行全选操作。禁用-已选中状态（Checked-disable出现多表示该多选框已经被激活，只 是在当前情况下不能进行操作。通常不能进行操作的场景有以下两点：当然多选框还会有很多不同状态，会在章节末尾进行表格总结。在实际工作中，多选框会出现在一些典型的页面场景中，针对不同的页面场景，我们来看看究竟应该如何进行处理。在用户权限管理页面中，经常会出现多选框的身影，而在权限这类页面中，往往是一个不断重复排列的多选框，针对不同的角色，去选

7、择不同的权限。且每一个权限都是开启或关闭状态，也因此采取多选框也尤为合适。我们来看看不同产品中，都有着哪些权限页面设置的技巧。语雀：权限作为语雀的一个亮点功能，便将所有角色分为三类：管理员、成员、只读成员。在定义中，因为管理员拥有全部权限，所以不需要用户单独进行配置。只读成员同样只会拥有单独的查看权限，而我们需要去对成员进行单独的配置，然后将成员的权限进行细分，由于权限的数量并不多，因此采取纵向排列，方便用户对于多个权限进行对比。上面语雀的权限配置页面过于简单，在真实 B 端业务时就会显得有些弱不经风。我们实际工作中面对多维度多层级的权限管理时，又应该如何设计？我们来看看 Coding 它是如

8、何做的。因为在一个正常的 B 端软件中，权限通常会拆分得特别细，对于不同字段与角色，他们的权限也会不尽相同。Coding首先在左侧会展示用户组”也就是我们上面说到的角色分类，用户可以去自定义角色类型有哪些，其次在对角色权限的配置中，会展示出用户可以自定义的所有功能，粗略估算大概会有100+个权限，也就意味着会有100+个多选框需要展示。当 100+的多选框放在你面前，最为基础的对齐则显得尤为关键。通过限制多选框标签的整体宽度，强制将其纵向对齐，虽然遇到长文本时省略给用户带来不太友好的体验，但对齐所带来的留白、节奏感是远比省略带来的好处要多（当然在对长文本宽度的定义中，需要多考虑下常见字段的长度

9、即可）。其次，在每一个大功能中，Coding都设置有一个全选功能，目前放置在整个列表的末尾，是一个特别赞的设计，能够帮助用户对每一个字段的权限进行统一配置，是一个经常使用的快捷入口。在流程管理页面中，多选框也是不可忽略的页面。因为在整个流程页面中会对每个状态执行开启与关闭操作，因此在这里同样会重复多选框。比如在 ONES 的流程管理页面中，看起来像是表格，其中纵向代表每个流程开始状态，横向代表每个流程阶段所要去向哪些状态，每个表格都会展示一个复选框，去配置它是否要流转到此状态，从而实现业务流转的需求。而在这里的设计，最令人头疼的是整体的表现形式，因为目前而言，需要将初始状态、新增状态、激活状态

10、、禁用状态等在一个表格中进行表示，更重要的是要能够让用户理解整个表格所代表的含义，这也是目前能看到的最好的设计成品，大家有什么更好的建议，欢迎在评论区留言，大家一起讨论。表格页面最为复杂多变，也因此在表格中的多选框出现了两种不同的形式：一种将多选框直接展示，让用户更直接选择；另一种则是Hover 到每一行显示多选框，同时一定要去注意全选与半选中的逻辑，在表格的设计上尤为重要，不能出现逻辑上的漏洞，这里也就不过多赘述。最后补充一下多选框的所有状态的交互逻辑：开关，它是一种特殊的选择，其含义代表你的选择非黑即白。它不同于上面的控件，当用户点击后，开关需要经历一个加载状态，然后立即执行。这样的差别就

11、导致开关的用法与其它控件并不相同，立即执行所带来的及时性也是设计师最容易与其他组件进行混淆的点。在开关的早期，为了降低用户的学习成本，模仿现实生活中的开关进行设计，而随着扁平风格的到来，开关便得到了精简，去掉原本产品中的质感、投影，转向更加明确的状态信息。转眼到了 B 端产品中，很多设计师都会沿用这一习惯，但是在HTML 的代码逻辑里，并没有Switch 的标签，也就意味着开关并不是网页本身所支持的形式，在程序员处理上则需要花费更多心思。不过在目前常见的前端框架中，对开关都进行了支持，比如Element、Antdesign 可以直接引用。虽然在组件上可以直接进行引用，但并不代表我们作为设计者，

12、不需要去考虑它基本的交互逻辑以及使用场景。在最新 Big Sur 系统中，设置页面就采取了类似操作，我们打开设置-通知，发现开关与表单同时存在。这里也可看到，允许通知的开关在最顶层，是控制整个表单权重最高的操作，同时下方单选、多选框、下拉菜单都受到顶部开关控制。当然，我们在实际的设计中，同样会遇到类似的情况，比如在飞书的自建应用免审规则配置中：首先用户需要去选择开启此功能，开启后下方会展开一个基本表单，用于用户对应用规则中更为细致的配置，并且要注意，所有的配置都是实时生效，因此在每一次修改配置时，飞书上都会有Loading 效果。当然我们可以将开关换成单一多选框，但切换后用户就很难理一二级之间的逻辑关系，因此开关更为适合权重更高的操作。在互联网上，时常看到 DISS开关不应该出现在网页设计中，这里看到了一篇文章中讨论到为什么在web 上使用 Switch 是愚蠢的设计，其实我有不同的意见，简单说一说我对开关的看法：因为在 B 端的场景中，会有很多特殊的要求，因此不能一杆子将Switch 进行一杆子打死，凡事都得辩证看待，需要去看到开关好的一面，并且规避它的一些不足。首先，在 Web 端中不能大面积的去使用开关，因为大量的开关导致的就是对页面设计的亵渎，当