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.表单动作