構建設計語言系統

一套全面的設計系統，從設計原則到字型排版，從互動到文案，從動效到樣式，從元件到設計工具提供了各種解決方法和指導，設計師和工程師可以快速找到相關的指導內容，有效地幫助完善工作並且提高效率。

設計系統語言 —— 一套提高數字生態系統和諧程度的規則或指南。

什麼是數字生態系統呢？它是相互依存的企業、人或是事物共享的一個互惠互利的標準化數字平臺。為了使這個生態系統保持和諧，我們需要了解它所涉及的不同群體的要求和期望，以建立一個可擴充套件且高效的設計系統。我們作為這個系統裡的一員需要做的是：

1）互相協作以建立好的設計語言系統

2）在提高內部效率的同時，提供良好的使用者體驗。

設計語言系統就像給房子打地基，它將會讓建造時間更短，效率更高。

下面我們談談怎麼構建設計語言系統

如何對已搭建好的平臺進行設計規範整理

如果對已搭建好的平臺進行UI設計規範整理，要做的就是擷取所有的元件和元件進行歸類整理：從文字到按鈕，從摺疊皮膚到tab標籤的等。

從0開始構建的設計語言系統

儘量列舉出所有要用到的元素

在紙張上列舉出所有重要元素，然後按其用法對所有元素進行分組。例如：樣式組為顏色和字型。元件組包括按鈕、卡片、對話方塊等。

開始設計基礎樣式

顏色

從最明顯的樣式屬性——顏色開始，先定義主要品牌色，在這裡我們用#17B1F7藍色。

100offer品牌色

除了主色外的場景色，需要在不同的場景中使用（例如危險色：表示危險的操作）

代表操作成功和操作失敗的顏色

最後，再加一些中性色用於文字、背景和邊框顏色。運用不同的中性色來表現不同的層次結構。

淺灰色：用在邊框、線條或分割線。

中灰色：副標題

深灰色：主標題、正文或背景。

當然你還可以自己定義更多層次的灰色。以便運用到所有場景中。

100offer中運用的所有灰色

100offer所用到的所有顏色

陰影

陰影是一種常用的樣式屬性。

四個足以覆蓋系統中元件的設定陰影樣式：

1）A subtle shadow 可以運用在最基礎的元件，如：按鈕。

2）A more pronounced shadow 適合運用在懸停效果上。

3）A strong shadow 更適合下拉選單和氣泡卡片等相似元件。

4）A distant shadow 適合模態元件。

上圖是四種陰影樣式

字型大小

為了在每個螢幕上建立適當的視覺化層次結構，我們需要定義許多不同的字型大小。

如：超大標題、大標題、副標題、正文、小標題等，都需要定義不同的字型大小。通常我們有一些用在正文文字的預設字型大小：14px , 在此基礎上我們再定義其他型別的字型大小。

100offer定義的部分字型標準

行高

行高可以理解為一個包裹在字型外面的無形的框，字型距框的上下空隙為半行距。

螞蟻金服的 Ant Design 字號與行高對應關係參考

建議的主要字型為 14，與之對應的行高為 22。其餘的字階的選擇可根據具體情況進行自由的定義。

圓角

小圓角：用於核取方塊、tag標籤和label標籤等小元件

中圓角：使用者輸入框和按鈕等類似元件

大圓角：用於卡片和模態等其他大元件

2px, 4px and 8px的圓角

構建元件庫

按鈕

構建常用的基礎按鈕

100offer基礎按鈕

一些特殊尺寸的大按鈕

100offer大按鈕

更多元件

當我們構建了一些基礎元件時，接下來可以開始組合多個元件來建立更復雜的元件。例如：輸入框、下拉元件。

100offer部分輸入框和下拉框

使用這種方法我們可以舉一反三，設計出一個更完整的元件庫，運用到所有的場景下。

在設計語言的驅動下，設計師能夠從重複的勞動中獲得解脫，工程師能夠對設計理念有更深刻的理解，同時指導設計師提供明確的樣式定義，加強工程師與設計師的溝通，有效地幫助完善工作並且提高效率。

結尾彩蛋（一些非常成熟的設計系統連結）：

Polaris — Shopify’s Design System

IBM’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

相關文章推薦：

17組值得收藏的設計規範&元件庫下載

給初級UI&UE設計師的Sketch資源分享

在構建設計規範之前，你需要看看這些設計資源

互動設計原則和理論1——尼爾森十大可用性原則

國外設計團隊的高頻設計工具與協作工具

16個表單優化技巧

怎樣提高註冊登入流程的互動體驗