具体数据录入项的优化策略和从整体上思考如何组织和呈现复杂程度各异的表单

本以为遇到表单设计没什么好怕的了，但没多久就遇到了特别复杂的表单，有大几百个录入项；当然，比设计表单更崩溃的是用户要填写这些表单；现实情况是——很多企业中大量员工的日常工作就埋没在这些冗长复杂的表单之中。

不得不承认，对于特别复杂的B端表单，“简化”只是提升其易用性的方法之一；遇到数据量大，层级深，数据之间有交叉或嵌套关系的表单时，还需要考虑该如何分析拆解、组织呈现这些数据。

针对具体数据录入项的优化策略和从整体上思考如何组织和呈现复杂程度各异的表单：

1. 将用户操作成本降至最低
2. 设计聪明贴心的输入框
3. 逻辑架构
4. 视图载体
5. 两个案例分析

一、将用户操作成本降至最低

《Web表单设计——点石成金》提到一对概念：「Inside Out 由内而外」和「Outside In 由外而内」。

简单理解，这是两个看待事物的视角：

• 「Inside Out」是从系统或软件角度出发，向用户要求“请提供我需要的信息”；
• 「Outside In」则是从用户视角看待系统，用户如何理解这些内容？他们会获得什么？能做什么？

这两种视角之间的矛盾就是：用户进行更少操作 VS 系统获取更多信息；要帮用户解决这个矛盾，需要向系统投入更多技术资源，从而能让系统代替用户承担更多工作负担。

解决方法的技术成本有高有低，但从优化效果来看可大致分成三个等级：

1. 第一级：用户无感的数据获取方式

例如：

• 平台间的对接：通过平台对接获得完整、规范的数据。
• 系统自动获取数据：获取来源包括用户已经输入过的数据，或者根据用户已输入数据计算出来的其他数据，也包括设备数据；注意某些数据获取需要获得用户允许。

2. 第二级：允许用户提供其他类型的信息

例如：

• OCR技术：利用图像识别技术，用户上传图片代替表单输入，系统将图像内容转换为文本后填入对应输入框。
• 批量导入：用户上传文件，系统读取后将数据填入对应输入框。
• 语音输入：在对文本格式要求不严格的场景下支持语音输入。

3. 第三级：从量上降低操作成本

例如：

• 选择代替输入：维护一套数据，让用户从输入变为选择。此方式除了减少键盘敲击次数，还可保证填入的内容符合格式规范。
• 设置合理默认值：默认值可能取自统计数据，也可能基于用户个性化数据。默认值不仅可免去输入过程，还可以作为建议值给用户提供指导。
• 访问剪贴板：例如在MacOS Sierra和iOS10以上的苹果设备之间，可以无缝复制粘贴文本和图片。

二、设计聪明贴心的表单

在跟客户经理聊天的时候会发现，那些我们自以为简单明白的设计，对用户来说竟然如同天书。

神马？我们不是竭尽所能降低了用户操作成本吗？为什么能顺利完成表单的用户屈指可数？

究其原因，我们还是单纯的从系统视角「Inside Out」看待问题。

如果能切换成用户视角「Outside In」，在预判用户可能会遇到的问题时就清晰了很多——用户在填写每个输入框都经历了「填写前」、「填写中」、「填写后」这三个阶段。

• 在「填写前」用户可能会疑惑：这个是什么意思？为什么要填这个？怎么填？
• 在「填写中」用户需要知道：我填对了吗？我完成了吗？
• 在「填写后」用户会想要反馈：我成功了吗？怎么失败了？是我自己的问题吗？我该怎么修正错误？

所以从用户视角看，用户需要的是一个聪明贴心的输入框，即在「填写前」、「填写中」、「填写后」这三个阶段中即时给予用户帮助和回应。

1. 填写前

在填写具体的表单项之前，用户需要理解和清楚要做什么？做这个的目的是什么？他能获得什么？该如何做？

常见的方法是利用标签和占位符对这些问题进行解释，但标签和占位符字数有限，必要时可以借助提示文字辅助说明。

△ 菜鸟裹裹首页顶部搜索框，在点击之前，占位符描述操作目的；点击之后，占位符解释操作方法

2. 填写中

• 从系统角度看，我们希望用户按照系统要求的规则输入信息，即「系统的实现模型」。
• 从用户角度看，用户可能不知道、不理解规则，即「用户的心理模型」。

如果「实现模型」和「心理模型」两者出现分歧，用户操作心流就会遇到阻塞，甚至出错。

为了扫除障碍，需要设计师利用同理心或者调研的方式来理解用户心理模型（B端产品基本很难单纯利用同理心），利用设计手段，将「实现模型」包装成用户可以接受和理解的「心理模型」。