设计系统3：设计语言组件

字典是一部组成语言的词语的集合，在设计的世界里我们称之为UI KIT，（也有人称他为toolbox），要组成一个字典，你必须知道你想定义的单词有哪些，首先列出你产品里想要的UI元素，他们可能是button，Toolbar，Navbar，input field，或者其他的元素。将他们放在表格里，按照优先级排名，以便你关注最重要的信息。记住这些元素只是第一波，当你创作更多的体验的时候，你可能会定义更多的元素。

当一个团队使用UI KIT，他们会在设计上花费更少的时间，而在真正需要关注的地方，比如实际的体验上花更多的时间。有了UIKIT，意味着所有设计师可以产出高保真的设计，使用UIKIT能让设计产出的效率更高。此外，UX设计师使用UIKIT，也可以不用依赖视觉设计师来产出文档。

工具

我用来创造工具的是Sketch，目前是数字产品设计师的首选，里面有一个可以重复使用的功能是Symbol，如果你熟悉前端开发，你可以把他们看作是已经编码的可视化组件，他们就是单词，Symbol和我们在产品里编码的组件有着1对1的关系，于是你可以在Sketch中更改样式，并影响产品中的相应组件。

UI KIT的设计目标是告诉设计可以用什么UI元素，而且，UI KIT的商业目标是节约时间，避免混淆，节省资金。

结构

构建UIKIT的页面导航结构：

1.颜色：我们的调色板包含了每一个颜色的亮色调和暗色调

2.字体：字体样式，字号字重

3.空间：8点网格系统和移动布局的说明

4.深度：盒子阴影的深度

5.风格指南：组成的UI元素的集合

6.模版：以Symbol为基础创建的页面模版

7.UI元素：设计所用到的所有UI元素

设立基础

1. 创建样式表 Style Sheet

2. 颜色：在Sketch中为样式表重的所有颜色创建一个共享样式。

为每一个颜色创建样式，确保他们有相同的尺寸，这很重要。

3.字体：列出所有的文字样式

4.图标：

如果能使用svg，最好使用svg，他比iconfont要更好。

5.空间：

示意你的网格系统

示意我们的布局

移动的常用布局

6.深度

在Sketch中创建所有盒子模型的可共享的深度。

为每个盒子创建一个Symbol，确保他们有相同的参数。

创建UI元素

一旦你有了UIKIT的基础，你只需要用你创建的Symbol，添加已定义的字体和图标，并保证所有的间距在8点网格系统上。

注意：当你组成元素的时候，要考虑到代码是怎么实现的，（这里不是说要懂得写代码，但是最起码要熟悉BoxModel和Html的结构。）所有的UI都应该在一个被代码所定义的容器中，所以我们创建的UI元素也应该如此，将容器看作是Html里的

现在你可以创建一个一致的UI，一定要记住：你给开发什么，他就写什么。（Developers will always code what you give them.）所以你的设计系统里的UIKIT应该是连续的，下一篇文章中我们会提到如何跟你的团队去分享你的设计系统和UIKIT。

作者创建了一份免费的UIKIT，有兴趣的可以下载：

https://github.com/ogonzal87/oskrhq-uikit-mobile-app

或点击下方链接查看原文和视频。

https://vimeo.com/231731714

原文链接：https://blog.prototypr.io/a-dictionary-for-a-design-language-3afae1579586