设计师要知道的表单设计小细节

前言

表单页是B端产品中的典型页面，用于信息添加和录入，有些小伙伴在设计B端表单时，不知道需要注意哪些问题，本文对B端基础通用组件之一——表单进行了总结，带你全面了解在设计表单时过程中需要了解的知识和遵循的原则，希望能给到小伙伴一些启发和帮助。

1.易读取

1.1清楚的传达规则

1）提示文案要简单易懂，表述清晰

这听起来很简单，但仍有很多表单忽略了这一点。要清晰的描述错误并提供相应的解决方案，避免用晦涩的专业术语（如代码展示的错误信息），试着用人话来引导用户填写，尽量简洁并贴合用户认知，垂直业务的文案最好是业务语境的表述，报错文案应该尽可能简短直观，保证用户在无需猜测，用户看到一大段文字，很可能会失去了去阅读的耐心，文案还应清晰指出错误的原因，对于用户可自己修复的问题，应告知问题如何修正或提供相关有效的解决方案。
除了提示文案之外，如果弹窗空间足够，可以直接展示图片样式作为引导，降低折叠度，避免用户二次点击，减少了一步用户操作，清晰描述错误并提供解决方案，报错文案应该尽可能简短，用户看到一大段文字，很可能会失去了去阅读的耐心，文案还应清晰指出错误的原因，对于用户可自己修复的问题，应告知问题如何修正或提供相关的解决方案。

2）以人为本 服务设计

作为设计师我们要有同理心，以人为本做服务设计，充分考虑具有不同程度生理伤残缺陷者和正常活动能力衰退者的使用需求，产品要为广泛的受众提供服务，保证残疾人对环境的可接近性、可操作性与安全性。
避免只依靠颜色传达信息
如果设计时只用颜色来区分，可能会让色盲色弱人士难以感知到准确的提示信息，可以尝试同时使用「颜色区分+图标+说明」来表明哪个是错误状态，错误提示应当具备清晰的视觉展现，配合颜色和图标提醒，标出错误位置。

提供多种验证码输入方式
图形验证码是用于确保当前操作的是一个人而非机器而设计的，但视障用户无法使用肉眼获取验证码，只能通过屏幕阅读器获取后进行语音播报，导致被判定为非人类。
我们可以采用其他验证方式，如语音验证码、短信验证码等，同样能达到验证效果，如苹果官网的注册流程中，验证方式除了提供图形验证码，还提供了语音验证码。

1.2信息分组，一目了然

为什么要对信息进行分组？

米勒定律（Miller’s Law）：
美国心理学家米勒教授发表的《神奇的数字7加减2：我们加工信息能力的某些限制》中提出观点：短时记忆的容量为7±2，也就是人们一分钟能记忆储存的组块大概5-9个，当需要处理的信息超过5项时，就需要将它们归类到不同的逻辑范畴内，将信息按一定规律分组呈现，将大大降低用户的增加用户的填写压力，提高用户的填写意愿。
比如常见海报 开屏页等等，可以明显地发现，很多标题的字数都在9个以内。

对于录入项较多的页面，会增加用户的理解负担和操作成本，将关联性强的相关表单组合成子模块 ，不仅在视觉上降低长表单带来的压力，还可以降低用户自主归纳成本，因此我们保持表单尽可能合理的利用分页、分组，这里可以按以下原则进行分组：
以必填项划分：若表单内有必填项和非必填项，且各项之前关联度不高，可采用将必填项划分为一组进行优先呈现。该种方式有助于让用户快速发现自己需要录入的内容。
以相关性划分：若录入项较多，且各项内容之间存在明显的关联度区分，可考虑以内容相关性进行信息分组。该种方式有助于让用户理解各项内容间的逻辑关系。
以操作成本划分：若录入项间的操作存在差异或用户对需要录入的内容的信息获取途径存在难易之分，可将易录入或易获取信息的录入项放在表单靠前的位置，优先展示。该种方式有助于降低用户的录入门槛。

如果实在无法避免填写内容过多的情况，将其拆分为多个步骤并对相关填写项进行分组：如果用户打开表单时的第一感觉是内容过多，会让用户失去填完的耐心，降低用户的填写意愿，将超长表单的信息按一定规律逻辑、属性分割几个小任务分步展示，用户的认知成本会少很多，用户知道自己每填一步在干嘛，以及会有阶段感。降低用户自主归纳的成本，对整个表单有清晰的预期。

1.3视觉降噪

合理的设置必填项

例：必填项和非必填项标星（此规则非必须，根据不同业务属性灵活调整）

全部为必填or非必填时，不标识。

必填项比重很大，可适当提示非必填项，而非全部添加“*”，降低用户的视觉干扰，增加心里负担。

1.4适当的折叠度-逻辑分组+折叠度

收起低频操作，渐进式披露。

当表单项可让用户选择的选项很多时，且有些信息是低频使用信息，低频编辑项可以默认收起，当用户有需要时再打开，信息有节奏展示更有利于用户更高效获取、理解信息。
过长或者平铺的表单需要花费很长的时间才能完成，隐藏不相关的信息，信息录入先简单后复杂，先熟悉后陌生，先放必填基础信息，后放选填自定义信息，合理控制表单的复杂性可减少用户的心理负担，必要的信息在用户需要时出现，有效降低用户在完成其他表单项时的干扰。

2.视觉清晰

视觉动线流畅-单列布局

信息能单列展示就不用多列展示，避免用户阅读路径呈“Z”字型，用户的眼睛就要跳来跳去，这样阅读模式的跳跃感较强，用户需要很长时间去理解它，使得用户非常容易忽略一些必填的内容，将信息填入错误或者放弃填写。
当表单分布垂直线上时，用户可以快速垂直浏览表单，从而更容易完成他们的任务。
什么时候可以用多列展示？
表格上方的数据过滤/筛选，此时没有漏填不漏填的场景，同时更加强调表格空间的利用率。

3.高效智能

3.1智能录入-自动补齐或自动补齐

为什么不让前面的提示更进一步呢？花点时间思考用户可能遇到什么场景。
表单录入过程中能用选择的就不用输入的，尽量把用户当上帝，不让用户动脑子，根据提供的关键词输入框实现模糊搜索、智能联想、自动匹配等选项，提高工作效率。
1）自动补全信息：
在输入邮箱时，用户输入数字时，邮箱后缀的联想会自动补全邮箱后缀，减少用户输入。
系统还可以自动为用户填写一部分表单，从而降低录入成本。
2）自动填入用户已有的信息：
有些业务场景，用户可能会复用之前已填写的内容作为模板，此时在新建的录入页面里，可以自动获取用户之前的数据，提高用户的使用体验。
3）系统自动获取数据：
系统根据上下文可以自动获取填写信息，无需用户再次填写，降低用户的记忆负荷，（如填写合同时，商品的基础信息可以为用户自动填入），还可以根据GPS定位获取用户的数据自动填入，比如地理位置、电话区号等。

3.2提供合适的默认项

能给默认值就不让用户选
默认字段设置在预约会议时，预约时间默认为当下的整数时间，比如当前时间为19：14，可默认为19：30，当用户时间与默认时间一致时，减少用户输入。
当表单中的某些信息用户在选择时基本都为一个值时，可以采用默认值设计模式，这有利于减少用户填写时长，例如女孩子身高基本取值在155厘米~165厘米之间。

3.3 OCR文字识别

能用技术解决的问题就绝不留给用户
OCR文字识别，是一种利用OCR （Optical Character Recognition，光学字符识别）技术，将图片、照片上的文字内容识别为可进行编辑处理的文字，它支持通过拍照识别、二维码识别、导入识别方式对名片信息进行采集，
对于一些标准证件类信息（如名片，发票，收据）的录入，可以通过OCR识别文件内容，用户通过上传图片，自动识别图片中的文字内容并自动填入结果，帮用户省去很多不必要的操作。从而提高填写效率，这可以减轻用户的填表负担，帮助用户更快地完成表单填写。
如果图片不清晰或存在水印，将大大降低识别准确度，此时应提供修正渠道，让用户可以逐一校对并修改文本内容。

能用技术解决的问题就绝不留给用户，很多时候，用识别代替输入，能提升用户完成表单的效率及使用体验。例如身份证扫描自动识别录入个人信息、银行卡拍照识别卡号、系统自动定位等，都能帮用户省去很多不必要的操作。

4、安全感

4.1操作前：防错

1）反馈及时，指引明确

提供及时的反馈和明确的填写指引，是降低填写错误率的非常有效的手段之一。
由于B端产品的专业度较高，经常会涉及各行业作业过程中的一些专有词汇，并且对于权限和任务流程等也有复杂的规则约束，这就使得用户很容易在某些节点产生困惑。为规避上述情况，使用户能够顺利完成任务，在录入过程中也需要加入帮助和提示。

名词/规则解释：预判用户可能对哪些名词或规则产生疑惑，并将其展现在页面相关联的位置。通常情况下，解释说明类信息可采用较弱化的形式展现，因为它只针对新手用户有效，当用户已经清楚相关名词的含义或者规则后，就不再需要看到这类信息了。
在用户输入信息前，可以在输入框补充输入提示，如账号名称、密码的组合方式，预先告知用户，让用户形成一定的心理预期，有助于降低填写的错误率。

2）为用户封闭不正确的道路：

我们可以对一些可能造成错误的操作入口，设置障碍或直接禁止操作，避免错误的发生。在动作发生之前，就要防止用户发生混淆或者做错误的选择或操作。比如：将超出时间选择范围的日期置灰，电话号、身份证号录入时只允许输入数字同时设定位数上限。

3）优化信息自查方式：

允许用户按照习惯输入，但系统自动格式化。如身份证号、银行卡号，在填写银行卡号时，自动增加分位符便于用户核实；在输入电话号码时，增加电话号码的隔位符，便于用户检查数字填写的是否正确。

在交易场景，对于填写较大金额的数字录入时，比如富婆充值美容卡的时候，对于大金额的交易，可以将金额转译成汉字给予用户提示。

4.2操作中：即时反馈

1）动态校验

在用户输入信息时，系统需要判断信息输入的准确性，及时给予反馈。如输入证件信息时可以通过输入的格式，号码长短等判断用户输入正确与否。

2）即时反馈，减少焦虑

用户操作成功时给他们反馈
你可能以为整个表单的设计到用户按下“确定”就结束了，错！用户需要清楚的已操作成功的反馈，还要让他们知道接下来的步骤。

当某项录入项已录入完成并失去焦点时，触发系统校验，（校验内容存储在远端，程序需要完整的输入信息到远端进行检验，并给出反馈。）并且尽量采用非模态反馈的方式，避免打断当前任务流。如果用户填写发生错误，应即时给予反馈，这将降低用户的问题查找和修改成本。当某项录入项已录入完成并失去焦点时，触发系统校验，并且尽量采用非模态反馈的方式，避免打断当前任务流。

4.3 操作后：提醒和纠错

容错：用户可控，来去自由
在用户与产品发生交互时，难免会“犯错”，所以我们在设计时，要优先考虑是否有更合理的设计，可以避免用户犯错。如果无法在设计上避免用户犯错，我们可以采取一定的容错原则，尽可能包容用户的错误，甚至帮助用户纠错。
告诉用户错那儿了——“发生了错误”。好吧谢谢，我发现了。但是，我已经看了多少遍了？详情呢？这让我非常受挫，我甚至都没有得到一个哪里出错的提示，帮帮你的用户吧，让这个错误尽可能的明确。

在相关输入框旁边显示错误的信息
发生出错，哪错的，显示在哪？假设用户提交了有三处错误的表单，然后全都显示在顶部。这种情况下，他们需要浏览整张表单找出哪些需要注意。填写前的告知与引导，填写中的校验与帮助，填写后的反馈与引导。都是对用户提供填写单据的帮助。初此之外，还有其他场景，也要考虑用户如何面对。异常情况下，需将具体原因提示给用户在出现异常时需予以用户必要的状态提示，并告知解决方案，使其有路可退，缓解用户沮丧情绪，为用户提供帮助。

4.4自动保存

预防信息丢失：当遭遇页面刷新、网络中断、应用闪退等突发事件时，花费了很长时间才完成的内容又得重复一遍，很容易产生的挫败感，真的很让人崩溃。
通常对于录入表单，用户退出后，填写的内容将不被保存。为了防止用户误触带来的信息丢失，需要在退出时给予用户二次确认提示。
对于需长时间操作的页面，为了避免因系统意外崩溃造成用户的损失，可提供自动保存功能，除了系统自动纠正功能，自动保存功能也是一个容错原则的体现，当用户一旦输入了信息，输入框将立刻记录用户已经填写的内容。

5、所见即所得

依据尼尔森十大可用性原则中的贴近场景原则，遵循真实场景的认知、习惯，让信息的呈现更加自然，易于辨识和接受。
提供表单配置结果预览
预览可以帮助用户避免各种错误,尤其是当操作过程较为复杂的时候。例如,在用户可能刚做了一次复杂功能配置,如果操作错误,但由于没有结果的实时预览,需要等到提交后才能发现错误,但是如果可以通过可视化的结果告知用户配置的结果,便能为用户提供更正错误的机会。
预览也可以使应用更具自我描述性,即操作结果实时可见,其作用好过任何文档或文字说明。例如电脑连接打印机打印文档时,可以选择横版和竖版,并提供打印效果预览。

6、零/低代码平台

延展未来：提升表单设计的效率，零代码开发平台指的是无需代码开发、就能实现应用搭建的平台，很多传统企业面临代码开发的资金与时间成本等问题，从而催生了低代码开发和零代码开发工具，帮助企业非技术人员实现零代码应用搭建，也可以成为一款开发工具让IT技术开发人员实现快速效率的开发。
举个例子，相信很多人都玩过乐高积木，零代码和乐高这种产品有差不多的共性，就是能给人提供具备一定规律的模型，让人们能快速构建出自己想要的模型。
所以给零代码的定义可以是：提供功能模块，让用户像搭建积木一样搭建管理应用，而零代码开发平台的功能主要是：信息收集、分析、协作等。通过功能模块，衍生系统应用，像我们常见的应用有：生产、销售、人事、项目、绩效等都可以轻松搭建！
结束语
对B端表单设计在实际的业务场景中设计师如何规避和注意一些设计细节，春卷做了归纳和总结，希望对从事B端工作或者对B端知识感兴趣的同学有些帮助，感谢阅读，欢迎交流～

文章参考
http://www.woshipm.com/pd/2628260.html
http://www.woshipm.com/pd/4511786.html

https://mp.weixin.qq.com/s/_IhpUUFw2EKJD_U0Kqd61A