详解｜大厂的设计系统，设计师要怎样学习和分析？

最近随着 TDesign、Arco Design 等设计系统陆续发布，经常会有同学问我这样的问题：

• 为什么这些设计系统感觉差异不大？大厂连这也要卷一卷？
• 设计系统虽然要注重普适性，但是不是也要有自己的品牌表达呢？
• 这些设计系统要怎么比较、分析和学习呢？

本文就来解答这些问题，希望对大家学习设计系统有所帮助 ——

 

Q1. 为什么大厂都要做设计系统？

各大厂都有自己的设计系统，你可能会觉得大厂们太卷了，简直就是神仙打架。但大厂的设计系统绝对不是为了“卷”而做。之所以要做，原因至少有这几点：

 

1. 业务多

大厂的业务和产品多且繁杂，业务中可复用的能力和经验在长时间的积累下也会越来越多。沉淀下来的设计系统会对自己业务起到强有力支撑和提效作用。有沉淀且不缺少应用场景，也可以保证设计系统有较高的使用频率，促进其良性发展。

 

2. 资源足

相对于小公司来说，大厂有更多的成本和资源可以用于做资产类的沉淀、研究和输出。大厂也理应在相应的领域多做探索和经验积累，回馈用户和市场的信任。

 

3. 权威高

大厂的设计水平相对来说具备较强的稳定性，输出的质量更有保证，可以发声、传播的渠道和方式也更多，也有实力在行业内树立起可靠、标准的规则话语权。

从以上几点不难看出设计系统之于大厂来说，对于内部可以赋能业务、降本提效；对于外部可以提升自己的话语权，这其实是一个双赢的过程。

 

抛开代码层面不谈，仅从设计师的使用场景出发，用过 Ant Design 和 Arco Design 的设计师大概会觉得二者并没有什么差异 —— “这些设计系统好像都差不多哎…”

早些年 Ant Design 在设计系统领域已打过比较牢靠的框架基础，其他大厂进行借鉴是很正常的事情，没有必要重复造轮子。因此这些设计系统最基础的结构和框架层面是大差不差的，看上去就好像都长一个样子。但其实基于我们上一节说到的原因，究其细节，各家也都有各家的特点和看家本领，在应用和功能层面并不完全一致。

那作为设计师该如何对大厂们的设计系统做分析和学习呢？这里给大家提供几个比较方法和学习思路，你可以尝试从以下方面入手：

 

1. 功能场景

对于设计系统的功能和应用场景做分析，包括但不限于以下内容：

1） 侧重的用户和场景：

• 是以设计师为主、开发为主还是两者兼备；
• 是初级组件（基础组件）还是高级组件（业务组件）二者区别可阅读这里；
• 用于哪些特定的业务场景和领域等等。

2）侧重 C 端还是 B 端：

支付宝设计体系曾经就有一套针对 C 端的移动端设计体系（不过也在和 AntD mini 版本进行整合）。

3） 侧重国内还是国外（国际化）：

国内大厂的设计系统很少考虑国际化应用场景，只有个别会提及一些国际化的设计方法和思路。这一点，国外的设计系统考虑得相对全面。

4）独特的功能应用或外挂服务：

各个设计系统在这一点上可谓百花齐放，比如 AntD 还可以与 AntV 的可视化图表联动；Arco Design 产出一套配色编辑器和图标平台等功能。

 

2. 体验感受

这里既要看应用设计系统做出的产品带给用户的体验和感受，也要看设计师和开发在使用设计系统的过程中的体验感受。包括但不限于以下内容：

1. 设计整体基调：包括设计系统的价值观和设计原则等，奠定整个设计系统的基调。
2. 视觉语言特征：包括全局样式、排版效果、动效特征等，会使用户产生最直观的视觉感受。
3. 交互体验特征：包括交互反馈和针对用户操作的细节处理，决定用户的使用过程是否流畅舒适。
4. 系统品牌建设：这点不仅仅是指设计系统中的组件的风格与品牌特性，也包括阅读和了解整个设计系统（网站、品牌运营与推广等内容）的体验。

 

3. 搭建方式

这指的是设计系统在搭建过程中的思路和工作方法，包括但不限于以下内容：

1）触达方式：指的是设计师和开发使用设计系统的方式。大部分设计系统依赖官网，提供 Figma 或 Sketch 两种 Toolkits。也有一些独特和有时效性的方式，比如 AntD 提供的 Sketch 插件 Kitchen。

2） 协作机制：利用人脉资源，看看在这些设计系统中有没有你的熟人可以约着聊聊，更好地了解背后的工作和搭建方式。

3）更新频率：小迭代和大迭代的更新速率和通知方式等。

因为设计系统内容繁杂，所以建议大家在分析之前，先思考做对比的目的和目标。不同的目的，对于以上三个方面比较的侧重点也会不同。比如，如果你是在对已有组件库进行品牌升级，就应该对于设计整体基调和整体系统的品牌建设做更深入的调研和比较。

 

原文链接：长弓小子（公众号）

作者：元尧