B端表单设计没有高级感？那是你没用对发力点！

前言

大家是不是时常困惑于，B 端的表单设计体现不出高级感？设计发挥的空间特别的少？

那是你没用对发力点~

B 端：设计表单页面时，一方面须尊重用户的习惯，不要在不必要的地方体现差别。总结了 4 个d 0 D R z t g b思考问题：

案例：以创建公众号消息自动推送为例

• 思考用户用产品做什么事？用户会用该产品创建公众号消息推送，根据用户触M ^ | 3 R W y %发事M J P p ^ *件，推送相关信息
• 用户用这类产g d %品最关心的是什么O – ] K h？核对触发事件，Z ` B G ; l检验消息发送状态
• 用户有哪些思维定势？这里就不举例了（c k = ^ O d # L t条件不变时，a , V x N T能迅速地感知现实环境中的事物并作出正确的反应）
• 用户用过什么类似的产品等？……

另一方面要考虑信息$ p / ? h层次。

搞定了基本要素后，我们开始考虑如何表现信息层次。

• 封装度高– ` i j ^ m } H A、信息密度低
• 如何判断采用哪种布T 4 m M ^ k { C K局方式

什么是封装度高且信息密度低？

在了解什么封装度和信息密度前，我先跟大家讨论一下。什么是表单之间的关系。

我所认为4 w E Q表单之间的关系分为 3^ C b 种：

1. 常规结构

优点：

平铺所有需要填写的信息，适合内容项较少、内容项无法按照相关性分组的表单

缺点：

• 表单页中需要填写内容众多，容易造成信2 d [ K M R B G息密度过高
• 操作需要的视& w 6 } r觉元素越多，用户的认知负担越重

使用场景：

当需要完成一个简单快速的任务，输入少量信息即可完成创建

2. 树状结构

优: j M ) M E点：

用于复杂任务时，拆解任务进行编排，适当的任务O R u分割，可以降低用户出错率2 # 3 ( ] % | #

缺点– M c f 5 $ / D v：

• 无法在表单页中根: @ f 8 t E n据内容量进行– @ J } 0 Q h 4 K合理地布局
• 视觉噪点过多，无法兼顾页面展示和用户填写效率

使用场景：

适用于大型、X ( # ~ S ( = 5复杂任务

3. 显W 2 ~ 5 | %/隐结构

优点：

减少不必要（非重要）的输入项，能适当的减轻用户认知负担

缺点：

• 虽然减轻用户输入负担，但无法高效的判定任务分割的容错率
• 用户确认信息有一定难度，无法兼顾页面展w N k示

使用场景：

特殊场景下使用

那么用一条完整的链路来表! | w达就是：

了解完表单的结构关系知晓利弊后，那么应用在我们实际的场景中表达就是如图所示：

封装密度高且信息密度低

△ 图中案例，仅做示例说明

将一个复杂的任务表] N , A O h k ;单，进行封装后，看起来任务量是不是也变少了？操作起来也不是很复杂了？

小结：

分析了解表单的结构关系，判断* Q l t 7 ` V *表单，寻找共性的内容，将他们封装为一个卡片，也可以封装成一个组。主要的目的就是减少用户认知负担，提升操作/使用效率。

如何判断采用哪种布局方式？

关于使用何种布局方式的判断，应从信息的复杂度和关联性两个维度去梳理。根据信息的复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载详情P & ) I W页的内容。

1. 信息的复杂度和相关性模型

△ 来源：Ant Design；来源链接： https://ant.design/docs/spec/research-form-cn

2. 区隔方式

根据各个信息之间的相关性，判断各个信息模块之间的亲密D ! 0 ] F 5 4 Y A度，通常情况下，相关性强的内容尽量靠近，相关性弱的的内容尽量拉开层次。

• 不通栏分割线：将相关内容分开；
• 通栏分割线：Y u L将内容分成多个部分；
• 卡片：放置一个主题；
• 页签：对象描述信息最顶层组织方式，如按版本组织、按意图组织、按阶段组织` d 6 A ; j；

△ 来源：Ant Design；来源链接： https://ant.design/docs/spec/detail-page-cn

3. 注意事项

• 表单内容数量 <7q t Q t 项，不建议分组；
• 表单内容数量 7~ 15 个建议分组；
• 表单内容数量 >15 个建议使用页签分组或采用分组标题栏展开收起样J ! 7式。

欢迎关注作者微信公众号：「交互思维铺子」