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