3. 表单表单在界面中主要负责数据采集的功能，任何一个表单都可以被拆解成三个最基本要素：
标签（标题）、输入框和按钮。

文章插图

文章插图
1）表单布局
Arco的表单属于复杂表单，当表单条目数在7个以上，可归类到复杂表单，这时候就需要根据表单的复杂度、逻辑性、关联性进行判断，选择合适的分组方式，进行归纳简化，降低表单填写负荷。采用3列布局，便签与文本框上下左对齐，这样的对齐方式有利于用户浏览的效率、对齐的美观以及国际化拓展页面的对齐问题。
Ant的表单也是较为常规的布局方式，有一点差异就是文本框并没有右对齐，这里阿里自己也做出了解释：文本框是根据需要填写的字段进行长度展示的，需要填写内容比较长的文本框就会比较长。实际业务中，大部分 input 所需填写内容都存在理想长度，input 的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。
2）标签对齐方式
Arco和Ant都使用了顶标签的形式对齐。
标签分为左标签、右标签、顶标签三种，不同的对齐方式，使用场景不同。

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

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

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

文章插图
四、颜色主题配置Arco的颜色主题配置可以说是让人眼前一亮了，可调整的范围非常广非常牛逼。可以编辑的维度从基础的颜色、字体、阴影、 到组件的按钮、导航、分类、表格 一共有接近40款组件的样式，并且都是可以进行可视化编辑与实时预览的。
如果你用了 Arco 过后，或许不用苦苦地站在前端后面，让他帮忙调整页面，作为设计师自己就能够搞定，并且每一个组件可以调整的粒度是非常之细，包含各种宽度、图标大小、颜色、投影，等等…在这里可以编辑自己的主题，也可以在商城社区查看到别人发布的主题，真的是很方便啊。
真的有些amazing！假如你需要去设计一套官方的设计系统，完全可以通过 Arco 进行设计和预览、落地。

文章插图
Ant并没有做这方面的功能，颜色主题配置这一块确实是Arco很大的亮点。

文章插图
五、总结无论是Arco Design还是Ant Design设计系统，都代表了字节跳动和阿里两家互联网巨头公司在B端领域的沉淀和竞争。对于B端交互设计师来说，两个设计系统都值得我们去研究和学习，建议大家都去看看设计规范里面的内容，对于我们认识和熟悉控件以及和开发对接都很有帮助。
本文由 @晨屹 原创发布于人人都是产品经理。未经许可，禁止转载
【 B端设计师必看：聊聊B端两大设计系统典型页面】题图来自Unsplash，基于CC0协议

稿源：(人人都是产品经理)

【傻大方】网址：/c/1122a13W2021.html

标题：B端设计师必看：聊聊B端两大设计系统典型页面( 三 )