今天主要的分享內容，會直接針對具體規范中的部分樣式規范說明，包括色彩、字體、圖標三個關鍵對象。

往期B端干貨：

一、色彩規范定義

色彩規范，即定義項目中使用的色彩類型和色號。色彩規范的定義需要完成以下工作內容：

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

1. 品牌色定義

品牌色是一個品牌或產品的色彩身份標識，用于輸出和強化品牌認識，也是項目中最重要的顏色類型，要應用在項目全權重最高的元素和區域，是奠定項目色彩應用的基礎。

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

品牌色的定義包含兩種情況，第一種是項目在設計前已經創建過品牌 VI 和色彩規范，則項目中就可以沿用這些色彩。比如為麥當勞設計某套內部管理系統，那么就可以沿用黃色作為主色（金拱門 Uknow？），紅色作為輔助色。

第二種情況，則是沒有關聯品牌 VI 規范的項目，要重新選擇項目的品牌主色和輔助色，這就需要設計師自己根據項目的設計情況做出選擇。

對于普通 B 端項目來說，品牌色只需要定義個主色即可，無需額外增加品牌輔助色。且 B 端產品相對 C 端產品的使用場景更單一，主要輸出的情緒是專業、穩重、商務、科技，所以主色基本就圍繞在藍、綠、紅、紫這寥寥幾個色相范圍內選擇。

最后要強調如無特殊理由，項目中的品牌主色有且只能有一個。

2. 功能色定義

功能色是借助色彩特性傳達特殊信息的相應色彩，比如錯誤提示用紅色，正確提示用綠色，警示操作用黃色等等。

功能色的定義由項目中應用的字段、控件、組件內容決定，因為這些元素需要用到特定的色彩來有效地傳遞信息，而不僅僅是為了視覺的美觀程度創建功能色。所以，要定義多少功能色也有需求推導而來，而不僅僅是考慮視覺的美觀程度。

這也是功能色和品牌輔助色的不同，輔助色更多是配合主色來實現一些特殊的視覺方案和觀看體驗，突出品牌的調性和特質。

但品牌色也可以作為功能色使用，比如前面麥當勞的配色，輔助色可以作為錯誤、警告色來使用，不用額外再創建一個相似的紅色功能色。

3. 中性色定義

中性色即沒有色彩的顏色，是構成項目基礎色彩框架和信息對比度的黑、白、灰色。一個項目想要有效的呈現背景、描邊、文字信息，就需要應用多種中性色實現強弱的對比。

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

中性色的定義數量無需過多，合理的中性色數量在 6-8 個即可。雖然中性色名義上是無色（飽和度 S 為 0），但實際項目應用中，可以適當為中性色填加藍色的色相，讓界面整體偏冷色調，降低用戶的用眼疲勞。

4. 色彩變體定義

色彩變體，是指一種色彩類型的同狀態變化，用于滿足界面交互過程或信息表現上的變體需要。

比如一個按鈕，包含了默認 Defult、鼠標懸浮 Hover、鼠標點擊 Click、禁用 Disable 等狀態，我們往往需要使用不同的色彩來表達這些狀態，通過色彩的差異讓用戶感知到狀態的變更。

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

色彩變體是一個色彩類型的不同狀態和表現，創建變體只是為這個色彩類型做補充，而不是創建出新的色彩類型出來。

5. 特殊色彩定義

除了前面提到的色彩類型外，往往根據項目需求還會定義一些特殊的色彩類型。

比如圖表使用多獨立定義一套圖表用色，或是裝飾圖標用得多定義標準漸變色，以及 SaaS 運營活動多另外創建一個運營用色標準等等。

色彩的定義根據實際設計的需求觸發，需要加多少定多少。無需像 B 端組件庫一樣提前定義出一整套色卡再進行選色。

所以定義好的顏色，可以在軟件的色彩樣式表中進行添加，并創建相應的分類和命名，方便我們在后續設計中進行選擇。

二、字體規范定義

字體規范，是定義項目中使用的文字類型和具體屬性參數。字體規范的定義要完成對以下字體類型的設置：

1. 標題字體
2. 正文字體
3. 注釋字體
4. 數字字體
5. 其它字體

1. 標題字體

標題就是用于標示關鍵信息的文本，比如頁面名、組件名、數據名等等。一個項目的界面中往往需要用到多種規格的標題，來表現不同層級、權重的信息。

標題的字號控制在 14-32 之間，對于中文標題來說，要使用 Medium 及以上的字重，而標題的種類盡量不要超過 5 個。

2. 正文字體

正文是用于最基礎的信息和大段文本展示的字體。因為文本應用場景的多樣化，正文也可以使用多種規格。

正文的字號要控制在 13-18 之間，中文的正文僅需使用 Regular 字重，正文的使用數量不要大于 3 個。

在正文定義中，有個額外需要關注的要素，即行高的變動。當文本進行多行展示時，行高必然要經過單獨的設置。如果一開始定義的正文規格在多行文本應用中變更了行高，那就等于應用了兩種字體。

如果正文會有多行使用場景的話，則字體屬性定義直接以滿足多行排版要求的行高為準。

3. 注釋字體

注釋是一些相對次要的信息，比如用戶名旁邊的 ID 號，輸入框旁邊的說明小字等。注釋本身的權重比正文低，所以正常尺寸也會比正文小。

常用的注釋字號通常為 12 或 13，也使用 Regular 字重，常規項目僅需使用一種注釋的規格即可。

4. 數字字體

在 B 端項目中數據展示往往非常重要，所以一些數字展示頻率非常高的項目，如金融平臺、統計工具等就會單獨定義數字的字體，提升它們的辨識度。

數字字體的定義意味著要和系統默認字體不同，所以要先和前端確認是否可以在項目中嵌入字體文件，可以的話我們可以選擇任意擁有版權（或免費）的字體，不可以的話則從系統包含的字庫中選擇。

數字字體要定義集中規格和大小，就完全根據界面的實際需求和選擇的具體字體決定。

最后特殊字體類型就不展開介紹了，當項目中出現特殊的文本使用需求時，把它們單獨歸類進行即可。

同理，所有定義出來的字體，都需要在軟件的樣式表中進行創建，包括編組和有效的命名，方便我們在后續設計中引用。

三、圖標規范定義

圖標規格，即定義在項目內圖標的規格和具體圖形，確保圖標整體視覺的一致性。

第一個問題是圖標的規格，常規 B 端項目往往不會只有一種圖標類型，可能還會包含普通工具圖標、裝飾圖標、業務圖標、分類圖標等等。

這些圖標的大小不一，設計風格也不一致，所以要將它們進行總結和規范，防止在不同界面中一直設計出新的圖標類型出來。

每個圖標類型的規格包含三個要素：

1. 尺寸：該類圖標的應用尺寸
2. 柵格：該類圖標的柵格輔助系統
3. 風格：圖標樣式的細節特征

定義完規格以后，還要把圖標全部畫出來，而這些畫出來的圖標也要成為規范中的一部分。需要將它們全部整理羅列出來，并在軟件中創建成組件（Component/Symbol），方便后續的調用。

圖標規范的定義介于樣式和組件之間，很多設計規范將圖標組件化后，把它置于組件庫之中，兩者沒有太大區別，看設計師自己怎么決定。

結尾

最近還在全力更新新一期 B 端全能班課程內容，想要變強的同學就不要錯過了 ?? https://mrajw.xetslk.com/s/hVlyD

歡迎關注作者的微信公眾號：「超人的電話亭」