這個(gè)春節(jié)，大家過的都很艱難。疫情當(dāng)前希望大家都能保護(hù)好自己，盡量減少外出。當(dāng)然待在家里也不能一直頹廢著。可以適當(dāng)鍛煉、學(xué)習(xí)保持身心健康。雖然不知道疫情會(huì)持續(xù)多久，但是我們還是應(yīng)該心懷希望。2020年一定會(huì)好起來的。

相信很多設(shè)計(jì)師朋友們不久之后就會(huì)回到工作崗位或者在家遠(yuǎn)程辦公。特別是在遠(yuǎn)程辦公時(shí)，如何高效溝通和協(xié)同，保持信息的同步和降低理解偏差無疑是至關(guān)重要的。而對于設(shè)計(jì)師而言，要想保持設(shè)計(jì)的統(tǒng)一和高效，一套完整的基于原子理論的組件庫是必不可少的。其實(shí)對于Sketch用戶而言，倒沒有太大的問題。Sketch已經(jīng)有了一套完整且智能化的組件搭建系統(tǒng)了。

相關(guān)教程：

但是相信還是有很多設(shè)計(jì)師在使用PS做UI設(shè)計(jì)（別問我怎么知道，問就是老板不給買MAC）。這些年Adobe也在迎頭趕上，不斷在PS中增加UI設(shè)計(jì)的相關(guān)功能，比如在PS 2019的某個(gè)版本中增加了組件庫的功能。雖然還不是那么智能和強(qiáng)大，但是對于PS用戶來說能夠提升不少工作效率。經(jīng)過團(tuán)隊(duì)幾個(gè)月的使用，保守估計(jì)能夠提升300%的工作效率，是不是有點(diǎn)心動(dòng)。

PS組件庫的安裝

我們怎么找到組件庫呢，如果你的PS是2019比較新的版本或者2020版，就可以在「窗口-庫」里面找到。是的，這個(gè)就是庫功能的更新版，最新版的組件庫應(yīng)該是下面這樣的。

如果你的PS 2019顯示不是上圖這樣的，可以嘗試更新PS，或者打開Creative Cloud可以單獨(dú)檢查更新組件庫功能，

可能存在的問題及解決方法

• 更新PS為最新版仍然無法顯示上圖所示面板或者出現(xiàn)卡死閃退等問題，請將你的Windows系統(tǒng)更新為Win 10；
• 顯示Creative cloud賬號(hào)問題，請嘗試在Creative Cloud程序（官網(wǎng)可下載）中重新登錄賬號(hào)，然后重啟PS。

PS組件庫的功能

首先，完整版的組件庫是支持組件庫的本地保存分享和云端分享協(xié)作的。大家在上圖面板中就可以看到。但是很可惜，大陸版是閹割版。我們無法使用云端協(xié)同功能。本地文件分享其實(shí)已經(jīng)能夠滿足很多使用場景了。只要組件庫不是頻繁的更新影響倒是不大。如果組件庫有修改，就需要將更新后的組件庫文件本地發(fā)送給其他同事，然后重新導(dǎo)入。

通過PS的組件庫我們可以搭建以下幾個(gè)類別的組件：

• 模塊化組件及常用界面（如導(dǎo)航欄、彈框、列表和APP主要界面等）
• 顏色庫（支持純色和漸變色）
• 字符樣式（包含字體、字重、字號(hào)、顏色、字距和行間距，無法記錄文本對齊方式）
• 矢量圖形圖標(biāo)（支持形狀、色彩和圖層樣式）
• 圖層樣式

如何搭建PS組件庫

首先需要說明的是，PS的組件庫并不像sketch那么的智能，支持靈活的組件嵌套和自適應(yīng)等。它更像是一個(gè)具有分類功能的倉庫，你能夠?qū)|西丟進(jìn)倉庫里分門別類，在需要的時(shí)候再將需要的東西拿出來。

創(chuàng)建組件的方式有兩種，一種是直接將要制作組件的內(nèi)容拖到組件面板中，另一種是點(diǎn)擊組件組左下角的加號(hào)創(chuàng)建組件，需要注意的是顏色樣式、字符樣式、圖層樣式只能通過點(diǎn)擊「+」的方式創(chuàng)建。

1. 創(chuàng)建模塊化組件

所謂模塊化組件，其實(shí)就是包含多個(gè)元素的集合。常見的有導(dǎo)航欄、彈框、列表和APP主要界面等。這一類組件的創(chuàng)建可以直接將命好名的組直接拖入組件庫面板，然后按照規(guī)則分組。這里建議組件命名采用易于理解的方式描述。比如下圖中的兩個(gè)單行列表可以分辨命名為「標(biāo)題+箭頭」和「圖標(biāo)+標(biāo)題+詳細(xì)信息+圖標(biāo)+箭頭」。

但是，對于開發(fā) 同學(xué)而言他們的組件命名往往是一串英文。這里我們可以「點(diǎn)擊組件-右鍵-添加注釋」在里面增加開發(fā)使用的組件命名以及適配規(guī)則等內(nèi)容。在標(biāo)注的時(shí)候就可以直接復(fù)制了。

對于組件的分類，根據(jù)不同的業(yè)務(wù)需求可以有不同的分組方式。比如列表組件可以分為單行列表、雙行列表、多行列表等。然后各個(gè)分組下再繼續(xù)細(xì)分如單行列表下的單選列表、多選列表、其他列表等。同時(shí)，建議在組件里做好點(diǎn)擊、選中等不同狀態(tài)并設(shè)置為隱藏，在調(diào)用的時(shí)候自由選擇。

其實(shí)PS的組件庫是支持一定的組件嵌套的，不過個(gè)人覺得比較雞肋。比如對于單行列表，可能標(biāo)題文本都是相同的，我們可以先將標(biāo)題文本建立組件，然后再將標(biāo)題文本嵌入多個(gè)單行列表中。這樣修改標(biāo)題文本組件以后，所有的單行列表組件也能同步更新。更多使用場景大家可以自行探索。

這里需要單獨(dú)提一下組件的調(diào)用。我們?nèi)粘Ｊ褂弥?，需要按住「Alt」然后用鼠標(biāo)將組件拖入頁面就可以單獨(dú)編輯內(nèi)容了。如果直接將組件拖入頁面，編輯的就是源組件需要大家注意。

2. 創(chuàng)建顏色樣式

創(chuàng)建顏色庫有兩種方式，一種是繪制矢量圖形然后點(diǎn)擊組件庫左下角的「+」號(hào)，可以分別添加矢量圖形的填充顏色和描邊顏色；另一種是添加前景色為顏色樣式。顏色樣式可以應(yīng)用在矢量圖形和文本圖層中，選中圖層后直接點(diǎn)擊色彩樣式就可以快速應(yīng)用。

3. 創(chuàng)建字符樣式

字符樣式同樣是通過組件庫左下角的「+」號(hào)添加，可以包含字體、字重、字號(hào)、顏色、字距和行間距信息，但是無法記錄文本對齊方式。在使用時(shí)需要注意。

4. 創(chuàng)建矢量圖形圖標(biāo)

圖形樣式支持形狀、色彩和圖層樣式屬性，可以通過該功能創(chuàng)建自己團(tuán)隊(duì)的圖標(biāo)庫

5. 創(chuàng)建圖層樣式

圖層樣式也是通過組件庫左下角的「+」號(hào)添加，只要選中的圖層/組包含圖層樣式屬性即可添加，比較常用的場景是用來建立統(tǒng)一的卡片投影樣式。

雖然PS的組件庫不是那么智能，但是對于使用PS的設(shè)計(jì)師來說能夠起到很大的作用。能夠幫助設(shè)計(jì)師快速的搭建頁面，并且保證設(shè)計(jì)的統(tǒng)一性。相信合理使用一定能給大家?guī)硎掳牍Ρ兜男Ч?/p>

寫在最后

最后向所有奮戰(zhàn)在一線工作人員們致敬，希望疫情早日退去；待到櫻花爛漫時(shí)，這個(gè)世界能夠恢復(fù)往日的美好。更重要的是能夠以史為鑒，避免一些人為的災(zāi)難。我們應(yīng)該銘記這一艱難的過程，和無數(shù)人自強(qiáng)不息的努力?？傆幸恍┤伺茉趧e人的前面，守護(hù)者其他人。也希望在和平安詳?shù)臅r(shí)候，大家能夠?qū)︶t(yī)生、軍人、教師、工人……他們這些默默付出的人報(bào)以尊重和感恩。

歡迎關(guān)注作者的微信公眾號(hào)：「懿凡設(shè)計(jì)」