起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識深度解析大廠B端組件庫從零到一搭建
編輯導語：有一套合適B端產品設計師的組件庫就能夠大大提高自己的辦公效率。那么，怎樣建立自己的組件庫呢？在本篇文章中，作者對組件庫進行了解析，總結了如何打造B端設計組件庫。感興趣的小伙伴，一起來看看吧!
各位B端設計師們在求職面試的時候，有沒有發(fā)現(xiàn)面試官都非常關注你有沒有搭建組件庫的能力，而且入職后每個團隊都會有一個負責組件庫的小組，那作為新手設計師怎么快速加入？如果公司目前沒有組件庫，設計師怎樣推動建設？這篇文章詳細的為大家分享大廠設計師是怎么從零到一搭建組件庫、過程中如何推動、和其他部門怎樣進行配合，來幫助各位新手設計師提升自己的職場競爭力。
一、組件庫的價值
組件庫是一個設計界面元素的集合倉庫，要把各個場景中反復出現(xiàn)的控件沉淀下來，使用的時候不需要單獨設計，直接調用即可。
比如在B端業(yè)務中一些表格表單也會被大量使用，那么我們就需要對表格、表單進行規(guī)范，在任何場景下都遵循這一規(guī)范，增加研發(fā)團隊的確定性節(jié)省不必要的設計，保持系統(tǒng)一致性，讓設計師專注于創(chuàng)意最需要的地方。
組件庫帶給團隊的價值是一致、高效、靈活。
一致：一套標準化的設計規(guī)則可以傳達給用戶統(tǒng)一的品牌調性，減少用戶學習成本培養(yǎng)用戶習慣，讓產品擁有良好的用戶體驗。
高效：組件的使用規(guī)范和各種狀態(tài)只要搭建一次就可以重復使用，設計師在設計新的需求的時候直接調用組件，不需要大量重復工作，把時間花在更有價值的事情上。研發(fā)側直接調用封裝好的組件就可以，避免重復造輪子，同時也降低了溝通成本
靈活：所有頁面的都是原子，在產品后期迭代中，只要調整原子、按照不同的方式進行排布就可以獲得一個信息系統(tǒng)，這樣全局靈活性非常強，也非常便于系統(tǒng)維護。
二、原子設計理論
原子設計其實是老生常談一套理論了，但是要講組件庫繞不開原子設計，在這里我就再啰嗦幾句關于原子設計的起源和概念。
在化學領域中，世界上一切萬物都是由化學元素周期表組成的原子組成，原子組成分子，分子組成有機物，有機物構成生命。網頁設計師Brad Forst從這里找到了靈感，我們設計的頁面是不是也有相對應的原子，通過這些原子不同的排列組成呢？于是在2013年將此理論結合設計領域的知識，創(chuàng)建了一套設計方法論——原子設計（Atomic Design），原子設計是我們搭建組件庫非常重要的一種思維模式，從底層開始思考從元素到頁面，這樣會對設計有更清晰的理解。
原子設計理論分為五個層面：原子、分子、組織、模板、頁面。對應到設計中我們的顏色、字體、圓角等作為原子，通過各種組合排列最終搭建出頁面。根據原子設計理論，需要把原子設計的五個層面和我們組件的內容進行一一對應，先從最基礎的核心元素入手，進行組件庫搭建。
原子 (Atom)：是構成一般物質的最小單位，不可再分的基本微粒。對應組件：文字、顏色、圖標、布局、陰影。在界面中沒有辦法細分并且隨意改變不會對整體等共恩感有影響。
分子 (Molecule)：是由原子按照一定等順序和空間排列而結合在一起的整體，對應在組件庫就是單個組件，按鈕、搜索框、表單這些，是由文字、顏色、圖標、布局、陰影進行組合構成的控件。
組織 (Organization) ：是指有諸多原子分子按照一定方式相互聯(lián)系起來的系統(tǒng)，在界面中可以理解相對復雜的組件，例如彈窗、導航欄、列表等。
模板（Template）：模版就開始有頁面的雛形了，由多個組織結合而成的模塊，一些常用典型頁面可以沉淀成模版頁面，像表單頁、列表頁、詳情頁。
頁面（Page）：頁面是模板的具體實例，將實際內容填充進模版后形成頁面，是我們最后產出的高板鎮(zhèn)視覺稿，也是產品的最終形態(tài)。
三、定位團隊現(xiàn)狀
在開始動手之前需要明確自己所在團隊處于哪種階段，沒有一雙鞋適合所有人，精致名貴的高跟鞋配上跑馬拉松的運動員顯然是不合適的。組件庫也是如此，沒有最好的只有最合適的，要根據團隊當前的不同階段去進行判斷。越到后期需要投入的資源越多，同時給團隊帶來的價值也越大。下面列舉三種不同的團隊發(fā)展階段，來匹配你們團隊的情況吧：
團隊創(chuàng)建初期：產品定位不明確，設計師只有一兩個人，設計師主要通過粗暴的復制粘貼設計稿就可以滿足，這個階段可以犧牲一些體驗上的一致性，目的是項目需要快速上線進行驗證；
快速發(fā)展階段：隨著業(yè)務方向越來越清晰，團隊規(guī)模的不斷擴張，設計團隊會有新的伙伴加入，每個設計師都有自己的想法，如果沒有一套明確的設計規(guī)則，會導致頁面一致性差，隨意的設計也會增加開發(fā)成本；對于研發(fā)側每一個新的樣式都需要單獨寫一套，出現(xiàn)大量重復無意義的工作。這個階段是搭建組件庫的時機，需要去定義常用組件的視覺和交互保證頁面的一致性、避免一次性設計；
團隊成熟階段：第三個階段是產品已經非常成熟，也有了基本組件的規(guī)范定義，同時有大量B端后臺頁面，而B端后臺頁面基本上都是表格頁、表單頁、詳情頁，這些復用性強的頁面，這時候如果每個頁面都要設計師對應產品文檔去調整字段，設計師的性價比就會變得極低。所以在這個階段的組件庫的服務對象不僅僅是設計師，設計師非常完善的制定出現(xiàn)率高的典型頁面布局規(guī)范后，產品經理、研發(fā)、運營人員等團隊所有的職能人員，可以直接跳過設計節(jié)，根據典型頁面規(guī)范套用生成頁面。
四、確定人力資源
根據自己所在團隊的不同階段，需要去申請搭建組件庫的資源，搭建一套完善的組件庫就跟搭建一款產品一樣，絕對不是設計師可以獨立完成的，需要多方配合。這時候呢可以列舉一些關于組件庫遇到的問題，完成后可以帶給團隊什么價值，去和leader申請設計資源，以及跨部門申請研發(fā)的人力資源。
正式立項后，作為搭建組件庫的的owner需要定義好整個時間節(jié)點，什么時間點完成什么事情，并且定期開會來同步大家的設計進度，來推動這件事情的順利進行。
設計過程中要和研發(fā)隨時保持溝通，避免出現(xiàn)信息差，了解技術實現(xiàn)的邊界在哪，確認之后在開始進入設計階段，避免盲目設計完了以后，進入評審階段被告知實現(xiàn)不了，再重新返工浪費時間同時設計過程中要和相關研發(fā)隨時保持溝通，避免出現(xiàn)信息差。
舉例在上家公司遇到的問題，當時的背景是整個大團隊分為7個業(yè)務線，每個業(yè)務線都搭建了自己的組件庫，前端技術選型都不同，導致設計規(guī)范，業(yè)務組件等基建成果不可移植、全局的重復建設、資源浪費?，F(xiàn)有Figma組件使用低效，源文件命名不規(guī)范組件不全等問題。
團隊內部也意識到了問題的存在，開始從0-1重新搭建，成立搭建組件庫的虛擬小組，由一個設計小組和研發(fā)小組共同組成。設計師的工作負責搭建、核查。完成搭建后小組成員同學一起集中check，記錄修改點、爭論點，鼓勵充分討論；修改完成后在進行復驗，全員無異議后鎖定畫板交付開發(fā)評審并更進實現(xiàn)，在整個項目周期定期進行周會同步各方進度，及風險點。
五、組件庫的產出
接下來就可以正式進入設計階段了，需要產出的設計內容有設計原則、設計語言、組件庫和說明文檔。
設計原則：設計原則是做設計的標準，用來指導和衡量設計方案的優(yōu)略，搭建一套組件庫，每個元素都需要圍著這個設計原則展開執(zhí)行，他的意義是為接下來的設計提供方向。
設計語言：需要秉承設計原則和業(yè)務調性的基礎上進行定義，主要表現(xiàn)為形、色、字、質、構這些視覺元素。比如
Figma控件：通過設計原則、基礎樣式可以定義出來我們組件的樣式，就像一個倉庫一樣，包含了各種組件的所有樣式。
說明文檔：組件倉庫搭建好了，還需要配上使用說明書，具體某個組件該怎么使用、什么情況下使用哪種狀態(tài)，都需要一一說明，防止設計師面對玲瑯滿目的組件原件不知道從何下手。
六、設計原則
在執(zhí)行過程中首先調研業(yè)內成熟的設計原則：例如蘋果的設計原則為創(chuàng)意審美的重要性、隱喻的價值、易用性原則和及時的反饋。螞蟻的AntDesign就是將自然、確定性、意義性和生長性作為它的設計價值觀。在結合自己業(yè)務的愿景和使命進行頭腦風暴，羅列出你認為影響所處行業(yè)的關鍵詞是什么，一起對應關鍵詞進行分類聚攏，最后抽離出適合自己業(yè)務的設計原則。
七、設計語言
在這之前要明確一個概念Design Token，即儲存樣式的載體，“Token”原本的意思是“令牌”，在工程邏輯中用于用戶身份與服務器端進行驗證，而在設計體系中，Design Token 則可以簡單理解為封裝的視覺樣式參數。
Design Token 最重要的意義是通過規(guī)定樣式的參數、和統(tǒng)一的命名規(guī)則做到設計與研發(fā)的樣式完全打通，進行無損耗的溝通，增強系統(tǒng)的可維護性。在真實產品設計、研發(fā)過程中，設計和研發(fā)命名不一致，數量少還好，當數量多了以后全局維護就變得困難了很多，但如果我們直接將這些參數分裝管理，整個過程的新增、改版就會清晰很多。
1. 顏色
顏色是頁面整體風格表現(xiàn)的重要基本元素，好的色彩配置可以準確的傳達有效信息和品牌感，梳理頁面的視覺層級關系，突出內容并平衡其他視覺元素。一般而言，一個產品的顏色體系會包含：主色、中性色、功能色。接下來根據顏色分類，將不同分類的顏色樣式逐一羅列出來。
主色：產品的品牌色，也是界面中出現(xiàn)最多的顏色，比如按鈕的顏色、重點操作等狀態(tài)。
中性色：在界面中調和色彩搭配，用來襯托其他顏色，一般應用在字體、分割線、背景色等。
功能色：向用戶明確傳達成功、警告、錯誤等狀態(tài)。
2. 文字
不同的字體大小和顏色文字信息，可以體現(xiàn)出內容的主次。在文字樣式中會包括：字號、字重、行高和字距等。選擇一款字體（推薦中文：微軟雅黑、英文：Aria），如果使用蘋方則Win系統(tǒng)中會出現(xiàn)字體丟失的情況，這里建議樣式創(chuàng)建要克制，盡可能保證樣式庫精簡適用。
字號：PC端最小可識別字體是12px ，需要區(qū)分字體層級，一般以偶數來進行間隔。
字重：除了使用字號，還可以通過字重來突出層級，常用采用 Regular 以及 Medium 的兩種字體重量，分別對應代碼中的 400 和 500。
行高：建議行號是字體的150%，通常字體越大行高越小。
間距：根據 WCAG 中的 AAA 標準，段落間距至少為字體大小的 1.5 倍。
3. 投影
陰影是存在于畫布元素中并通常會在背景邊框中延伸出對象。主要有外陰影、內陰影。陰影值應該遵循現(xiàn)實物理世界中物體的特性，物體的高度直接影響陰影，離地面越高陰影越大，模糊值越高，反之相反。
為了在不同層級使用陰影更加豐富，通常陰影定義三個層級，一級卡片陰影、二級選擇下拉popover陰影、三級對話框陰影。
八、Figma控件
1. 結構細分
首先要將原本的組件進行打散、細化、整合、重組，我們需要把一個組件中可以拆分成幾個模塊，使每個模塊都可以進行獨立的變化替換，這樣組件呈現(xiàn)出來的嘗試可以滿足全部場景。舉例:抽屜控件，可以分為出現(xiàn)位置（上下左右）、抽屜尺寸（大中?。?、標題區(qū)域（副標題、頭像、標簽、更多操作、tabs標簽）、按鈕區(qū)域這四個模塊，每個模塊可以獨立產生新的樣式。拆解維度到按鈕、圖標等最細顆粒后通常不會再進行拆分。
2. 新建組件
選中要組件化的元素，點擊頂部工具欄“Greate Componer”健即可創(chuàng)建成功，快捷健是“command+option+k”，創(chuàng)建成功的組件元素有實心的紫色菱形圖標，變?yōu)樽仙吙颉?/p>
創(chuàng)建好的組件分為父級和子級?創(chuàng)建出來的是父級組件，按住“option”鍵，將父級元素拖動到空白處，就創(chuàng)建出來一個子級（快捷健是“command+d”）
需要注意：更改父級組件，子級組件也會隨著發(fā)生改變；更改子級組件，父級組件不會改變。
3. 命名規(guī)則
命名規(guī)則是組件中不容忽視的問題，影響在使用過程中對組件的調用，使用「/」來為組件命名，用于給組件進行分類，這樣可以幫助 figma 判斷組件內元素的層級。例如：【抽屜/大號】，在使用組件的過程中命名規(guī)則會影響右側工具欄中的“Swap instance”，可以在這里進行切換控件，控件的位置層級和命名規(guī)范一致，合理的命名會讓整個組件庫布局調理清晰、結構縝密，幫助我們快速定位。
4. Auto layout
Auto layout 是 Figma 自動布局功能，創(chuàng)建帶有自動布局的組件，可以幫助我們實現(xiàn)背景隨內容調整、列表項目任意移動、列表間距快速調整等需求，這樣對于組件的拓展和應用會非常靈活。
以按鈕為例：創(chuàng)建一個按鈕，在面板屬性中“Auto layout”點擊“+”，或者使用鍵盤快捷鍵“SHIFT+A”，這時候就可以去調節(jié)自動布局的相關屬性了：
方向：可以調節(jié)多個元素是縱向排列合適豎向排列；
間距：控制元素和元素之間的間距，新版本支持設置負間距，可以輕松做出頭像堆疊效果；
容器：控制元素舉例框架上側、下側、左側、右側間距，可以統(tǒng)一設置，分別設置；
分布方式：“Packed”支持九種分布（左上、中上、右上、左中、中央、右中、左下、中下、右下）；“Space between”是平均分布，新版本支持在畫布中快捷調整；
調整對象：可以控制自動布局中的對象，固定的寬度或高度 （Fixed），擁抱內容 （Hug contents），填充容器 （Fill container）。
5. 變體功能
Figma 擁有強大的變體功能。同一個組件的不同狀態(tài)可以通過變體的方式靈活創(chuàng)建，方便用戶調用，變體中需要了解兩個功能：屬性 Property、值 Variant
屬性 Property：是組件的可變方面。例如：一個按鈕組件的屬性可以是尺寸、狀態(tài)，或是否有 icon，可以將其理解為分類。變體名稱遵循命名規(guī)范的結構，Property1=value, Property2=value, Property3=value。只有兩個屬性的選項可以現(xiàn)實為開關顯示，F(xiàn)igma 會自動將 true/false、yes/no 和 on/off 都識別為開關，在命名的時候Property1=true/false，Property1=yes/no，Property1=on/off
值 Variant：是每個屬性可用的不同選項。例如：狀態(tài)屬性可以有默認、懸浮、點擊和禁用等，可以將其理解為分類下的參數。
6. 組件說明/鏈接
創(chuàng)建完組件后，可以在每個組件的“Description”，輸入該組件的解釋說明，在引用組件的時，hover該組件上就出出現(xiàn)氣泡說明，方便用戶查看該組件的說明
同時還可以添加相關鏈接在組件描述中，設計人員在“ Inspect” 中點擊相關的按鈕直接跳轉，查看相關組件規(guī)范文檔，方便用戶使用。
九、設計文檔
組件文檔是指導設計怎么使用組件的重要指導說明，是不可搭建組件庫不可忽視的存在，一般是由組件名稱、基礎定義、使用說明、基礎構成、類型、尺寸布局、交互說明組成。
舉例彈窗組件的說明文檔：
組件名稱：對話框 Modal
基礎定義：用于承載信息且不離開當前頁面，可以幫助用戶更快更容易地完成任務。
使用說明：
要求用戶立即響應 ：使用對話框請求阻止用戶繼續(xù)操作；
通知用戶緊急信息 ：使用對話框通知用戶有關其當前任務的緊急信息，通常用于報告系統(tǒng)錯誤或告知結果；
確認用戶決定 ：使用對話框來確認用戶的決定，清楚描述當前行為可能導致的潛在后果，如果該行為具有破壞性或不可逆轉性，則使用報錯警告色。
需要承載少量輸入信息或者展示信息時，并且希望信息出現(xiàn)可以打斷當前操作。當對話框中內容過多，需要復雜的操作，甚至需要二次跳轉時，建議使用 抽屜 或 新開頁 ，而非對話框。
基礎構成：
標題區(qū)（必有） ：可以是純文字，也可以在文字前帶有icon來明示狀態(tài)；支持配置描述，作為輔助信息展示
正文（可選） ：可包含文字描述、表單、表格、步驟條、通知；
操作區(qū)（可選） ：操作區(qū)支持配置是否存在、支持配置按鈕文案及數量。彈窗達到最大高度時，操作區(qū)固定吸底
關閉按鈕 （可選） ：點擊可關閉彈窗；
黑色蒙層（必有） ：黑色蒙層覆蓋全頁面，蒙層下方的頁面內容不響應滾動和點擊。
類型：
通知對話框（用于警示、緊急、或簡單的二次彈窗確認）。
功能對話框（除標題、純文本內容和按鈕外，還需要承載更多復雜信息時）。
選項/展示對話框（內容不足以構成單獨頁面或不希望跳轉新頁面的對話框，多使用于搜索、設置、內容選擇）。
寬屏彈窗（建議用于承載左右聯(lián)動控件、樹結構、日歷、多列表格等信息復雜內容）。
布局尺寸：
對話框尺寸共 3 種，分別是小尺寸、中尺寸、大尺寸。對話框限定寬度，根據內容適應高度，最大高度為對話框距頁面上下 Padding 值為 60px 所計算的高度，支持滾動操作。
交互規(guī)則：
黑色蒙層的點擊 ：普通信息展示的對話框可通過點擊黑色蒙層來關閉對話框，但若是信息錄入的對話框，不建議點擊黑色蒙層關閉對話框，容易造成已填寫數據的丟失。
支持對話框打開二級，二級頁面需保持同寬，高度可隨內容適配。切換層級時，對話框高度以頂部標題區(qū)域為基準。
同時出現(xiàn)多個對話框，寬屏與大尺寸可在原對話框基礎上展開小尺寸或中尺寸對話框，建議最多同時出現(xiàn)兩個對話框。一般情況下不建議在小尺寸對話框基礎上，彈大尺寸對話框。對話框與對話框的層級需要區(qū)分，每一個對話框底部需疊加一個蒙層。
十、組件庫的維護
對組件所做的每一個優(yōu)化，都是基于用戶和場景的假設，可能正中用戶下懷，也有可能是一廂情愿。我們的優(yōu)化需要經得起用戶和市場的驗證，于是對組件庫進行了多次可用性測試。而每一次測試都會有意外發(fā)現(xiàn)。比如一些我們理所應當的操作，用戶根本理解不了。又或是我們精心打磨的細節(jié)，用戶其實毫不在意。所以驗證-迭代是組件庫不可或缺的環(huán)節(jié)，同時也是一個反復而漫長的過程。
每次組件樣式的迭代只需要更改父組件的樣式，然后更新發(fā)布。這是Figma 會通知到使用過組件的文件中，設計師進行更新就可以使用最新的版本。
十一、組件庫的使用
想要使用組件庫，首先要在“Libraries”打開所使用的組件庫，然后在 Assets 面板下，將需要使用的組件直接拖動至文件中，就可以直接使用了。
十二、組件庫參考
近些年各個大廠、B端行業(yè)頭部公司都建設很多完善且公開的組件庫，屬于一個比較成熟的市場狀態(tài)，那這時候會有小伙伴有有疑惑了，直接調用不可以嗎？為什么需要自己去搭建呢？原因是B端業(yè)務的特殊性市面上通用組件庫沒有辦法覆蓋每個業(yè)務的全部場景，一旦遇到需要特化處理的地方，去魔改組件成本也非常高，另外直接復用第三方會導致同質化嚴重，沒有設計差異化，所以搭建一套自己團隊的組件庫是非常有必要的。
下面列舉一些國內外比較成熟的組件庫，在搭建自己的組件庫的時候當作字典一樣進行參考，我們做不了巨人，可以做踩在巨人肩膀上的矮子。
Ant Design（螞蟻金服）
https://ant.design/docs/react/introduce-cn
Element（餓了么）
https://element.eleme.cn/#/zh-CN
Arco Design (字節(jié)跳動）
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端設計師價值
搭建完一套非常完善的組件庫后，有的設計師可能會陷入焦慮，覺得自己設計師的價值被逐漸弱化了，不需要設計師也可以搭建一套完整的頁面，其實不是的。
面對復雜的B端業(yè)務，還有大量可以沉淀的業(yè)務組件，比如在IM系統(tǒng)中個人名片是常用控件，就可以沉淀成業(yè)務組件。業(yè)務組件相比較基礎組件更加考驗設計是的創(chuàng)新能力和多業(yè)務的理解。需要所有B端設計師去花心思投入。
單純的B端UI、UE的崗位已經越來越少，現(xiàn)在市面上對B端設計的要求是全鏈路的能力，深入業(yè)務、為用戶體驗負責已經是大勢所趨，作為用戶體驗設計是只是把經歷放在按鈕、彈窗這些細節(jié)上顯然格局小了，我們要放眼為整個產品系統(tǒng)流程、全面的用戶體驗負責。
完善的設計系統(tǒng)是一把雙刃劍，它可以使整個系統(tǒng)得到統(tǒng)一、提效。而組件庫本事是一個非常復雜的系統(tǒng)，搭建過程中可以加深設計師對每個控件的理解，這件事本事就是一個創(chuàng)新的過程。另外需要注意不要讓組件庫成為限制設計師創(chuàng)造力的枷鎖，優(yōu)秀的設計師可以利用這些基礎的組件樣式，就像搭建積木一樣，創(chuàng)造出各種絢麗多彩的世界。
本文由@郭大毛毛設計筆記 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協(xié)議
也是設計轉的產品嗎？
在執(zhí)行過程中首先調研業(yè)內成熟的設計原則。這個太對了！一個成熟的設計原則更有參考價值。
如何打造B端設計組件庫，本文真的寫的很清晰很棒，對做B端的設計師很有用。