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

文章插图
为了印证这个结论，我收集了近50个B端后台，共507个表单，竟然发现只有2个产品用了视觉重心居中的设计。

文章插图
这个结果让我挺诧异的，但又在情理之中。一个是飞书设置类表单、一个是百度云购买表单。

文章插图
【交互|如何提高B端表单操作效率，这里有7个技巧】设置类表单，数据项较少，相对比较简单，使用居中设计可以让用户更聚焦。
而百度云的表单，虽然也是视觉居中，但是将侧边栏进行收起，在设计上和我们普通网页设计方式类似，从而承载更多的信息。
而其他的CRM、ERP、云产品、OA、项目研发、文档产品、在线教育、HR、BI等系统产品的录入类表单均采用的视觉偏左的设计方式，不管表单拓展多复杂的信息，都不会影响整体的一致性。

文章插图
所以，在设计表单时不用过度追求视觉平衡，而是需要优先考虑信息操作效率，信息阅读效率。
五、标签对齐方式要选对标签分为左标签、右标签、顶标签三种，不同的对齐方式，使用场景不同。

文章插图
具体该如何选择呢？我们需要从3个方面进行考虑：操作效率、标签长度、屏效、视觉对齐。
1. 操作效率根据Matteo Penzo的研究总结得到的浏览时间表发现，标签移动到输入框的时间，顶部对齐最快只要50ms，其次是右对齐240ms，左对齐耗费时间最长500ms。

文章插图
因此当以操作效率为主时，推荐使用顶对齐的方式。
2. 标签长度当标签长度超过8个字，或者需要考虑中英文双版本时，推荐使用顶对齐的方式，其容纳的标签文字更多，拓展性更好，比如Ones的建任务的标签，就采用标签顶对齐的方式：

文章插图
3. 屏效如果只考虑屏效，那么标签左对齐右对齐均可，但是如果还考虑表单录入效率，那么推荐使用标签右对齐的方式，比如蜂鸟汇报：

文章插图
4. 视觉对齐一般情况我们在设计表单，优先考虑效率和屏效，但在竞品分析中发现，竟然有50%的表单采用了标签左对齐的方式，因为这样可以让标签和其他内容保持对齐，比如神策网：

文章插图
因此，在进行标签对齐方式的选择时，我们首先要清楚以什么为主，什么是可以牺牲的，比如神策网选择了视觉对齐，而牺牲的是操作效率。
六、表单页面要考虑适配方式设计时如果不考虑适配方式，那么前端可能不考虑，可能用他觉得合理的方式，在实际使用时就会导致体验不好，后面想在调整就得重新等排期了，因此在设计时就需要把适配方式定好。
表单在设计时一般有2种适配方式，一种是固定适配，一种是间距适配。
1. 固定适配，设计需要注意设计时，需要保证最小分辨率能够正常显示，表单中信息宽度固定，不随分辨率变化而变化。该方式适合用于表单页面的适配中。

文章插图
当采用弱分组布局时，随分辨率变小，数据项自动掉下来，其他保持不变。