编辑导读：相信对付做UI的同学来说，设计类型各人都很熟悉，那什么是设计系统？在实际项目中又该如何快速做好一套设计系统？一份优秀的设计系统包括哪些内容，需要整理到奈何的颗粒度？文章对这些问题展开了阐明解答，供各人一同参考进修。

这篇文章包括3个部门：

领略设计系统（知道设计系统是什么，在什么时间应该整理它）

建设设计系统（建设进程以及涉及到的内容）

留意事项 (其他需要思量的内容和参考资料)

我会以一个最基本的案例来示意说明。

01 领略设计系统

设计系统可以或许统一设计语言，从而辅佐团队办理设计一致性问题。一套系统中包括交互类型，品牌类型，声音类型，文案类型，代码尺度以及一个UI库。

02 为什么需要建设设计系统？

一个设计系统可以或许统一产物开拓，并能节省开拓本钱。成立设计系统大概在开始阶段低落设计效率，但它将会更加回报给你的团队和产物。

设计系统的优势:

独一的执行尺度

增加一致性

节省时间

03 什么时候应该成立一套设计系统？

我小我私家较量喜欢比及产物和开拓团队开拓之后再开始着手做设计系统。然而，有些人喜欢从一开始就做设计系统。

这里其实没有尺度谜底，但假如你一直不知道如何开始做，纷歧致和低效的问题又一直存在，将会很低落出产力和冲击团队的士气。假如你已经留意到在团队中有这个问题的存在，那么就应该开始着手跟团队一起界说一套设计系统了。

04 相助的须要性

想要得到更佳相助结果的前提是开放的心态。确保所有产物关连人都参加到这个进程中，不是每小我私家都需要成为一个努力的孝敬者，但每小我私家都必需有一个发声的时机。

05 设计系统的建设进程 1. 举办设计全面走查

1）组织设计团队，对当前产物的界面举办截屏。确保可以或许查察到产物的所有属性，好比网站，内部东西，差异的应用等等。

2）利用雷同谷歌文档这样的演示软件来放上一步的截图，可能思量直接把这些截图打印出来并贴在白板上。

3）查抄每个种别，调查纷歧致的处所，并和团队一起接头阐明那边尚有改造的大概。

思量收集产物的所有设计组件，并将它们放在PPT中。这凡是是一个很是令人大开眼界的进程，你会心识到建设设计系统的须要性。

收集的截图可以像下面这样去分类

按钮

导航

表单

表格

图表

列表

卡片

图标

颜色

字体

其他

对产物UI举办全面盘货凡是会发明很是难过的纷歧致性。看到一个产物的生命周期顶用到那么多个差异的按钮样式和文本巨细，能让人大开眼界。

2. 界说基本设计原子

设计原子对付界面设计来说就像是一栋修建中的砖块一样。要设计好一个全面的设计系统的之一步就是要建设好这些设计基本原子，把这些元素组合在一起就抉择了产物的结果表示。

基本设计原子包罗:

颜色

字体

巨细

间距

栅格

其他

3. 界说设计组件

设计组件对付界面设计来说就像是一个个成果模块。组件是由设计原子组成的，按各类项目需求组合在一起。

组件化需要思量的模块有:

表单

按钮

选项卡

图标

弹窗

其他

这个案例示意了组件的种类包罗了按钮，表单和选项卡

做的时候不要忘了每个组件的差异状态。好比，一个输入框在用户点击和输入时会有奈何的变革。

4. 界说界面

在你界说好设计原子和设计组件后，就可以开始操作它们来设计界面了。

设计原子和设计组件团结起来就能设计出界面。这个案例示意了一个登录框包括了选项卡，表单，按钮和文案排版。

典型:

仪表盘界面

登录表单

概述

详情

其他

这个案例示意了设计原子和组件是如何组成界面的

5. 加上设计模式

设计模式由常见的用户流程和交互形式构成。

案例包罗:

筛选器

建设流程

渐进式

持续转动

新手引导

其他

6. 建设文档

当成立了设计系统，应该要操作文档记录原子，组件，视图和模式的更佳方案。文档还可以包罗指导原则和代码片断。

包括：

设计决定的根基原则

执行细则

常见错误和正确示例

代码片断

其他思考 好的设计系统会不绝进化