今天主要的分享內(nèi)容，會(huì)直接針對(duì)具體規(guī)范中的部分樣式規(guī)范說(shuō)明，包括色彩、字體、圖標(biāo)三個(gè)關(guān)鍵對(duì)象。

一、色彩規(guī)范定義

色彩規(guī)范，即定義項(xiàng)目中使用的色彩類型和色號(hào)。色彩規(guī)范的定義需要完成以下工作內(nèi)容：

1. 品牌色定義
2. 功能色定義
3. 中性色定義
4. 色彩變體定義
5. 特殊色彩定義

1. 品牌色定義

品牌色是一個(gè)品牌或產(chǎn)品的色彩身份標(biāo)識(shí)，用于輸出和強(qiáng)化品牌認(rèn)識(shí)，也是項(xiàng)目中最重要的顏色類型，要應(yīng)用在項(xiàng)目全權(quán)重最高的元素和區(qū)域，是奠定項(xiàng)目色彩應(yīng)用的基礎(chǔ)。

品牌色包含兩種色彩類型，主色和輔助色。

品牌色的定義包含兩種情況，第一種是項(xiàng)目在設(shè)計(jì)前已經(jīng)創(chuàng)建過(guò)品牌 VI 和色彩規(guī)范，則項(xiàng)目中就可以沿用這些色彩。比如為麥當(dāng)勞設(shè)計(jì)某套內(nèi)部管理系統(tǒng)，那么就可以沿用黃色作為主色（金拱門 Uknow？），紅色作為輔助色。

第二種情況，則是沒有關(guān)聯(lián)品牌 VI 規(guī)范的項(xiàng)目，要重新選擇項(xiàng)目的品牌主色和輔助色，這就需要設(shè)計(jì)師自己根據(jù)項(xiàng)目的設(shè)計(jì)情況做出選擇。

對(duì)于普通 B 端項(xiàng)目來(lái)說(shuō)，品牌色只需要定義個(gè)主色即可，無(wú)需額外增加品牌輔助色。且 B 端產(chǎn)品相對(duì) C 端產(chǎn)品的使用場(chǎng)景更單一，主要輸出的情緒是專業(yè)、穩(wěn)重、商務(wù)、科技，所以主色基本就圍繞在藍(lán)、綠、紅、紫這寥寥幾個(gè)色相范圍內(nèi)選擇。

最后要強(qiáng)調(diào)如無(wú)特殊理由，項(xiàng)目中的品牌主色有且只能有一個(gè)。

2. 功能色定義

功能色是借助色彩特性傳達(dá)特殊信息的相應(yīng)色彩，比如錯(cuò)誤提示用紅色，正確提示用綠色，警示操作用黃色等等。

功能色的定義由項(xiàng)目中應(yīng)用的字段、控件、組件內(nèi)容決定，因?yàn)檫@些元素需要用到特定的色彩來(lái)有效地傳遞信息，而不僅僅是為了視覺的美觀程度創(chuàng)建功能色。所以，要定義多少功能色也有需求推導(dǎo)而來(lái)，而不僅僅是考慮視覺的美觀程度。

這也是功能色和品牌輔助色的不同，輔助色更多是配合主色來(lái)實(shí)現(xiàn)一些特殊的視覺方案和觀看體驗(yàn)，突出品牌的調(diào)性和特質(zhì)。

但品牌色也可以作為功能色使用，比如前面麥當(dāng)勞的配色，輔助色可以作為錯(cuò)誤、警告色來(lái)使用，不用額外再創(chuàng)建一個(gè)相似的紅色功能色。

3. 中性色定義

中性色即沒有色彩的顏色，是構(gòu)成項(xiàng)目基礎(chǔ)色彩框架和信息對(duì)比度的黑、白、灰色。一個(gè)項(xiàng)目想要有效的呈現(xiàn)背景、描邊、文字信息，就需要應(yīng)用多種中性色實(shí)現(xiàn)強(qiáng)弱的對(duì)比。

中性色的定義主要由 HSB 中的 B 值（灰度值）決定，B 值越小越黑越大越亮。

中性色的定義數(shù)量無(wú)需過(guò)多，合理的中性色數(shù)量在 6-8 個(gè)即可。雖然中性色名義上是無(wú)色（飽和度 S 為 0），但實(shí)際項(xiàng)目應(yīng)用中，可以適當(dāng)為中性色填加藍(lán)色的色相，讓界面整體偏冷色調(diào)，降低用戶的用眼疲勞。

4. 色彩變體定義

色彩變體，是指一種色彩類型的同狀態(tài)變化，用于滿足界面交互過(guò)程或信息表現(xiàn)上的變體需要。

比如一個(gè)按鈕，包含了默認(rèn) Defult、鼠標(biāo)懸浮 Hover、鼠標(biāo)點(diǎn)擊 Click、禁用 Disable 等狀態(tài)，我們往往需要使用不同的色彩來(lái)表達(dá)這些狀態(tài)，通過(guò)色彩的差異讓用戶感知到狀態(tài)的變更。

那如果按鈕默認(rèn)使用的是主色，那么它在其它狀態(tài)中應(yīng)用的顏色應(yīng)該屬于哪種類型？是品牌色，還是功能色……這么歸類肯定都不合適，把色彩變體本身作為一個(gè)分類也不合適。

色彩變體是一個(gè)色彩類型的不同狀態(tài)和表現(xiàn)，創(chuàng)建變體只是為這個(gè)色彩類型做補(bǔ)充，而不是創(chuàng)建出新的色彩類型出來(lái)。

5. 特殊色彩定義

除了前面提到的色彩類型外，往往根據(jù)項(xiàng)目需求還會(huì)定義一些特殊的色彩類型。

比如圖表使用多獨(dú)立定義一套圖表用色，或是裝飾圖標(biāo)用得多定義標(biāo)準(zhǔn)漸變色，以及 SaaS 運(yùn)營(yíng)活動(dòng)多另外創(chuàng)建一個(gè)運(yùn)營(yíng)用色標(biāo)準(zhǔn)等等。

色彩的定義根據(jù)實(shí)際設(shè)計(jì)的需求觸發(fā)，需要加多少定多少。無(wú)需像 B 端組件庫(kù)一樣提前定義出一整套色卡再進(jìn)行選色。

所以定義好的顏色，可以在軟件的色彩樣式表中進(jìn)行添加，并創(chuàng)建相應(yīng)的分類和命名，方便我們?cè)诤罄m(xù)設(shè)計(jì)中進(jìn)行選擇。

二、字體規(guī)范定義

字體規(guī)范，是定義項(xiàng)目中使用的文字類型和具體屬性參數(shù)。字體規(guī)范的定義要完成對(duì)以下字體類型的設(shè)置：

1. 標(biāo)題字體
2. 正文字體
3. 注釋字體
4. 數(shù)字字體
5. 其它字體

1. 標(biāo)題字體

標(biāo)題就是用于標(biāo)示關(guān)鍵信息的文本，比如頁(yè)面名、組件名、數(shù)據(jù)名等等。一個(gè)項(xiàng)目的界面中往往需要用到多種規(guī)格的標(biāo)題，來(lái)表現(xiàn)不同層級(jí)、權(quán)重的信息。

標(biāo)題的字號(hào)控制在 14-32 之間，對(duì)于中文標(biāo)題來(lái)說(shuō)，要使用 Medium 及以上的字重，而標(biāo)題的種類盡量不要超過(guò) 5 個(gè)。

2. 正文字體

正文是用于最基礎(chǔ)的信息和大段文本展示的字體。因?yàn)槲谋緫?yīng)用場(chǎng)景的多樣化，正文也可以使用多種規(guī)格。

正文的字號(hào)要控制在 13-18 之間，中文的正文僅需使用 Regular 字重，正文的使用數(shù)量不要大于 3 個(gè)。

在正文定義中，有個(gè)額外需要關(guān)注的要素，即行高的變動(dòng)。當(dāng)文本進(jìn)行多行展示時(shí)，行高必然要經(jīng)過(guò)單獨(dú)的設(shè)置。如果一開始定義的正文規(guī)格在多行文本應(yīng)用中變更了行高，那就等于應(yīng)用了兩種字體。

如果正文會(huì)有多行使用場(chǎng)景的話，則字體屬性定義直接以滿足多行排版要求的行高為準(zhǔn)。

3. 注釋字體

注釋是一些相對(duì)次要的信息，比如用戶名旁邊的 ID 號(hào)，輸入框旁邊的說(shuō)明小字等。注釋本身的權(quán)重比正文低，所以正常尺寸也會(huì)比正文小。

常用的注釋字號(hào)通常為 12 或 13，也使用 Regular 字重，常規(guī)項(xiàng)目?jī)H需使用一種注釋的規(guī)格即可。

4. 數(shù)字字體

在 B 端項(xiàng)目中數(shù)據(jù)展示往往非常重要，所以一些數(shù)字展示頻率非常高的項(xiàng)目，如金融平臺(tái)、統(tǒng)計(jì)工具等就會(huì)單獨(dú)定義數(shù)字的字體，提升它們的辨識(shí)度。

數(shù)字字體的定義意味著要和系統(tǒng)默認(rèn)字體不同，所以要先和前端確認(rèn)是否可以在項(xiàng)目中嵌入字體文件，可以的話我們可以選擇任意擁有版權(quán)（或免費(fèi)）的字體，不可以的話則從系統(tǒng)包含的字庫(kù)中選擇。

數(shù)字字體要定義集中規(guī)格和大小，就完全根據(jù)界面的實(shí)際需求和選擇的具體字體決定。

最后特殊字體類型就不展開介紹了，當(dāng)項(xiàng)目中出現(xiàn)特殊的文本使用需求時(shí)，把它們單獨(dú)歸類進(jìn)行即可。

同理，所有定義出來(lái)的字體，都需要在軟件的樣式表中進(jìn)行創(chuàng)建，包括編組和有效的命名，方便我們?cè)诤罄m(xù)設(shè)計(jì)中引用。

三、圖標(biāo)規(guī)范定義

圖標(biāo)規(guī)格，即定義在項(xiàng)目?jī)?nèi)圖標(biāo)的規(guī)格和具體圖形，確保圖標(biāo)整體視覺的一致性。

第一個(gè)問(wèn)題是圖標(biāo)的規(guī)格，常規(guī) B 端項(xiàng)目往往不會(huì)只有一種圖標(biāo)類型，可能還會(huì)包含普通工具圖標(biāo)、裝飾圖標(biāo)、業(yè)務(wù)圖標(biāo)、分類圖標(biāo)等等。

這些圖標(biāo)的大小不一，設(shè)計(jì)風(fēng)格也不一致，所以要將它們進(jìn)行總結(jié)和規(guī)范，防止在不同界面中一直設(shè)計(jì)出新的圖標(biāo)類型出來(lái)。

每個(gè)圖標(biāo)類型的規(guī)格包含三個(gè)要素：

1. 尺寸：該類圖標(biāo)的應(yīng)用尺寸
2. 柵格：該類圖標(biāo)的柵格輔助系統(tǒng)
3. 風(fēng)格：圖標(biāo)樣式的細(xì)節(jié)特征

定義完規(guī)格以后，還要把圖標(biāo)全部畫出來(lái)，而這些畫出來(lái)的圖標(biāo)也要成為規(guī)范中的一部分。需要將它們?nèi)空砹_列出來(lái)，并在軟件中創(chuàng)建成組件（Component/Symbol），方便后續(xù)的調(diào)用。

圖標(biāo)規(guī)范的定義介于樣式和組件之間，很多設(shè)計(jì)規(guī)范將圖標(biāo)組件化后，把它置于組件庫(kù)之中，兩者沒有太大區(qū)別，看設(shè)計(jì)師自己怎么決定。

結(jié)尾

最近還在全力更新新一期 B 端全能班課程內(nèi)容，想要變強(qiáng)的同學(xué)就不要錯(cuò)過(guò)了 ? https://mrajw.xetslk.com/s/hVlyD

作者：超人的電話亭