UI设计系统

UI DesignSystem

当我在Atlassian做产品设计师和在Arimo做UI设计师的时候，我发现设计系统在加速迭代的过程中起到了很大的作用。

参考下图：

还有我过去工作的团队像这样：

如果你已经熟悉整个产品开发的流程，你会发现在产品的早期阶段，UI设计师没有那么重要。但迟早，在十几次迭代后，数百个功能出现了，你就开始意识到你的产品有多丑陋。这是设计欠下的债，这个时候你就会寻求一个专业人士来清理这份设计债，来让你的界面变得看起来更愉悦。

但记住，你所雇佣的UI设计师不只是 “装饰” 页面，更是要创造可持续的设计系统，为什么我们需要设计系统，因为它会成为一个Guideline，一个用户看到的所有东西的Guideline。对于工程师开发一个没有设计稿的功能时，这更是一种捷径，而且能保持整体的界面一致（前提是他们有设计心态）。所以有了设计系统，团队里就会产出统一度很高的页面。

构建设计系统是一条漫长的道路，如果你没有思路，下图展示了设计系统的结构：

一切都从一个理念开始，UI设计系统也不例外。

一，设计原则（Design Principles）：

1.为了构建原则，我们需要深入的了解我们的用户和我们产品的目的。我们应该去做一些研究，谁是你的用户，他们的特质，习惯，聚焦产品所解决的他们的主要问题...

2.这时你需要一个团队，需要有聪明的伙伴和用户，像CEO，CMO，创始人甚至是开发。为什么是开发？因为他们理解产品的生态系统（产品，插件，第三方开发产品...）于是设计师就会对他们所构建的产品有一个更好的愿景。

3.聚集所有人在一起头脑风暴，选择有特点的关键点。尽可能的视觉化这些数值和术语。然后简化设计原则，用一两句表达出来。

4.UI设计系统与产品设计系统有着深深的联系，两者可以合二为一。

5.不需要一蹴而就，你可以先设定一个原则草案，然后继续跟进。这些原则可以被迭代。但是首先你得让你的团队成员同意这些草案。

二，设计语言（Design Language）：

1.从设计原则出发，设计师们开始探索基础：排版，颜色方案，间距，声音和插图。有趣的是，在你弄清楚设计语言之前，通常会先弄脏自己的手。

2.试图去搜集旧的和新的，甚至潜在的组件和应用的探索。（这里会有鲜血和战争，而设计原则是你的救世主。）

3.再一次，这里会有很多的探索和迭代，我们通常会选择最适合当前产品的那一个。

三，组件构成（Components，groups and patterns）：

1.在真正的产品中，没有组件是独立存在在页面上的，像身体的一部分，他们会有自己的功能和特征，所以我们构建UI组件会变得非常有机：从原子开始，以生态系统结束。

2.一个组件应该被定义为他是什么，他应该放在哪，他是如何被用的，过渡，交互，和边缘情况。

3.UI设计师应该深入的理解UI组件，并通过建设Guideline的文档，把组件的知识传达给整个团队。

整个过程的结果是多种多样的。他们是给设计师，开发工程师，甚至是市场人员来用。我们曾经称之为设计组件。他们应该被存放在一个方便的地方，比如Dropbox，让其所有者维护和升级。

最后的思考：

一个好的UI系统应该有助于提高开发的速度，团队因此不需要UI设计师。

（ PS：UI设计师可以从中解放出来，投入到更加重要，更加前沿的研究中去。）

原文链接：

https://medium.com/@notannamolly/building-ui-design-system-fb5dc5b58dc5#.s6srq9g1o