中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：建立合適的UI設(shè)計(jì)規(guī)范，對(duì)提升用戶體驗(yàn)有很大幫助。這篇文章講述了設(shè)計(jì)規(guī)范的定義和來(lái)由，并說(shuō)明了在文字、色彩、陰影、圓角、布局、柵格、圖標(biāo)、文案和組件等方面的詳細(xì)設(shè)計(jì)規(guī)范，推薦對(duì)UI設(shè)計(jì)感興趣的同學(xué)閱讀。

一、設(shè)計(jì)規(guī)范綜述

1.1 定義

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

那么到底什么是設(shè)計(jì)規(guī)范呢？和設(shè)計(jì)語(yǔ)言、設(shè)計(jì)原則、組件庫(kù)等有什么關(guān)系呢？

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

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

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

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

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

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

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

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

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

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

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

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

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

1.3.1 軟件危機(jī)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.5.1 落不了地的原因

1.設(shè)計(jì)層面：

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

2.開發(fā)層面

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

另外一方面，設(shè)計(jì)規(guī)范的落地會(huì)增加開發(fā)工程師很多的工作量，且無(wú)法量化收益。這也導(dǎo)致很多時(shí)候無(wú)法爭(zhēng)取到足夠的開發(fā)資源來(lái)做這件事，導(dǎo)致達(dá)不到預(yù)期的效果。

1.5.2 如何落地

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

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

二、文字規(guī)范

B端UI界面的視覺(jué)設(shè)計(jì)是一種偏向于排版的設(shè)計(jì)類型，而其中對(duì)于文字的使用更是重中之重。

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

還有一點(diǎn)要注意，我們使用的字體一般是基于用戶有什么字體，而由于win和Mac默認(rèn)字體不同，所以要提前預(yù)留好字體風(fēng)格類似的多種字體。并且可以設(shè)置多個(gè)字體，通過(guò)逗號(hào)隔開，如果第一個(gè)字體用戶沒(méi)有，那么會(huì)自動(dòng)替換成下一個(gè)字體。

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

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

但是目前會(huì)遇到額外間距的問(wèn)題。

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

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

三、色彩規(guī)范

3.1 基本介紹

3.1.1 色彩的作用

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

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

3.1.2 組成

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

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

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

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

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

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

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

HCL (Hue-Chroma-Luminance) 與 RGB、HSB一樣同屬色彩空間的一種，因?yàn)樽钤缬蓢?guó)際照明協(xié)會(huì) CIE 提出，又被稱作 CIELch。

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

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

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

3.3 落地

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

3.3.1 設(shè)計(jì)方面

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

3.3.2 開發(fā)方面

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

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

四、陰影規(guī)范

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

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

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

M：給下拉列表，氣泡提示等使用的陰影。因?yàn)檫@些元素是與由底層元素展開而來(lái)的，但又不屬于底層元素，所以將中等層級(jí)的陰影給了這些元素。

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

五、圓角規(guī)范

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

1. 親和感。我們傾向于“避免尖銳的邊緣，因?yàn)樵谧匀唤缰兴鼈兛赡軙?huì)構(gòu)成威脅”。運(yùn)用圓角矩形能給我們帶來(lái)親和感，圓角越大，親和感越高。
2. 辨識(shí)度。相對(duì)于沒(méi)有圓角，人可以更快的辨識(shí)圓角矩形。

六、布局規(guī)范

對(duì)于組件庫(kù)來(lái)說(shuō)，我們可以把組件比喻為積木，而布局則是把積木搭建為各種不同成品的圖紙。

6.1 盒子模型

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

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

6.1.2盒子模型是什么

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

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

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

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

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

而前段時(shí)間figma更新的auto layout 功能與盒子模型基本完美對(duì)應(yīng)。我們?cè)谠O(shè)計(jì)時(shí)可以使用這個(gè)讓開發(fā)更容易get我們的設(shè)計(jì)稿，減少溝通時(shí)間。

以標(biāo)簽頁(yè)為例，我們?cè)O(shè)計(jì)時(shí)，不只是畫個(gè)橫線與文字就行了，這樣開發(fā)無(wú)法理解到設(shè)計(jì)稿，后面還會(huì)繼續(xù)找我們?cè)儐?wèn)觸控?zé)釁^(qū)。

6.2 導(dǎo)航

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

6.2.1 頂部導(dǎo)航

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

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

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

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

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

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

方便尋找：由于縱向?yàn)g覽無(wú)需把每個(gè)單個(gè)菜單完整瀏覽，相對(duì)水平菜單，定位更快。

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

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

6.2.3 混合導(dǎo)航

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

缺點(diǎn)：

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

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

6.3 柵格

6.3.1 柵格介紹

1. 來(lái)源

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

2. 優(yōu)勢(shì)

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

6.3.3 組成與原理

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

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

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

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

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

6.4 間距

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

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

7.1 圖標(biāo)重要性

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

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

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

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

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

7.3 落地

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

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

7.4 圖標(biāo)庫(kù)推薦

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

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

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

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

八、文案規(guī)范

8.1 文案是什么

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

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

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

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

8.3 文案撰寫的原則

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

8.3.1 準(zhǔn)確原則

8.3.2 簡(jiǎn)潔原則

8.3.3 用戶視角原則

8.4 落地

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

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

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

九、組件庫(kù)

9.1 組件庫(kù)是什么

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

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

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

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

9.2 如何做組件庫(kù)

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

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

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

9.2.2 搭建每個(gè)組件

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

1. 定義組件

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

2. 拆分組件

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

3. 重組輸出

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

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

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

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

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

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

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

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

十、大廠設(shè)計(jì)規(guī)范推薦

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

1. Ant Design

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

2. Zent

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

3. Element

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

4. AT-UI

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

10.2 移動(dòng)端設(shè)計(jì)規(guī)范

1. Vant

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

2. NutUI-JDL

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

十一、結(jié)語(yǔ)

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

作者：JIN石為KAI；公眾號(hào)：MICU設(shè)計(jì)

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

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

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