編輯導語：有一套合适B端産品設計師的組件庫就能夠大大提高自己的辦公效率。那麼，怎樣建立自己的組件庫呢？在本篇文章中，作者對組件庫進行了解析，總結了如何打造B端設計組件庫。感興趣的小夥伴，一起來看看吧!

各位B端設計師們在求職面試的時候，有沒有發現面試官都非常關注你有沒有搭建組件庫的能力，而且入職後每個團隊都會有一個負責組件庫的小組，那作為新手設計師怎麼快速加入？如果公司目前沒有組件庫，設計師怎樣推動建設？這篇文章詳細的為大家分享大廠設計師是怎麼從零到一搭建組件庫、過程中如何推動、和其他部門怎樣進行配合，來幫助各位新手設計師提升自己的職場競争力。

組件庫是一個設計界面元素的集合倉庫，要把各個場景中反複出現的控件沉澱下來，使用的時候不需要單獨設計，直接調用即可。

比如在B端業務中一些表格表單也會被大量使用，那麼我們就需要對表格、表單進行規範，在任何場景下都遵循這一規範，增加研發團隊的确定性節省不必要的設計，保持系統一緻性，讓設計師專注于創意最需要的地方。

組件庫帶給團隊的價值是一緻、高效、靈活。

一緻：一套标準化的設計規則可以傳達給用戶統一的品牌調性，減少用戶學習成本培養用戶習慣，讓産品擁有良好的用戶體驗。

高效：組件的使用規範和各種狀态隻要搭建一次就可以重複使用，設計師在設計新的需求的時候直接調用組件，不需要大量重複工作，把時間花在更有價值的事情上。研發側直接調用封裝好的組件就可以，避免重複造輪子，同時也降低了溝通成本

靈活：所有頁面的都是原子，在産品後期疊代中，隻要調整原子、按照不同的方式進行排布就可以獲得一個信息系統，這樣全局靈活性非常強，也非常便于系統維護。

原子設計其實是老生常談一套理論了，但是要講組件庫繞不開原子設計，在這裡我就再啰嗦幾句關于原子設計的起源和概念。

在化學領域中，世界上一切萬物都是由化學元素周期表組成的原子組成，原子組成分子，分子組成有機物，有機物構成生命。網頁設計師Brad Forst從這裡找到了靈感，我們設計的頁面是不是也有相對應的原子，通過這些原子不同的排列組成呢？于是在2013年将此理論結合設計領域的知識，創建了一套設計方法論——原子設計（Atomic Design），原子設計是我們搭建組件庫非常重要的一種思維模式，從底層開始思考從元素到頁面，這樣會對設計有更清晰的理解。

原子設計理論分為五個層面：原子、分子、組織、模闆、頁面。對應到設計中我們的顔色、字體、圓角等作為原子，通過各種組合排列最終搭建出頁面。根據原子設計理論，需要把原子設計的五個層面和我們組件的内容進行一一對應，先從最基礎的核心元素入手，進行組件庫搭建。

原子 (Atom)：是構成一般物質的最小單位，不可再分的基本微粒。對應組件：文字、顔色、圖标、布局、陰影。在界面中沒有辦法細分并且随意改變不會對整體等共恩感有影響。

分子 (Molecule)：是由原子按照一定等順序和空間排列而結合在一起的整體，對應在組件庫就是單個組件，按鈕、搜索框、表單這些，是由文字、顔色、圖标、布局、陰影進行組合構成的控件。

組織 (Organization) ：是指有諸多原子分子按照一定方式相互聯系起來的系統，在界面中可以理解相對複雜的組件，例如彈窗、導航欄、列表等。

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

頁面（Page）：頁面是模闆的具體實例，将實際内容填充進模版後形成頁面，是我們最後産出的高闆鎮視覺稿，也是産品的最終形态。

在開始動手之前需要明确自己所在團隊處于哪種階段，沒有一雙鞋适合所有人，精緻名貴的高跟鞋配上跑馬拉松的運動員顯然是不合适的。組件庫也是如此，沒有最好的隻有最合适的，要根據團隊當前的不同階段去進行判斷。越到後期需要投入的資源越多，同時給團隊帶來的價值也越大。下面列舉三種不同的團隊發展階段，來匹配你們團隊的情況吧：

團隊創建初期：産品定位不明确，設計師隻有一兩個人，設計師主要通過粗暴的複制粘貼設計稿就可以滿足，這個階段可以犧牲一些體驗上的一緻性，目的是項目需要快速上線進行驗證；

快速發展階段：随着業務方向越來越清晰，團隊規模的不斷擴張，設計團隊會有新的夥伴加入，每個設計師都有自己的想法，如果沒有一套明确的設計規則，會導緻頁面一緻性差，随意的設計也會增加開發成本；對于研發側每一個新的樣式都需要單獨寫一套，出現大量重複無意義的工作。這個階段是搭建組件庫的時機，需要去定義常用組件的視覺和交互保證頁面的一緻性、避免一次性設計；

團隊成熟階段：第三個階段是産品已經非常成熟，也有了基本組件的規範定義，同時有大量B端後台頁面，而B端後台頁面基本上都是表格頁、表單頁、詳情頁，這些複用性強的頁面，這時候如果每個頁面都要設計師對應産品文檔去調整字段，設計師的性價比就會變得極低。所以在這個階段的組件庫的服務對象不僅僅是設計師，設計師非常完善的制定出現率高的典型頁面布局規範後，産品經理、研發、運營人員等團隊所有的職能人員，可以直接跳過設計節，根據典型頁面規範套用生成頁面。

根據自己所在團隊的不同階段，需要去申請搭建組件庫的資源，搭建一套完善的組件庫就跟搭建一款産品一樣，絕對不是設計師可以獨立完成的，需要多方配合。這時候呢可以列舉一些關于組件庫遇到的問題，完成後可以帶給團隊什麼價值，去和leader申請設計資源，以及跨部門申請研發的人力資源。

正式立項後，作為搭建組件庫的的owner需要定義好整個時間節點，什麼時間點完成什麼事情，并且定期開會來同步大家的設計進度，來推動這件事情的順利進行。

設計過程中要和研發随時保持溝通，避免出現信息差，了解技術實現的邊界在哪，确認之後在開始進入設計階段，避免盲目設計完了以後，進入評審階段被告知實現不了，再重新返工浪費時間同時設計過程中要和相關研發随時保持溝通，避免出現信息差。

舉例在上家公司遇到的問題，當時的背景是整個大團隊分為7個業務線，每個業務線都搭建了自己的組件庫，前端技術選型都不同，導緻設計規範，業務組件等基建成果不可移植、全局的重複建設、資源浪費。現有Figma組件使用低效，源文件命名不規範組件不全等問題。

團隊内部也意識到了問題的存在，開始從0-1重新搭建，成立搭建組件庫的虛拟小組，由一個設計小組和研發小組共同組成。設計師的工作負責搭建、核查。完成搭建後小組成員同學一起集中check，記錄修改點、争論點，鼓勵充分讨論；修改完成後在進行複驗，全員無異議後鎖定畫闆交付開發評審并更進實現，在整個項目周期定期進行周會同步各方進度，及風險點。

接下來就可以正式進入設計階段了，需要産出的設計内容有設計原則、設計語言、組件庫和說明文檔。

設計原則：設計原則是做設計的标準，用來指導和衡量設計方案的優略，搭建一套組件庫，每個元素都需要圍着這個設計原則展開執行，他的意義是為接下來的設計提供方向。

設計語言：需要秉承設計原則和業務調性的基礎上進行定義，主要表現為形、色、字、質、構這些視覺元素。比如

Figma控件：通過設計原則、基礎樣式可以定義出來我們組件的樣式，就像一個倉庫一樣，包含了各種組件的所有樣式。

說明文檔：組件倉庫搭建好了，還需要配上使用說明書，具體某個組件該怎麼使用、什麼情況下使用哪種狀态，都需要一一說明，防止設計師面對玲琅滿目的組件原件不知道從何下手。

在執行過程中首先調研業内成熟的設計原則：例如蘋果的設計原則為創意審美的重要性、隐喻的價值、易用性原則和及時的反饋。螞蟻的AntDesign就是将自然、确定性、意義性和生長性作為它的設計價值觀。在結合自己業務的願景和使命進行頭腦風暴，羅列出你認為影響所處行業的關鍵詞是什麼，一起對應關鍵詞進行分類聚攏，最後抽離出适合自己業務的設計原則。

在這之前要明确一個概念Design Token，即儲存樣式的載體，“Token”原本的意思是“令牌”，在工程邏輯中用于用戶身份與服務器端進行驗證，而在設計體系中，Design Token 則可以簡單理解為封裝的視覺樣式參數。

Design Token 最重要的意義是通過規定樣式的參數、和統一的命名規則做到設計與研發的樣式完全打通，進行無損耗的溝通，增強系統的可維護性。在真實産品設計、研發過程中，設計和研發命名不一緻，數量少還好，當數量多了以後全局維護就變得困難了很多，但如果我們直接将這些參數分裝管理，整個過程的新增、改版就會清晰很多。

1. 顔色

顔色是頁面整體風格表現的重要基本元素，好的色彩配置可以準确的傳達有效信息和品牌感，梳理頁面的視覺層級關系，突出内容并平衡其他視覺元素。一般而言，一個産品的顔色體系會包含：主色、中性色、功能色。接下來根據顔色分類，将不同分類的顔色樣式逐一羅列出來。

主色：産品的品牌色，也是界面中出現最多的顔色，比如按鈕的顔色、重點操作等狀态。

中性色：在界面中調和色彩搭配，用來襯托其他顔色，一般應用在字體、分割線、背景色等。

功能色：向用戶明确傳達成功、警告、錯誤等狀态。

2. 文字

不同的字體大小和顔色文字信息，可以體現出内容的主次。在文字樣式中會包括：字号、字重、行高和字距等。選擇一款字體（推薦中文：微軟雅黑、英文：Aria），如果使用蘋方則Win系統中會出現字體丢失的情況，這裡建議樣式創建要克制，盡可能保證樣式庫精簡适用。

字号：PC端最小可識别字體是12px ，需要區分字體層級，一般以偶數來進行間隔。

字重：除了使用字号，還可以通過字重來突出層級，常用采用 Regular 以及 Medium 的兩種字體重量，分别對應代碼中的 400 和 500。

行高：建議行号是字體的150%，通常字體越大行高越小。

間距：根據 WCAG 中的 AAA 标準，段落間距至少為字體大小的 1.5 倍。

3. 投影

陰影是存在于畫布元素中并通常會在背景邊框中延伸出對象。主要有外陰影、内陰影。陰影值應該遵循現實物理世界中物體的特性，物體的高度直接影響陰影，離地面越高陰影越大，模糊值越高，反之相反。

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

1. 結構細分

首先要将原本的組件進行打散、細化、整合、重組，我們需要把一個組件中可以拆分成幾個模塊，使每個模塊都可以進行獨立的變化替換，這樣組件呈現出來的嘗試可以滿足全部場景。舉例:抽屜控件，可以分為出現位置（上下左右）、抽屜尺寸（大中小）、标題區域（副标題、頭像、标簽、更多操作、tabs标簽）、按鈕區域這四個模塊，每個模塊可以獨立産生新的樣式。拆解維度到按鈕、圖标等最細顆粒後通常不會再進行拆分。

2. 新建組件

選中要組件化的元素，點擊頂部工具欄“Greate Componer”健即可創建成功，快捷健是“command option k”，創建成功的組件元素有實心的紫色菱形圖标，變為紫色邊框。

創建好的組件分為父級和子級

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!