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

文章插图
这里最小分辨率大家根据自己公司情况而定，我在设计时设定1366X768为最小分辨率。
下图是百度统计流量研究所，大家可以看看数据，具体以自身公司而定，因为一些单位可能还在使用1280X720的分辨率，那么就设定1280为最小兼容的分辨率。

文章插图
2. 间距适配，和移动端类似，间距固定，组件自适应

文章插图
该适应方式在弹窗、抽屉中较为使用，表单页中不太推荐使用该方式，因为当分辨率变大，眼动的视觉变大，不利于信息浏览。
七、输入框不用整齐划一，可以错落有致表单页在设计时，我们总是纠结到底整齐排列好，还是错落排列好，错落排列又该遵循什么规则呢，这里推荐大家阅读Ant_Design的文章《整齐划一？不如错落有致》。
文章提到，如果表单跟随空间自适应会造成不稳定的情况，线上效果会呈现以下效果。

文章插图
同时输入框的宽度不应该自适应，而需要根据填写内容的长度来定，减轻判断负担。

文章插图
最后，错落有致更舒适，整齐划一在视线上有隐性的截断，会感觉缺了一块内容。

文章插图
如何错落有致呢？有什么规则吗？
Ant_Design设定104px 为原子级宽度尺码 XS，通过倍数+间距叠加的方式（此处计算间距的原因是为了兼顾组合 input 和单个 input 对齐问题）从小到大去依次推导出更大的四种宽度来拟合前面划分的尺码。最终得到如下5种宽度尺码和对齐关系。

文章插图
通过对比，我们可以明显地看到，错落有致的排列方式更加舒适。

文章插图
当然，你在设计时，最小原子的宽度不一定设置为104，也可根据业务情况将最小原子XS设置为可容纳6个中文汉字，然后在通过如下规则进行换算。

文章插图
八、画重点本文针对如何提高B端表单操作效率，整理了7个技巧：

不滥用表单的交互形式；
将复杂表单进行合理的归纳简化；
复杂表单布局要考虑关联性；
表单视觉可以不平衡；
标签对齐方式要选对；
表单页面要考虑适配方式；
输入框不用整齐划一，可以错落有致。

希望通过本文的分享，让大家有一个更清晰的认知，从而提高表单操作效率。
参考引文：
《且曼B端产品设计之表单设计》
人眼的视角
http://t.hk.uy/Chp
Label Placement in Forms
http://t.hk.uy/Chr
浅谈B端表单设计
https://mp.weixin.qq.com/s/L1bB3qlzstK6T4LkLEPtKQ
Ant Design 表单设计规范
https://ant.design/docs/spec/research-form-cn
Ant Design ProForm 高级表单
https://procomponents.ant.design/components/form
QueryFilter / LightFilter 筛选表单
https://procomponents.ant.design/components/query-filter
整齐划一，不如错落有致
https://www.zcool.com.cn/article/ZMTIxMzA2OA==.html
作者：风筝KK，公众号：海盐社
本文由 @风筝KK 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议