編輯導語：建立合適的UI設計規(guī)范，對提升用戶體驗有很大幫助。這篇文章講述了設計規(guī)范的定義和來由，并說明了在文字、色彩、陰影、圓角、布局、柵格、圖標、文案和組件等方面的詳細設計規(guī)范，推薦對UI設計感興趣的同學閱讀。

一、設計規(guī)范綜述

1.1 定義

作為一個B端產(chǎn)品，為了應對公司快速迭代開拓市場和一部分購買者的定制化需求，與此同時還要保障產(chǎn)品間的用戶體驗一致性，近年來設計規(guī)范這一解決方案不斷升溫，如Salesforce，antdesign等紛紛推出了自己的設計規(guī)范。

那么到底什么是設計規(guī)范呢？和設計語言、設計原則、組件庫等有什么關(guān)系呢？

我認為的設計規(guī)范是以下的定義：設計規(guī)范由設計原則、設計語言和組件庫構(gòu)成，在設計原則的指導下使用設計語言和組件庫創(chuàng)建體驗一致的用戶界面。

設計原則：即整個設計規(guī)范所要遵循的全局規(guī)則，為設計提供方向指導。以下給出幾個例子：

設計語言：包括色彩，文字、圖標等。

組件庫：分為基礎組件（按鈕，下拉列表等）及業(yè)務組件（商品模塊）。

在做設計語言和組件庫時，有一個基本原則是，少即是多(less is more)，用盡可能少的樣式來實現(xiàn)設計目標，例如按鈕提供三種尺寸即可，在適應不同場景需求的同時保證體驗的一致性；另一方面，保持克制的設計規(guī)范可以進一步減少設計師的決策時間，提高設計效率。

1.2 理論基礎-原子設計

1.2.1 什么是原子設計

原子設計是構(gòu)建設計規(guī)范的核心指導理論。2013年，Brad從化學中得到了靈感，創(chuàng)建了原子設計理論。在化學中，所有的物體都是由原子構(gòu)成，原子構(gòu)成分子，進而構(gòu)成宇宙萬物。對應到界面中，界面也是如此，所有的元素都是由文字、顏色等最基本的元素構(gòu)成的。這些基本元素構(gòu)成組件，組件構(gòu)成頁面。

原子設計概念的提出使得設計規(guī)范演變成為了一種更為高效、科學的設計規(guī)范，極大的改善了設計師與前端工程師的工作體驗。

1.2.2 原子設計系統(tǒng)的五個層次

原子設計包含五個同時工作的階段，以更慎重和更具層次的方式創(chuàng)建界面設計規(guī)范。

1. 原子：原子是構(gòu)成界面的最小元素，例如顏色、文本、圖標、線條。它們在在界面這個維度上不能再被細分。例如圖標，本身是可以繼續(xù)細分的，但是對于界面而言，圖標細分得到的元素是沒有任何意義的。
2. ?分子：原子按照一定的規(guī)律組合就構(gòu)成了分子，它們擁有獨特的功能，例如下拉列表，步進器等。
3. ?組織：在界面中組織體現(xiàn)為由分子原子組成的模塊，例如數(shù)據(jù)概覽的卡片。
4. ?模板：在界面中，模板的體現(xiàn)是原型圖，是頁面的基本形態(tài)，可以讓我們快速試錯，搭建出一個功能良好的整體。
5. ?頁面：在模板的基礎上將占位符更換為真實內(nèi)容，并進行視覺優(yōu)化即為頁面。

1.3 為什么需要設計規(guī)范

1.3.1 軟件危機

在講述設計規(guī)范之前，我想先講述一個互聯(lián)網(wǎng)史上的真實事件——軟件危機。

19世紀80年代，軟件的復雜度進一步提升，大規(guī)模軟件甚至會由由數(shù)百萬行代碼組成，有數(shù)以百計的程序員參與其中，抽象語言解放了程序員的生產(chǎn)力和想象力，人們可以像寫文學小說一樣隨意發(fā)揮地去寫代碼。

擺在面前的問題是如何高效且可靠地維護與迭代如此龐大的軟件。之后C++、Java等我們熟知的面向?qū)ο蟮木幊陶Z言誕生了。

面向?qū)ο筮@種模式有一個很重要的特征是封裝。這就好比當你在寫王者榮耀的代碼時，小兵是出現(xiàn)頻率較高的模塊，你可以提前把王者榮耀里的一個小兵封裝成一個代碼塊，當你需要用到它時，不必重新一行一行寫，只需要把它整體調(diào)用即可。

縱觀軟件發(fā)展史，20世紀60年代的第一次軟件危機創(chuàng)造了“模塊”概念；20世紀80年代第二次軟件危機引出了“面向?qū)ο缶幊獭?，?chuàng)造了“對象”概念。

模塊與對象本質(zhì)上都是對軟件進行拆分與封裝，只是對象拆分的粒度更大，維度更高。這點與原子設計的原理不謀而合，從色彩文字等基礎元素，到按鈕、選擇器等基礎組件、再到典型模塊，也是對大型軟件的設計元素不同粒度的拆分與封裝。

1.3.2 設計規(guī)范的優(yōu)勢

設計層面：解決用戶體驗一致性，減少設計成本，提高設計效率，使得設計師可以快速承接新需求。沉淀設計資產(chǎn)，使得設計更加持續(xù)地輸出價值，減少一次性設計，同時使設計師從樣式中解放出來，站在更高的層面上來思考業(yè)務與體驗。

開發(fā)層面：與設計規(guī)范同步形成研發(fā)資產(chǎn)，避免重復造輪子，保證代碼質(zhì)量，降低維護和拓展的成本。

測試層面：避免重復的無意義走查。之前遇到過一個深色模式的需求，盡管只換了顏色，但是測試仍然把所有組件都測試了一遍，加上重復的設計、開發(fā)量，導致原本一個很簡單的需求，居然花費了12人天的工作量。

產(chǎn)品層面：提高產(chǎn)品迭代與優(yōu)化效率，降低試錯成本。

協(xié)作層面：降低不同設計師之間以及設計師與開發(fā)工程師之間的溝通成本。

1.4 為什么要自己做設計規(guī)范

這個時候可以會有小伙伴問，目前市面上有這么多的第三方設計規(guī)范，例如antdesign，element，有必要自己重復造輪子做一遍嗎？答案是非常有必要。原因如下：

第一，B端自身的業(yè)務性決定了市場上沒有萬能的設計規(guī)范，那些設計規(guī)范的組件并不能100%滿足我們產(chǎn)品的需求。另外一方面使用封裝好的第三方設計規(guī)范，在此基礎上進行修改，效率很低，適配的復雜度和重新開發(fā)相差無幾。

第二，大家都在使用第三方設計規(guī)范時，產(chǎn)品的同質(zhì)化便不可避免。為了避免這種情況發(fā)生，我們必須要從設計語言開始，設計自己的規(guī)范。

那些大廠的成熟的組件庫該如何用呢？我認為應該把它當成一個字典，有不會的地方，可以去參考人家的成熟的解決方案。

1.5 設計規(guī)范的落地

1.5.1 落不了地的原因

1.設計層面：

• 組件擴展性弱：有的設計師做出來的組件雖然看著很好，但是實際上使用時，適配效率很低，用組件去擴展和重新做的效率差不多。
• 脫離業(yè)務：大部分時候設計師手中都有任務，于是這個任務就落在了實習生的肩上，但是實習生不了解業(yè)務，做出來的是空中樓閣，拋開業(yè)務談設計規(guī)范的都是耍流氓。
• 缺乏開發(fā)思維：設計師不了解開發(fā)的實現(xiàn)方式，可能會做出來開發(fā)較難實現(xiàn)的組件。

2.開發(fā)層面

缺少開發(fā)資源：設計規(guī)范的作用是巨大而緩慢的，不能即時產(chǎn)出很大的價值。

另外一方面，設計規(guī)范的落地會增加開發(fā)工程師很多的工作量，且無法量化收益。這也導致很多時候無法爭取到足夠的開發(fā)資源來做這件事，導致達不到預期的效果。

1.5.2 如何落地

說完了落不了地的原因，那么如何落地呢？我認為要從以下四個方面來推進：

1. 寫一份設計規(guī)范的價值的提案給領導，爭取到足夠的開發(fā)資源。
2. 借鑒敏捷開發(fā)的思想，小步迭代快速推進，將設計規(guī)范的覆蓋放在每次迭代過程中。
3. 把設計規(guī)范的開發(fā)交給熟悉業(yè)務的設計師來做，通過業(yè)務提煉復用率高的典型元素，優(yōu)先開發(fā)，最大化投入產(chǎn)出比。
4. 設計師在做設計規(guī)范時，要不斷與開發(fā)工程師溝通，保證設計規(guī)范的還原度。

二、文字規(guī)范

B端UI界面的視覺設計是一種偏向于排版的設計類型，而其中對于文字的使用更是重中之重。

文字包括字體，字重，字號，行高、顏色五個屬性。一般情況下，字體采用系統(tǒng)自帶的字體（例如蘋方、微軟雅黑、思源黑體），另外對于B端來說，一般都會有較為重要的數(shù)據(jù)，這時可以采用特殊字體給與一定的強調(diào)，最常用的便是DINpro。

還有一點要注意，我們使用的字體一般是基于用戶有什么字體，而由于win和Mac默認字體不同，所以要提前預留好字體風格類似的多種字體。并且可以設置多個字體，通過逗號隔開，如果第一個字體用戶沒有，那么會自動替換成下一個字體。

字號上，精簡為主，可以用字重和顏色來表現(xiàn)層級，就不要用字號來體現(xiàn)。淘寶在2019年的改版中便升級了這一點。將原來的11個字體層級縮減至了7個。

行高上，我們目前采用的方案是行高是字體行高為150%字號，取4的倍數(shù)。

但是目前會遇到額外間距的問題。

前段時間谷歌發(fā)布了新的CSS更新“l(fā)eading trim”，可能會是之后的行高解決方案。感興趣的小伙伴可以點擊鏈接了解一下（https://blog.csdn.net/weixin_39781930/article/details/111576051）

字重上，以開發(fā)的視角來看的話，包括從100-900的九個字重。一般我們只采用regular、medium、semibold三個字重。

三、色彩規(guī)范

3.1 基本介紹

3.1.1 色彩的作用

B端產(chǎn)品中，顏色不僅僅用來傳達品牌調(diào)性，更多的是用來傳達以下信息：

1. 反饋信息 通過不同的顏色給予信息反饋，例如紅色代表錯誤信息，綠色代表成功信息。
2. 突出層級 通過色彩可以對內(nèi)容信息進行分層級展示，提高用戶讀取信息的效率。
3. 表明狀態(tài) 通過顏色來區(qū)分某個事物處于何種狀態(tài)。

3.1.2 組成

在真實的設計場景中，對色彩的復雜度要求是非常高的。色彩規(guī)范應該基本覆蓋一套產(chǎn)品對用色的所有場景。

一套完整的色彩規(guī)范，包括品牌主色、語義色、中性色。

1. 品牌主色：通常，一套產(chǎn)品只有一個品牌主色，是界面中出現(xiàn)最多的顏色，在需要用色強調(diào)而且沒有其他要求時，一般都會選擇主色，例如tab的選中態(tài)，圖表的顏色等。
2. 語義色：即功能色，借助人們的對色彩的心理模型，幫助人高效獲得信息。例如綠色代表通行、成功，紅色代表禁止、錯誤，橙色代表警告、
3. 中性色：除文字外，中性色還被大量運用在分割線、邊框、背景等場景中。

3.1.3 色彩系統(tǒng)的原則

• 理性的：我們在選色時，盡可能避免個人的設計風格，減少配色的主觀性，理性有邏輯地選色。
• 可擴展的：使用這種選色方法可以擴展生成更多的顏色，以適應不同的變化。
• 和諧的：色彩規(guī)范中的顏色互相搭配使用時，應該是和諧的。

3.2 如何制作色彩規(guī)范

在開始制作色彩規(guī)范之前，先介紹一下HCL色彩空間。

HCL (Hue-Chroma-Luminance) 與 RGB、HSB一樣同屬色彩空間的一種，因為最早由國際照明協(xié)會 CIE 提出，又被稱作 CIELch。

目前大家常用的色彩數(shù)值可視化的色彩空間是HSB，設計師可以通過H(色相)，S（飽和度），B（明度）三個數(shù)值來量化色彩，實現(xiàn)理性配色。

但是傳統(tǒng)的HSB色彩空間的缺點是，明度數(shù)值是基于計算機元件而言，而非人眼。另外，計算機的明度與人眼感覺到的明度并非線性匹配，這就導致在不同顏色中，即使色相相同，我們感覺到的明度（即感官明度）也是不一致的。

而HCL就避免了這個缺點，在HCL中，只要兩種顏色的L相同，感官明度就是相同的，HCL可以完美的量化我們對色彩明度的感覺。但是目前主流的設計軟件基本上不支持HCL色彩空間配色，因此要借助插件或者網(wǎng)站。這里給大家推薦Figma的一個插件：HCL color。不用figma的小伙伴可以去這個網(wǎng)站http://tristen.ca/hcl-picker/#/hcl/12/1.03/000000/F69877。

3.3 落地

落地分為兩個方面：設計方面和開發(fā)方面。

3.3.1 設計方面

將顏色生成樣式庫，并規(guī)定設計同事不可以手動調(diào)色，只可以從設計規(guī)范中取色。

3.3.2 開發(fā)方面

在前期與開發(fā)同事溝通，將每個顏色定義為一個變量，在代碼中不使用具體的色值，而是例如red-100的的色值，這樣做的好處是：

• 在需要替換某個色值時，只需要在底層對變量改變即可實現(xiàn)全局的更改，提高了很多效率。
• 開發(fā)同事完全從庫中取色，保證了色彩的準確性，提高了設計稿的落地率。

四、陰影規(guī)范

現(xiàn)實生活中的物體不可完全重疊，當光打過來時，每個物體都會產(chǎn)生陰影。這是我們理解物體的層疊關(guān)系的重要依據(jù)。依據(jù)現(xiàn)實中的這一行為，我們把陰影規(guī)范挪到屏幕世界中，使得用戶更容易理解我們的系統(tǒng)。陰影規(guī)范提供給了我們另一個表達元素區(qū)別的維度，不同的陰影清楚地傳達了不同的交互狀態(tài)。

某一對象在屏幕中的高度視覺表現(xiàn)為其陰影，陰影越大，高度越高。但是生活中真實的陰影錯綜復雜，我們不可能也沒必要完全復刻，我們只需要能夠表達出元素層級即可。與按鈕相同，我們將陰影分為三個等級，分別為，S、M、L。

S：突出組件懸停效果，表示可供性。對于這個數(shù)據(jù)概覽卡片來說，鼠標移入移出時陰影的顯示與隱藏提供了一個交互可能性，表明它是可以點擊交互的。

M：給下拉列表，氣泡提示等使用的陰影。因為這些元素是與由底層元素展開而來的，但又不屬于底層元素，所以將中等層級的陰影給了這些元素。

L：模態(tài)組件陰影。例如彈窗。當彈窗出現(xiàn)時，彈窗位于絕對的最頂層，所以陰影最大。

五、圓角規(guī)范

圓角是用一段與圖形兩邊相切的圓弧替換原來的直角，圓角的大小用圓弧的半徑R表示。在界面中運用圓角主要有以下兩個好處：

1. 親和感。我們傾向于“避免尖銳的邊緣，因為在自然界中它們可能會構(gòu)成威脅”。運用圓角矩形能給我們帶來親和感，圓角越大，親和感越高。
2. 辨識度。相對于沒有圓角，人可以更快的辨識圓角矩形。

六、布局規(guī)范

對于組件庫來說，我們可以把組件比喻為積木，而布局則是把積木搭建為各種不同成品的圖紙。

6.1 盒子模型

6.1.1 設計師為什么需要了解盒子模型

在介紹布局之前，先介紹一下盒子模型。雖然盒子模型是前端開發(fā)中的一個概念，但是了解一些前端知識對我們設計的落地以及與前端的溝通上大有裨益。我們可以帶著盒子模型的思維去做設計，這樣開發(fā)人員拿到設計稿后，更容易了解我們的布局邏輯，降低溝通成本，提高落地率。

6.1.2盒子模型是什么

盒子（box）模型是開發(fā)中經(jīng)常用到的CSS模型，我們?nèi)粘Ｋ姷降慕缑娑际怯梢粋€一個的盒子拼接而成的。打開安卓手機的開發(fā)者選項中的顯示布局邊界，便可以看到手機上的各個盒子的排列。

在電腦瀏覽器打開檢查視圖，也可以看到每個元素對應的盒子。我們可以理解為開發(fā)同事都是先畫一個一個的盒子，然后在盒子里填充，也與我們提供的矩形切圖相對應。并且盒子間存在嵌套情況，幾個小盒子可以作為一個大盒子的內(nèi)容。

以我們的生活來舉例的話，例如我們?nèi)ベI月餅，大盒子里裝了四個小盒子，每個小盒子里是一個月餅。

6.1.3 設計師如何利用盒子模型

了解了盒子模型后，我們在設計時，該如何利用呢？做設計時，對任何元素都盡量用一個矩形給他封裝，這樣子前端在定位元素和確定間距時可完美實現(xiàn)設計稿的內(nèi)容。

而前段時間figma更新的auto layout 功能與盒子模型基本完美對應。我們在設計時可以使用這個讓開發(fā)更容易get我們的設計稿，減少溝通時間。

以標簽頁為例，我們設計時，不只是畫個橫線與文字就行了，這樣開發(fā)無法理解到設計稿，后面還會繼續(xù)找我們詢問觸控熱區(qū)。

6.2 導航

導航將網(wǎng)站的信息架構(gòu)分組歸類展示給用戶，方便用戶到達想去的界面。

6.2.1 頂部導航

優(yōu)點：符合人眼瀏覽網(wǎng)頁的視覺動線，給用戶提供更沉浸式的瀏覽體驗。

缺點：擴展性差，由于頂部空間有限，無法承載太多的菜單項。另外由于水平菜單的特性決定了無法承載太多的層級，當擴展至三個或四個層級時，頂部導航的易用性極差。

通用性較差：同樣受空間的限制，菜單項字數(shù)被嚴格限制。

適用產(chǎn)品：整體結(jié)構(gòu)無論是廣度還是深度均較簡單且之后不會擴展很多功能的產(chǎn)品。

6.2.2 側(cè)邊導航

優(yōu)點:側(cè)邊導航是以樹形控件的方式來表示的，相對于頂部導航，無論是數(shù)量和層級，擴展性均較好。

方便尋找：由于縱向瀏覽無需把每個單個菜單完整瀏覽，相對水平菜單，定位更快。

缺點：由于用戶在瀏覽內(nèi)容的過程中，不可避免會被左側(cè)常駐的導航欄打斷視線流,閱讀沉浸感較低。

適用產(chǎn)品：目前結(jié)構(gòu)不是非常復雜但之后會迭代增加很多功能的產(chǎn)品。

6.2.3 混合導航

優(yōu)點：擴展性好:由于增加了-個頂部的一級菜單，擴展性是三者中最好的。

缺點：

• 交互路徑長：除了和側(cè)邊導航-樣存在沉浸感低的問題，由于每個菜單項都需要點擊頂部和側(cè)邊兩次,操作效率低。
• 占用空間大：在B端產(chǎn)品中，界面空間寸土寸金，混合導航常駐的兩個導航占用了較多的空間。

適用產(chǎn)品：目前結(jié)構(gòu)已經(jīng)非常復雜的龐大產(chǎn)品。

6.3 柵格

6.3.1 柵格介紹

1. 來源

柵格系統(tǒng)原本來源于平面設計，早在20世紀初，德國、荷蘭、瑞士等國的平面設計師們發(fā)現(xiàn)通過維持視覺秩序,從而使版面能更加清晰有效地傳遞信息，二戰(zhàn)后這種理念在瑞士得到了良好的發(fā)展。有興趣的小伙伴可以去看下由瑞士設計師大師Josef Miller—Brockmann (約瑟夫.米勒-布羅克曼)所著的《平面設計中的網(wǎng)格系統(tǒng)》一書。

2. 優(yōu)勢

• 高效：將布局標準化，可減少設計決策的時間，讓設計師專注于內(nèi)容.上的設計呈現(xiàn)。
• 響應式布局:由于web端尺寸多樣，使用柵格系統(tǒng)可以做到自適應布局(在面對多個分辨率的系統(tǒng)時，無需設計多套方案，僅需設計一套來適配即可)
• 美觀:提高內(nèi)容的規(guī)律性，讓設計更有秩序和節(jié)奏感，賦予界面數(shù)學邏輯美感，提高用戶的閱讀和瀏覽效率,為用戶提供更好的體驗。
• 協(xié)作:由于柵格系統(tǒng)的可復用性，多個設計師合作時，可以共用-套柵格系統(tǒng)，提升整體布局的統(tǒng)-性。同時也避免了設計與開發(fā)的反復確認的情況，使得部門內(nèi)部與部門間溝通更順暢。

6.3.3 組成與原理

柵格系統(tǒng)包括頁邊距，列和水槽。

頁邊距：指內(nèi)容區(qū)與頁面的邊距。

列和槽：列是承載內(nèi)容的容器，水槽是兩個列(即內(nèi)容)之間的間距。在前端視角中列寬是根據(jù)百分比而不是固定值定義的。通常說的柵格數(shù)就指的列數(shù)。水槽越寬，頁面留白越多，呼吸感越強。

自適應原理：在網(wǎng)頁應用的設計中較為常見的一種響應方式，當屏幕寬度改變時，頁邊距和水槽寬不變，列寬自適應。

計算公式：以24柵格(即有24列)為例，頁面自適應部分總寬度: 24*列寬 +23*水槽寬+2*頁邊距。

6.4 間距

在設計間距系統(tǒng)中，我們一般會基于8點網(wǎng)格系統(tǒng)和親密性原理規(guī)定幾個典型值。例如4,8,(12,)16,24,32……。遇到間距時在這些值中選取合適的即可。另外一般我們會使得大模塊的縱向間距與柵格系統(tǒng)中的水槽大小相同。

七、圖標規(guī)范

7.1 圖標重要性

當一個界面完全由文本構(gòu)成時，用戶被迫閱讀每個文字來找到自己想要的信息。而引入圖標后，降低了用戶的認知負荷，幫助用戶更快導航，提高用戶使用產(chǎn)品的效率。另外一方面、設計精致風格統(tǒng)一的圖標提高界面的美觀度的同時，也為用戶帶來了連貫一致的使用體驗。

7.2圖標規(guī)范的內(nèi)容

尺寸：由于不同形狀(三角形，圓形、長方形、正方形)具有不同的視覺大小，僅僅規(guī)范圖標的大小是不夠的，通常我們會設計一套圖標keyline，來保證不同的圖標具有相同的視覺大小。

填充/描邊：一般的系統(tǒng)功能圖標采用描邊。工作臺的常用功能入口一般采用帶背景的填充圖標，原因是在空間有限的的區(qū)域，太多形狀會顯得雜亂，另一方面面型圖標的視覺面積較大，短時間內(nèi)更加容易識別。

除此之外，還包括圓角、端點、線寬、傾斜角度等其他規(guī)范。

7.3 落地

在產(chǎn)品中，圖標通常有多種尺寸，我們一般會為每個尺寸的圖標各創(chuàng)建一個frame來進行管理，其中，我們會把同一個圖標的填充版和描邊版創(chuàng)建為一個組件集，這樣在調(diào)用時可以直接控制圖標的填充和描邊，在做有選中態(tài)和非選中態(tài)的組件時尤為方便。

另外，在命名上，我們會用圖標的內(nèi)容為它命名而非表意，例如一個燈泡的圖標，我們會直接命名為燈泡而非創(chuàng)意。

7.4 圖標庫推薦

在這里給大家推薦幾個我常用的圖標庫，在來不及畫圖標時，可以先用這些迅速建立起一個圖標組件庫。之后有時間了再慢慢更新為自己的圖標。

Iconfont：國內(nèi)功能很強大且圖標內(nèi)容很豐富的矢量圖標庫,提供矢量圖標下載、在線存儲、格式轉(zhuǎn)換等功能，特點是圖標非常豐富。

Remixicon：Remix Icon 是一套面向設計師和開發(fā)者的開源圖標庫。質(zhì)量很高，風格中性大氣，因此適用于很多風格的項目，分為“線性圖標”和“面型圖標”兩種風格。相比于 Material Icons，RemixIcon 看起來風格會更統(tǒng)一、簡約且精致硬朗一些。

IconPark：這是字節(jié)CUX設計團隊出品和維護的開源圖標庫，如今已對外開放使用，特點是圖標大小，線寬等多個屬性均可設置，自由度較高。

八、文案規(guī)范

8.1 文案是什么

文案是我們的產(chǎn)品與用戶交流的最基礎最簡單的溝通工具。文案存在于產(chǎn)品的各個地方，例如按鈕文案告訴用戶按鈕的作用，輕提示文案告訴用戶反饋結(jié)果。對于新用戶來說，文案肯定比圖標易理解，另外一方面，文案更不容易產(chǎn)生歧義，例如一個圖標可以會有多種意思，而文案相對更精確。

8.2 文案規(guī)范的重要性

伴隨著B端的業(yè)務功能的快速迭代，由于設計師、產(chǎn)品經(jīng)理的水平、文案風格、對文案的重視程度不同，導致系統(tǒng)內(nèi)部文案積累了很多問題。最明顯的問題是同一場景文案不一致，會給用戶帶來體驗的割裂感，增加用戶使用產(chǎn)品的認知成本。

而通過構(gòu)建文案規(guī)范，可以規(guī)范文案的使用和編寫，提高文案的質(zhì)量，給用戶帶來連貫一致的使用體驗。

8.3 文案撰寫的原則

這里給大家介紹一些產(chǎn)品文案通用的一些原則，包括，準確，簡潔、用戶視角。

8.3.1 準確原則

8.3.2 簡潔原則

8.3.3 用戶視角原則

8.4 落地

一般情況下，文案沒有專門的人來負責，國外可能會有“UX Writer” 這樣的專門職位來負責，在國內(nèi)一般會交給體驗設計師來負責。

文案規(guī)范的落地分為四步：

1. 遍歷頁面，列出所有的文案
2. 梳理相同或相似場景的文案，將文案歸類整理
3. 根據(jù)實際情況制定產(chǎn)品文案的原則，并撰寫一部分典型場景的文案。
4. 輸出文檔，包含文案撰寫原則及典型場景的文案。

九、組件庫

9.1 組件庫是什么

組件庫相當于樂高的一個個積木，通過組件的拼搭可以迅速搭建出一個頁面。通常我們將組件庫分為基礎組件和業(yè)務組件兩大類，前者是系統(tǒng)通用組件（圖標/按鈕/輸入框等），后者是由業(yè)務決定的相對更復雜的組件模塊。

而對于B端產(chǎn)品和C端產(chǎn)品，二者的組件庫又有些許差異。

C端的組件庫更追求極致的交互和視覺體驗，因此需要考慮視覺、性能、實現(xiàn)、兼容性，另一方面，C端會根據(jù)活動、節(jié)日切換不同的主題，也要考慮組件視覺上的個性化擴展。

對于B端而言，組件庫更看重可復用性和穩(wěn)定性，保證可以支持業(yè)務快速迭代。另外B端會涉及到各種各樣的數(shù)據(jù)錄入與展示，因此相對更高的要求是大而全，覆蓋面廣。

9.2 如何做組件庫

9.2.1 確定組件庫的內(nèi)容

新產(chǎn)品：對于新產(chǎn)品來說，業(yè)務體量較小，較難抽取共性，組件也不全面，因此較好的方式是參考大廠的組件庫確定要做哪些組件，它們的相對成熟，參考價值較高。

成熟產(chǎn)品：對于已經(jīng)成熟的產(chǎn)品來說，我們可以直接遍歷頁面，窮舉出所有用到的組件，除基礎組件外，提煉出復用率高的業(yè)務組件進行結(jié)構(gòu)化和組件制定。

9.2.2 搭建每個組件

以警告提示（Alert）為例，演示單個組件的建立方法。

1. 定義組件

根據(jù)業(yè)務定義警告提示的使用場景，警告提示用于重要信息的提醒，采用非浮層的方式展現(xiàn)在頁面頂部，被動出現(xiàn)，且不會自動關(guān)閉。

2. 拆分組件

這一步是將組件拆分為元件。對警告組件進行拆分后得到如下：

3. 重組輸出

根據(jù)業(yè)務場景，我們把各個元件重組為組件，建成組件集，并定義各種組件的使用規(guī)則。

9.2.3 輸出文檔并替換到產(chǎn)品中

在組件庫建立完成后，只有在日常設計中真正使用組件庫，提高組件庫在設計稿中的覆蓋率，才能真正達到組件庫的效果。這就要求我們要輸出一份完整的組件庫描述文檔，在團隊中進行推廣，加強設計團隊的公用意識。另外，我們還要與開發(fā)工程師配合逐步完成現(xiàn)有頁面的組件替換。

9.2.4 定期維護組件庫

組件庫的內(nèi)容并非一成不變，而是在不斷地更新，以保證所包含的組件都是最新和有用的。與其他數(shù)據(jù)一樣，組件也會有增刪改。

增：當有新的組件產(chǎn)生時，我們需要通過判斷它的拓展性和復用率，以確定是否將它入庫。

刪：隨著產(chǎn)品的不斷升級迭代，如果某個組件已經(jīng)不用或復用率很低時，我們可以考慮是否要將它刪除。

改：不可避免的，組件會隨著業(yè)務而進行升級，我們可以通過數(shù)據(jù)埋點和A/B test的方式來確定某個組件是否要進行改動。

十、大廠設計規(guī)范推薦

10.1 PC端設計規(guī)范

1. Ant Design

Ant Design是由螞蟻集團體驗技術(shù)部經(jīng)過大量的項目實踐與總結(jié)，逐步打磨出來的，基于「自然」、「確定性」、「意義感」、「生長性」四大設計價值觀，通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設計者專注于更好的用戶體驗，是非常完整的一套設計規(guī)范。

2. Zent

Zent是有贊 PC 端 Web UI 規(guī)范的 React 實現(xiàn)版本，提供了一整套基礎的 UI 組件以及常用的業(yè)務組件。通過 Zent，可以快速搭建出風格統(tǒng)一的頁面，提升開發(fā)效率。目前有 50+組件，這些組件都已經(jīng)在有贊的各類 PC 業(yè)務中廣泛使用。

3. Element

Element是由餓了么公司前端團隊開源一套為開發(fā)者、設計師和產(chǎn)品經(jīng)理準備的基于 Vue 2.0的組件庫，提供了配套設計資源。

4. AT-UI

AT-UI 是一款基于 Vue 2.x 的前端 UI 組件庫，主要用于快速開發(fā) PC 網(wǎng)站產(chǎn)品，在眾多的的組件庫中，AT-UI 屬于視覺風格比較清新的一款。

10.2 移動端設計規(guī)范

1. Vant

Vant 是有贊前端團隊開源的移動端組件庫，于 2017 年開源，已持續(xù)維護 4 年時間。Vant 對內(nèi)承載了有贊所有核心業(yè)務，對外服務十多萬開發(fā)者，是業(yè)界主流的移動端組件庫之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。

2. NutUI-JDL

NutUI-JDL 是一套基于京東物流視覺規(guī)范的移動端組件庫，包含了36+高質(zhì)量組件和詳盡的文檔和實例。

十一、結(jié)語

本次的分享到這里就結(jié)束了，希望可以對大家有幫助。由于文章字數(shù)較多，筆者幾經(jīng)修改，仍不免有疏漏錯誤之處，如發(fā)現(xiàn)錯誤，請讀者于評論區(qū)或私信指出，不勝感激。

作者：JIN石為KAI；公眾號：MICU設計

原文鏈接：https://mp.weixin.qq.com/s/DfjWSmsLBS15StV8p7feHw

本文由 @MICU設計 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

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