UI系列干貨 - 詳解UI設(shè)計規(guī)范，入門必讀

時間：2023-09-10 23:54:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-10 23:54:02 來源：網(wǎng)站運(yùn)營

UI系列干貨 - 詳解UI設(shè)計規(guī)范，入門必讀：

作者：JIN石為KAI

來源：站酷

01、設(shè)計規(guī)范綜述

1.1 定義

作為一個B端產(chǎn)品，為了應(yīng)對公司快速迭代開拓市場和一部分購買者的定制化需求，與此同時還要保障產(chǎn)品間的用戶體驗一致性，近年來設(shè)計規(guī)范這一解決方案不斷升溫，如Salesforce，antdesign、等紛紛推出了自己的設(shè)計規(guī)范。那么到底什么是設(shè)計規(guī)范呢？和設(shè)計語言、設(shè)計原則、組件庫等有什么關(guān)系呢？




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




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




設(shè)計語言：包括色彩，文字、圖標(biāo)等。




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




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

1.2 理論基礎(chǔ)-原子設(shè)計

1.2.1 什么是原子設(shè)計

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




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

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

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




原子：原子是構(gòu)成界面的最小元素，例如顏色、文本、圖標(biāo)、線條。它們在在界面這個維度上不能再被細(xì)分。例如圖標(biāo)，本身是可以繼續(xù)細(xì)分的，但是對于界面而言，圖標(biāo)細(xì)分得到的元素是沒有任何意義的。




?分子：原子按照一定的規(guī)律組合就構(gòu)成了分子，它們擁有獨(dú)特的功能，例如下拉列表，步進(jìn)器等。




?組織：在界面中組織體現(xiàn)為由分子原子組成的模塊，例如數(shù)據(jù)概覽的卡片。?模板:在界面中，模板的體現(xiàn)是原型圖，是頁面的基本形態(tài)，可以讓我們快速試錯，搭建出一個功能良好的整體。




?頁面:在模板的基礎(chǔ)上將占位符更換為真實內(nèi)容，并進(jìn)行視覺優(yōu)化即為頁面。

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

1.3.1 軟件危機(jī)

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

19世紀(jì)80年代，軟件的復(fù)雜度進(jìn)一步提升，大規(guī)模軟件甚至?xí)捎蓴?shù)百萬行代碼組成，有數(shù)以百計的程序員參與其中，抽象語言解放了程序員的生產(chǎn)力和想象力，人們可以像寫文學(xué)小說一樣隨意發(fā)揮地去寫代碼。擺在面前的問題是如何高效且可靠地維護(hù)與迭代如此龐大的軟件。之后C++、Java等我們熟知的面向?qū)ο蟮木幊陶Z言誕生了。




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




縱觀軟件發(fā)展史，20世紀(jì)60年代的第一次軟件危機(jī)創(chuàng)造了“模塊”概念；20世紀(jì)80年代第二次軟件危機(jī)引出了“面向?qū)ο缶幊獭?，?chuàng)造了“對象”概念；模塊與對象本質(zhì)上都是對軟件進(jìn)行拆分與封裝，只是對象拆分的粒度更大，維度更高。這點與原子設(shè)計的原理不謀而合，從色彩文字等基礎(chǔ)元素，到按鈕、選擇器等基礎(chǔ)組件、再到典型模塊，也是對大型軟件的設(shè)計元素不同粒度的拆分與封裝。

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

設(shè)計層面：解決用戶體驗一致性，減少設(shè)計成本，提高設(shè)計效率，使得設(shè)計師可以快速承接新需求。沉淀設(shè)計資產(chǎn)，使得設(shè)計更加持續(xù)地輸出價值，減少一次性設(shè)計，同時使設(shè)計師從樣式中解放出來，站在更高的層面上來思考業(yè)務(wù)與體驗。開發(fā)層面：與設(shè)計規(guī)范同步形成研發(fā)資產(chǎn)，避免重復(fù)造輪子，保證代碼質(zhì)量，降低維護(hù)和拓展的成本。




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




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




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

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

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

• B端自身的業(yè)務(wù)性決定了市場上沒有萬能的設(shè)計規(guī)范，那些設(shè)計規(guī)范的組件并不能100%滿足我們產(chǎn)品的需求。另外一方面使用封裝好的第三方設(shè)計規(guī)范，在此基礎(chǔ)上進(jìn)行修改，效率很低，適配的復(fù)雜度和重新開發(fā)相差無幾。
• 大家都在使用第三方設(shè)計規(guī)范時，產(chǎn)品的同質(zhì)化便不可避免。為了避免這種情況發(fā)生，我們必須要從設(shè)計語言開始，設(shè)計自己的規(guī)范。

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

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

1.5.1 落不了地的原因

1. 設(shè)計層面：a. 組件擴(kuò)展性弱：有的設(shè)計師做出來的組件雖然看著很好，但是實際上使用時，適配效率很低，用組件去擴(kuò)展和重新做的效率差不多。




b. 脫離業(yè)務(wù)：大部分時候設(shè)計師手中都有任務(wù)，于是這個任務(wù)就落在了實習(xí)生的肩上，但是實習(xí)生不了解業(yè)務(wù)，做出來的是空中樓閣，拋開業(yè)務(wù)談設(shè)計規(guī)范的都是耍流氓。




c. 缺乏開發(fā)思維：設(shè)計師不了解開發(fā)的實現(xiàn)方式，可能會做出來開發(fā)較難實現(xiàn)的組件。




2. 開發(fā)層面缺少開發(fā)資源：設(shè)計規(guī)范的作用是巨大而緩慢的，不能即時產(chǎn)出很大的價值，另外一方面，設(shè)計規(guī)范的落地會增加開發(fā)工程師很多的工作量，且無法量化收益。這也導(dǎo)致很多時候無法爭取到足夠的開發(fā)資源來做這件事，導(dǎo)致達(dá)不到預(yù)期的效果。

1.5.2 如何落地

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

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

02、文字規(guī)范




B端UI界面的視覺設(shè)計是一種偏向與排版的設(shè)計類型，而其中對于文字的使用更是重中之重。文字包括字體，字重，字號，行高、顏色五個屬性。一般情況下，字體采用系統(tǒng)自帶的字體（例如蘋方、微軟雅黑、思源黑體），另外對于B端來說，一般都會有較為重要的數(shù)據(jù)，這時可以采用特殊字體給與一定的強(qiáng)調(diào)，最常用的便是DINpro。還有一點要注意，我們使用的字體一般是基于用戶有什么字體，而由于win和Mac默認(rèn)字體不同，所以要提前預(yù)留好字體風(fēng)格類似的多種字體。并且可以設(shè)置多個字體，通過逗號隔開，如果第一個字體用戶沒有，那么會自動替換成下一個字體。




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




行高上，我們目前采用的方案是行高是字體行高為150%字號，取4的倍數(shù)。但是目前會遇到額外間距的問題。




前段時間谷歌發(fā)布了新的CSS更新“”leading trim，可能會是之后的行高解決方案。感興趣的小伙伴可以點擊鏈接了解一下（https://blog.csdn.net/weixin_39781930/article/details/111576051）字重上，以開發(fā)的視角來看的話，包括從100-900的九個字重。一般我們只采用regular、medium、semibold三個字重。




03、色彩規(guī)范

3.1 基本介紹

3.1.1 色彩的作用

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

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

3.1.2 組成

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




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

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

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

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

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

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




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




目前大家常用的色彩數(shù)值可視化的色彩空間是HSB，設(shè)計師可以通過H(色相)，S（飽和度），B（明度）三個數(shù)值來量化色彩，實現(xiàn)理性配色。但是傳統(tǒng)的HSB色彩空間的缺點是，明度數(shù)值是基于計算機(jī)元件而言，而非人眼。另外，計算機(jī)的明度與人眼感覺到的明度并非線性匹配，這就導(dǎo)致在不同顏色中，即使色相相同，我們感覺到的明度（即感官明度）也是不一致的。而HCL就避免了這個缺點，在HCL中，只要兩種顏色的L相同，感官明度就是相同的，HCL可以完美的量化我們對色彩明度的感覺。但是目前主流的設(shè)計軟件基本上不支持HCL色彩空間配色，因此要借助插件或者網(wǎng)站。這里給大家推薦Figma的一個插件：HCL color。不用figma的小伙伴可以去這個網(wǎng)站http://tristen.ca/hcl-picker/#/hcl/12/1.03/000000/F69877。

3.3 落地

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

3.3.1 設(shè)計方面

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

3.3.2 開發(fā)方面

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

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

04、陰影規(guī)范

現(xiàn)實生活中的物體不可完全重疊，當(dāng)光打過來時，每個物體都會產(chǎn)生陰影。這是我們理解物體的層疊關(guān)系的重要依據(jù)。依據(jù)現(xiàn)實中的這一行為，我們把陰影規(guī)范挪到屏幕世界中，使得用戶更容易理解我們的系統(tǒng)。陰影規(guī)范提供給了我們另一個表達(dá)元素區(qū)別的維度，不同的陰影清楚地傳達(dá)了不同的交互狀態(tài)。某一對象在屏幕中的高度視覺表現(xiàn)為其陰影，陰影越大，高度越高。但是生活中真實的陰影錯綜復(fù)雜，我們不可能也沒必要完全復(fù)刻，我們只需要能夠表達(dá)出元素層級即可。與按鈕相同，我們將陰影分為三個等級，分別為，S、M、L。




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

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




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




05、圓角規(guī)范

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




親和感：我們傾向于“避免尖銳的邊緣，因為在自然界中它們可能會構(gòu)成威脅”。運(yùn)用圓角矩形能給我們帶來親和感，圓角越大，親和感越高。




辨識度：相對于沒有圓角，人可以更快的辨識圓角矩形。




06、布局規(guī)范

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

6.1 盒子模型

6.1.1 設(shè)計師為什么需要了解盒子模型

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




6.1.2 盒子模型是什么

盒子（box）模型是開發(fā)中經(jīng)常用到的CSS模型，我們?nèi)粘Ｋ姷降慕缑娑际怯梢粋€一個的盒子拼接而成的。打開安卓手機(jī)的開發(fā)者選項中的顯示布局邊界，便可以看到手機(jī)上的各個盒子的排列；在電腦瀏覽器打開檢查視圖，也可以看到每個元素對應(yīng)的盒子。我們可以理解為開發(fā)同事都是先畫一個一個的盒子，然后在盒子里填充，也與我們提供的矩形切圖相對應(yīng)。并且盒子間存在嵌套情況，幾個小盒子可以作為一個大盒子的內(nèi)容。




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

6.1.3 設(shè)計師如何利用盒子模型

了解了盒子模型后，我們在設(shè)計時，該如何利用呢？




做設(shè)計時，對任何元素都盡量用一個矩形給他封裝，這樣子前端在定位元素和確定間距時可完美實現(xiàn)設(shè)計稿的內(nèi)容。




而前段時間figma更新的auto layout 功能與盒子模型基本完美對應(yīng)。我們在設(shè)計時可以使用這個讓開發(fā)更容易get我們的設(shè)計稿，減少溝通時間。以標(biāo)簽頁為例，我們設(shè)計時，不只是畫個橫線與文字就行了，這樣開發(fā)無法理解到設(shè)計稿，后面還會繼續(xù)找我們詢問觸控?zé)釁^(qū)。

6.2 導(dǎo)航

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

6.2.1 頂部導(dǎo)航

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




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




通用性較差：同樣受空間的限制，菜單項字?jǐn)?shù)被嚴(yán)格限制。

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

6.2.2 側(cè)邊導(dǎo)航

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




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




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




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

6.2.3 混合導(dǎo)航

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




缺點：交互路徑長:除了和側(cè)邊導(dǎo)航-樣存在沉浸感低的問題，由于每個菜單項都需要點擊頂部和側(cè)邊兩次,操作效率低。




占用空間大：在B端產(chǎn)品中，界面空間寸土寸金，混合導(dǎo)航常駐的兩個導(dǎo)航占用了較多的空間。




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

6.3 柵格

6.3.1 柵格介紹

6.3.1.1 來源

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

6.3.1.2 優(yōu)勢

高效：將布局標(biāo)準(zhǔn)化，可減少設(shè)計決策的時間，讓設(shè)計師專注于內(nèi)容.上的設(shè)計呈現(xiàn)。




響應(yīng)式布局：由于web端尺寸多樣，使用柵格系統(tǒng)可以做到自適應(yīng)布局(在面對多個分辨率的系統(tǒng)時，無需設(shè)計多套方案，僅需設(shè)計一套來適配即可)




美觀：提高內(nèi)容的規(guī)律性，讓設(shè)計更有秩序和節(jié)奏感，賦予界面數(shù)學(xué)邏輯美感，提高用戶的閱讀和瀏覽效率,為用戶提供更好的體驗。




協(xié)作：由于柵格系統(tǒng)的可復(fù)用性，多個設(shè)計師合作時，可以共用-套柵格系統(tǒng)，提升整體布局的統(tǒng)-性。同時也避免了設(shè)計與開發(fā)的反復(fù)確認(rèn)的情況，使得部門內(nèi)部與部門間溝通更順暢。

6.3.3 組成與原理

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




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




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




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




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

6.4 間距

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

07、圖標(biāo)規(guī)范

7.1 圖標(biāo)重要性

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

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

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




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




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

7.3 落地

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

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

7.4 圖標(biāo)庫推薦

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




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




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




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

08、文案規(guī)范

8.1 文案是什么

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

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

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




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

8.3 文案撰寫的原則

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

8.3.1 準(zhǔn)確原則

8.3.2 簡潔原則

8.3.3 用戶視角原則

8.4 落地

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




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

09、組件庫

9.1 組件庫是什么

組件庫相當(dāng)于樂高的一個個積木，通過組件的拼搭可以迅速搭建出一個頁面。通常我們將組件庫分為基礎(chǔ)組件和業(yè)務(wù)組件兩大類，前者是系統(tǒng)通用組件（圖標(biāo)/按鈕/輸入框等），后者是由業(yè)務(wù)決定的相對更復(fù)雜的組件模塊。而對于B端產(chǎn)品和C端產(chǎn)品，二者的組件庫又有些許差異。C端的組件庫更追求極致的交互和視覺體驗，因此需要考慮視覺、性能、實現(xiàn)、兼容性，另一方面，C端會根據(jù)活動、節(jié)日切換不同的主題，也要考慮組件視覺上的個性化擴(kuò)展。對于B端而言，組件庫更看重可復(fù)用性和穩(wěn)定性，保證可以支持業(yè)務(wù)快速迭代。另外B端會涉及到各種各樣的數(shù)據(jù)錄入與展示，因此相對更高的要求是大而全，覆蓋面廣。

9.2 如何做組件庫

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

• 新產(chǎn)品對于新產(chǎn)品來說，業(yè)務(wù)體量較小，較難抽取共性，組件也不全面，因此較好的方式是參考大廠的組件庫確定要做哪些組件，它們的相對成熟，參考價值較高。
  
• 成熟產(chǎn)品對于已經(jīng)成熟的產(chǎn)品來說，我們可以直接遍歷頁面，窮舉出所有用到的組件，除基礎(chǔ)組件外，提煉出復(fù)用率高的業(yè)務(wù)組件進(jìn)行結(jié)構(gòu)化和組件制定。

9.2.2 搭建每個組件

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

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




2. 拆分組件這一步是將組件拆分為元件。對警告組件進(jìn)行拆分后得到如下：




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

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

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

9.2.4 定期維護(hù)組件庫

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




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




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




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

10、大廠設(shè)計規(guī)范推薦

10.1 PC端設(shè)計規(guī)范

1. Ant DesignAnt Design是由螞蟻集團(tuán)體驗技術(shù)部經(jīng)過大量的項目實踐與總結(jié)，逐步打磨出來的，基于「自然」、「確定性」、「意義感」、「生長性」四大設(shè)計價值觀，通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計者專注于更好的用戶體驗，是非常完整的一套設(shè)計規(guī)范。
   
2. Zent Zent是有贊 PC 端 Web UI 規(guī)范的 React 實現(xiàn)版本，提供了一整套基礎(chǔ)的 UI 組件以及常用的業(yè)務(wù)組件。通過 Zent，可以快速搭建出風(fēng)格統(tǒng)一的頁面，提升開發(fā)效率。目前有 50+ 組件，這些組件都已經(jīng)在有贊的各類 PC 業(yè)務(wù)中廣泛使用。
   
3. Element Element是由餓了么公司前端團(tuán)隊開源一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的組件庫，提供了配套設(shè)計資源。
   
4. AT-UI AT-UI 是一款基于 Vue 2.x 的前端 UI 組件庫，主要用于快速開發(fā) PC 網(wǎng)站產(chǎn)品，在眾多的的組件庫中，AT-UI 屬于視覺風(fēng)格比較清新的一款。
   

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

1. VantVant 是有贊前端團(tuán)隊開源的移動端組件庫，于 2017 年開源，已持續(xù)維護(hù) 4 年時間。Vant 對內(nèi)承載了有贊所有核心業(yè)務(wù)，對外服務(wù)十多萬開發(fā)者，是業(yè)界主流的移動端組件庫之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。
   
2. NutUI-JDLNutUI-JDL 是一套基于京東物流視覺規(guī)范的移動端組件庫，包含了36+高質(zhì)量組件和詳盡的文檔和實例。

11、結(jié)語

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

在快節(jié)奏的洪流中，保持設(shè)計的初心，做有靈魂的設(shè)計，我們下篇再見~

UI系列干貨

UI系列干貨 - UI到底是什么？要不要入行？


UI系列干貨 - 什么是信息流、Feed流、瀑布流、推薦流？


UI系列干貨 - UI圖標(biāo)設(shè)計入門指南（內(nèi)含icon柵格文件下載）


UI系列干貨 - 切圖&命名


UI系列干貨-如何解決UI設(shè)計中的視覺誤差？