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

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

相關教程：

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

PS組件庫的安裝

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

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

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

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

PS組件庫的功能

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

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

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

如何搭建PS組件庫

首先需要說明的是，PS的組件庫并不像sketch那么的智能，支持靈活的組件嵌套和自適應等。它更像是一個具有分類功能的倉庫，你能夠將東西丟進倉庫里分門別類，在需要的時候再將需要的東西拿出來。

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

1. 創建模塊化組件

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

但是，對于開發 同學而言他們的組件命名往往是一串英文。這里我們可以「點擊組件-右鍵-添加注釋」在里面增加開發使用的組件命名以及適配規則等內容。在標注的時候就可以直接復制了。

對于組件的分類，根據不同的業務需求可以有不同的分組方式。比如列表組件可以分為單行列表、雙行列表、多行列表等。然后各個分組下再繼續細分如單行列表下的單選列表、多選列表、其他列表等。同時，建議在組件里做好點擊、選中等不同狀態并設置為隱藏，在調用的時候自由選擇。

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

這里需要單獨提一下組件的調用。我們日常使用中，需要按住「Alt」然后用鼠標將組件拖入頁面就可以單獨編輯內容了。如果直接將組件拖入頁面，編輯的就是源組件需要大家注意。

2. 創建顏色樣式

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

3. 創建字符樣式

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

4. 創建矢量圖形圖標

圖形樣式支持形狀、色彩和圖層樣式屬性，可以通過該功能創建自己團隊的圖標庫

5. 創建圖層樣式

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

雖然PS的組件庫不是那么智能，但是對于使用PS的設計師來說能夠起到很大的作用。能夠幫助設計師快速的搭建頁面，并且保證設計的統一性。相信合理使用一定能給大家帶來事半功倍的效果。

寫在最后

最后向所有奮戰在一線工作人員們致敬，希望疫情早日退去；待到櫻花爛漫時，這個世界能夠恢復往日的美好。更重要的是能夠以史為鑒，避免一些人為的災難。我們應該銘記這一艱難的過程，和無數人自強不息的努力。總有一些人跑在別人的前面，守護者其他人。也希望在和平安詳的時候，大家能夠對醫生、軍人、教師、工人……他們這些默默付出的人報以尊重和感恩。

歡迎關注作者的微信公眾號：「懿凡設計」