這個春節，大家過的都很艱難。疫情當前希望大家都能保護好自己，儘量減少外出。當然待在家裡也不能一直頹廢著。可以適當鍛鍊、學習保持身心健康。雖然不知道疫情會持續多久，但是我們還是應該心懷希望。2020年一定會好起來的。
相信很多設計師朋友們不久之後就會回到工作崗位或者在家遠程辦公。特別是在遠程辦公時，如何高效溝通和協同，保持信息的同步和降低理解偏差無疑是至關重要的。而對於設計師而言，要想保持設計的統一和高效，一套完整的基於原子理論的組件庫是必不可少的。
相信還是有很多設計師在使用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的設計師來說能夠起到很大的作用。能夠幫助設計師快速的搭建頁面，並且保證設計的統一性。相信合理使用一定能給大家帶來事半功倍的效果。
寫在最後
最後向所有奮戰在一線工作人員們致敬，希望疫情早日退去；待到櫻花爛漫時，這個世界能夠恢復往日的美好。更重要的是能夠以史為鑑，避免一些人為的災難。我們應該銘記這一艱難的過程，和無數人自強不息的努力。總有一些人跑在別人的前面，守護者其他人。也希望在和平安詳的時候，大家能夠對醫生、軍人、教師、工人……他們這些默默付出的人報以尊重和感恩。·作者：懿凡設計
鏈接：遠程辦公學會用PS組件庫，提高300%的工作效率！ | 優設網 - UISDC
今天就分享到這裡啦~~
想了解更多UI方面的知識可以私信站長喲
閱讀更多 UI設計靠譜站長 的文章
