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

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://www.hebeijilong.cn/news-id-10300.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實性請自行核實或聯(lián)系我們，了解更多相關(guān)資訊請關(guān)注動漫設(shè)計頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費申請試課。關(guān)注官方微信了解更多：150 3333 6050