構(gòu)建設(shè)計(jì)語(yǔ)言系統(tǒng)
一套全面的設(shè)計(jì)系統(tǒng)，從設(shè)計(jì)原則到字體排版庆寺，從交互到文案蚊夫，從動(dòng)效到樣式，從組件到設(shè)計(jì)工具提供了各種解決方法和指導(dǎo)懦尝，設(shè)計(jì)師和工程師可以快速找到相關(guān)的指導(dǎo)內(nèi)容知纷，有效地幫助完善工作并且提高效率。
設(shè)計(jì)系統(tǒng)語(yǔ)言 —— 一套提高數(shù)字生態(tài)系統(tǒng)和諧程度的規(guī)則或指南陵霉。
什么是數(shù)字生態(tài)系統(tǒng)呢琅轧？它是相互依存的企業(yè)、人或是事物共享的一個(gè)互惠互利的標(biāo)準(zhǔn)化數(shù)字平臺(tái)踊挠。為了使這個(gè)生態(tài)系統(tǒng)保持和諧乍桂，我們需要了解它所涉及的不同群體的要求和期望，以建立一個(gè)可擴(kuò)展且高效的設(shè)計(jì)系統(tǒng)效床。我們作為這個(gè)系統(tǒng)里的一員需要做的是：
1）互相協(xié)作以建立好的設(shè)計(jì)語(yǔ)言系統(tǒng)
2）在提高內(nèi)部效率的同時(shí)睹酌，提供良好的用戶體驗(yàn)。
設(shè)計(jì)語(yǔ)言系統(tǒng)就像給房子打地基剩檀，它將會(huì)讓建造時(shí)間更短憋沿，效率更高。
下面我們談?wù)勗趺礃?gòu)建設(shè)計(jì)語(yǔ)言系統(tǒng)
如何對(duì)已搭建好的平臺(tái)進(jìn)行設(shè)計(jì)規(guī)范整理
如果對(duì)已搭建好的平臺(tái)進(jìn)行UI設(shè)計(jì)規(guī)范整理沪猴，要做的就是截取所有的元件和組件進(jìn)行歸類整理：從文本到按鈕卤妒，從折疊面板到tab標(biāo)簽的等。
從0開始構(gòu)建的設(shè)計(jì)語(yǔ)言系統(tǒng)
盡量列舉出所有要用到的元素
在紙張上列舉出所有重要元素字币，然后按其用法對(duì)所有元素進(jìn)行分組则披。例如：樣式組為顏色和字體。組件組包括按鈕洗出、卡片士复、對(duì)話框等。
開始設(shè)計(jì)基礎(chǔ)樣式
顏色
從最明顯的樣式屬性——顏色開始，先定義主要品牌色阱洪，在這里我們用#17B1F7藍(lán)色便贵。
除了主色外的場(chǎng)景色，需要在不同的場(chǎng)景中使用（例如危險(xiǎn)色：表示危險(xiǎn)的操作）
最后冗荸，再加一些中性色用于文本承璃、背景和邊框顏色。運(yùn)用不同的中性色來(lái)表現(xiàn)不同的層次結(jié)構(gòu)蚌本。
淺灰色：用在邊框盔粹、線條或分割線。
中灰色：副標(biāo)題
深灰色：主標(biāo)題程癌、正文或背景舷嗡。
當(dāng)然你還可以自己定義更多層次的灰色。以便運(yùn)用到所有場(chǎng)景中嵌莉。
陰影
陰影是一種常用的樣式屬性进萄。
四個(gè)足以覆蓋系統(tǒng)中組件的設(shè)置陰影樣式：
1）A?subtle shadow 可以運(yùn)用在最基礎(chǔ)的組件，如：按鈕锐峭。
2）A more pronounced shadow 適合運(yùn)用在懸停效果上中鼠。
3）A strong shadow 更適合下拉菜單和氣泡卡片等相似組件。
4）A distant shadow 適合模態(tài)組件沿癞。
字體大小
為了在每個(gè)屏幕上創(chuàng)建適當(dāng)?shù)目梢暬瘜哟谓Y(jié)構(gòu)援雇，我們需要定義許多不同的字體大小。
如：超大標(biāo)題抛寝、大標(biāo)題熊杨、副標(biāo)題、正文盗舰、小標(biāo)題等晶府，都需要定義不同的字體大小。通常我們有一些用在正文文本的默認(rèn)字體大凶昵鳌：14px , 在此基礎(chǔ)上我們?cè)俣x其他類型的字體大小川陆。
行高
行高可以理解為一個(gè)包裹在字體外面的無(wú)形的框，字體距框的上下空隙為半行距蛮位。
建議的主要字體為 14较沪，與之對(duì)應(yīng)的行高為 22。其余的字階的選擇可根據(jù)具體情況進(jìn)行自由的定義失仁。
圓角
小圓角：用于復(fù)選框尸曼、tag標(biāo)簽和label標(biāo)簽等小組件
中圓角：用戶輸入框和按鈕等類似組件
大圓角：用于卡片和模態(tài)等其他大組件
構(gòu)建組件庫(kù)
按鈕
構(gòu)建常用的基礎(chǔ)按鈕
一些特殊尺寸的大按鈕
更多組件
當(dāng)我們構(gòu)建了一些基礎(chǔ)組件時(shí)，接下來(lái)可以開始組合多個(gè)組件來(lái)創(chuàng)建更復(fù)雜的組件萄焦。例如：輸入框控轿、下拉組件冤竹。
使用這種方法我們可以舉一反三，設(shè)計(jì)出一個(gè)更完整的組件庫(kù)茬射，運(yùn)用到所有的場(chǎng)景下鹦蠕。
在設(shè)計(jì)語(yǔ)言的驅(qū)動(dòng)下，設(shè)計(jì)師能夠從重復(fù)的勞動(dòng)中獲得解脫在抛，工程師能夠?qū)υO(shè)計(jì)理念有更深刻的理解钟病，同時(shí)指導(dǎo)設(shè)計(jì)師提供明確的樣式定義，加強(qiáng)工程師與設(shè)計(jì)師的溝通刚梭，有效地幫助完善工作并且提高效率肠阱。
結(jié)尾彩蛋（一些非常成熟的設(shè)計(jì)系統(tǒng)鏈接）：
Polaris?—?Shopify’s Design System
Airbnb’s Design Language System
Fluent?—?Microsoft’s Design Language System
Nachos?—?Trello’s Design Language System
Lightning Design System?—?Salesforce
Apple’s Design Language System
參考：https://uxplanet.org/design-language-system-d438f4aa30e0
https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117
https://uxdesign.cc/how-to-get-a-head-start-on-design-system-8a217676c1f9
作者：Ever
相關(guān)文章推薦：
17組值得收藏的設(shè)計(jì)規(guī)范&組件庫(kù)下載
給初級(jí)UI&UE設(shè)計(jì)師的Sketch資源分享
在構(gòu)建設(shè)計(jì)規(guī)范之前，你需要看看這些設(shè)計(jì)資源
交互設(shè)計(jì)原則和理論1——尼爾森十大可用性原則
