通過(guò)定義樣式庫(kù)從而決定產(chǎn)品設(shè)計(jì)中的最小原子，為團(tuán)隊(duì)搭建組件認(rèn)知達(dá)成共識(shí)提供了基礎(chǔ)，為頁(yè)面設(shè)計(jì)元素細(xì)節(jié)一致性保駕護(hù)航。

本文主要圍繞什么是樣式，如何搭建樣式庫(kù)，樣式庫(kù)的應(yīng)用三個(gè)部分進(jìn)行闡述，在項(xiàng)目中提前定義好樣式庫(kù)將有助于團(tuán)隊(duì)設(shè)計(jì)師搭建組件認(rèn)知在同一頻道，希望對(duì)正在了解樣式庫(kù)知識(shí)的你有幫助?。?！

01 什么是樣式

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

02 如何搭建樣式庫(kù)？

1. 確定顏色

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

（1）品牌色

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

（2）中性色

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

透明度色值：

（3）功能色

功能色為界面設(shè)計(jì)中的特殊場(chǎng)景色，主要為成功、失敗、警告、鏈接等。功能色的選取需要遵守用戶對(duì)色彩的基本認(rèn)知，成功（綠色）、失?。t色）、警告（黃色）、鏈接（藍(lán)色）。具體色值以UI同學(xué)定義的為準(zhǔn)，在交互設(shè)計(jì)中通常用 “中性色+圖標(biāo)” 替代。

2. 確定字體

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

（1）字體家族

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

（2）主字體

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

（3）字階與行高

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

（4）字重

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

3. 確定邊角

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

4. 確定陰影

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

（1）陰影類型

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

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

（2）陰影方向

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

（3）陰影值

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

5. 確定圖標(biāo)

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

（1）圖標(biāo)尺寸

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

（2）選擇合適的圖標(biāo)

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

6. 確定線條

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

（1）線的樣式

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

（2）線的粗細(xì)

在界面設(shè)計(jì)中，使用的線條越粗，那么在頁(yè)面中的視覺(jué)的感知度越強(qiáng)。線條粗細(xì)主要分為三個(gè)層級(jí)： 細(xì)線條（1px）、中線條（2PX）、粗線條（3px）。

03 樣式庫(kù)的應(yīng)用

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

1. 搭建組件

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

2. 快速生成新的組件庫(kù)

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

總結(jié)

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

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

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

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