字典是一部組成語(yǔ)言的詞語(yǔ)的集合，在設(shè)計(jì)的世界里我們稱之為UI KIT，（也有人稱他為toolbox），要組成一個(gè)字典，你必須知道你想定義的單詞有哪些，首先列出你產(chǎn)品里想要的UI元素，他們可能是button，Toolbar，Navbar，input field，或者其他的元素。將他們放在表格里，按照優(yōu)先級(jí)排名，以便你關(guān)注最重要的信息。記住這些元素只是第一波，當(dāng)你創(chuàng)作更多的體驗(yàn)的時(shí)候，你可能會(huì)定義更多的元素。
當(dāng)一個(gè)團(tuán)隊(duì)使用UI KIT，他們會(huì)在設(shè)計(jì)上花費(fèi)更少的時(shí)間，而在真正需要關(guān)注的地方，比如實(shí)際的體驗(yàn)上花更多的時(shí)間。有了UIKIT，意味著所有設(shè)計(jì)師可以產(chǎn)出高保真的設(shè)計(jì)，使用UIKIT能讓設(shè)計(jì)產(chǎn)出的效率更高。此外，UX設(shè)計(jì)師使用UIKIT，也可以不用依賴視覺設(shè)計(jì)師來產(chǎn)出文檔。
工具
我用來創(chuàng)造工具的是Sketch，目前是數(shù)字產(chǎn)品設(shè)計(jì)師的首選，里面有一個(gè)可以重復(fù)使用的功能是Symbol，如果你熟悉前端開發(fā)，你可以把他們看作是已經(jīng)編碼的可視化組件，他們就是單詞，Symbol和我們?cè)诋a(chǎn)品里編碼的組件有著1對(duì)1的關(guān)系，于是你可以在Sketch中更改樣式，并影響產(chǎn)品中的相應(yīng)組件。
UI KIT的設(shè)計(jì)目標(biāo)是告訴設(shè)計(jì)可以用什么UI元素，而且，UI KIT的商業(yè)目標(biāo)是節(jié)約時(shí)間，避免混淆，節(jié)省資金。
結(jié)構(gòu)
構(gòu)建UIKIT的頁(yè)面導(dǎo)航結(jié)構(gòu)：
1.顏色：我們的調(diào)色板包含了每一個(gè)顏色的亮色調(diào)和暗色調(diào)
2.字體：字體樣式，字號(hào)字重
3.空間：8點(diǎn)網(wǎng)格系統(tǒng)和移動(dòng)布局的說明
4.深度：盒子陰影的深度
5.風(fēng)格指南：組成的UI元素的集合
6.模版：以Symbol為基礎(chǔ)創(chuàng)建的頁(yè)面模版
7.UI元素：設(shè)計(jì)所用到的所有UI元素
設(shè)立基礎(chǔ)
1. 創(chuàng)建樣式表 Style Sheet
2. 顏色：在Sketch中為樣式表重的所有顏色創(chuàng)建一個(gè)共享樣式。
為每一個(gè)顏色創(chuàng)建樣式，確保他們有相同的尺寸，這很重要。
3.字體：列出所有的文字樣式
4.圖標(biāo)：
如果能使用svg，最好使用svg，他比iconfont要更好。
5.空間：
示意你的網(wǎng)格系統(tǒng)
示意我們的布局
移動(dòng)的常用布局
6.深度
在Sketch中創(chuàng)建所有盒子模型的可共享的深度。
為每個(gè)盒子創(chuàng)建一個(gè)Symbol，確保他們有相同的參數(shù)。
創(chuàng)建UI元素
一旦你有了UIKIT的基礎(chǔ)，你只需要用你創(chuàng)建的Symbol，添加已定義的字體和圖標(biāo)，并保證所有的間距在8點(diǎn)網(wǎng)格系統(tǒng)上。
注意：當(dāng)你組成元素的時(shí)候，要考慮到代碼是怎么實(shí)現(xiàn)的，（這里不是說要懂得寫代碼，但是最起碼要熟悉BoxModel和Html的結(jié)構(gòu)。）所有的UI都應(yīng)該在一個(gè)被代碼所定義的容器中，所以我們創(chuàng)建的UI元素也應(yīng)該如此，將容器看作是Html里的<div>
現(xiàn)在你可以創(chuàng)建一個(gè)一致的UI，一定要記住：你給開發(fā)什么，他就寫什么。（Developers will always code what you give them.）所以你的設(shè)計(jì)系統(tǒng)里的UIKIT應(yīng)該是連續(xù)的，下一篇文章中我們會(huì)提到如何跟你的團(tuán)隊(duì)去分享你的設(shè)計(jì)系統(tǒng)和UIKIT。
作者創(chuàng)建了一份免費(fèi)的UIKIT，有興趣的可以下載：
https://github.com/ogonzal87/oskrhq-uikit-mobile-app
或點(diǎn)擊下方鏈接查看原文和視頻。
原文鏈接：https://blog.prototypr.io/a-dictionary-for-a-design-language-3afae1579586
