編輯導(dǎo)語(yǔ)：有一套合適B端產(chǎn)品設(shè)計(jì)師的組件庫(kù)就能夠大大提高自己的辦公效率。那么，怎樣建立自己的組件庫(kù)呢？在本篇文章中，作者對(duì)組件庫(kù)進(jìn)行了解析，總結(jié)了如何打造B端設(shè)計(jì)組件庫(kù)。感興趣的小伙伴，一起來(lái)看看吧!

各位B端設(shè)計(jì)師們?cè)谇舐毭嬖嚨臅r(shí)候，有沒有發(fā)現(xiàn)面試官都非常關(guān)注你有沒有搭建組件庫(kù)的能力，而且入職后每個(gè)團(tuán)隊(duì)都會(huì)有一個(gè)負(fù)責(zé)組件庫(kù)的小組，那作為新手設(shè)計(jì)師怎么快速加入？如果公司目前沒有組件庫(kù)，設(shè)計(jì)師怎樣推動(dòng)建設(shè)？這篇文章詳細(xì)的為大家分享大廠設(shè)計(jì)師是怎么從零到一搭建組件庫(kù)、過(guò)程中如何推動(dòng)、和其他部門怎樣進(jìn)行配合，來(lái)幫助各位新手設(shè)計(jì)師提升自己的職場(chǎng)競(jìng)爭(zhēng)力。

一、組件庫(kù)的價(jià)值

組件庫(kù)是一個(gè)設(shè)計(jì)界面元素的集合倉(cāng)庫(kù)，要把各個(gè)場(chǎng)景中反復(fù)出現(xiàn)的控件沉淀下來(lái)，使用的時(shí)候不需要單獨(dú)設(shè)計(jì)，直接調(diào)用即可。

比如在B端業(yè)務(wù)中一些表格表單也會(huì)被大量使用，那么我們就需要對(duì)表格、表單進(jìn)行規(guī)范，在任何場(chǎng)景下都遵循這一規(guī)范，增加研發(fā)團(tuán)隊(duì)的確定性節(jié)省不必要的設(shè)計(jì)，保持系統(tǒng)一致性，讓設(shè)計(jì)師專注于創(chuàng)意最需要的地方。

組件庫(kù)帶給團(tuán)隊(duì)的價(jià)值是一致、高效、靈活。

一致：一套標(biāo)準(zhǔn)化的設(shè)計(jì)規(guī)則可以傳達(dá)給用戶統(tǒng)一的品牌調(diào)性，減少用戶學(xué)習(xí)成本培養(yǎng)用戶習(xí)慣，讓產(chǎn)品擁有良好的用戶體驗(yàn)。

高效：組件的使用規(guī)范和各種狀態(tài)只要搭建一次就可以重復(fù)使用，設(shè)計(jì)師在設(shè)計(jì)新的需求的時(shí)候直接調(diào)用組件，不需要大量重復(fù)工作，把時(shí)間花在更有價(jià)值的事情上。研發(fā)側(cè)直接調(diào)用封裝好的組件就可以，避免重復(fù)造輪子，同時(shí)也降低了溝通成本

靈活：所有頁(yè)面的都是原子，在產(chǎn)品后期迭代中，只要調(diào)整原子、按照不同的方式進(jìn)行排布就可以獲得一個(gè)信息系統(tǒng)，這樣全局靈活性非常強(qiáng)，也非常便于系統(tǒng)維護(hù)。

二、原子設(shè)計(jì)理論

原子設(shè)計(jì)其實(shí)是老生常談一套理論了，但是要講組件庫(kù)繞不開原子設(shè)計(jì)，在這里我就再啰嗦幾句關(guān)于原子設(shè)計(jì)的起源和概念。

在化學(xué)領(lǐng)域中，世界上一切萬(wàn)物都是由化學(xué)元素周期表組成的原子組成，原子組成分子，分子組成有機(jī)物，有機(jī)物構(gòu)成生命。網(wǎng)頁(yè)設(shè)計(jì)師Brad Forst從這里找到了靈感，我們?cè)O(shè)計(jì)的頁(yè)面是不是也有相對(duì)應(yīng)的原子，通過(guò)這些原子不同的排列組成呢？于是在2013年將此理論結(jié)合設(shè)計(jì)領(lǐng)域的知識(shí)，創(chuàng)建了一套設(shè)計(jì)方法論——原子設(shè)計(jì)（Atomic Design），原子設(shè)計(jì)是我們搭建組件庫(kù)非常重要的一種思維模式，從底層開始思考從元素到頁(yè)面，這樣會(huì)對(duì)設(shè)計(jì)有更清晰的理解。

原子設(shè)計(jì)理論分為五個(gè)層面：原子、分子、組織、模板、頁(yè)面。對(duì)應(yīng)到設(shè)計(jì)中我們的顏色、字體、圓角等作為原子，通過(guò)各種組合排列最終搭建出頁(yè)面。根據(jù)原子設(shè)計(jì)理論，需要把原子設(shè)計(jì)的五個(gè)層面和我們組件的內(nèi)容進(jìn)行一一對(duì)應(yīng)，先從最基礎(chǔ)的核心元素入手，進(jìn)行組件庫(kù)搭建。

原子 (Atom)：是構(gòu)成一般物質(zhì)的最小單位，不可再分的基本微粒。對(duì)應(yīng)組件：文字、顏色、圖標(biāo)、布局、陰影。在界面中沒有辦法細(xì)分并且隨意改變不會(huì)對(duì)整體等共恩感有影響。

分子 (Molecule)：是由原子按照一定等順序和空間排列而結(jié)合在一起的整體，對(duì)應(yīng)在組件庫(kù)就是單個(gè)組件，按鈕、搜索框、表單這些，是由文字、顏色、圖標(biāo)、布局、陰影進(jìn)行組合構(gòu)成的控件。

組織 (Organization) ：是指有諸多原子分子按照一定方式相互聯(lián)系起來(lái)的系統(tǒng)，在界面中可以理解相對(duì)復(fù)雜的組件，例如彈窗、導(dǎo)航欄、列表等。

模板（Template）：模版就開始有頁(yè)面的雛形了，由多個(gè)組織結(jié)合而成的模塊，一些常用典型頁(yè)面可以沉淀成模版頁(yè)面，像表單頁(yè)、列表頁(yè)、詳情頁(yè)。

頁(yè)面（Page）：頁(yè)面是模板的具體實(shí)例，將實(shí)際內(nèi)容填充進(jìn)模版后形成頁(yè)面，是我們最后產(chǎn)出的高板鎮(zhèn)視覺稿，也是產(chǎn)品的最終形態(tài)。

三、定位團(tuán)隊(duì)現(xiàn)狀

在開始動(dòng)手之前需要明確自己所在團(tuán)隊(duì)處于哪種階段，沒有一雙鞋適合所有人，精致名貴的高跟鞋配上跑馬拉松的運(yùn)動(dòng)員顯然是不合適的。組件庫(kù)也是如此，沒有最好的只有最合適的，要根據(jù)團(tuán)隊(duì)當(dāng)前的不同階段去進(jìn)行判斷。越到后期需要投入的資源越多，同時(shí)給團(tuán)隊(duì)帶來(lái)的價(jià)值也越大。下面列舉三種不同的團(tuán)隊(duì)發(fā)展階段，來(lái)匹配你們團(tuán)隊(duì)的情況吧：

團(tuán)隊(duì)創(chuàng)建初期：產(chǎn)品定位不明確，設(shè)計(jì)師只有一兩個(gè)人，設(shè)計(jì)師主要通過(guò)粗暴的復(fù)制粘貼設(shè)計(jì)稿就可以滿足，這個(gè)階段可以犧牲一些體驗(yàn)上的一致性，目的是項(xiàng)目需要快速上線進(jìn)行驗(yàn)證；

快速發(fā)展階段：隨著業(yè)務(wù)方向越來(lái)越清晰，團(tuán)隊(duì)規(guī)模的不斷擴(kuò)張，設(shè)計(jì)團(tuán)隊(duì)會(huì)有新的伙伴加入，每個(gè)設(shè)計(jì)師都有自己的想法，如果沒有一套明確的設(shè)計(jì)規(guī)則，會(huì)導(dǎo)致頁(yè)面一致性差，隨意的設(shè)計(jì)也會(huì)增加開發(fā)成本；對(duì)于研發(fā)側(cè)每一個(gè)新的樣式都需要單獨(dú)寫一套，出現(xiàn)大量重復(fù)無(wú)意義的工作。這個(gè)階段是搭建組件庫(kù)的時(shí)機(jī)，需要去定義常用組件的視覺和交互保證頁(yè)面的一致性、避免一次性設(shè)計(jì)；

團(tuán)隊(duì)成熟階段：第三個(gè)階段是產(chǎn)品已經(jīng)非常成熟，也有了基本組件的規(guī)范定義，同時(shí)有大量B端后臺(tái)頁(yè)面，而B端后臺(tái)頁(yè)面基本上都是表格頁(yè)、表單頁(yè)、詳情頁(yè)，這些復(fù)用性強(qiáng)的頁(yè)面，這時(shí)候如果每個(gè)頁(yè)面都要設(shè)計(jì)師對(duì)應(yīng)產(chǎn)品文檔去調(diào)整字段，設(shè)計(jì)師的性價(jià)比就會(huì)變得極低。所以在這個(gè)階段的組件庫(kù)的服務(wù)對(duì)象不僅僅是設(shè)計(jì)師，設(shè)計(jì)師非常完善的制定出現(xiàn)率高的典型頁(yè)面布局規(guī)范后，產(chǎn)品經(jīng)理、研發(fā)、運(yùn)營(yíng)人員等團(tuán)隊(duì)所有的職能人員，可以直接跳過(guò)設(shè)計(jì)節(jié)，根據(jù)典型頁(yè)面規(guī)范套用生成頁(yè)面。

四、確定人力資源

根據(jù)自己所在團(tuán)隊(duì)的不同階段，需要去申請(qǐng)搭建組件庫(kù)的資源，搭建一套完善的組件庫(kù)就跟搭建一款產(chǎn)品一樣，絕對(duì)不是設(shè)計(jì)師可以獨(dú)立完成的，需要多方配合。這時(shí)候呢可以列舉一些關(guān)于組件庫(kù)遇到的問題，完成后可以帶給團(tuán)隊(duì)什么價(jià)值，去和leader申請(qǐng)?jiān)O(shè)計(jì)資源，以及跨部門申請(qǐng)研發(fā)的人力資源。

正式立項(xiàng)后，作為搭建組件庫(kù)的的owner需要定義好整個(gè)時(shí)間節(jié)點(diǎn)，什么時(shí)間點(diǎn)完成什么事情，并且定期開會(huì)來(lái)同步大家的設(shè)計(jì)進(jìn)度，來(lái)推動(dòng)這件事情的順利進(jìn)行。

設(shè)計(jì)過(guò)程中要和研發(fā)隨時(shí)保持溝通，避免出現(xiàn)信息差，了解技術(shù)實(shí)現(xiàn)的邊界在哪，確認(rèn)之后在開始進(jìn)入設(shè)計(jì)階段，避免盲目設(shè)計(jì)完了以后，進(jìn)入評(píng)審階段被告知實(shí)現(xiàn)不了，再重新返工浪費(fèi)時(shí)間同時(shí)設(shè)計(jì)過(guò)程中要和相關(guān)研發(fā)隨時(shí)保持溝通，避免出現(xiàn)信息差。

舉例在上家公司遇到的問題，當(dāng)時(shí)的背景是整個(gè)大團(tuán)隊(duì)分為7個(gè)業(yè)務(wù)線，每個(gè)業(yè)務(wù)線都搭建了自己的組件庫(kù)，前端技術(shù)選型都不同，導(dǎo)致設(shè)計(jì)規(guī)范，業(yè)務(wù)組件等基建成果不可移植、全局的重復(fù)建設(shè)、資源浪費(fèi)?，F(xiàn)有Figma組件使用低效，源文件命名不規(guī)范組件不全等問題。

團(tuán)隊(duì)內(nèi)部也意識(shí)到了問題的存在，開始從0-1重新搭建，成立搭建組件庫(kù)的虛擬小組，由一個(gè)設(shè)計(jì)小組和研發(fā)小組共同組成。設(shè)計(jì)師的工作負(fù)責(zé)搭建、核查。完成搭建后小組成員同學(xué)一起集中check，記錄修改點(diǎn)、爭(zhēng)論點(diǎn)，鼓勵(lì)充分討論；修改完成后在進(jìn)行復(fù)驗(yàn)，全員無(wú)異議后鎖定畫板交付開發(fā)評(píng)審并更進(jìn)實(shí)現(xiàn)，在整個(gè)項(xiàng)目周期定期進(jìn)行周會(huì)同步各方進(jìn)度，及風(fēng)險(xiǎn)點(diǎn)。

五、組件庫(kù)的產(chǎn)出

接下來(lái)就可以正式進(jìn)入設(shè)計(jì)階段了，需要產(chǎn)出的設(shè)計(jì)內(nèi)容有設(shè)計(jì)原則、設(shè)計(jì)語(yǔ)言、組件庫(kù)和說(shuō)明文檔。

設(shè)計(jì)原則：設(shè)計(jì)原則是做設(shè)計(jì)的標(biāo)準(zhǔn)，用來(lái)指導(dǎo)和衡量設(shè)計(jì)方案的優(yōu)略，搭建一套組件庫(kù)，每個(gè)元素都需要圍著這個(gè)設(shè)計(jì)原則展開執(zhí)行，他的意義是為接下來(lái)的設(shè)計(jì)提供方向。

設(shè)計(jì)語(yǔ)言：需要秉承設(shè)計(jì)原則和業(yè)務(wù)調(diào)性的基礎(chǔ)上進(jìn)行定義，主要表現(xiàn)為形、色、字、質(zhì)、構(gòu)這些視覺元素。比如

Figma控件：通過(guò)設(shè)計(jì)原則、基礎(chǔ)樣式可以定義出來(lái)我們組件的樣式，就像一個(gè)倉(cāng)庫(kù)一樣，包含了各種組件的所有樣式。

說(shuō)明文檔：組件倉(cāng)庫(kù)搭建好了，還需要配上使用說(shuō)明書，具體某個(gè)組件該怎么使用、什么情況下使用哪種狀態(tài)，都需要一一說(shuō)明，防止設(shè)計(jì)師面對(duì)玲瑯滿目的組件原件不知道從何下手。

六、設(shè)計(jì)原則

在執(zhí)行過(guò)程中首先調(diào)研業(yè)內(nèi)成熟的設(shè)計(jì)原則：例如蘋果的設(shè)計(jì)原則為創(chuàng)意審美的重要性、隱喻的價(jià)值、易用性原則和及時(shí)的反饋。螞蟻的AntDesign就是將自然、確定性、意義性和生長(zhǎng)性作為它的設(shè)計(jì)價(jià)值觀。在結(jié)合自己業(yè)務(wù)的愿景和使命進(jìn)行頭腦風(fēng)暴，羅列出你認(rèn)為影響所處行業(yè)的關(guān)鍵詞是什么，一起對(duì)應(yīng)關(guān)鍵詞進(jìn)行分類聚攏，最后抽離出適合自己業(yè)務(wù)的設(shè)計(jì)原則。

七、設(shè)計(jì)語(yǔ)言

在這之前要明確一個(gè)概念Design Token，即儲(chǔ)存樣式的載體，“Token”原本的意思是“令牌”，在工程邏輯中用于用戶身份與服務(wù)器端進(jìn)行驗(yàn)證，而在設(shè)計(jì)體系中，Design Token 則可以簡(jiǎn)單理解為封裝的視覺樣式參數(shù)。

Design Token 最重要的意義是通過(guò)規(guī)定樣式的參數(shù)、和統(tǒng)一的命名規(guī)則做到設(shè)計(jì)與研發(fā)的樣式完全打通，進(jìn)行無(wú)損耗的溝通，增強(qiáng)系統(tǒng)的可維護(hù)性。在真實(shí)產(chǎn)品設(shè)計(jì)、研發(fā)過(guò)程中，設(shè)計(jì)和研發(fā)命名不一致，數(shù)量少還好，當(dāng)數(shù)量多了以后全局維護(hù)就變得困難了很多，但如果我們直接將這些參數(shù)分裝管理，整個(gè)過(guò)程的新增、改版就會(huì)清晰很多。

1. 顏色

顏色是頁(yè)面整體風(fēng)格表現(xiàn)的重要基本元素，好的色彩配置可以準(zhǔn)確的傳達(dá)有效信息和品牌感，梳理頁(yè)面的視覺層級(jí)關(guān)系，突出內(nèi)容并平衡其他視覺元素。一般而言，一個(gè)產(chǎn)品的顏色體系會(huì)包含：主色、中性色、功能色。接下來(lái)根據(jù)顏色分類，將不同分類的顏色樣式逐一羅列出來(lái)。

主色：產(chǎn)品的品牌色，也是界面中出現(xiàn)最多的顏色，比如按鈕的顏色、重點(diǎn)操作等狀態(tài)。

中性色：在界面中調(diào)和色彩搭配，用來(lái)襯托其他顏色，一般應(yīng)用在字體、分割線、背景色等。

功能色：向用戶明確傳達(dá)成功、警告、錯(cuò)誤等狀態(tài)。

2. 文字

不同的字體大小和顏色文字信息，可以體現(xiàn)出內(nèi)容的主次。在文字樣式中會(huì)包括：字號(hào)、字重、行高和字距等。選擇一款字體（推薦中文：微軟雅黑、英文：Aria），如果使用蘋方則Win系統(tǒng)中會(huì)出現(xiàn)字體丟失的情況，這里建議樣式創(chuàng)建要克制，盡可能保證樣式庫(kù)精簡(jiǎn)適用。

字號(hào)：PC端最小可識(shí)別字體是12px ，需要區(qū)分字體層級(jí)，一般以偶數(shù)來(lái)進(jìn)行間隔。

字重：除了使用字號(hào)，還可以通過(guò)字重來(lái)突出層級(jí)，常用采用 Regular 以及 Medium 的兩種字體重量，分別對(duì)應(yīng)代碼中的 400 和 500。

行高：建議行號(hào)是字體的150%，通常字體越大行高越小。

間距：根據(jù) WCAG 中的 AAA 標(biāo)準(zhǔn)，段落間距至少為字體大小的 1.5 倍。

3. 投影

陰影是存在于畫布元素中并通常會(huì)在背景邊框中延伸出對(duì)象。主要有外陰影、內(nèi)陰影。陰影值應(yīng)該遵循現(xiàn)實(shí)物理世界中物體的特性，物體的高度直接影響陰影，離地面越高陰影越大，模糊值越高，反之相反。

為了在不同層級(jí)使用陰影更加豐富，通常陰影定義三個(gè)層級(jí)，一級(jí)卡片陰影、二級(jí)選擇下拉popover陰影、三級(jí)對(duì)話框陰影。

八、Figma控件

1. 結(jié)構(gòu)細(xì)分

首先要將原本的組件進(jìn)行打散、細(xì)化、整合、重組，我們需要把一個(gè)組件中可以拆分成幾個(gè)模塊，使每個(gè)模塊都可以進(jìn)行獨(dú)立的變化替換，這樣組件呈現(xiàn)出來(lái)的嘗試可以滿足全部場(chǎng)景。舉例:抽屜控件，可以分為出現(xiàn)位置（上下左右）、抽屜尺寸（大中小）、標(biāo)題區(qū)域（副標(biāo)題、頭像、標(biāo)簽、更多操作、tabs標(biāo)簽）、按鈕區(qū)域這四個(gè)模塊，每個(gè)模塊可以獨(dú)立產(chǎn)生新的樣式。拆解維度到按鈕、圖標(biāo)等最細(xì)顆粒后通常不會(huì)再進(jìn)行拆分。

2. 新建組件

選中要組件化的元素，點(diǎn)擊頂部工具欄“Greate Componer”健即可創(chuàng)建成功，快捷健是“command+option+k”，創(chuàng)建成功的組件元素有實(shí)心的紫色菱形圖標(biāo)，變?yōu)樽仙吙颉?/p>

創(chuàng)建好的組件分為父級(jí)和子級(jí)?創(chuàng)建出來(lái)的是父級(jí)組件，按住“option”鍵，將父級(jí)元素拖動(dòng)到空白處，就創(chuàng)建出來(lái)一個(gè)子級(jí)（快捷健是“command+d”）

需要注意：更改父級(jí)組件，子級(jí)組件也會(huì)隨著發(fā)生改變；更改子級(jí)組件，父級(jí)組件不會(huì)改變。

3. 命名規(guī)則

命名規(guī)則是組件中不容忽視的問題，影響在使用過(guò)程中對(duì)組件的調(diào)用，使用「/」來(lái)為組件命名，用于給組件進(jìn)行分類，這樣可以幫助 figma 判斷組件內(nèi)元素的層級(jí)。例如：【抽屜/大號(hào)】，在使用組件的過(guò)程中命名規(guī)則會(huì)影響右側(cè)工具欄中的“Swap instance”，可以在這里進(jìn)行切換控件，控件的位置層級(jí)和命名規(guī)范一致，合理的命名會(huì)讓整個(gè)組件庫(kù)布局調(diào)理清晰、結(jié)構(gòu)縝密，幫助我們快速定位。

4. Auto layout

Auto layout 是 Figma 自動(dòng)布局功能，創(chuàng)建帶有自動(dòng)布局的組件，可以幫助我們實(shí)現(xiàn)背景隨內(nèi)容調(diào)整、列表項(xiàng)目任意移動(dòng)、列表間距快速調(diào)整等需求，這樣對(duì)于組件的拓展和應(yīng)用會(huì)非常靈活。

以按鈕為例：創(chuàng)建一個(gè)按鈕，在面板屬性中“Auto layout”點(diǎn)擊“+”，或者使用鍵盤快捷鍵“SHIFT+A”，這時(shí)候就可以去調(diào)節(jié)自動(dòng)布局的相關(guān)屬性了：

方向：可以調(diào)節(jié)多個(gè)元素是縱向排列合適豎向排列；

間距：控制元素和元素之間的間距，新版本支持設(shè)置負(fù)間距，可以輕松做出頭像堆疊效果；

容器：控制元素舉例框架上側(cè)、下側(cè)、左側(cè)、右側(cè)間距，可以統(tǒng)一設(shè)置，分別設(shè)置；

分布方式：“Packed”支持九種分布（左上、中上、右上、左中、中央、右中、左下、中下、右下）；“Space between”是平均分布，新版本支持在畫布中快捷調(diào)整；

調(diào)整對(duì)象：可以控制自動(dòng)布局中的對(duì)象，固定的寬度或高度 （Fixed），擁抱內(nèi)容 （Hug contents），填充容器 （Fill container）。

5. 變體功能

Figma 擁有強(qiáng)大的變體功能。同一個(gè)組件的不同狀態(tài)可以通過(guò)變體的方式靈活創(chuàng)建，方便用戶調(diào)用，變體中需要了解兩個(gè)功能：屬性 Property、值 Variant

屬性 Property：是組件的可變方面。例如：一個(gè)按鈕組件的屬性可以是尺寸、狀態(tài)，或是否有 icon，可以將其理解為分類。變體名稱遵循命名規(guī)范的結(jié)構(gòu)，Property1=value, Property2=value, Property3=value。只有兩個(gè)屬性的選項(xiàng)可以現(xiàn)實(shí)為開關(guān)顯示，F(xiàn)igma 會(huì)自動(dòng)將 true/false、yes/no 和 on/off 都識(shí)別為開關(guān)，在命名的時(shí)候Property1=true/false，Property1=yes/no，Property1=on/off

值 Variant：是每個(gè)屬性可用的不同選項(xiàng)。例如：狀態(tài)屬性可以有默認(rèn)、懸浮、點(diǎn)擊和禁用等，可以將其理解為分類下的參數(shù)。

6. 組件說(shuō)明/鏈接

創(chuàng)建完組件后，可以在每個(gè)組件的“Description”，輸入該組件的解釋說(shuō)明，在引用組件的時(shí)，hover該組件上就出出現(xiàn)氣泡說(shuō)明，方便用戶查看該組件的說(shuō)明

同時(shí)還可以添加相關(guān)鏈接在組件描述中，設(shè)計(jì)人員在“ Inspect” 中點(diǎn)擊相關(guān)的按鈕直接跳轉(zhuǎn)，查看相關(guān)組件規(guī)范文檔，方便用戶使用。

九、設(shè)計(jì)文檔

組件文檔是指導(dǎo)設(shè)計(jì)怎么使用組件的重要指導(dǎo)說(shuō)明，是不可搭建組件庫(kù)不可忽視的存在，一般是由組件名稱、基礎(chǔ)定義、使用說(shuō)明、基礎(chǔ)構(gòu)成、類型、尺寸布局、交互說(shuō)明組成。

舉例彈窗組件的說(shuō)明文檔：

組件名稱：對(duì)話框 Modal

基礎(chǔ)定義：用于承載信息且不離開當(dāng)前頁(yè)面，可以幫助用戶更快更容易地完成任務(wù)。

使用說(shuō)明：

要求用戶立即響應(yīng) ：使用對(duì)話框請(qǐng)求阻止用戶繼續(xù)操作；

通知用戶緊急信息 ：使用對(duì)話框通知用戶有關(guān)其當(dāng)前任務(wù)的緊急信息，通常用于報(bào)告系統(tǒng)錯(cuò)誤或告知結(jié)果；

確認(rèn)用戶決定 ：使用對(duì)話框來(lái)確認(rèn)用戶的決定，清楚描述當(dāng)前行為可能導(dǎo)致的潛在后果，如果該行為具有破壞性或不可逆轉(zhuǎn)性，則使用報(bào)錯(cuò)警告色。

需要承載少量輸入信息或者展示信息時(shí)，并且希望信息出現(xiàn)可以打斷當(dāng)前操作。當(dāng)對(duì)話框中內(nèi)容過(guò)多，需要復(fù)雜的操作，甚至需要二次跳轉(zhuǎn)時(shí)，建議使用 抽屜 或 新開頁(yè) ，而非對(duì)話框。

基礎(chǔ)構(gòu)成：

標(biāo)題區(qū)（必有） ：可以是純文字，也可以在文字前帶有icon來(lái)明示狀態(tài)；支持配置描述，作為輔助信息展示

正文（可選） ：可包含文字描述、表單、表格、步驟條、通知；

操作區(qū)（可選） ：操作區(qū)支持配置是否存在、支持配置按鈕文案及數(shù)量。彈窗達(dá)到最大高度時(shí)，操作區(qū)固定吸底

關(guān)閉按鈕 （可選） ：點(diǎn)擊可關(guān)閉彈窗；

黑色蒙層（必有） ：黑色蒙層覆蓋全頁(yè)面，蒙層下方的頁(yè)面內(nèi)容不響應(yīng)滾動(dòng)和點(diǎn)擊。

類型：

通知對(duì)話框（用于警示、緊急、或簡(jiǎn)單的二次彈窗確認(rèn)）。

功能對(duì)話框（除標(biāo)題、純文本內(nèi)容和按鈕外，還需要承載更多復(fù)雜信息時(shí)）。

選項(xiàng)/展示對(duì)話框（內(nèi)容不足以構(gòu)成單獨(dú)頁(yè)面或不希望跳轉(zhuǎn)新頁(yè)面的對(duì)話框，多使用于搜索、設(shè)置、內(nèi)容選擇）。

寬屏彈窗（建議用于承載左右聯(lián)動(dòng)控件、樹結(jié)構(gòu)、日歷、多列表格等信息復(fù)雜內(nèi)容）。

布局尺寸：

對(duì)話框尺寸共 3 種，分別是小尺寸、中尺寸、大尺寸。對(duì)話框限定寬度，根據(jù)內(nèi)容適應(yīng)高度，最大高度為對(duì)話框距頁(yè)面上下 Padding 值為 60px 所計(jì)算的高度，支持滾動(dòng)操作。

交互規(guī)則：

黑色蒙層的點(diǎn)擊 ：普通信息展示的對(duì)話框可通過(guò)點(diǎn)擊黑色蒙層來(lái)關(guān)閉對(duì)話框，但若是信息錄入的對(duì)話框，不建議點(diǎn)擊黑色蒙層關(guān)閉對(duì)話框，容易造成已填寫數(shù)據(jù)的丟失。

支持對(duì)話框打開二級(jí)，二級(jí)頁(yè)面需保持同寬，高度可隨內(nèi)容適配。切換層級(jí)時(shí)，對(duì)話框高度以頂部標(biāo)題區(qū)域?yàn)榛鶞?zhǔn)。

同時(shí)出現(xiàn)多個(gè)對(duì)話框，寬屏與大尺寸可在原對(duì)話框基礎(chǔ)上展開小尺寸或中尺寸對(duì)話框，建議最多同時(shí)出現(xiàn)兩個(gè)對(duì)話框。一般情況下不建議在小尺寸對(duì)話框基礎(chǔ)上，彈大尺寸對(duì)話框。對(duì)話框與對(duì)話框的層級(jí)需要區(qū)分，每一個(gè)對(duì)話框底部需疊加一個(gè)蒙層。

十、組件庫(kù)的維護(hù)

對(duì)組件所做的每一個(gè)優(yōu)化，都是基于用戶和場(chǎng)景的假設(shè)，可能正中用戶下懷，也有可能是一廂情愿。我們的優(yōu)化需要經(jīng)得起用戶和市場(chǎng)的驗(yàn)證，于是對(duì)組件庫(kù)進(jìn)行了多次可用性測(cè)試。而每一次測(cè)試都會(huì)有意外發(fā)現(xiàn)。比如一些我們理所應(yīng)當(dāng)?shù)牟僮鳎脩舾纠斫獠涣?。又或是我們精心打磨的?xì)節(jié)，用戶其實(shí)毫不在意。所以驗(yàn)證-迭代是組件庫(kù)不可或缺的環(huán)節(jié)，同時(shí)也是一個(gè)反復(fù)而漫長(zhǎng)的過(guò)程。

每次組件樣式的迭代只需要更改父組件的樣式，然后更新發(fā)布。這是Figma 會(huì)通知到使用過(guò)組件的文件中，設(shè)計(jì)師進(jìn)行更新就可以使用最新的版本。

十一、組件庫(kù)的使用

想要使用組件庫(kù)，首先要在“Libraries”打開所使用的組件庫(kù)，然后在 Assets 面板下，將需要使用的組件直接拖動(dòng)至文件中，就可以直接使用了。

十二、組件庫(kù)參考

近些年各個(gè)大廠、B端行業(yè)頭部公司都建設(shè)很多完善且公開的組件庫(kù)，屬于一個(gè)比較成熟的市場(chǎng)狀態(tài)，那這時(shí)候會(huì)有小伙伴有有疑惑了，直接調(diào)用不可以嗎？為什么需要自己去搭建呢？原因是B端業(yè)務(wù)的特殊性市面上通用組件庫(kù)沒有辦法覆蓋每個(gè)業(yè)務(wù)的全部場(chǎng)景，一旦遇到需要特化處理的地方，去魔改組件成本也非常高，另外直接復(fù)用第三方會(huì)導(dǎo)致同質(zhì)化嚴(yán)重，沒有設(shè)計(jì)差異化，所以搭建一套自己團(tuán)隊(duì)的組件庫(kù)是非常有必要的。

下面列舉一些國(guó)內(nèi)外比較成熟的組件庫(kù)，在搭建自己的組件庫(kù)的時(shí)候當(dāng)作字典一樣進(jìn)行參考，我們做不了巨人，可以做踩在巨人肩膀上的矮子。

Ant Design（螞蟻金服）

https://ant.design/docs/react/introduce-cn

Element（餓了么）

https://element.eleme.cn/#/zh-CN

Arco Design (字節(jié)跳動(dòng)）

https://arco.design/

Fusion Design（阿里巴巴）

https://fusion.design/pc/?themeid=2

Zan UI（有贊）

https://youzan.github.io/zent/zh/guides/install

TDensign（騰訊）

https://tdesign.tencent.com/

Lightning Design System

https://996.pm/75PGd

Fluent Design System

https://www.microsoft.com/design/fluent/#/

Carbon Design System

https://github.com/carbon-design-system/carbon

Material Design

https://material.io/design

十三、B端設(shè)計(jì)師價(jià)值

搭建完一套非常完善的組件庫(kù)后，有的設(shè)計(jì)師可能會(huì)陷入焦慮，覺得自己設(shè)計(jì)師的價(jià)值被逐漸弱化了，不需要設(shè)計(jì)師也可以搭建一套完整的頁(yè)面，其實(shí)不是的。

面對(duì)復(fù)雜的B端業(yè)務(wù)，還有大量可以沉淀的業(yè)務(wù)組件，比如在IM系統(tǒng)中個(gè)人名片是常用控件，就可以沉淀成業(yè)務(wù)組件。業(yè)務(wù)組件相比較基礎(chǔ)組件更加考驗(yàn)設(shè)計(jì)是的創(chuàng)新能力和多業(yè)務(wù)的理解。需要所有B端設(shè)計(jì)師去花心思投入。

單純的B端UI、UE的崗位已經(jīng)越來(lái)越少，現(xiàn)在市面上對(duì)B端設(shè)計(jì)的要求是全鏈路的能力，深入業(yè)務(wù)、為用戶體驗(yàn)負(fù)責(zé)已經(jīng)是大勢(shì)所趨，作為用戶體驗(yàn)設(shè)計(jì)是只是把經(jīng)歷放在按鈕、彈窗這些細(xì)節(jié)上顯然格局小了，我們要放眼為整個(gè)產(chǎn)品系統(tǒng)流程、全面的用戶體驗(yàn)負(fù)責(zé)。

完善的設(shè)計(jì)系統(tǒng)是一把雙刃劍，它可以使整個(gè)系統(tǒng)得到統(tǒng)一、提效。而組件庫(kù)本事是一個(gè)非常復(fù)雜的系統(tǒng)，搭建過(guò)程中可以加深設(shè)計(jì)師對(duì)每個(gè)控件的理解，這件事本事就是一個(gè)創(chuàng)新的過(guò)程。另外需要注意不要讓組件庫(kù)成為限制設(shè)計(jì)師創(chuàng)造力的枷鎖，優(yōu)秀的設(shè)計(jì)師可以利用這些基礎(chǔ)的組件樣式，就像搭建積木一樣，創(chuàng)造出各種絢麗多彩的世界。

本文由@郭大毛毛設(shè)計(jì)筆記 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

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