2021-2-25 资深UI设计者
大家是不是时常困惑于，B 端的表单设计体现不出高级感？设计发挥的空间特别的少？
那是你没用对发力点~
B 端：设计表单页面时，一方面须尊重用户的习惯，不要在不必要的地方体现差别。总结了 4 个思考问题：
案例：以创建公众号消息自动推送为例
另一方面要考虑信息层次。
搞定了基本要素后，我们开始考虑如何表现信息层次。
在了解什么封装度和信息密度前，我先跟大家讨论一下。什么是表单之间的关系。
我所认为表单之间的关系分为 3 种：
优点：
平铺所有需要填写的信息，适合内容项较少、内容项无法按照相关性分组的表单
缺点：
使用场景：
当需要完成一个简单快速的任务，输入少量信息即可完成创建
优点：
用于复杂任务时，拆解任务进行编排，适当的任务分割，可以降低用户出错率
缺点：
使用场景：
适用于大型、复杂任务
优点：
减少不必要（非重要）的输入项，能适当的减轻用户认知负担
缺点：
使用场景：
特殊场景下使用
那么用一条完整的链路来表达就是：
了解完表单的结构关系知晓利弊后，那么应用在我们实际的场景中表达就是如图所示：
封装密度高且信息密度低
△ 图中案例，仅做示例说明
将一个复杂的任务表单，进行封装后，看起来任务量是不是也变少了？操作起来也不是很复杂了？
小结：
分析了解表单的结构关系，判断表单，寻找共性的内容，将他们封装为一个卡片，也可以封装成一个组。主要的目的就是减少用户认知负担，提升操作/使用效率。
关于使用何种布局方式的判断，应从信息的复杂度和关联性两个维度去梳理。根据信息的复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载详情页的内容。
1. 信息的复杂度和相关性模型
△ 来源：Ant Design；来源链接： https://ant.design/docs/spec/research-form-cn
2. 区隔方式
根据各个信息之间的相关性，判断各个信息模块之间的亲密度，通常情况下，相关性强的内容尽量靠近，相关性弱的的内容尽量拉开层次。
△ 来源：Ant Design；来源链接： https://ant.design/docs/spec/detail-page-cn
3. 注意事项
文章来源：优设 作者：交互思维铺子
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务