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