B端产品设计——表单设计终极秘籍（设计指南）

一、表单结构

单从效率角度看，顶对齐>右对齐>左对齐，根据不同的业务场景，效率并不是唯一的考虑指标。

• 希望用户放慢速度，好好考虑每个表单内容填写，那么采用左对齐；
• 顶对齐针对标签文字过多或者需要英文时，延展性更好
• 右对齐要考虑能否精简标签内容，确定好表单与界面的间距

1.表单标签

B端平台在条件搜索或新建表单的业务场景下条件量偏多，为尽量减少表单占用垂直屏幕空间，右对齐能提供较高效完成任务的效率。新手用户扫视（眼睛运动）右对齐标签表单的标签和输入框的平均时间分别约在170毫秒和240毫秒，而填写完成时间比左对齐快2倍

优势：标签右对齐标签与输入框相邻（方便快速填写）

劣势：右对齐布局造成左侧不齐，影响快速游览表单的效率问题；若标签文字宽度变宽，右对齐还有灵活度问题。

• 适用场景：既要减少垂直空间，又要加快填写速度的场景
  

2.必填标记

必填

• 表单大量字段为必填字段，为便于用户易读，必填标记展示在文本标签前
• 必填有两种方式：星号*（红色）和“必填”提示。
• 星号*在PC端已经很常见，用户熟悉其含义这样更符合用户认知。
• 星号*放置在标签前，用户只需扫视标签的最左边字符，就能轻松定位必填哪些字段。
• 星号*作为一种视觉标记，考虑在表单中的标识位置。标识在标签左边能指引用户迅速浏览界面，并判断出必填项。

非必填字段标记：非必填字段在表单录入时，我们提供较为友好的引导提示来提升产品体验

3.表单域（输入域）

3.1、定义：输入域是用来采集用户数据信息的核心内容，每个输入域字段都包含一个类型的数据信息。选择合适的输入域：对于用户来说，表单的填写体验再好也会造成一定的负担，所以表单设计的时候尽可能减少用户的思考、理解，选择合适的输入域类型，提升表单的输入效率。

3.2、默认值：表单域提供一些默认值有非常必要，在Web表单中某些地方利用智能默认减少不必要的选择次数或输入，加速表单完成过程。通过提供合理的默认，能有效节省用户时间，分担了用户思考或输入答案的工作，用户会非常感激。

默认值不是用户想要的，误导用户怎么办？

在设计有默认值的表单域时，要考虑默认值是否是大多数用户可以接受的答案，如果不肯定可以先去做一下用户调研，了解用户的心声；就算默认值真的不是用户想要的，至少你也为他提供了一个示例来告诉用户答案应该是什么样子的。这一点也可以节省用户几秒的思考时间——或避免一条错误信息。但并不代表所有的表单域都要给出默认值，我们只是尽可能的让用户节省时间。

3.3输入域采用模式：「线索模式」or「说明模式」

3.3.1. 线索模式：时间控件中有“请选择日期”，搜索框中会有“请输入xxx”等线索文字，这就是线索设计模式。假如搜索框中什么文字也没有，用户就会搜索一次错一次，因产品没有给用户框定搜索边界。因此线索设计模式可以让界面不言自明。

3.3.2. 说明模式：说明模式是输入框下面给出明确的提示文字，该文字是用来解释输入框中内容的输入标准、注意事项、要求等的，比线索模式的文字更完善和具有指向性。采用信息说明模式时，建议文案精简、设计直观，让用户无需猜测可以根据说明自己操作和成功完成操作。

4.表单动作

表单的动作分为主动作和次动作。

例如提交、保存或下一步等完成表单填写的动作属于主动作；

取消、重置、上一步等允许撤销输入的属于次动作。

5.表单消息

在表单中，消息的类型分为三类：帮助消息、错误消息、成功消息。

5.1 帮助消息

• 帮助消息分为帮助文字和帮助系统。

5.1.1帮助文字

帮助说明如何填写表单，但在表单中应尽量减少帮助文字内容，避免混淆表单重要信息。帮助文字最适合解释用户不熟悉或者需要特定的操作和内容。放置的位置通常在邻近输入框的位置。帮助文字：通过简明扼要的文字传达必要信息

5.1.2 帮助系统

帮助消息分为即时帮助系统和用户触发的帮助系统。一些复杂表单的帮助文字如果超过表单本身长度，使用帮助文字会让用户感到表单复杂且烦躁，这时候动态帮助系统是更为合理的选择。

即时帮助系统：

优点是帮助文字与问题相邻，当用户触发到此问题时才会出现，可以节省大量的空间，让表单看起来干净整洁。

缺点是只有开始填写时，用户才知道是否有帮助文字。因此一般用户知道如何回答问题，但系统需要给出更多解释时可以使用。

用户触发的帮助系统

用户通过问号图标等感知到帮助信息的存在，当需要时可以轻松找到。这种方法的缺点是只有当鼠标触发到热点时，帮助信息才会出现，表单所含问题复杂或者表单会被相同的人重复使用，那么这类帮助系统是不错的选择。

5.2 错误消息

用户在填写表单时，免不了出错，错误消息让用户知道无法继续进行，并且明确告知如何改正。

视觉表现：采用醒目的色彩和视觉元素来对比突出。目的是引起关注。

• 位置：指导文字邻近产生错误的输入框，可以更快更便捷的提供改进帮助。
• 
  
• 时机：在适当时机出现，避免过度使用，否则让用户产生沮丧情绪。（例：在用户输入进程中停止提示，确保输入完成才出现）
• 

5.3 成功消息

成功消息是鼓励或感谢用户的友好方式，感谢用户完成了枯燥的表单填写，同时告知用户已经完成任务。成功消息应当简短贴心，语言让用户感到愉快。

二、表单域布局设计

表现形式：表单表现形式错落有致为用户填写提供有用线索，采用不同长度的文本框提供了暗示；这种暗示是一种有用线索，当输入框长度长短不定时，用户会很自然地思考为什么这样；填写输入框时会自然考虑这些线索。

三、嘀加表单模度设计

以下模度以L为基准模板：

以下模度以L为基准模板：

XL=L+XS+Spacing   L=2S+Spacing=M+S+Spacing   M=S+XS+N=3XS+2Spacing  S=2XS+Spacing；Spacing为固定值12px

下一期：B端产品设计——表单交互设计

Powered by Froala Editor