|B端产品中，Web端表单如何设计( 五 )

客户2：“单列纵向占比大，表单太长，我看不到全部内容。 ”

客户3：“怎么不采用多列，多列我能看的内容多啊”等等…

针对这些问题，我们团队从自身的业务出发，对复杂业务表单布局进行了相应的探索。
1. 多列与单列的探索
首先，我们根据下图的规则对复杂业务的表单布局进行多方案的实验：

本文插图

方案一：采用4列布局，标签顶对齐。
那为什么标签不采用右对齐呢？
四列布局，页面已经很拥挤，加上标签长度长短不一且最大长度也无法确定（用户自定义），所以放置采用了标签顶对齐。
总体上来看，缩减的长图并不理想。

本文插图

方案二：三列布局，标签右对齐的方式。
由于三列布局，页面空间较大，尝试着把标签右对齐，总体上达到了缩减表单长度的目的。
但字段若出现换行，则页面信息模块是混乱的。

本文插图

根据CXL研究所的发现：单列表单比多列表单完成得更快一些。在这项研究中，参与测试的人完成单列表单的平均速度比多列表单快15.4秒；多列布局虽然缩减了表单长度，空间利用率也提高了，但整体的填写效率降低了，这与表单设计原则相违背。
同时从开发效率来看，单列成本较低（多列需要做响应式）；从业务承载上看，单列扩展性更强，适合复杂多样的业务场景（多列适合交单一的场景）。
综上，最后还是采用单列布局。
2. 单列布局在复杂业务中运用
面临的问题该如何解决？
我们团队重新审视了客户的这些反馈：空白区域过大、留白过大、表单太长、我看不全、不知道什么时候可以填完等等。
我们尝试把这些问题翻译成：我无法预知表单的填写内容，我想要是把空白的地方也利用上我是不是就看全了整个表单。
如果是这样，用户的本质述求就是想要掌控感。
对现有的单列布局做了以下几个处理：

a. 采用卡片式布局，区分内容；
b. 增加引导式的定位锚点；
c. 在锚处加入微动效反馈，给予用户确定感。

本文插图

感谢阅读！本文给表单设计提供了一个基本的指南，在具体项目中，你可能需要根据产品特性和用户需求进行调整。
如果你还有什么好的想法和建议，可以在评论里留言讨论。
参考文献：
http://www.woshipm.com/pd/1058591.html
http://www.woshipm.com/pd/4083149.html
http://www.woshipm.com/pd/3854174.html
https://ant.design/docs/spec/research-form-cn
https://medium.com/nextux/form-design-for-complex-applications-d8a1d025eba6#.dw95zpy42
https://www.jianshu.com/p/bcd76917753e
本文由 @Nick 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash ，基于 CC0 协议