2021-3-19 鶴鶴
隨著項(xiàng)目的不斷發(fā)展，設(shè)計(jì)團(tuán)隊(duì)在不斷壯大，設(shè)計(jì)師之間的協(xié)作也越來越多，相應(yīng)的溝通和協(xié)作成本在不斷增加。如何才能更高效的合作，并把設(shè)計(jì)質(zhì)量和一致性做的更好，是我們需要去解決的問題。
本文將以 QQ 動漫設(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 控件改動頻繁的情況下，這套流程可以比較快速的完成需求。
但隨著項(xiàng)目逐漸成熟，協(xié)作設(shè)計(jì)師人數(shù)變多、UI 控件逐漸趨于穩(wěn)定且需要復(fù)用的地方逐漸變多時(shí)，之前流程的不足就逐漸凸顯出來。
1. 更新通知缺乏自動化
文件更新難以做到及時(shí)有效的通知到所有設(shè)計(jì)師，且需要人工在群里發(fā)通知，告知大家更新了文件。有些設(shè)計(jì)師暫時(shí)可能沒有相應(yīng)的設(shè)計(jì)需求，可能會忽略更新后的文件，造成設(shè)計(jì)的不同步。或者等到需要的時(shí)候才去群里找更新的規(guī)范文件，版本容易搞錯且費(fèi)時(shí)費(fèi)力。
2. 全局組件更新困難
由于組件樣式是通過復(fù)制或修改的方式應(yīng)用到界面設(shè)計(jì)中，當(dāng)規(guī)范文件更新時(shí)，無法智能的自動更新修改相應(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. 更新通知自動化
更新文件不用再靠人工在群里發(fā)通知，設(shè)計(jì)師也不需要去找文件，而是在 sketch 中會自動進(jìn)行提醒。一旦有更新，會在右上角顯示提醒消息，設(shè)計(jì)師只需要點(diǎn)擊提醒，下載最新組件文件即可完成更新。
2. 全局組件一鍵更新
當(dāng)更新組件庫文件后，界面中所有之前使用過云端組件的控件元素都會自動比對更新前后的差異，方便設(shè)計(jì)師判斷是否更新。這種更新最厲害的地方在于，更新是全局的，也就是一旦你確認(rèn)了更新后的內(nèi)容，所有界面都會自動按規(guī)范進(jìn)行更新而無需設(shè)計(jì)師再逐個(gè)篩查。這樣做既能保證設(shè)計(jì)稿的一致性，也能大幅提高設(shè)計(jì)效率。
3. 開發(fā)效率和質(zhì)量大幅提升
開發(fā)通過代碼把一些常用的樣式進(jìn)行封裝，在一些高度復(fù)用的場景中直接調(diào)用。一方面可以通過調(diào)用的形式減少重復(fù)樣式代碼的復(fù)制，精簡代碼，降低軟件包體積，另一方面也可以減少不必要的工作量還能方便后期維護(hù)。
想要高效解決問題，正確的方法很關(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 動漫項(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 步：
QQ 動漫組件庫一共分了 5 個(gè)不同文件，分別是：基礎(chǔ)、操作、導(dǎo)航、反饋和內(nèi)容。
4. 搭建本地組件庫
1?? 確定命名邏輯
提升設(shè)計(jì)效率，是組件庫存在的重要目標(biāo)之一，而合理的組件命名起到了至關(guān)重要的作用。組件的名稱要保證通用性，太獨(dú)立的命名可能不夠兼容其他場景，也會讓使用的同學(xué)產(chǎn)生誤解。
對于組件命名，要多與使用的設(shè)計(jì)師一起探討，因?yàn)槊總€(gè)人的習(xí)慣都不同，方不方便因人而異，所以需要做一些平衡。
比如在做圖標(biāo)命名邏輯的時(shí)候，糾結(jié)于要先按尺寸分（圖標(biāo)/序號類別/尺寸/圖標(biāo)名），還是按功能分（圖標(biāo) / 序號類別/尺寸/圖標(biāo)名/狀態(tài)），不斷調(diào)整多次，這時(shí)候就需要找大家一起探討，怎么才是最方便的。
命名的方法是盡可能按共用屬性由多到少的順序來整理。比如，圖標(biāo)共用的尺寸屬性多，就把尺寸歸到上層；如果圖標(biāo)功能分類比較集中，那就把功能名稱歸到上層。根據(jù)實(shí)際項(xiàng)目和設(shè)計(jì)師使用情況的不同，會有不同的命名形式，命名確保效率就好。
在梳理組件庫結(jié)構(gòu)命名時(shí)，先用思維導(dǎo)圖描繪一份結(jié)構(gòu)化地圖，方便前期討論及調(diào)整。明確層級關(guān)系后，用在多人合作時(shí)進(jìn)行參照，從而統(tǒng)一組件庫層級。在做這份結(jié)構(gòu)化地圖時(shí)，需要列好全部分類、層級、具體名稱及示例。
2?? 顏色
顏色庫的設(shè)計(jì)，需要將產(chǎn)品中可復(fù)用的顏色匯總并分組，比如品牌顏色，按鈕顏色，圖標(biāo)顏色，裝飾顏色等等，這樣可以使得用到顏色屬性的組件更加靈活。顏色的命名規(guī)范是：序號_功能/淺色 or 深色/序號 _ 屬性 / 序號 _ 狀態(tài)。例如，04 _ 按鈕色/淺色/01 _ 常規(guī)按鈕/04 _不可點(diǎn)
3?? 字體
字體樣式需要做全字重、顏色和左中右三種對齊方式，因?yàn)榘茨壳?sketch 的組件邏輯，還不能修改嵌套字體的屬性。這些屬性可以對應(yīng)到組件的命名上，字體組件的命名規(guī)范是：大小/序號對齊方式/屬性/用途，例如 42px/1 居左/常規(guī)/主文本。
邊做邊檢查。由于文字組件需要的命名特別多，很容易出錯，所以建議是最好每做一組，就檢查一遍。檢查的時(shí)候打開組件樣式，如果在組件預(yù)覽中發(fā)現(xiàn)重復(fù)或者結(jié)構(gòu)不對的地方，及時(shí)調(diào)整。
多行文本行高要注意。文字的行高要尤其注意，一定要在前期檢查好尤其是多行文本的行高。如果行高前期設(shè)置不對的話，非常影響后面文本的擴(kuò)展性，在用到多行文本時(shí)會遇到麻煩。想回頭修改的話，因?yàn)槭亲畹讓拥脑有枰饌€(gè)調(diào)整，所以代價(jià)是巨大的。
所以一定要開始設(shè)置字體組件之前就確定好行高，比如 QQ 動漫組件庫中的文字行高統(tǒng)一用文字大小的 1.5 倍，并取偶數(shù)作為文本的行高。當(dāng)然，這里的行高也不是完全規(guī)定死，有時(shí)候也需要視情況而定。
文本的粗細(xì)。文字的粗細(xì)也是要在一開始的時(shí)候就要設(shè)置周全，最好是給所有字號的文字都設(shè)置好不同粗細(xì)的組件，盡管可能開始用不到，但會提升文字的擴(kuò)展性，不然后面添加就會比較麻煩。
4?? 圖標(biāo)
圖標(biāo)組件最關(guān)鍵的地方在于使用邏輯和圖標(biāo)規(guī)范。比如，我現(xiàn)在做的圖標(biāo)邏輯是：圖標(biāo)/類別/使用場景/具體名稱/尺寸/不同狀態(tài)，主要是按使用的頻次來整理的。也可以有其他邏輯方式，以方便使用為準(zhǔn)。
圖標(biāo)規(guī)范也會影響組件庫的整理和日常使用，在做圖標(biāo)組件時(shí)，需要定義好圖標(biāo)的最大范圍和最小范圍，嵌套起來使用才不會出錯。圖標(biāo)的規(guī)范要嚴(yán)謹(jǐn)，同一個(gè)尺寸下的圖標(biāo)視覺面積要保持一致。不然在大小這個(gè)層級就會出現(xiàn)，雖然是相同尺寸的圖標(biāo)切圖范圍，但圖標(biāo)的體量看起來卻并不一致。
將純色或漸變圖標(biāo)中的顏色剝離，并使用顏色組件進(jìn)行嵌套，這樣做既方便替換又能減少圖標(biāo)組件庫的復(fù)雜度。
對于圖標(biāo)的多種狀態(tài)，建議做在同一個(gè)層級中方便選擇。
對于圖標(biāo)來說，直接對畫板設(shè)置切片即可，不需要再加切片框。如果你的組件庫之前用了很多切片來導(dǎo)出圖標(biāo)，可以用 Automate 插件直接清理或設(shè)置全局的切片，非常方便。
5?? 控件
有了顏色、字體、圖標(biāo)這些基礎(chǔ)元素后再來制作組件就會相對簡單很多，只需要通過拼裝把通用性強(qiáng)的組件做出來即可。這里可能需要注意設(shè)置好布局方式，讓內(nèi)容盒子隨著內(nèi)容的變化而變化。新版 sketch 的布局設(shè)置相對于老版本的確實(shí)會方便很多，理解起來很容易，所以這就不多討論了。
6?? 代碼組件化
在開發(fā)側(cè)進(jìn)行前端 UI 組件庫的封裝，實(shí)現(xiàn)從設(shè)計(jì)到開發(fā)的樣式統(tǒng)一，提升效率和質(zhì)量。
在優(yōu)先級上，代碼組件化跟 UI 組件化可以同步進(jìn)行，開發(fā)先寫好框架，然后隨著 UI 組件化的逐步確定，代碼也進(jìn)行相應(yīng)補(bǔ)充。
5. 構(gòu)建云端組件庫
本地組件庫構(gòu)建完成后，即可通過 xshow 上傳至云端，再由 xshow 直接添加到本地 sketch 中，完成整個(gè)使用流程的搭建。
6. 權(quán)限與維護(hù)
為了更好的維護(hù)云端組件庫，避免更新混亂，需要成立組件庫小組，只允許組件庫小組成員有編輯權(quán)限。日常需求中，如有新增組件，需提交給組件庫小組成員審核，通過后方可上傳至云端組件庫。
在制作組件文件的過程中，需遵循先自測后上傳的原則，避免在上傳后發(fā)現(xiàn)一些諸如命名錯誤、遺漏、嵌套混亂等問題，造成麻煩。
7. 編寫規(guī)范文檔
文檔的作用是給相關(guān)同事查閱，形成標(biāo)準(zhǔn)化使用流程。一些在組件庫中難體現(xiàn)的設(shè)計(jì)說明、未形成組件元素的使用規(guī)則或一些常見問題都可以寫在文檔里。
8. 問題與技巧
1??善用插件，提高效率
我其實(shí)是一個(gè)非常喜歡“偷懶”的人，但凡需要重復(fù)，批量的工作，我都覺得應(yīng)該有更聰明的辦法。這里我推薦幾個(gè)我在做組件庫中經(jīng)常用到的小插件。
2??不斷測試
組件庫的設(shè)計(jì)過程中，一定要邊做邊測試，尤其是在前期確立邏輯的時(shí)候，要不斷檢測是否真的好用。
3??內(nèi)容更新權(quán)限與維護(hù)需要專人專辦
舉例：假設(shè)我負(fù)責(zé)字體，那么后續(xù)所有的字體更新相關(guān)都只找我來修改。若其他人在組件庫內(nèi)找不到相應(yīng)的組件搭建頁面而又特別高頻使用，需要向組件庫小組提出申請，并由對應(yīng)組件庫管理員進(jìn)行更新，不可以私自修改組件庫內(nèi)容并上傳。
組件化思維不僅僅應(yīng)用在 UI 領(lǐng)域，甚至在各行各業(yè)都需要建立組件化，比如對于一些時(shí)效性非常強(qiáng)的新聞產(chǎn)品，就需要針對突發(fā)事件內(nèi)容模板化，以期能第一時(shí)間發(fā)布；如果想追熱點(diǎn)，組件化能夠使得產(chǎn)品具備隨時(shí)跟進(jìn)熱點(diǎn)的能力，提升市場競爭力等等。
組件化是一種思維模式，也是如今設(shè)計(jì)師必不可少的能力。通過組件庫提升效率能夠讓設(shè)計(jì)和開發(fā)有更多的時(shí)間去打磨產(chǎn)品細(xì)節(jié)，從而打造出對用戶更加友好的產(chǎn)品，賦能設(shè)計(jì)的價(jià)值。
文章來源：優(yōu)設(shè)網(wǎng) 作者：騰訊ISUX
藍(lán)藍(lán)設(shè)計(jì)( www.gyxygd.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gyxygd.cn