百木园
近年来，“设计系统”这个词渐渐火爆起来。设计系统是设计团队经过大量项目实践和总结，逐步打磨出一个服务于类似产品的设计体系。一个完整的设计系统通常会提供包括设计指引、最佳实践、设计资源和设计工具等一系列功能，来帮助设计者和开发者快速产出高质量产品原型，在企业级的应用产品中尤为适用。
业内比较知名的设计系统，当属蚂蚁集团的 Ant Design（蚂蚁集团的企业级产品设计体系）。而2020年以来，随着腾讯的 TDesign（腾讯开源的企业级设计体系）、字节的Arco Design（字节跳动的企业级产品的完整设计和开发解决方案） 等设计系统陆续发布，就经常会有同学问我这样的问题：
- 为什么这些设计系统感觉差异不大？难道大厂连这也要卷一卷？
- 设计系统虽然要注重普适性，但是不是也应该有公司自己的品牌风格和表达呢？
- 这么多设计系统，要怎么比较、分析和学习呢？
我们的确都会觉得大厂们真的太卷了，简直就是神仙打架嘛！但我想要说的是，大厂的设计系统绝对不是为了“卷”而做。之所以要做，原因至少有这几点：
1. 业务多
大厂的业务和产品多且繁杂，业务中可复用的能力和经验在长时间的积累下也会越来越多。沉淀下来的设计系统会对自己业务起到强有力支撑和提效作用。有沉淀且不缺少应用场景，也可以保证设计系统有较高的使用频率，促进其良性发展。
2. 资源足
相对于小公司来说，大厂有更多的成本、资源和积累可以用于做资产类的沉淀、研究和输出。大厂也理应在相应的领域多做探索和经验积累，回馈用户和市场的信任。
3. 权威高
大厂的设计水平相对来说具备较强的稳定性，输出的质量更有保证，可以发声、传播的渠道和方式也更多，也有实力在行业内树立起可靠、标准的规则话语权。
从以上几点不难看出设计系统之于大厂来说，对于内部可以赋能业务、降本提效；对于外部可以提升自己的话语权，这其实是一个双赢的过程。
其实设计系统的重要性不光是对于大厂来说的，对于中小型企业，尤其是以 B 类业务为主的公司，想要保持对外输出的产品有较高的设计一致性，或是想要提高设计师和前端工程师的工作效率，设计系统都是最有效的解决方案。可以说作为设计师，设计系统是你不得不了解和掌握的设计基础知识之一。
抛开代码层面不谈，仅从设计师的使用场景出发，用过蚂蚁集团的 Ant Design 和字节的Arco Design 的设计师大概会觉得二者在功能上似乎并没有什么差异。
早些年 Ant Design 在设计系统领域已打过比较牢靠的框架基础，其他大厂进行借鉴是很正常的事情，没有必要重复造轮子。因此，这些设计系统最基础的结构和框架层面是大差不差的，提供的基础服务也都是类似的，因此看上去就好像都差不多。
但其实基于究其细节，各家也都有各家的特点和看家本领，在应用和功能层面并是不完全一致的。
那作为设计师，该如何对大厂的设计系统进行分析和学习，并做到为我所用呢？这里提供几个学习思路供你参考：
一、设计系统的功能和应用场景
这里所说的功能和应用场景，包括但不限于以下内容：
1. 侧重的用户和场景
- 是以设计师为主、开发为主还是两者兼备；
- 是初级组件（基础组件）还是高级组件（业务组件）二者区别可阅读这里；
- 用于哪些特定的业务场景和领域等等。
2. 侧重 C 端还是 B 端
目前由于业务特性所决定，C 端产品的设计系统在数量上少于 B 端产品。腾讯的TDesign中包含了丰富的移动端和小程序相关的功能和服务，可以很好的满足部分 C 端产品的设计需求，并为之提供设计借鉴。支付宝设计体系也曾有一套针对 C 端的移动端设计体系（不过也在和 Ant Design的移动端版本进行整合）。
3. 侧重国内还是国外（国际化）
国内大厂的设计系统很少考虑国际化应用场景，只有个别会提及一些国际化的设计方法和思路。而这一点，国外的设计系统考虑得相对全面。
4. 独特的功能应用或升级服务
说到独门秘籍，各个大厂的设计系统在这一点上可谓百花齐放，比如 Ant Design还可以与 AntV（蚂蚁集团的数据可视化解决方案）的可视化图表进行联动；Arco Design 也自研出一套被称为 Palette 色彩配置工具，帮助设计师做色彩算法和规范制定。
二、设计系统使用起来的体验和感受
这里既要看使用设计系统做出的产品带给用户的体验和感受，也要看设计师和开发在使用设计系统工作的过程体验和感受。包括但不限于以下内容：
1）设计整体基调：包括设计系统的价值观和设计原则等，奠定整个设计系统的基调。
2）视觉语言特征：包括全局样式、排版效果、动效特征等，会使用户产生最直观的视觉感受。
3）交互体验特征：包括交互反馈和针对用户操作的细节处理，决定用户的使用过程是否流畅舒适。
4）系统品牌建设：这点不仅仅是指设计系统中的组件的风格与品牌特性，也包括阅读和了解整个设计系统（网站、品牌运营与推广等内容）的体验。
三、设计系统的搭建方式
搭建方式指的是设计系统在搭建过程中的思路、框架结构和工作方法，包括但不限于以下内容：
1）使用方式：指的是设计师和开发使用设计系统的方式。大部分设计系统依赖官网，提供 Figma 或 Sketch 两种 Toolkits。也有一些独特和有时效性的方式，比如 AntD 提供的 Sketch 插件 Kitchen。
2）协作机制：也就是设计系统团队的工作流程和方法，你可以利用你的人脉资源，看看在这些设计系统中有没有你的熟人可以约着聊聊，更好地了解背后的工作和搭建方式。
3）更新频率：小迭代和大迭代的更新速率和通知方式、设计运营和维护机制等。
因为设计系统内容繁杂，所以我也建议你在从以上几个方面入手分析之前，先明确你做分析的目的和目标。不同的目标，对于以上内容的侧重点也就不同。
举个例子，如果你已经是一个组件设计师，对于设计系统的基础知识也有一定的了解，你的学习目的是，帮助自己对已有的组件库或设计系统进行品牌升级，那就可以将学习和分析的重点放在设计系统的整体基调和品牌建设上。
希望以上内容可以为你所用。
给作者点赞，鼓励TA抓紧创作！
来源：https://www.woshipm.com/pd/5515929.html
本站部分图文来源于网络，如有侵权请联系删除。