B端数据可视化设计第二弹！4大章节带你掌握表单设计（上）

下期文章：

先简单说下表单的定义。在电脑不普及的时代，企业或者机构在收集用户信息时，通常采用纸质单据让用户填写，而这个单据，就是最原始的表单。我们常说 B 端产品其实就是把线下已经存在的流程搬到线上，有利于扩大市场和提高使用效率和管理效率。而 B 端表单，其实就是把原先需要线下手工填写的表单映射到线上，并使其录入符合线上设备（如手机、电脑）的使用习惯。

纸质表单

通过上面纸质表单，其实我们很容易理解表单的主要任务场景，就是“录入”，即用于用户或产品的数据采集。比如常见的快递单填写、单位的 OA 请假流程、CMS 后台配置产品详情等等。

既然表单的主要功能是“录入”，那么在设计表单时，就需要考虑如何尽可能的减少用户使用成本和理解负担，提高表单的容错率和操作效率，让使用者更高效更准确的完成录入工作。

一、表单的三大设计原则

1. 表意明确

在不同类型的信息录入时，需要选择正确的组件，清晰准确的传达相应含义，帮助用户快速理解需要录入的信息类型。如需要用户录入跟日期相关的信息，就需要使用 DatePicker 日期选择框；如需用户录入数字相关的内容，则需要使用 InputNumber 数字选择框。

2. 简洁高效

高效主要体现在用户获取信息的效率和录入信息效率两个方面的高效。简洁则体现在不同的信息体量的情况下使用不同的排布方式和交互方式，使其视觉更加清爽简洁。

3. 安全容错

分为三个阶段，即操作前、操作中、操作后。

操作前：需要做到尽可能的提示接下来用户需要输入的内容；

操作中：则需要根据用户输入的内容进行实时反馈和纠错，比如格式错误需要及时提醒；或者在数字输入框输入“.5”的时候要纠正为“0.5”；或者在仅允许输入数字的输入框内输入其他字符直接判断为无效输入等。

操作后：设计合理的保存机制，如草稿箱；进行清空、取消、或未保存当前页面内容就跳转新页面时，需二次确认，减少误操作带来的损失。

二、表单的构成

基础表单通常由表单标签、表单（数据）域、提示信息、操作按钮四部分组成。高阶表单由于数据类型比较复杂，会衍生出其他内容，如校验提示、帮助提示、占位信息、动态增减等内容。

1. 表单标签

表单标签用于解释标明对应表单项需要录入、选择、上传的内容，引导用户进行填写/选择等对应操作。常见的标签布局有四种：左对齐标签、右对齐标签、顶对齐标签、内部标签。

左对齐标签

左对齐标签的特点是阅读效率高，填写速度慢，节约垂直方向空间。因为左对齐表单解析问题时眼球定位次数最多，用户一般情况下都能将左对齐布局中的标签和输入框联系起来，只是花费时间较长。根据马泰奥·彭佐的研究，典型扫视时间为 500 毫秒，用户获取信息时的视线会进行反复跳动，说明用户经历了沉重的认知压力。

左对齐标签

适用场景：适用于表单中存在较多复杂或敏感信息，且希望用户在填写时能够放慢速度仔细思考的场景。多见于注册类表单。

微信公众平台注册表单

右对齐标签

右对齐标签的特点是填写效率高，阅读效率慢，节约垂直方向空间。马泰奥·彭佐的眼动研究发现，专家用户和新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别在 170 毫秒和 240 毫秒，而填写完成时间比左对齐快 2 倍。

右对齐标签

适用场景：右对齐标签适用于既要减少垂直空间，又要加快填写速度的场景。

右对齐标签案例

顶对齐标签

顶对齐标签的特点是浏览速度和填写速度都快，节约横向空间，且视觉上更加工整但占用垂直空间多。马泰奥·彭佐的眼动研究发现，顶对齐标签从标签移动到输入框只需 50 毫秒。比左对齐标签快了 10 倍；比右对齐标签方式快 2 倍。能迅速填完顶对齐标签表单的原因之一，是因为眼球只需要在标签和输入框之间进行上下单向运动。

顶对齐标签

适用场景：希望用户快速填写表单，完成任务；同时，当输入项存在主次之分时，对标签扩展性要求高。

顶对齐标签案例

内部标签

内部标签的特点是占用横向空间少，不用考虑标签长短不一导致的对齐问题，但输入时内部标签消失会不太容易判断信息。

内部标签一般常见于移动端的表单，且表单结构和内容相对简单，适用于极少数输入项的表单，不适用于三个以上表单项的场景。

内部标签案例

小结一下：综上所述，从效率角度来讲，顶对齐标签＞右对齐＞左对齐。但根据 B 端业务场景的不同，效率并不是我们衡量标签对齐方式的唯一指标。

所以，如果你考虑屏效，且希望用户放慢速度，仔细思考表单中每个表单项，特别是含有大量可选输入框或高级设置的陌生数据，并且希望视觉上保持对齐，牺牲效率，就选择左对齐标签；

如果你不考虑屏效，且希望提高用户的阅读和填写效率，并希望表单具有更好的延展性时，就选择顶对齐标签。

如果你考虑屏效，且希望提高用户填写效率，牺牲视觉对齐，那就选择右对齐标签。不过要考虑能否精简标签内容，确定好表单与界面的间距，标签长短差异过大谨慎使用右对齐。

2. 必填项和选填项的常见处理方式

在表单设计中，经常会碰到三个问题：

1. 当表单里全是必填字段的时候，是否要标记它？
2. 当表单里既有必填字段，又有选填字段，到底是标记必填，还是标记选填？
3. 使用星号*标记必填时，星号在标签左侧还是右侧？

当表单里全是必填字段时，是否要标记它。

理论上来说，一个表单里全部都是必填字段的话，就没有标记的必要，因为全部都重要的同义词就是全部都没那么重要。但是实际使用中，有相当一部分用户，会下意识的认为没有标记必填，那就可以不填。

我们通常讲设计要有全局观和风格的延续性，站在全局上讲，如果其他表单都是遵循“必填的字段不标记，选填的字段做标记”，那么遇到全是必填的表单时，是可以不做标记的。如果其他表单遵循的是“必填的字段做标记，选填的字段不做标记”，那么也要将这个规则贯彻到底。

当表单里既有必填字段，又有选填字段，到底是标记必填，还是标记选填？

设计是选择题而非判断题，星号*是种视觉标记，可以方便用户扫描表单时了解输入信息量的最低限度。必填加星号*肯定不会错，选填做标记也很对。重要的还是上面的一段表述，要注意全局观和风格的延续性。一旦选择了某种标记规则，就要贯彻到底。

站酷 ，只给必填做标记

使用星号*标记必填时，星号在标签左侧还是右侧？

都可以，放左还是放右不一定有实际影响，但建议将其放在标签左侧的一个原因是，只需扫视标签的最左边字符，就能轻松定位必填哪些字段。

3. 表单域

表单域即表单的输入区域，输入域是用来采集用户数据信息的核心内容，每个输入域字段都包含一个类型的数据信息。

表单域包含输入框、内容选择器、时间选择器、数值选择器、上传五种常见类型。

在表单设计的时候要尽可能减少用户的思考、理解成本，所以选择合适的表单域类型，提升表单的输入效率。如果乱用，就很容易出问题，比如让用户在输入框输入时间，输入效率慢不说，还很容易出现格式不一致的问题，导致系统无法做出准确的识别和统计。

如何定义输入框/选择框的大小

绝大部分的开源组件都会提供一定的尺寸规范，一般情况下使用默认的尺寸规范即可。比如像时间选择器、数值选择器这种，由于字段有明确的格式显示，所以字段长度也是有预期的。

而像输入框、内容选择器这种，就需要做到框长度与输入预期成正比。唐纳德·诺曼的著作《设计心理学》中详细讲解过心理暗示方面的内容。而宽度的变化就是一种有效暗示。在真实场景中，大部分输入框是存在理想长度的，那么就应该向用户暗示所需输入内容的长度来减轻判断负担。所以建议跟产品经理进行沟通，咨询该字段的长度极限值是多少，然后制定该输入项框的长度，通常建议是 40 的倍数，如 80/120/160/240/400 等。一个平台的所有输入框长度统一在 5 种以内最佳，不要设定太多的宽度，反而会让表单显得凌乱；太少又会让表单看起来都像四四方方的盒子。

虽长短不一但错落有致的表单

表单域提供默认值的必要性

美国著名心理学家巴里·施瓦茨在《选择的悖论》一书中讨论了生活中选择过多的影响。并提出策略应付无处不在的过多选择。他特别叙述了智能默认的作用，即在满足多数人需要的地方放置默认选项来帮助人们做出轻松的明智的选择。

所以通过提供合理的默认值，能有效节省用户时间。填写表单本身就是一个枯燥无趣的事情，如果这个模式能把表单填写的时间减少一半，用户会非常感激。

如上图所示，左边案例是站酷的表单，它提供几个大家常用的选项做默认项，减少用户做决策时间；右边案例是通过使用合理的控件根据前面用户输入的信息进行动态识别解析。

表单域的提示信息

常见的提示信息有以下四种表现方式：

设计师在进行提示信息的设计时，要思考如何进行有效提示，避免“正确但无用”的话。

4. 操作按钮

按钮常见位置：一般出现在页面顶部、跟随表单里的内容、表单内容底部、页面底部。

按钮阅读顺序：按钮出现页面右上角或右下角时，阅读顺序是从右往左，这符合 pc 端操作习惯以及人阅读习惯。按钮跟随表单内容或在表单内容底部时，阅读顺序为从左往右，这符合人的填写顺序从上往下，从左往右。

表单按钮不同位置的阅读顺序

底部按钮居右对齐：一般用在弹窗页面中，因为比较符合从左到右的阅读习惯，阅读完毕后视觉中心自然停留在右侧，所以右对齐效率最高。

底部按钮居中对齐：一般用在页面中，因为 WEB 端页面通常较大，右下角操作距离会有点远，所以表单用页面承载的话按钮建议居中。

三、表单常见布局类型

表单页面常见布局方式有四种。

基础表单；

1. 锚点(Anchor)定位表单；
2. 标签页(Tab)表单；
3. 分步(Steps)表单

1. 基础表单

当表单类目在 7 个以内或 7 个左右，且字段构成比较单一，这时候采用基础表单即可。

antdesign的基础表单

当表单类目在 7 个以上，字段构成比较复杂，就需要根据表单字段的复杂度与逻辑性、关联性进行分组，从而对内容进行归纳，将强关联的内容划为一组，降低表单填写时的认知负荷。

数藏项目CMS分组表单

2. 锚点定位表单

当表单信息量比较庞大，在信息分组的前提下也会占用很大的垂直空间，查看不同组需要划好几屏，但是每个组之间的关联性又比较强，不适合分开，这种情况下推荐使用锚点定位，点击定位项可以快速定位到相应的表单内容。功能上有点像可跳转目录。

锚点定位表单演示

3. 标签页表单

当表单信息量比较庞大，但是每个信息组之间并没有强关联性，每个组属于独立表单，这时推荐使用标签页分组方式。

4. 分步表单

如果每个信息组之间有逻辑先后顺序，那么推荐使用分步表单，分步表单可以给用户一定程度的填写进度预期。

数藏CMS系统的分步表单

四、表单常见交互方式

表单常⽤的交互形式有⻚⾯跳转、抽屉、弹窗、⽓泡卡⽚、原位编辑。选择什么样的交互形式，通常会根据内容的承载量以及关联度来判断，从少到多依次为：⽓泡卡⽚ – 原位编辑 – 模态对话框 – 抽屉 – ⻚⾯跳转。

1. Popover 气泡卡片

当目标元素有进一步的描述和相关操作时，可以收纳到气泡卡片中，根据用户的操作行为(如鼠标移入/聚焦/点击时)进行展现。

它的特点是不会影响原有任务进程，承载内容少。把内容的编辑修改操作及校验放在气泡卡片上完成，不会打断原有任务进程。

antdesign的气泡卡片演示

白猫贷借贷系统的气泡卡片

2. 原位编辑

其编辑内容也为展示内容，默认展示状态操作，可切换为编辑状态，属于轻量型的信息采集表单。

激活表单后直接编辑 ，回车保存

3. Modal 模态对话框

很常见的交互方式之一，⽤户在不离开当前⻚的情况下继续操作，是流程步骤中的分⽀⾏为，只能承载简单的表单内容。

4. Drawer 抽屉

抽屉就是从屏幕边缘滑入的浮层面板，覆盖住部分主体内容。它的特点是用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务(一般默认点击蒙层部分就可以收起抽屉)。

通常用于在当前任务流中插入的临时任务，如创建、预览等。抽屉大多情况一层就可以，如果遇到分支任务复杂的情况，也可以使用多层抽屉。

单层抽屉

多层抽屉

5. 页面跳转

最常⽤的⽅式，适⽤于绝⼤部分的表单，⽀持构建复杂的表单。特点是必定打断当前操作，返回上一级操作通常利用面包屑或浏览器的返回。

这次分享就到这里，下一篇《B 端数据可视化设计经验分享第二弹：表单设计（下）》稍后就来~