0
点赞
收藏
分享

微信扫一扫

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

九月的栩 2022-09-14 阅读 82

以下文章来源于体验进阶 ,作者设计师ZoeYZ

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

但是自从去年字节 10 月推出 Arco Design 后,让一些 Ant Design 的老用户开始有些动摇。
那么 Arco Design 和 Ant Design 究竟有什么区别呢,今天我从设计角度上来给大家大致分析分析。
P.S. 文章底部有惊喜~
布局

色彩

表单

数据

布局

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

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

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

但是一看 Ant Design 的布局指南……似乎啥都能做。
原文也说“Ant Design 在布局空间上的成果并非要限制设计产出,更多的在于引导设计者如何做到「更好」。”,可见 Ant Design 在布局上比 Arco Design 更灵活。

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_02

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

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

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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_03

Arco Design

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_04

Ant Design关于 B 端导航的问题,我之前发文分析过:B端产品一级导航为什么大多在左侧?



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

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

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

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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_05

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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_06

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



色彩

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

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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_07

Arco Design

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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_08

Ant Design

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

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

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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_09

Arco Design

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_10

Ant Design

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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_11

Arco Design

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_12

Ant Design

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_13

Arco Design

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_14

Ant Design

表单

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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_15

Arco Design

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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_16

Ant Design


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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_17


Arco Design

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_18

Ant Design

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



数据

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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_19

Arco Design


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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_20

Ant Design


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


字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_21

Arco Design

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_22

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




字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_23

Arco Design

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_24

Ant Design


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


字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_25

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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_26


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

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

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_27

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_28

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_29

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_30

字节B端设计规范ArcoDesign和AntDesign有何不同?_设计规范_31

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

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

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

看到这里,你更喜欢哪个设计规范呢?

设计规范就用​​摹客设计规范​​。

举报

相关推荐

0 条评论