编辑导语:形态是B端产品中最广泛的设计形态之一，充满了各种不确定性。本文从认知和互动两个维度总结了形态设计中的认知和互动。感兴趣的朋友，一起过来看看吧，希望对你有帮助。

在《Web表单设计》一书中，作者认为“在最关键的界面中，表单决定了交互的成败”。表单作为B端产品中最广泛的设计形式之一，有各种各样的设计方法和技巧，也充满了不确定性。

今天我就从“认知”和“交互”两个维度来总结一下表格中的设计细节，希望对你有所帮助。

首先，认知策略

1.表格排列

表单的主要作用是向用户清晰地传达信息，单栏表单更有利于用户浏览动线，帮助他们识别和填写内容。而多列表单表单的用户，视觉横向移动范围更广，浏览填充效率更低。

比如QQ邮箱设置页面，选项都是垂直布局的。当然，这样的布局很理想，也很符合场景。

首先，作为设置界面，并不是高频运营服务，用户只会调整部分内容，而不是整个服务的运营。所以更强调查看信息，垂直布局更有利于浏览。

其次，表格项的内容不要复杂，即使采用垂直布局，对整体表格长度的影响也是有限的。另外底部有常驻按钮，对用户的操作效率影响不大。

但在B端输入表单中，填写内容本身的任务就比较繁重，需要适当控制表单的整体长度，盲目追求浏览行数是不可取的。

2.输入框的长度

1)输入框布局

如下图，右图采用错落有致的排版方式，左图更为统一。但相比较而言，似乎右边的诗句更舒服。

因为在视觉上，我们更容易把右图中的空空格和内容看成一个和谐的整体，但是左图中的过度对齐导致了隐含的截断，我们会觉得表单列右侧的空空格之间缺了一大块。

所以要注意形式上的整体协调，不要为了对齐而对齐。

2)输入框长度的提示

输入框的长度有一定的寓意，因为用户会认为它对应的是输入的内容。尤其是邮政编码、电话号码、银行卡号等定长字段。

在设计这类输入框时，可以采用与内容相匹配的长度，避免用户对输入内容正确性的怀疑。

下图就是一个典型的案例。上图中，如果把花不了多少钱的金额输入框进行等宽处理，很容易误导用户对所需输入金额的判断，造成用户的不安全感。

3.必需和可选

必填和可选信息是表单的基本信息，用于指导用户识别关键信息和做出行为决策。

通常，当必填字段较少时，首选星号(*)来显示，这样可以提高信息识别的效率。当有许多必填字段时，您可以标记可选项目以避免全屏显示星号并增加附加信息的数量。

但建议在同一系统中采用统一的阅卷方式。个人比较喜欢星号(*)的方式，用户成本低，对内容干扰小。

4.识别比记忆好

这是尼尔森的十大可用性原则之一，要求通过各种方式给予用户足够的信息，以降低用户的内存成本。在表单设计中，各种提示信息主要用于辅助用户完成表单。

1)倡议提示

对于开放的、复杂的超出用户认知的输入信息，需要进行主动提示。

比如在阿里云和腾讯云，很多名字字段都需要以字母开头。普通用户为了便于信息的识别和记忆，更习惯于中文命名。

在这种情况下，需要在表单中默认给出填写说明，以减少用户的记忆和出错概率。

此外，一些限制性的规则，会对用户的操作产生直接影响，也需要明确告知用户，以免产生误解，带来用户的投诉。

可以通过输入框中的“占位符标签”将倡议通知给用户；但过长的提示信息通常放在输入框下方，方便用户查看。

2)互动提示

还有一个增加信息交互的提示。比如设置密码时，光标暂停会触发密码规则提示。

既保证了默认界面信息的简化，又保证了提示的有效性。当用户输入时，内容会被检查并反馈，互动性更强。

3)被动提示

对于用户来说，解释和帮助信息更倾向于商业属性。随着用户对产品的深入使用，这些信息会变得不那么重要，用户查看的频率会越来越低。

所以这类信息通常是默认收起的，减少了界面的信息量，用户可以在需要的时候主动触发查看。

5.主任务和分支任务之间的协作

有些展示形式主要是为用户提供信息服务。但是为了保证链接的顺畅运行，会增加一些分支任务。

比如预览任务时，会增加“发布”或“编辑”的功能，让用户直接完成第二次操作。或者在智能报表中添加人工“更正建议”来更正内容。

这些操作只是可选的，对用户来说不是必需的。

如果信息按顺序列出并显示，这些内容会放在页面的底部。在长表单场景下，这些信息无法直观展示，用户很难感知。因此，有必要为这些次要任务增加额外的曝光。

比如顶部的引导文字按钮，借助定位锚点，实现路径直达，提高操作效率；或者采取底部带浮动地板的弹窗形式，方便填写信息和查看表单内容。

具体设计方案有多种方式，需要根据场景和用户来确定。但是，设计师需要能够有机地协调主任务和分支任务，以确保用户对页面内容的充分感知和运行效率。

6.数量级的影响

有时候我们要面对大量的数据，这对设计者和使用者都是一个挑战。在设计的时候，我们需要根据信息量的大小，做出合适的设计方案。

当信息量比较大的时候，先把内容拆解，根据用户的认知习惯把信息分层，让用户不直接面对大量的数据。

比如通过树表结合，或者双级关联下拉选择，逐步缩小用户的目标范围。

在某些场景下，要增加辅助搜索功能，让信息筛选更容易。

第二，互动策略

表单设计除了静态显示效果，还有很多交互操作。主要的设计目标是“效率”和“防止错误”。

1.经营效率

1)减少用户输入

虽然PC输入比移动输入更方便，但是对于用户来说，输入操作的成本仍然很高。用户一方面需要思考填什么，另一方面需要准确完成内容输入。

但是选择的成本相对较低，所以在设计表单时，要尽可能让用户按照选择的方式完成任务。

比如邮件上传附件的时候，如果邮件没有填写标题，附件的名称会直接填写在邮件标题里，减少用户输入。

2)合理的预设

可以通过信息抓取，内容关联分析，预设合理的内容值，减少用户操作。比如设置QQ邮箱时，系统提供默认语音，用户只需快速启用即可。

如证件类型、手机区号、国籍等常用选项。，为用户提供默认选择，也能有效简化操作步骤，减少用户输入，帮助用户更快速地完成表单填写。

2.顺畅的业务流程

我们在填写任务A的时候，需要通过联想来选择任务B。并且任务B还没有被创建。我该怎么办？

一般需要在任务A中完成创建B的任务..比如弹出窗口，抽屉，甚至新页面，保证主流程的流畅。否则高频操作的任务会严重影响用户的操作效率。

在流程中，由于各种因素，无法直接创建分支任务，或者用户的操作由于各种限制而受阻时，该怎么办？

此时，您需要在任务开始之前给用户足够的信息。避免用户在填写了一些内容后，发现缺少相关内容，导致任务无法完成。这会给用户带来非常不好的体验，尤其是会消耗大量精力的工作。

3.保存机制

填表时可能会遇到各种异常场景，需要有防错机制和保存功能，避免用户误操作造成信息丢失。

4.即时反馈

填表是为了收集用户正确有效的信息，所以需要在用户填写或提交表单时加入验证机制。

验证机制分为前端验证和后端验证。

前端验证不需要服务器传输数据，前端页面会根据验证规则对输入内容进行验证。比如邮件格式、手机号码长度、密码是否符合规则等。

后端验证需要将表单内容发送到后端数据库进行匹配，如果不匹配，将信息反馈到前端页面。通常在点击提交按钮后使用，如账号不存在、密码错误等。

前端检查可以帮助用户发现问题并及时纠正，纠错效率更高。后端验证相对滞后，出错后需要用户自行定位错误物品。

无论哪种方式，都应该通知用户错误的原因，以帮助他们快速解决问题。

第三，写在最后。

形态设计是设计师绕不开的东西。无论用什么方法论，可能性都不可能穷尽，也没有一套涵盖所有场景的设计模板。

设计师需要根据实际的业务场景完成合适的设计方案，在不断的实践中积累经验和得失。

#专栏作家#

子牧先生。微信官方账号:子牧UXD(HelloDesign)，人人都是产品经理专栏作家。体验设计师。8年互联网行业经验，擅长体验式设计思维、设计方法论、交互设计研究。

本文由人人作为产品经理原创发布，未经允许禁止转载。

题目来自Unsplash，基于CC0协议。