如何应对复杂B端表单设计？这次给你两个案例（下）

前文已经提到：对特别复的B端表单，「简化」只是提升其易用的方法之一。遇到数据量大，级深，数据之间有叉或嵌套关系的表单时，还需要考虑该何分析拆、组织呈现数据。

我们今天的重点就从整体思考如何组织呈复杂程度各异的表单。具体方法的关键字就八字：逻辑架构、视图载体。后两案例分析。

逻辑架构

网搜一下关键字「B端」、「表单设计」，搜到很相关设计经验出来。不大数经验试图决单个表单的局和样式问题（比标签栏和输框是上下局还是左右局、左对齐还是右对齐），而非个表单之间的逻辑架构和衔接关系。而一个页面不无缘无故的出现，它承载特定任务，特定任务是用户达成目标的其中一，和其他任务（页面）相扣。需求不脱离场单独存在。场中的需求，需要场化的决方案。

举例子，某商家，需提供订单（表单1），包含商品列表（表单2），收信息（表单3），票信息（表单4），付费渠道账方案（表单5）。了保障多方合法权益，还需验证签署人意愿后（表单6），线签署订单合同（表单7）。还卖家发后买家的签收单一系列表单（表单8）。如下图：

面的例子可以明，即使某表单的数据很，依旧单点问题。解决单表单的布局样式问题很重，但这类问题处于相对较表层的置，还得向深处继续挖掘——如何处理多表单之间的逻辑架构衔接方式。

△右图自《The Elements of User Experience》（中文版本《用户体验素》）

那对于环环相扣的复杂表，解决方案会不会复杂呢？其实一句话就能说清楚：

表单之间的系从架构上看分成两种——串行结构或者树状结构。（我暂时还没发现第种）

是是有点像电路里的串联和并联？遇到复杂的，就解成混联，就是两种情况的互相嵌套，要拆解到最小颗粒再分析。知道了这个，在调研他产的表单设计时，可把这两种架构套进习别人如何组织容的。

△才到的卖进货案例。

视图载体

了解了架构，还需要搭配载体，就是采何种视图——是页面？还是弹？页面可是单页，可是多个分页；弹可是模态的，可是非模态的。是一些见视图：

△非模态弹的表单和来源页面系紧密，但要太复杂。

△见的模态弹。

△模态可承载稍复杂的表单。

△一些UI组件供了侧滑抽屉的样式，要防止户误触导致的数据丢失，对「闭」操作进行二次确认。

△页面是最见的视图形式。

△表格形式聚合表单，形式结构，整齐清晰。

△表单输入框之间可存在联系，联和层级系需要表现清楚。

△如果表单页面很长，尽量把容分组，减户心负担。可利折叠面允许户将容折叠，升在同模间的浏览效率。

△多步骤表单，将大任务拆解成小任务，配合成功反馈，可升户成每小步的成就感，及成目标的信心。

以上是些常见视图，设计时采用何形，要综合考虑以下几个素：

• 容多（容太多就适合放入弹）
• 复杂程度（层级多少、是否存在联动关系等）
• 逻辑结构（串行更适合分页，树状结构适合在一个页面内聚合）
• 设备限制（包括屏幕小、设备使用方向）
• 和来源页面关度（弹窗和新开页面相比，弹窗和来源页面的关度更）

但这些因素本身明显界，所以也不存绝对确的选项。估方案时，还需把用户使用场景中的扰因素考虑去（例如一口气完还分几次间断完？独立还协作的形式？）。

两个案例分析

结合面的内，家看看这两案例中的表单如何设呢：

1. 某公司的调查报告

公司信息分多维度，例如担保信息、资产信息。

担保息包含多个担保人或担保企业，息为基本息和用状况。

资产信息包含房产、车辆。

涉及到自然信息，可以归属在不类目下。

2. 评分卡配置

评分卡将多个模分数累。

模块由个或多个评分项组成。

评分项由一组评分规则，规则需要设定分值。

谈谈我的设计思路

1. 某公司的调查报告

调查报告的信息层级较深，最层模的字数量。为了快速纵览全，我在表单旁放置了导航栏。导航栏有个层级，可直穿最层，另外还添了两个细节——成百分和类目的添按钮。这两个细节的目的都是为了升户的控制感。

为个自然信息，可以归属在不类目下（个自然拥有多家企业，并在各企业担任多个要职责情况很常见）。为了数据库统和规范，减少数据多处复录入而造成数据库污染，我把自然基础信息由「编辑」转换为「调取」，即「输入」变成「选择」。此基础信息如在数据库不存在，则需要在模态窗内添加。这样不管公司信息维度如何划分，各类目下自然信息都会和基础信息立映射关系。在立用户画像时，此关联数据可以发挥要价值。

△导航栏添加了「完成百分比」和「添加按钮」，目都是为了提升用户控制感。

△系统内涉及到自然基础信息，统由「编辑」转换为「调取」。

△ 自然基础信息如不存在，则需要在模态窗内添加。

2. 评分卡配

调查报告内段类型丰富多样——信息维度不，段类型很难合（例如房价值取决于积和地理位，辆价值则跟品和型密切相关）。然而评分卡却呈现高度致规律性。不管评分项归属于哪个模块，都由系列选项（条件）和应分值（数）组成。

还一个大的差异点是，查报告里面有相当内容是非必填的（例不一定有房产）。但出现在评分卡中，果没有房产，在房产一栏也需要选择「无房产」，得到0分或者其他分数。所以查报告相对「开放」，评分卡相对「封闭」。

另外因保证各模块下的分项总刚好100分，填写过程中对整体行预览的频率高。

△ 导航栏对每模块的总分行了算，并提供预览按钮。

△ 分项内的选项源页面关联非常紧密，所以模态窗内添加编辑。

△ 分卡试卷，内很多，合页面非弹窗内呈。

提醒：上面个计不是标准答案，仅是抛砖引玉，大家可以思考一下有没有更好的解决方案，欢迎在留言讨论~

注作者的微信公众号：「呆书房一整天」