字典是一部组成语言的词语的集合，在设计的世界里我们称之为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里的<div>
现在你可以创建一个一致的UI，一定要记住：你给开发什么，他就写什么。（Developers will always code what you give them.）所以你的设计系统里的UIKIT应该是连续的，下一篇文章中我们会提到如何跟你的团队去分享你的设计系统和UIKIT。
作者创建了一份免费的UIKIT，有兴趣的可以下载：
https://github.com/ogonzal87/oskrhq-uikit-mobile-app
或点击下方链接查看原文和视频。
原文链接：https://blog.prototypr.io/a-dictionary-for-a-design-language-3afae1579586
网友评论