QQ動(dòng)漫的設(shè)計(jì)系統(tǒng)之路

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

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