中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

我們在設計工作的開展過程中，時常會因為參與人數多、業務背景雜而面臨諸多考驗。本文從概念、背景、類型、命名和應用五大方面來介紹視覺設計的原子Design Token，為大家解答在設計環節如何巧妙化解團隊協作的難題。推薦設計伙伴們閱讀了解～

提到Design Token，很多同學可能第一反應是這是什么？其實這不是什么新名詞，早在2014年，salesforce就開始在這塊進行研究，它的名字來源于Jina Anne。

Design Token 是設計系統中的視覺設計原子。它們是一組有著統一命名規則的實體，用于存儲視覺設計部分的具體參數，比如 HEX 色值、間距、尺寸的像素等。使用它可以有幫助為 UI 開發工作維護一套具備可擴展性、一致性的視覺體系。

在我們實際工作中，經常會面臨參與成員眾多以及業務背景的復雜性以及設計趨勢變化的等問題和考驗，你是否有以下的疑問：

• 設計團隊加入新人，因為對規范的不了解，經常會不知道不同場景對應色值的應用。
• 開發同學代碼碎片化，在遇到新業務時，需要二次開發，迭代以及維護成本增加。
• 隨著公司戰略升級，品牌色做了調整，因為調整頁面眾多，經常因為某些色彩細節而忘記調整。

那么接下來讓我們一起了解下Design Token吧~

一、概念

從本質上來講，Design Token是一種設計與開發共同使用的工作思維和方法。”Token“的意思是令牌或者指令，簡單的可以理解為對視覺樣式封裝的屬性參數。在設計師以及開發都理解的命名規則上，對組件中的每一個元素進行有規律的代碼化命名，統一了兩個不同工種（前端與設計）的交流語言，保證設計系統可以被快速管理，確保了產品體驗的靈活性一致性。

上面解釋如果還覺得復雜的話，你可以把Design Token理解為設計以及前端都認可的外號。例如當前按鈕背景色值的外號是”colour-button-backgroung-primary-normal“，這樣即使以后按鈕背景色再怎么變化，前端都可以根據這個外號來應用顏色，這樣的話，按鈕在系統中的背景色就是唯一的。

二、使用場景

我們可以設想一下假如沒有Token，我們開發是如何工作的。

例如我們之前的品牌色#00704a，在頁面中會大量被使用，那么當每個頁面出現該顏色的時候，開發得重復編寫，那后續品牌色升級，開發改起來會特別麻煩。

這個時候我們假如使用了Token，開發在實際工作的時候就不需要輸入這個顏色的色值，而只需要這個顏色的Token“color-primary：blue-7”即可。即使后續這個品牌色值再怎么調整，也不需要開發做重復的工作。

三、類型

Token在實際的應用中可以分為3類，全局Token（Global Token）、別名Token(Alias Token)以及組件Token(Component Token)。

1. 全局Token

作為全局Token，通過字面意思就知道它并沒有限定使用的范圍，也就是項目中所有的Token都可以從這里調取，無論是顏色、字體、行高還是圓角等。例如顏色Token通常被命名為Blue-7、Blue-8等。

2. 別名Token

它的存在是為了限定全局Token的使用場景，這樣可以讓Token更加場景化，可以被靈活調用，在后續的更改中自由替換。它的值都是從全局Token中調取過來。例如colour-primary：$blue-7。

3. 組件Token

這一步就是特別具體的，一般添加組件的的名稱以及屬性，可以直接進行開發，通常作為特定名稱，大家基本上看了Token就知道它是什么。它的值一般從別名Token調取，在特殊情況下也會從全局Token中調取。例如：button-color-primary-background:$colour-primary。

四、命名

1. 拆解Token

要想對Token進行合理命名，我們就需要對其進行原子級別的拆解。拆解為類別、元件、屬性、等級、狀態這5類。

不同公司針對Token有著不同的定義方式，只要設計師與前端達成一致就好。

例如產品設計中的Lightning Design System在對Token進行原子級拆解的時候就包含了12種：

1. Background Color
2. Text Color
3. Border Color
4. Font
5. Font Size
6. Opacity
7. Line Height
8. Spacing
9. Radius
10. Sizing
11. Shadow
12. Time
13. Media Query
14. Z-index

（1） 類別

類別指在Token中有著最廣泛應用場景，最基礎的組件元素。

我們對常用的組件圍繞形、色、字、構、質這5個維度對其進行拆解，分為圓角、色彩、文字、間距以及陰影這5類

（2） 元件

元件指具體的單一的組件種類，例如按鈕這個類別下就包含了主按鈕、默認按鈕、虛線按鈕、文本按鈕、鏈接按鈕。

（3）屬性

這里的屬性通常分為背景或者邊框兩種?？赡軙型瑢W疑問，為什么只有2種屬性，因為這里我們的樣式不與具體組件綁定，僅僅以樣式本身的性質來做區分，所以在屬性這里我們羅列了2種樣式。

例如下圖的彈窗，線框的描邊、輸入框的描邊以及按鈕的描邊都可以調取統一的Token，將原本相同元件但不同樣式的組件進行統一化管理。

（4） 等級

等級的狀態由組件的基本功能以及具體的使用場景決定，有部分組件只有一個等級，例如”面包屑”，這時候在Token命名的時候就可以不體現，而有的組件例如“按鈕””導航“等則有多個等級；

（5）類別

狀態則是組件在交互時候的不同樣式，通常有默認、懸停、點擊、禁用等，有時候還會根據場景的不同，有危險以及幽靈等狀態。

2.Token的命名

Token的命名沒有唯一的表達方式，只需前端與設計保持約定一致即可。這里Token的命名方式與組件基本一致，都是按照”類別-元件-屬性-等級-狀態“的順序依次往下。不同單詞之間采用“–“或者”.“符號相連是可以通用的。

上面按鈕的命名雖然看起來很復雜，但是它也可以很明確的告訴設計師以及前端它的使用場景。例如它告訴我們可能用于按鈕的背景，它還表達了它當前的等級是什么，以及它的具體狀態是什么。

3. 整理Design Token

有了統一的命名規則后，我們可以把涉及到Token編寫的組件全部以表格的形式整理出來，開發在編寫的時候可以對照圖表中組件的名稱，直接在導出的json文件中調用該組件的詳細信息。

五、應用

因為我們的設計軟件是Figma，因此挑選了與之匹配的插件“Figma Tokens”來輔助我們協同。

1.手動輸入Token

我們以下圖為例，嘗試下怎么根據Token值在在該插件中手動輸入。

2.批量導入Token

手動輸入大家可能覺得太麻煩，那么我們可以嘗試下如何批量導入Token，這里以顏色的梯度色板為例，首先我們先在Figma里面利用Foundation插件建立Gobal梯度色板（也可以自己手動在Figma中輸入產品的基礎色值），隨后將其導入Figma Token中。這些導入后的顏色作為全局Token，后續將會被引用。

在過去開發利用藍湖編寫組件的時候，需要選中這個組件，然后復制代碼后輸入該組件相對應的顏色值?，F在就不需要知道這些具體的值，只需要知道組件的token名稱就可以在調出的json文件中該組件的詳細信息，大大提升了工作效率。

3. 新建主題

接下來我們在插件左側新建別名Token（這里的命名建議采用英文，以防后續導出json出現問題），并根據顏色的應用場景分為背景色、反饋色、文字色等（具體根據當前項目所需命名）。

這些命名好之后我們就可以開始通過簡單的樣式進行應用，例如我們想更換視窗中的按鈕背景顏色，這時只需選中Figma操作區的按鈕背景后再選擇別名Token中對應的藍色即可進行聯動替換（這里要注意的是主題順序，選中下方主題，則會對上方主題進行覆蓋）。

4. 導出Json

導出Json后，開發在編寫代碼的時候可以對這個文檔直接進行直接復制 ，確保設計與開發的一致性。

六、寫在最后

以上是有關Design Token的介紹以及落地的相關內容，它對還未建立公司組件庫且想提高團隊的協作特別有幫助。

Token提供的可操作性空間很大，可支持自定義的操作很多，其實目前做到文字以及顏色的自定義就可以很快提升我們的效率了。

在未來的產品發展中我相信Token的應用不單單是作為輔助插件的支撐，會成為這些設計軟件內部的標配，賦能更多的產品。不知道你們公司是如何應用Design Token，歡迎一起討論~

我是江鳥，一個愛學習愛分享的設計師。

我們下期見~

本文由 @江鳥的設計生活 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議