構建設計語言系統
一套全面的設計系統，從設計原則到字體排版，從交互到文案，從動效到樣式，從組件到設計工具提供了各種解決方法和指導，設計師和工程師可以快速找到相關的指導內容，有效地幫助完善工作並且提高效率。
設計系統語言 —— 一套提高數字生態系統和諧程度的規則或指南。
什麼是數字生態系統呢？它是相互依存的企業、人或是事物共享的一個互惠互利的標準化數字平臺。爲了使這個生態系統保持和諧，我們需要了解它所涉及的不同羣體的要求和期望，以建立一個可擴展且高效的設計系統。我們作爲這個系統裏的一員需要做的是：
1）互相協作以建立好的設計語言系統
2）在提高內部效率的同時，提供良好的用戶體驗。
設計語言系統就像給房子打地基，它將會讓建造時間更短，效率更高。
下面我們談談怎麼構建設計語言系統
如何對已搭建好的平臺進行設計規範整理
如果對已搭建好的平臺進行UI設計規範整理，要做的就是截取所有的元件和組件進行歸類整理：從文本到按鈕，從摺疊面板到tab標籤的等。
從0開始構建的設計語言系統
儘量列舉出所有要用到的元素
在紙張上列舉出所有重要元素，然後按其用法對所有元素進行分組。例如：樣式組爲顏色和字體。組件組包括按鈕、卡片、對話框等。
開始設計基礎樣式
顏色
從最明顯的樣式屬性——顏色開始，先定義主要品牌色，在這裏我們用#17B1F7藍色。
除了主色外的場景色，需要在不同的場景中使用（例如危險色：表示危險的操作）
最後，再加一些中性色用於文本、背景和邊框顏色。運用不同的中性色來表現不同的層次結構。
淺灰色：用在邊框、線條或分割線。
中灰色：副標題
深灰色：主標題、正文或背景。
當然你還可以自己定義更多層次的灰色。以便運用到所有場景中。
陰影
陰影是一種常用的樣式屬性。
四個足以覆蓋系統中組件的設置陰影樣式：
1）A subtle shadow 可以運用在最基礎的組件，如：按鈕。
2）A more pronounced shadow 適合運用在懸停效果上。
3）A strong shadow 更適合下拉菜單和氣泡卡片等相似組件。
4）A distant shadow 適合模態組件。
字體大小
爲了在每個屏幕上創建適當的可視化層次結構，我們需要定義許多不同的字體大小。
如：超大標題、大標題、副標題、正文、小標題等，都需要定義不同的字體大小。通常我們有一些用在正文文本的默認字體大小：14px , 在此基礎上我們再定義其他類型的字體大小。
行高
行高可以理解爲一個包裹在字體外面的無形的框，字體距框的上下空隙爲半行距。
建議的主要字體爲 14，與之對應的行高爲 22。其餘的字階的選擇可根據具體情況進行自由的定義。
圓角
小圓角：用於複選框、tag標籤和label標籤等小組件
中圓角：用戶輸入框和按鈕等類似組件
大圓角：用於卡片和模態等其他大組件
構建組件庫
按鈕
構建常用的基礎按鈕
一些特殊尺寸的大按鈕
更多組件
當我們構建了一些基礎組件時，接下來可以開始組合多個組件來創建更復雜的組件。例如：輸入框、下拉組件。
使用這種方法我們可以舉一反三，設計出一個更完整的組件庫，運用到所有的場景下。
在設計語言的驅動下，設計師能夠從重複的勞動中獲得解脫，工程師能夠對設計理念有更深刻的理解，同時指導設計師提供明確的樣式定義，加強工程師與設計師的溝通，有效地幫助完善工作並且提高效率。
結尾彩蛋（一些非常成熟的設計系統鏈接）：
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