2021-12-27 12:26:29|已瀏覽：213次
隨著項目的不斷發展，設計團隊在不斷壯大，設計師之間的協作也越來越多，相應的溝通和協作成本在不斷增加。如何才能更高效的合作，并把設計質量和一致性做的更好，是我們需要去解決的問題。
本文將以QQ動漫設計系統為例，分享一些過程中的思考和經驗，拋磚引玉，希望對大家有所幫助。
問題之源—本地組件庫
在項目初期，團隊設計師的協作方式是通過一個本地的sketch規范文件，以復制粘貼的方式來復用一些元素和控件。在設計師協作人數不多，UI控件改動頻繁的情況下，這套流程可以比較快速的完成需求。
但隨著項目逐漸成熟，協作設計師人數變多、UI控件逐漸趨于穩定且需要復用的地方逐漸變多時，之前流程的不足就逐漸凸顯出來。
1.更新通知缺乏自動化
文件更新難以做到及時有效的通知到所有設計師，且需要人工在群里發通知，告知大家更新了文件。有些設計師暫時可能沒有相應的設計需求，可能會忽略更新后的文件，造成設計的不同步�；蛘叩鹊叫枰臅r候才去群里找更新的規范文件，版本容易搞錯且費時費力。
2.全局組件更新困難
由于組件樣式是通過復制或修改的方式應用到界面設計中，當規范文件更新時，無法智能的自動更新修改相應的組件，需要設計師人工核對哪些地方有修改。這樣很難保證大家的設計版本都能得到統一的更新，當大家使用的組件版本不一致時，輸出的界面就會出現雜亂無章的情況。
3.代碼復用率低
開發沒法全局調用代碼樣式，有些樣式可能需要反復復制使用，耗時費力，并因此產生的代碼臃腫，還會直接影響產品性能。
解決之道——云端組件庫
鑒于設計師目前多使用sketch+xshow的工作流程，而xshow正好也具備云端管理的能力，故決定以xshow作為橋梁，建立一個基于sketch+xshow的云端設計組件庫，以非常低的遷移和學習成本完成流程優化。
優化后的流程是把sketch本地組件庫通過xshow上傳至云端服務器，設計師通過xshow云端功能添加到sketch中，并在設計文件中嵌入這些云端組件。
這樣做能很好的解決上面說的問題：
1.更新通知自動化
更新文件不用再靠人工在群里發通知，設計師也不需要去找文件，而是在sketch中會自動進行提醒。一旦有更新，會在右上角顯示提醒消息，設計師只需要點擊提醒，下載最新組件文件即可完成更新。
2.全局組件一鍵更新
當更新組件庫文件后，界面中所有之前使用過云端組件的控件元素都會自動比對更新前后的差異，方便設計師判斷是否更新。這種更新最厲害的地方在于，更新是全局的，也就是一旦你確認了更新后的內容，所有界面都會自動按規范進行更新而無需設計師再逐個篩查。這樣做既能保證設計稿的一致性，也能大幅提高設計效率。
3.開發效率和質量大幅提升
開發通過代碼把一些常用的樣式進行封裝，在一些高度復用的場景中直接調用。一方面可以通過調用的形式減少重復樣式代碼的復制，精簡代碼，降低軟件包體積，另一方面也可以減少不必要的工作量還能方便后期維護。
實踐之行—云端組件庫搭建
想要高效解決問題，正確的方法很關鍵，這里我們用到的方法就是原子設計理論。2013年前端工程師 Brad Forst 將此理論思想運用在界面設計中，形成一套設計系統，包含5個層次：原子、分子、組織、模板、頁面，這套理論為組件庫的搭建提供了思路和方法。
在實際搭建過程中，因為組件庫的搭建工作量往往比較大，需要先明確流程和分工，主要包括以下幾個關鍵步驟：
1.明確工具流程
因為是搭建云端組件庫，所以首先需要有一個云端工具進行管理。針對以sketch為基礎的云端組件庫來說，常用的工具流程包括sketch cloud，各類云同步盤，第三方云數據庫自主部署等等。我們選擇的sketch+xshow工作流也是基于xshow具備云端管理功能，與其他流程本質上是一樣的，大家根據項目實際情況合理選擇就好。
2.全面匯總并分類
按原子理論由小到大來對常規控件進行匯總并分類。對于QQ動漫項目來說，常見的控件類別包括：顏色、字體、圖標、按鈕、導航、狀態欄、彈窗、列表、標簽等等。每個項目所需要整理的組件不盡相同，原則就是對要復用的元素進行整理。
3.制作樣式模板
為了便于維護和提升合作效率，將組件庫拆分為幾個不同的獨立文件，每一個文件由組件庫搭建小組成員獨立負責，減少混亂。
如果是有多位設計師參與時，因為組件庫的元素存在相互調用的情況，會遇到到底誰先做的問題。解決流程分2步：
1）由一位設計師把組件庫的原子級組件（主要包括顏色，字體，圖標）先做好，并建立分類組件標準模板，其他設計師在這些模板基礎上進行完善，保證組件庫在邏輯層級統一。
2）如果過程中遇到，自己組件中需要調用對方組件，比如某個圖標沒有在圖標組件文件中，但自己的列表中又需要，可以先用其他組件中的圖標代替，等圖標組件庫更新后，再同步更新這里的組件即可。
QQ動漫組件庫一共分了5個不同文件，分別是：基礎、操作、導航、反饋和內容。
本文由培訓無憂網千鋒教育專屬課程顧問整理發布。更多動漫設計培訓課程歡迎關注培訓無憂網動漫設計培訓或添加老師微信：15033336050
注：尊重原創文章,轉載請注明出處和鏈接 http://www.hebeijilong.cn/news-id-10300.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注動漫設計頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050
