交互|如何提高B端表单操作效率，这里有7个技巧( 二 )_白高粱|镜头|脚本|视频|分镜头

文章插图
1）当表单条目数在7个内，表单较为简单，这时候我们一般直接采用基础表单，比如有赞更换负责人页面：

文章插图
2）当表单条目数在7个以上，可归类到复杂表单，这时候就需要根据表单的复杂度、逻辑性、关联性进行判断，选择合适的分组方式，进行归纳简化，降低表单填写负荷。具体该如何选择呢？
① 如果每个组之间有逻辑先后顺序，那么推荐使用分步表单，比如阿里云的购买。

文章插图
② 如果每个组之间关联性较强，就不适合分开，推荐使用锚点定位，比如销帮帮的编辑销售机会、新建客户等表单都是采用锚点定位。

文章插图
③ 如果每个组既没有逻辑先后顺序，也没有关联性时，推荐使用标签分组，比如飞书的发票管理，都是相对独立的表单。

文章插图
三、复杂表单布局要考虑关联性上面提到了为复杂表单进行合理的归纳简化，但是归纳简化后采用什么布局方式更合适呢？
表单页面的布局方式，综合起来可分为普通布局、弱分组、区域内分组、卡片分组这四种。

文章插图
在选择时，和表单的交互方式选择一样，可参考 Ant Design 表单设计规范，从关联性和复杂度进行判断，在选择时，我们优先考虑信息的复杂度，其次再考虑相关性。

文章插图
1）当条目数在7个内时，仍然使用基础布局，比如网易互客的企业信息资料新增：

文章插图
2）当表单条目数在7个以上，可归类到复杂表单，这时候仍然根据表单的复杂度、逻辑性、关联性进行判断，选择合适的布局方式，提高表单的浏览效率和屏效需求。
① 当表单空间有限，且相关性较强时，推荐使用弱分组，将多个组合在一行中，形成分组的暗示。

文章插图
PS：弱分组也可和区域内分组和卡片分组组合使用，从而提高屏效。
② 当条目数在7-15个内时，相关性较强时，使用区域内分组较为适合，比如网易七鱼的新建在线质检模版：

文章插图
③ 当条目数在15个以上，推荐使用卡片布局较为合适，比如阿里云服务购买表单：

文章插图
四、表单视觉可以不平衡在设计表单时，我们总觉得视觉重心偏左，因此在设计时我们总想让视觉变得更平衡。

文章插图
比如京东云，使用大屏电脑看，信息全集中在左边，感觉视觉有点失衡。而类似飞书的居中设计，视觉会更平衡。
于是我在设计时也在考虑要不要用居中设计的方式呢？但是当我继续查找资料时发现，其实在表单的设计中我们不用过度的追求视觉平衡，首先人的视觉动线遵循F模型，同时根据行业相关信息可读性研究，眼动舒适角度为30度。

文章插图
因此当表单信息较少，不考虑屏效时，采用从上往下的方式，据研究这是能够最高效完成任务的布局方式。