通過定義樣式庫從而決定產(chǎn)品設計中的最小原子，為團隊搭建組件認知達成共識提供了基礎，為頁面設計元素細節(jié)一致性保駕護航。

本文主要圍繞什么是樣式，如何搭建樣式庫，樣式庫的應用三個部分進行闡述，在項目中提前定義好樣式庫將有助于團隊設計師搭建組件認知在同一頻道，希望對正在了解樣式庫知識的你有幫助?。?！

01 什么是樣式

樣式是產(chǎn)品設計中的最小原子，決定了一套可視化設計組件庫的最基礎的形態(tài)，主要包括顏色、文字、 邊角、陰影 、圖標 、線條。

02 如何搭建樣式庫？

1. 確定顏色

顏色是指界面設計中使用的色彩體系，確定顏色主要從下面?zhèn)€三方面出發(fā)：品牌色、中立色、功能色。為了避免干擾UI同學在設計時的用色決策，在交互設計輸出交互稿通常使用中性色。

（1）品牌色

品牌色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺元素之一。 應用場景包括：關鍵行動點（按鈕），操作狀態(tài)（進行中）、重要信息高亮（價格），圖形化（圖標）等場景。品牌色色值以UI同學定義的為準，在交互設計中通常用中性色替代。

（2）中性色

中性色主要被大量的應用在界面的文字部分，此外背景、邊框、分割線等場景中也非常常見?？紤]深色背景以及淺色背景的差異，中性色在落地的時候是按照透明度的方式實現(xiàn)的，主要原因是透明度實現(xiàn)的顏色可以和底色形成疊加關系，保留色彩的調(diào)性；而色值實現(xiàn)的結果會出現(xiàn)了瑕疵（如下圖）。

透明度色值：

（3）功能色

功能色為界面設計中的特殊場景色，主要為成功、失敗、警告、鏈接等。功能色的選取需要遵守用戶對色彩的基本認知，成功（綠色）、失敗（紅色）、警告（黃色）、鏈接（藍色）。具體色值以UI同學定義的為準，在交互設計中通常用 “中性色+圖標” 替代。

2. 確定字體

字體是界面設計中最基本的構成之一。通過定義字體在設計上的使用規(guī)則，從而在閱讀的舒適性上達到平衡。確定字體主要從下面四個方面出發(fā)：字體家族、主字體、字階和行高、字重。

（1）字體家族

字體家族中優(yōu)先使用系統(tǒng)默認的界面字體，對于不同環(huán)境顯示條件，則提供了一套滿足易讀性的備用字體。在交互設計時系統(tǒng)默認字體即可，MAC使用系統(tǒng)默認字體 蘋方_簡，Windows使用系統(tǒng)默認字體微軟雅黑。

（2）主字體

基于電腦顯示器閱讀距離（50 cm）， 12 的字號在顯示器上的物理大小對于用戶閱讀體驗并不友好，而 14 的大小既能滿足用戶的可讀性，更為舒適、清晰，也能保證界面的層次感。當字號大于 14 時，對于表格類信息呈現(xiàn)則會受到一定的影響，如因文字過大而無法容納更多的信息等。

（3）字階與行高

字階是指一系列有規(guī)律的不同尺寸的字體，拉開了頁面的信息層級。行高是指一個包裹在字體外面的無形的盒子，提供了上下文之間呼吸的空間。

（4）字重

多數(shù)情況下，只出現(xiàn) regular 以及 medium 的兩種字體重量，Regular 主要應用于正文和輔助文字，Medium 主要應用于標題類，以突出層級關系，讓信息更清晰，分別對應代碼中的 500 和 400?？紤]到數(shù)字和西文字體本身面積較小，建議使用 Semibold，使得中西文混排時更適當，對應代碼中的 600。

3. 確定邊角

邊角是用一段與角的兩邊相切的圓弧替換原來的角，在界面設計中，適當?shù)倪吔遣粌H可以反應產(chǎn)品的調(diào)性，還提供更友好的視覺體驗。確定邊角主要從下面三個方面出發(fā)：矩形元素、浮出控件、條形元素。

4. 確定陰影

陰影來源于現(xiàn)實生活的反映物體與物體之間距離的物理現(xiàn)象。在界面中，陰影用來塑造空間層級關系，從而使用戶更好的理解元素之間的高度距離與層次關系。確定陰影主要從下面三個方面出發(fā)：陰影類型、陰影類型、陰影值。

（1）陰影類型

陰影是由兩個不同階層的平面產(chǎn)生，大小由兩者之間的高度決定。在界面設計中將陰影類型分為 4 個層級：無陰影（S0）、小陰影 （S1）、中陰影（S2）、大陰影（S3 ）。

1. S0：無投影。物體緊貼地面，投影與物體完全重疊，在界面中不對此層定義陰影值。如：輸入框等；
2. S1：小投影。物體位于低層級，此時物體被操作(懸停、點擊等)觸發(fā)為懸浮狀態(tài)，當操作完成或取消時，懸停狀態(tài)反饋也跟隨消失，物體回歸到原有的層級中，如：卡片 hover、按鈕 等；
3. S2：中投影。物體位于中層級，此時物體與基準面的關系是展開并跟隨，物體由地面上的元素展開產(chǎn)生，會跟隨元素所在層級的移動而移動，如：下拉選項框、氣泡提示、拖拽排序等。
4. S3：大投影。物體位于高層級，該物體的運動和其他層級沒有關聯(lián)，如：對話框等。

（2）陰影方向

陰影的方向是由光源與物體的相對位置所決定的。假定光源所處高度不變，光源與物體的距離和物體與陰影的距離成正比。光源越遠，則陰影距離物體越遠。陰影的方向在界面里通常使用 X, Y 坐標軸來表示。

（3）陰影值

在不同高度上時，投射出的陰影顏色、模糊度、面積都有所區(qū)分。離地面越遠的物體，產(chǎn)生的陰影顏色越淡、模糊度越高、面積越大；反之則顏色更深、模糊度越低、面積越??；陰影是模擬的真實世界的反饋，為了更符合真實陰影，采用了三層陰影的表達方式，讓陰影更柔和，更符合真實狀態(tài)。

5. 確定圖標

圖標是圖形界面的重要組成部分，可以輔助用戶理解界面信息，給予用戶正確、友好的指引。確定圖標主要從下面兩個方面出發(fā)：圖標的尺寸、選擇合適的圖標。

（1）圖標尺寸

在界面設計中，為避免圖標個數(shù)過多，根據(jù)斐波那契數(shù)列 1、1、2、3、5、8、13、21、34、… 定義圖標主尺寸 : 8px(最小尺寸)、16px、24px、40px、64px(最大尺寸。

（2）選擇合適的圖標

在選擇合適的圖標時，為了保持圖標統(tǒng)一，我們需要考慮整體圖標視覺面積是否基本一致，圖標的點、線、圓角和三角四個基本元素是否基本一致。通過 https://www.iconfont.cn 大家可以獲取免費圖標。

6. 確定線條

線主要用于管理和分隔列表和頁面布局內(nèi)的內(nèi)容，以便讓內(nèi)容生成更好的視覺效果及空間感。確定線條主要從下面兩個方面出發(fā)：線的樣式、線的粗細。

（1）線的樣式

在界面設計中，線條主要分為實線和虛線兩大類，但虛線在樣式上的變化更多樣，給人的感覺不盡相同。為了整體界面的統(tǒng)一，線條的樣式不宜超過3種。

（2）線的粗細

在界面設計中，使用的線條越粗，那么在頁面中的視覺的感知度越強。線條粗細主要分為三個層級： 細線條（1px）、中線條（2PX）、粗線條（3px）。

03 樣式庫的應用

樣式庫的應用主要分為兩部分，1）根據(jù)設定好的 “顏色” 、“文字” 、 “邊角” 、 “陰影” 、 “圖標” 和“線條”搭建組件庫；2）調(diào)整樣式庫的參數(shù)，快速生成新的組件庫。

1. 搭建組件

根據(jù)設定好的 “顏色” 、“文字” 、 “邊角” 、 “陰影” 、 “圖標” 和“線條”搭建組件庫，下圖以按鈕為例：

2. 快速生成新的組件庫

從一個項目切換到另一個項目中，可以通過調(diào)整樣式的參數(shù)，快速生成復核新項目的組件庫。下圖以按鈕為例：

總結

在項目中，樣式庫的 “顏色” 、“文字” 、 “邊角” 、 “陰影” 、 “圖標” 和 “線條” 可以通過Axure元件樣式管理設定參數(shù)來定義，團隊設計師直接取設定好的樣式即可高效的搭建統(tǒng)一的組件。搭建好的組件庫可以通過調(diào)整樣式庫中設定的參數(shù)，快速生成一套新的組件庫以適應不同項目。

如果你正在設計 0-1 項目的，希望布局三部曲《框架布局》、《柵格系統(tǒng)》、《響應式》對你有所幫助?。?！

本文由 @前行的大熊 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協(xié)議