字节B端设计规范ArcoDesign和AntDesign有何不同？

之前很长一段时间，国内B端设计规范都是蚂蚁集团的 Ant Design 独霸天下。

但是自从去年字节 10 月推出 Arco Design 后，让一些 Ant Design 的老用户开始有些动摇。

那么 Arco Design 和 Ant Design 究竟有什么区别呢，今天我从设计角度上来给大家大致分析分析。

P.S. 文章底部有惊喜～

🧩 布局

🌈 色彩

📋 表单

📊 数据

🧩 布局

从设计指南来看，Arco Design 既支持一级顶导航，又支持一级左导航，看起来还比较灵活是吧？

上图来源：https://arco.design/docs/spec/layout

但是一看 Ant Design 的布局指南……似乎啥都能做。

原文也说“Ant Design 在布局空间上的成果并非要限制设计产出，更多的在于引导设计者如何做到「更好」。”，可见 Ant Design 在布局上比 Arco Design 更灵活。

上图来源：https://ant-design.antgroup.com/docs/spec/layout-cn

我们再看一下双方提供的案例模板，这应该能代表各自主推的样式。

Arco Design 用的是一级定导航+二级左侧导航，而 Ant Design 用的是一级左导航+二级定导航。

Arco Design

Ant Design

关于 B 端导航的问题，我之前发文分析过：B端产品一级导航为什么大多在左侧？

简而言之，就是 B 端产品肯定高度依赖左导航，纯粹的 B 端产品更倾向于一级做导航，但是一些 C 端化的 B 端产品会倾向于一级顶导航+一级左导航。

也就是说，Arco Design 导航布局更像是 C 端化的 B 端产品，而 Ant Design 导航布局更像是纯粹的 B 端产品，这也确实很符合字节和蚂蚁的业务情况。

另外我还发现两者一个很大的差别——页面标题。

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

而 Arco Design 大部分页面没有这个页面标题，也多半是模块标题，和面包屑最后一项不一样。

Ant Design 这个标题的存在会让用户更清晰的知道自己在哪里，但因为每页都有这么一个巨大的重复信息，有时又会觉得有点碍眼。如果是复杂的产品，会更加需要一些。

🌈 色彩

打开案例图的第一眼，你就明显会发现 Arco Design 的色彩丰富度明显要高很多。

不管是卡片背景、图表、图标还是标签，颜色种类都更多，甚至还能看到 B 端产品不常见的渐变色和立体图标。

Arco Design

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

Ant Design

Arco Design 是如何把数据可视化做得这么好看的呢？我们待会在 📊 图表 章节再仔细研究。

撇开高亮色不看，我们发现 Arco Design 界面上的色彩层次也更丰富。这主要体现在浅灰色的运用。

以顶导航为例，Arco Design 的图标都用浅灰圆框包起来了，而 Ant Design 的图表都是简单的线条。

Arco Design

Ant Design

Arco Design 对浅灰的运用，还体现在了页签、表单、按钮等方面：

Arco Design

Ant Design

Arco Design

Ant Design

📋 表单

Arco Design 默认选填，必填会用 * 标出。

Arco Design

而 Ant Design 刚好反过来，默认必填，选填会用灰字标出。

Ant Design

如果表单很大，Arco Design 和 Ant Design 都有分组样式。但是前者会用卡片将分组隔离开，而 Ant Design 的分组都在一页上。

Arco Design

Ant Design

不管是哪种分组方式，我相信两个设计规范都是支持的，只是可以看出 Arco Design 更加喜欢清晰、扁平化的信息呈现，而 Ant Design 更加追求整洁有序。

📊 数据

Arco Design 展示信息时明显更突出内容，而不是标题。

Arco Design

而 Ant Design 更加突出标题而不是内容，这更加符合传统的设计方式。

Ant Design

两边的表格在功能和样式上差不多，最明显的区别可能是 Arco Design 更加紧凑些、表头背景色更深。而 Ant Design 更松散、颜色更浅。

Arco Design

Ant Design

最后，让我们再来对比一下两者的图表。这个我很感兴趣，因为 Arco Design 的设计和 Ant Design 比起来，花样多多了。

Arco Design

Ant Design

可是我在 Arco Design 文档的导航栏找了很久都没有找到图表，于是只好动用搜索功能，结果……

一定是我打开方式不对，案例上的渐变曲线图不错，让我直接搜“曲线图”看看……

好吧，难怪图表那么多花样，原来是效果图 😂

看来 Ant Design 凭借它的图表技术实力，江湖地位还没那么容易被撼动：

上图来源：https://ant-design.antgroup.com/docs/spec/visual-cn

不过，说不定 Arco Design 的图表已经在开发中了，等发出来是个啥样子谁也说不准，对吧？

两者对比起来，我发现对 C 端化要求比较高的 B 端产品，例如 Teambition 这种团队管理工具来说，Arco Design 还是挺有借鉴意义的。

看到这里，你更喜欢哪个设计规范呢？顺手投个票呗～

看来 B 端产品 C 化果然是大趋势，我下周三开个直播分享一下自己的心得体会，欢迎预约：

如果大家有什么想让我在直播讨论或回答，可以在本文评论区发出来，我尽量把大家的相关问题都安排上。

---

相关阅读

---