本次主要针对常见的表格表单设计，结合官方设计规范Antdesign和Arcodesign产出对B端产品的一些思考。

将会花费您5分钟左右的时间阅读。

之前很长一段时间，国内B端设计规范都是蚂蚁集团的 Ant Design 独霸天下。但是自从去年字节10月推出 Arco Design 后，让一些 Ant Design 的老用户开始有些动摇。那么 Arco Design 和 Ant Design 在实际指导设计师设计页面时有何用途，今天我结合实际案例从设计角度上来分析分析。

01 布局

从设计指南来看，Arco Design 既支持一级顶导航，也同样支持一级左导航，看起来还比较灵活。

但是在实际操作中，根据业务方的需求，我们在一些产品当中逐渐取消一级左导航，而只是采取顶部导航，这样能使主页面的内容最大化的显示出来。

另外，Arco Design和Ant Design 在页面标题上面也有很大差别，Ant Design 大部分案例页都会在面包屑（页面路径）下放一个很大的标题，而且这个标题和面包屑最后一项的文字是一模一样的。

而 Arco Design 大部分页面没有这个页面标题，也多半是模块标题，和面包屑最后一项不一样。并且他的页面路径是直接附在底页上面的。Ant Design 这个标题的存在会让用户更清晰的知道自己在哪里，对于是复杂产品，结构线很长的产品是十分有效的。而我们公司的产品大多功能复杂繁多，因而使用了Ant Design 这样式的标题。

02 颜色

字节设计色彩规范要比蚂蚁色彩亮眼得多，图表线条采用渐变色，图标风格也采用了当下流行的光感轻立体风格。字节设计色彩规范要比蚂蚁色彩亮眼得多，图表线条采用渐变色，图标风格也采用了当下流行的光感轻立体风格。

而 Ant Design 在用色上就明显要保守很多，大片都是主题蓝，图表的配色也是经典彩虹色，更像是典型的 B 端设计。

但就算是经典配色不用渐变色，颜色一样能搭配得很出彩。下图如是，它既没有像蚂蚁设计规范给出的使用大片主题蓝，也没有像字节那样B端C化使用渐变色。

字节的色彩层级丰富还有一个很大的原因就是使用中性灰给icon打底，作为底色。

Arco Design 对浅灰的运用，还体现在了页签、表单、按钮等方面，按照这样的设计方式我也对自己产品里头的表单进行修改。

感觉改完之后，从之前的视觉重点为标题变为输入框。个人也更倾向后一种视觉表现，想象一下，客户作为操作员填写大量的表单，为了不让他迷失在大片白色之中，输入框是不是得重点突出，填充浅灰色。

按照两大设计规范对实际产品本身的布局、颜色、表单进行一些细节方面的思考，不同的业务也有不同的要求，也有符合自身产品线的规范要求，而传统的两大规范也给予更多维度的参考。接下来还有其他设计要点和原则值得思考，敬请期待！

您的关注就是我不断前进的动力，哦耶！