版权申明：本文出自“Eric_LYZ”原创，感谢“Eric_LYZ”的原创文章分享！
前言
讲解设计系统方面的优秀文章已经有不少了，但是关于设计系统构建的知识点非常多，而且随着时间与设计工具的变化，未来会更多。因此没有一篇文章能把所有的知识点涵盖，这篇文章的意义在于整合目前有价值的知识点与工作流，从理论、实战到资源三个维度重新梳理，把已有的优秀文章援引在相应的部分，让大家读完这篇文章后对设计系统构建有一定的了解，并通过我推荐的文章继续扩展。当大家吃透整个文章结构的同时，就相当于掌握了设计系统的构建，足以满足日常的设计工作。
先别急着往下，阅读在于专注。本文阅读时长大约15分钟，泡杯咖啡，放首轻音乐，调整好状态再继续吧~
理论篇
很多刚入门的新人会被以下几个名词搞混，设计系统、设计规范、组件库、视觉规范……那设计系统到底是什么呢，下面就对它们做一个描述与区分
一、设计系统是什么
设计系统在UI领域内，本质上而言是一个清晰、规范、可复用的组件库。没错，在绝大部分时候，设计系统与产品的组件库说的是同一个东西。一般来说，设计系统是为一个产品服务的，但是，也有部分设计系统是专门为了加快设计师的工作效率而建立的，这在后文会提到。那么，一般的设计系统长什么样呢？
(Material Design System)
FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/
上图是安卓设计系统的一部分。基本上我们能看到的使用画板从不同维度对产品中使用到的元素进行归纳整理后的文档就是一个产品的设计系统。
不同产品的设计系统会因为本身的载体、方向、规模等因素而有所区别，但总体而言，设计系统的组成结构与呈现形式差别不大，对于具体应该如何呈现以及结构划分会在后文提到。
设计系统与设计规范的区别
任何带有规范的的文档如视觉规范、产品使用规范等基本都是设计规范的不同叫法。我们先来看看设计规范一般长啥样呢？在这里还是拿大厂来举例
没错，UI设计师经常需要学习与参考的一份设计规范就是苹果的设计规范，它指导了全世界所有的iOS端的UI设计师进行设计。设计规范的重点在于指导性，描述不同组件在具体界面中的使用情景。简单来说，它是用来看的。而设计系统是可用的，这就是它们本质上的区别。关于设计规范如何构建的知识也非常多，在本文暂不赘述，如果你们想了解的话，欢迎在评论区留言，届时我会再出一篇关于设计规范的文章。
读到这里，相信大家已经能分辨出什么是设计系统了，那么接下来就要说一下我们为什么要建立它，它在实际工作的意义到底在哪里。
二、构建设计系统的意义
很多刚入行的设计师会认为做一份设计系统的意义仅仅是因为它看起来特别专业，特别有设计感，有条理性，是一个产品的形象工作。但实际上，它的作用远不止于此，它的功能性对于整个产品的设计工作而言是不可或缺的。
1、统一设计语言
建立设计系统最重要的一点在于统一整个产品在不同平台、不同设备上的设计语言。
设计语言简单来说就是视觉风格、交互方式、组件的综合描述。统一的设计语言能给用户带来始终如一的体验并加强用户对于自身的品牌记忆。
（1）苹果在不同平台的设计语言因为有相应的设计规范与设计系统支撑而非常统一。
（2）Netflix在不同终端的视觉风格是保持一致的
那好的设计系统是如何做到这一点的呢？我们知道，在实际工作中，一个中大型项目往往有多名设计师负责，这时候，设计系统起到的作用就是让不同的设计师使用相同的元素做设计。功能相同的组件使用设计系统中规定好的样式，页面之间的布局也使用已有的栅格系统。这样设计出的页面能保证一致的视觉风格。
2、减少开发成本
在工作中，如果我们每次设计一个新的页面都用不同样式的组件，那开发就要每次都重新写一遍代码，这样会增加大量的时间成本。而当我们使用设计系统的已有元素时，开发就可以直接调用已有的库。
3、快速设计与迭代
设计系统的的高效在于它易于复用，而一个产品许多页面会使用到相同的元素，使用设计系统能显著减少重复性设计时间。另外，出现新的需求需要改动页面时，也能快速完成需求进行迭代。目前，大多数成熟产品的设计团队的多数工作时间并不会投入在设计任务，而是管理与维护产品的设计系统。
一个优秀的设计系统能给整个团队带来的效益是巨大的，它有更多的优点只有在实际使用时才能真正体会到。当然，构建与维护一个设计系统也是需要花费不少的人力成本与时间成本，它的效益与重要性需要通过整个产品周期来体现。
Tips：产品周期即产品生命周期（product life cycle），指产品从进入市场到被市场淘汰的整个过程，会经历形成、成长、成熟、分裂、衰退等一系列过程。
飞特游客
委托设计