KIT組件庫本質上是一個集合的Sketch文件，由原子、分子、組織、模板、頁面組成。原子理論支撐可復用、可修改、易于協同和維護。
由Google推出的當時媲美蘋果全新設計語言的Material Design，Material Design也是最為經典組件庫設計。現如今阿里的Ant Design和Element給我們提供了一套完整可復用的組件庫。
2021-10-31 鶴鶴
本文將從理論到實踐，從軟件到插件，再到不同應用場景拆解和團隊協同的重構，一步步教你如何搭建產品KIT組件庫。也給大家帶來逆天的Anima插件教程，組件化設計的必備插件，目前國內還比較少有文章講到。手把手！嘴對嘴！堪稱全網最細保姆級教程！
一個成熟的設計團隊，都會為產品制定設計規范，搭建產品KIT組件庫，組件化思維也是設計師的必備思維之一。組件庫會讓團隊協作變得高效且一致，讓團隊成員專注于深耕體驗和細節，實現設計向產品賦能。極大的節省設計和開發成本，優化用戶在界面流轉間的感知差異體驗。
KIT組件庫本質上是一個集合的Sketch文件，由原子、分子、組織、模板、頁面組成。原子理論支撐可復用、可修改、易于協同和維護。
由Google推出的當時媲美蘋果全新設計語言的Material Design，Material Design也是最為經典組件庫設計。現如今阿里的Ant Design和Element給我們提供了一套完整可復用的組件庫。
原子設計是將界面設計中最小元素——原子，組合嵌套為分子、組織、模板、頁面的系統規范化設計過程。
原子Atoms，我們知道是指化學反應不可再分的基本微粒。原子在化學反應中不可分割，但在物理狀態中可以分割的。原子由原子核和繞核運動的電子組成，所以原子是構成物質的最小粒子這就不對了。
但在界面設計中我們所說的原子是構成界面的最小顆粒度元素，在設計中無法再被拆分或者拆分下去已無意義的最小單位。比如不同顏色樣式、文字樣式、輸入框、icon圖標、分割線等。
由原子按照一定的規律和目的組成的部分為分子，在界面設計中比如Button按鈕、swittch開關、非模態彈窗Toast等，可以理解為比較簡單的小組件。
將不同的分子與原子組合就組成了組織。比如頭像與信息組成的聯系人容器卡片、Table列表、Nav-bar、Tab-bar等等。
將組織與分子、原子進行特定的組合就形成了模板。這一步已經能展示界面的主要功能和交互了。一般這一步得到的結果就是我們日常工作中的原型圖，產品的大致形態也慢慢清晰。所以模板可以理解成未上色的界面。
最終輸出的高保真設計圖即為我們說的表現層的頁面Pages。將模板填充信息和圖片內容，就得到了高保真設計界面。
以最近做的一個NFT項目為例子，展示具體搭建細節的全過程。
命名按照：一級分類 / 二級分類 / 三級分類 。例如：一級標題樣式/蘋方/常規/灰階0
其中 “/” 為層級結構分隔符，Sketch會自動識別。組件庫的搭建需要按照層級規范命名，從最外層到最內層，就像一個抽屜，每一層都對應放著東西。規范的命名會使后期調用維護、團隊協同變得清晰高效。
我們設計一般都需要定義顏色樣式，一般有主色調（Main tone）、輔助色（Minor）、漸變色（Gradient）、字體的灰階度（Gray scale）等。選中你需要創建樣式的顏色，點擊「外觀 - 創建」，在輸入框內輸入層級規范命名。
定義文字樣式，文字具有字體、大小、字重、灰階等屬性，選中文字，點擊【外觀-新建】，在輸入框內輸入層級規范命名。
當我們需要切換一個定義好的文字樣式時，比如從“閱讀文本樣式”更換為“一級標題樣式”，只需要選中文字 - 點擊「當前文檔」下定義的文字樣式 - 點擊需要更改的文字樣式即可。
當我們需要對定義好的文字樣式進行修改時，比如在設計的過程中突然感覺"閱讀文本樣式"字體小了點，為了優化閱讀體驗需要增大字號。
1. 單個修改 - 解綁
將文字調整更改為你需要的大小或字重，此時只對單個文本修改，不對其他文本產生影響，點擊解綁，便可與定義好的樣式分離。
2. 整體同步 - 更新
將文字調整更改為你需要的大小或字重，樣式名稱后會出現 "*" 星號，此時代表未保存，且更新按鈕激活，點擊更新按鈕則所有使用該樣式的字段都會更改，整體同步更新。
組件是將元素定義為標準化可復用的集合體，對組件進行規范的命名，形成高效設計的KIT組件庫。
選中我們需要定義的文本字段，注意！根據實際應用場景選擇合適的文本對齊方式，否則修改字段信息是會出錯。這里文本選擇左對齊，點擊 「創建控件」- 按照層級規范命名，選擇從左往右布局 - 點擊 「覆蓋層」即可對文本字段內容進行修改。
1. 單個標簽
當設計完標簽后，對標簽創建組件。依次選中便簽中的文字“LIMIT”、“2000份”，依次將文本選擇左對齊，步驟同上。將整個標簽打組，點擊 「創建控件」- 按照層級規范命名，選擇從左往右布局（這里注意！從左往右布局表示標簽在更改字段信息后，便簽左邊固定不動，從左往右自適應） - 在覆蓋層修改文本字段信息，庫存標簽組件自適應。
2. 標簽修改
如果我們覺得這個庫存標簽設計的不滿意，或者還需新增倒計時標簽、已售標簽，那怎樣又該怎么做的？
第一步：這時我們新建一個Sketch文件，命名為「 *** KIT 組件庫」。選中標簽圖標復制，將圖標粘貼到新建文件內，注意！此時需要給圖標添加合適的畫板，并按規范命名。
第二步：將Sketch文件保存到桌面，拖動到「首選項-組件庫」內。
第三步：選中組件，回車可進入控件（組件）頁面，可直接調用定義好的控件，進行修改。
Tips：這里畫板的作用是
（1）畫板是用來規范固定組件位置和大小的，成套系的KIT Library需要建立畫板。
（2）畫板組件在創建后，調用時只固定大小和邊界。
（2）如果只是做較少的界面，較少的復用的樣式，就可以不用做畫板。
3. 多個標簽
當頁面需要不止一個標簽時，就需要新增標簽，通常為左右或上下布局。若直接增加一個標簽修改字段，文本標簽不會自適應。 和之前操作一致，將新建的標簽新建組件后，可實現標簽文本自適應。
4. Sketch素材調用
繼續添加商品作者組件、價格組件。點擊右邊覆蓋層可修改文本字段。點擊文字右邊小icon可調用Sketch自帶的數據。
將前面定義好的所有組件整合到容器中，形成可直接復用的商品信息容器組件。
第一步：調用定義好的閱讀文本樣式，注意！直接拖過來即可，文本框的長度左右拉到合適的左右間距，這里不需要動文本框的高度，否則會出錯。將底部容器（卡片）的收起到合適的高度
第二步：選中整體打組，創建組件。注意! 此時選擇從上向下布局。
第三步：選中整體，在右側覆蓋層可對文本進行編輯，輸入文本字段，此時容器高度實現自適應。
頁面可一步步拆解為模板、組織、分子到原子。原子和分子可組合嵌套重構為組織、模板和頁面。
如果上下同時有卡片的情況該怎么呢? 當然，我們完全可以將它們一起定義組件，但有沒有其他更便捷，更靈活的方法呢？這里跟大家介紹Anima插件的使用，會使得大家在搭建組件庫時變得更加靈活高效。
Anima插件為一款在線自動響應式的插件，其中的STACK與PADDING功能簡直是Sketch設計必備，簡直逆天。
1. PADDING功能
新建一個文本，當點擊PADDING后，會自動生成一個底板，選中底板可對其進行編輯，更改顏色、原角度等。在PADDING輸入框內可輸入距離上下左右的邊距。此時注意文本的對其方式，左對齊一般適合標簽使用較多，而居中對齊適合一般的居中按鈕，如立即支付、立即報名等。
2. STACK功能
將三個標簽分別打組，再全選整體打一個組，點擊STACK，選擇左右排版和居中對齊，輸入你需要的間距。此時Anima插件最牛的STACK功能就是可以雙擊選中任一個標簽，拖拽可改變排列順序，松手后還可以自適應。
1. 團隊不同成員或新來設計師之間協同配合，保證輸出的一致性和穩定性。
2. 統一的組件庫樣式，會減輕用戶在頁面流轉間的疑惑感和理解成本，使用戶體驗得到了提高。
1. 減少相同模塊的重復設計。一個產品功能流轉、頁面交互必定會涉及到大量的重復設計的樣式與組件。試想一下，如果每一個都重新設計將是一個巨大的時間成本浪費。
2. 如果從產品的全生命周期來看，搭建好設計中臺KIT組件庫，并與開發進行溝通，能減少前端開發樣式，將時間更多的放在功能交互體驗和項目推動上，極大提高了效率。
1. 建立完善的設計規范和KIT組件庫，提高組件庫優化迭代效率。組件庫團隊協同自動更新。
2. KIT組件庫一鍵修改，也可通過組件分離功能（解綁）單獨對樣式進行修改，工作中需要對設計反復調整打磨，可進行批量一鍵更改，單個模塊的單獨修改。
什么時候時候搭建組件庫？先定義規范都是扯淡！所謂實踐才是檢驗真理的唯一標準，“在設計開始之前就制定設計規范，是不切實際的做法，你會發現做好的規范在實際操作中是無用且白費精力的”摘自《破繭成蝶 用戶體驗設計師的成長之路》。所以組件庫中的組件必定是經過反復修改后適合產品以及可后期可復用的。
并不是所有的設計都需要做設計規范或者KIT組件庫。組件庫的搭建本身就是一個耗費時間人力的事情，如果是一次性項目那根本就沒有必要做組件庫了。是否需要創建樣式或組件取決于該樣式或組件在后續的工作中是否會被復用或復用的頻次。也會減少前端工程師重復開發CSS樣式以及后臺數據的封裝成本。
將組件都定義在新建的Sketch文件中，將文件發給你的團隊其他成員。步驟同上。
第一步：新建一個Sketch文件，命名為「 *** KIT組件庫」，將組件都創建在新建文件內。
第二步：將Sketch文件發送給團隊其他成員，拖動到Sketch「首選項-組件庫」內。
第三步：直接調用定義好的組件。
共享組件庫個人使用 Sketch Cloud，但組件庫有更新Sketch右上角會有提示，及時溝通更新即可。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務