前言
產(chǎn)品視覺(jué)設(shè)計(jì)大致是由80%產(chǎn)品界面和20%運(yùn)營(yíng)設(shè)計(jì)組成。80%的產(chǎn)品設(shè)計(jì)，屬于理性，有規(guī)律的部分；而20%運(yùn)營(yíng)設(shè)計(jì)，屬于感性，表達(dá)創(chuàng)意的部分。本文想討論的就是這80%理性的產(chǎn)品設(shè)計(jì)。面對(duì)產(chǎn)品不斷迭代，產(chǎn)品框架和結(jié)構(gòu)不斷復(fù)雜化，視覺(jué)設(shè)計(jì)師如何對(duì)工作流程反思和優(yōu)化，從而實(shí)現(xiàn)干得更少，做得更多的目的，做一個(gè)「高效」但偷懶的設(shè)計(jì)師。
設(shè)計(jì)語(yǔ)言不統(tǒng)一，組件運(yùn)用不規(guī)范等情況，大部分互聯(lián)網(wǎng)產(chǎn)品都存在，原因種種。而作為產(chǎn)品視覺(jué)設(shè)計(jì)師，觀其表更應(yīng)審其內(nèi)。了解產(chǎn)品邏輯，理解交互思維，將視覺(jué)相似、功能相近（或其他可界定維度）模塊整合，統(tǒng)一標(biāo)準(zhǔn)。如此既能保證產(chǎn)品功能的完整，又能保證控件統(tǒng)一，視覺(jué)可控。
借著起點(diǎn)讀書(shū) APP 改版的契機(jī)，我們重新梳理了全局 UI 控件，以及設(shè)計(jì)師之間，設(shè)計(jì)和開(kāi)發(fā)之間的合作方式。通過(guò)幾個(gè)月的實(shí)踐，有了一些收獲和心得，沉淀總結(jié)出來(lái)以供分享和交流。
關(guān)鍵詞：組件化和 Libraries 功能。
所謂組件化是將產(chǎn)品設(shè)計(jì)中重復(fù)出現(xiàn)的控件整理歸類(lèi)，究其共性，以最小顆粒重組，通過(guò)整齊排布，并最終以準(zhǔn)確易懂的語(yǔ)言來(lái)命名；使用過(guò)程中既可準(zhǔn)確定位，又方便維護(hù)和修改，這就是組件化。而 Libraries 功能是 Sketch 中的多人協(xié)作的組件管理系統(tǒng)了解了這兩個(gè)概念，開(kāi)啟本文正篇。因?yàn)楫a(chǎn)品視覺(jué)設(shè)計(jì)師工作性質(zhì)問(wèn)題，此流程優(yōu)化涉及到兩個(gè)角色，設(shè)計(jì)師與開(kāi)發(fā)。
一、設(shè)計(jì)師與設(shè)計(jì)師
以往設(shè)計(jì)稿維護(hù)
以往設(shè)計(jì)師各自獨(dú)立維護(hù)設(shè)計(jì)稿，每個(gè)人的習(xí)慣各不相同，大致兩類(lèi)：
1. 獨(dú)立維護(hù)好幾份設(shè)計(jì)文件(按版本或板塊分割文件)，沒(méi)有完整的組件庫(kù)。
2. 擁有一份文件，各個(gè)板塊與不同版本堆積在此文件中，擁有獨(dú)立的組件庫(kù)。
以往合作流程
請(qǐng)隨我們一起走一遍以往的合作流程：
1. 設(shè)計(jì)師甲對(duì)視覺(jué)稿A的某個(gè)共用元素進(jìn)行改動(dòng)
2. 口頭或源文件傳播形式告知設(shè)計(jì)師乙
3. 設(shè)計(jì)師乙根據(jù)最新改動(dòng)手動(dòng)刷一遍設(shè)計(jì)稿B
4. 設(shè)計(jì)改動(dòng)是頻繁的，設(shè)計(jì)師乙也有改動(dòng)影響到設(shè)計(jì)師甲
5. 按照1、2、3的流程再走一遍，如此反反復(fù)復(fù)
這樣的合作模式既浪費(fèi)時(shí)間，也在消磨設(shè)計(jì)師追求完美的意識(shí)。我們也嘗試過(guò)用很多流程、工具來(lái)優(yōu)化這個(gè)合作的工作流，包括一些 Sketch 插件，但結(jié)果不甚理想。而如果設(shè)計(jì)師在這種損耗中放棄抵抗，最后的結(jié)果就是每個(gè)人負(fù)責(zé)的板塊視覺(jué)風(fēng)格迥異，甚至連基本組件也不統(tǒng)一。
現(xiàn)在設(shè)計(jì)稿維護(hù)
Sketch 的 Libraries 功能為這個(gè)問(wèn)題帶來(lái)了轉(zhuǎn)機(jī)，這個(gè)功能，我們將設(shè)計(jì)稿與組件庫(kù)分開(kāi)，組件庫(kù)單獨(dú)存放在云端，設(shè)計(jì)稿存放云端或本地；設(shè)計(jì)稿的所有控件調(diào)用都從組件庫(kù)抓取、同步，也可以不斷向下細(xì)分多稿并存并相互影響。
現(xiàn)在合作流程
1. 更改組件的操作
a. 設(shè)計(jì)師甲更改了組件庫(kù)中的某個(gè)組件
b. 組件庫(kù)保存改動(dòng)，并實(shí)時(shí)將改動(dòng)自動(dòng)同步到云端
c. 設(shè)計(jì)師乙的設(shè)計(jì)稿收到云端同步的提示，并根據(jù)提示點(diǎn)擊同步，乙的文件即完成同步
2. 添加組件的操作
a. 設(shè)計(jì)師甲在組件庫(kù)中添加了部分組件
b. 組件庫(kù)保存改動(dòng)，并實(shí)時(shí)將改動(dòng)自動(dòng)同步到云端
c. 設(shè)計(jì)師乙需要用到甲新建的控件時(shí)去云端拉取即可，不產(chǎn)生重復(fù)勞動(dòng)
3. 自動(dòng)化規(guī)范的生成
因?yàn)閭€(gè)人習(xí)慣，通常項(xiàng)目都會(huì)維護(hù)一套規(guī)范文件，不過(guò)是在項(xiàng)目定稿階段，但是隨著項(xiàng)目周期的拉長(zhǎng)，以及不斷的調(diào)整變動(dòng)，規(guī)范文件會(huì)版本過(guò)低失去其本身價(jià)值。組件庫(kù)的應(yīng)用對(duì)這一現(xiàn)狀有了極大的改觀。具體步驟如下：
a. 項(xiàng)目空檔期對(duì)組件庫(kù)的文件進(jìn)行排版規(guī)整，排布到組件庫(kù)的一個(gè)子目錄下，稍加命名、排版即可形成初始規(guī)范文件
b. 當(dāng)設(shè)計(jì)師修改組件時(shí)，組件庫(kù)會(huì)實(shí)時(shí)更新
c. 添加組件時(shí)，在空檔期把新建的組件再排版到規(guī)范中即可
如此，組件庫(kù)可以始終保證同步。有時(shí)效性的規(guī)范，才體現(xiàn)出了規(guī)范的價(jià)值。
優(yōu)化后的結(jié)果
1. 成本降低
舉一個(gè)最簡(jiǎn)單時(shí)間的例子，做一張?jiān)O(shè)計(jì)稿，若以前要消耗1.5小時(shí)；現(xiàn)在用新方法只需要1小時(shí)，拆分一下0.7小時(shí)是制作組件庫(kù)的時(shí)間，0.3小時(shí)是設(shè)計(jì)消耗時(shí)間。這樣看來(lái)其實(shí)提高的效率也一般，但是如果把設(shè)計(jì)稿量放大到100倍，以前的方案需要消耗150小時(shí)；但是新方案只需要花費(fèi)35+15小時(shí)，量大了，生產(chǎn)力其實(shí)會(huì)變的更加高效，因?yàn)檫@個(gè)100個(gè)頁(yè)面中公共元素不需要再設(shè)計(jì)，相似板塊可以復(fù)用，所以時(shí)間減半。
而其實(shí)成本降低最高的體現(xiàn)是后期維護(hù)，因?yàn)檫\(yùn)用了組件庫(kù)，不需要以前那樣一處一處的改正，初做設(shè)計(jì)時(shí)期，工具還沒(méi)這么發(fā)達(dá)，在 PS 里面做設(shè)計(jì)稿，改一個(gè)頂部欄的樣式可能就需要改動(dòng)幾十個(gè)頁(yè)面，而現(xiàn)在維護(hù)起來(lái)，只需要改動(dòng)一處，所有共用部分即可實(shí)時(shí)響應(yīng)。大大降低了時(shí)間，提高了生產(chǎn)力。
2. 交叉同步
交叉同步，不占用各自時(shí)間，還可產(chǎn)生雙倍暴擊效果。舉個(gè)例子：設(shè)計(jì)時(shí) A 花1小時(shí)修改導(dǎo)航，設(shè)計(jì)師 B 花1小時(shí)修改工具欄。在以往的流程中，雙方可能至少還要花1小時(shí)，前期溝通，后期刷稿，而現(xiàn)在這個(gè)同步時(shí)間幾乎可以忽略了。
3. 修改可見(jiàn)
借用 Sketch 的 Libraries 功能，所有的改動(dòng)都有列表提示，讓其他設(shè)計(jì)師可以二次確認(rèn)，防止意外發(fā)生。
4. 文件變小
設(shè)計(jì)文件從開(kāi)始的 187M 減小到 72+7M，7M 是組件庫(kù)的大小。設(shè)計(jì)文件的大小對(duì)設(shè)計(jì)師來(lái)說(shuō)意義還是比較大的，會(huì)影響到 Mac 運(yùn)行效率和設(shè)計(jì)時(shí)的手感，當(dāng)然用 iMac Pro 的同行可以飄過(guò)。
二、設(shè)計(jì)師與程序員
與程序員的合作主要是文件交接，以及線下交流，我們主要以文件的交接入手，進(jìn)行優(yōu)化。
以往提供
1. 視覺(jué)標(biāo)注
以往提供的文件存在以下問(wèn)題：
a. 每份文件都是相對(duì)獨(dú)立的，出自不同設(shè)計(jì)師之手
b. 開(kāi)發(fā)只看視覺(jué)標(biāo)注來(lái)進(jìn)行頁(yè)面還原，沒(méi)有其他文件做參考
c. 相同板塊因經(jīng)手的人不一樣開(kāi)發(fā)出來(lái)的效果也可能不同，即產(chǎn)生了重復(fù)開(kāi)發(fā)
2. img icon
以往提供的文件存在以下問(wèn)題：
a. 同一個(gè) icon 會(huì)產(chǎn)生大量重復(fù)切圖（顏色不同的 icon 都需要切圖）
b. 切圖多，App 文件過(guò)大
c. img icon 顯示效果比較模糊，體驗(yàn)較差
3. 圖形類(lèi)切圖
以往提供的文件存在以下問(wèn)題：
a. 文件不聚類(lèi)，沒(méi)有總覽
b. 尺寸凌亂，沒(méi)有規(guī)章
c. 設(shè)計(jì)風(fēng)格不一，看上去不像同一個(gè)App的配圖
現(xiàn)在提供
可能你會(huì)疑問(wèn)這不是提供的文件更多了嗎？不著急，這些文件雖然多了，但其實(shí)這是必要的，雖然提供的多了，但是花費(fèi)的時(shí)間是變少的，質(zhì)量也是提高的，我們一個(gè)個(gè)分析。
1. 控件規(guī)范（半自動(dòng)化生成）
剛才我已經(jīng)簡(jiǎn)單介紹過(guò)控件規(guī)范是如何形成的了，現(xiàn)在我們來(lái)看，我們這樣做會(huì)帶來(lái)哪些具體好處：
a. 思維同步，我們提出的組件化思維跟有追求的程序員的組件化思維是基本一致的，所以在合作中，這兩個(gè)角色間的理解程度會(huì)相應(yīng)提高，并慢慢的互相理解，減少了很多不必要的時(shí)間浪費(fèi)。
b. 模塊總覽，起點(diǎn)改版的規(guī)范都是按照類(lèi)型細(xì)分的，定位查找比較方便，既節(jié)省了程序員的時(shí)間，也能讓每個(gè)組件的還原擁有規(guī)范依據(jù)。
c. 節(jié)約資源，這里舉例來(lái)說(shuō)明，上圖是同一個(gè)產(chǎn)品三個(gè)頁(yè)面的截圖，可以看出同樣的組件，因?yàn)槭遣煌某绦騿T開(kāi)發(fā)，所以產(chǎn)生了三種不同的前臺(tái)表現(xiàn)。這個(gè)在產(chǎn)品最終還原中算比較常見(jiàn)的bug，但也是不能容忍的。而現(xiàn)在通過(guò)我們整理的規(guī)范，很容易就可以定位到此控件，并解決問(wèn)題。
d. 走查定位，其實(shí)這個(gè)問(wèn)題剛才的圖也可以解釋這一點(diǎn)，以前設(shè)計(jì)師都是對(duì)比單個(gè)設(shè)計(jì)稿來(lái)走查。現(xiàn)在通用組件的走查可以用控件規(guī)范來(lái)對(duì)比查找。這不僅幫助我們提高了效率，還可以一次性定位大部分頁(yè)面的問(wèn)題。畢竟再優(yōu)秀的的設(shè)計(jì)結(jié)果，也依賴于開(kāi)發(fā)的實(shí)現(xiàn)還原。設(shè)計(jì)師不能只關(guān)注視覺(jué)稿的交付，也必須要為最終在用戶面前展現(xiàn)的結(jié)果負(fù)責(zé)。所以輸出一份規(guī)范文檔，還是非常有用的，良心建議。
2. 視覺(jué)標(biāo)注（自動(dòng)化）
a. 直接推薦插件 Sketch Measure，可以快速生成整套 html 的標(biāo)注文件。
b. 目錄式表現(xiàn)，上圖中間部分是視覺(jué)稿的組件擺放展示，開(kāi)發(fā)者可以根據(jù)設(shè)計(jì)師輸出的 html 標(biāo)注文件準(zhǔn)確定位到組件命名，平時(shí)的開(kāi)發(fā)只需要用到視覺(jué)標(biāo)注文件，控件有疑問(wèn)時(shí)，還可根據(jù)命名去規(guī)范文件中查找詳細(xì)規(guī)則。
3. SVG 類(lèi) icon（手動(dòng)但成本很小）
矢量圖標(biāo)的好處毋庸贅述，無(wú)論是從設(shè)計(jì)角度還是到產(chǎn)品還原角度，都應(yīng)該安利給整個(gè)團(tuán)隊(duì)。
a. 靈活多變，可以隨便變化任意尺寸、顏色，而且只需要切一次就解決以前一個(gè) icon 切了幾十個(gè)的現(xiàn)狀。
b. 體積小，一個(gè) SVG 格式的 icon，比單個(gè)的 img icon 都要小很多。
c. 高清顯示，無(wú)論手機(jī)屏幕的分辨率是多少顯示都不會(huì)失真，強(qiáng)迫癥患者的福音。
4. 圖形類(lèi)切圖（手動(dòng)但成本很?。?/strong>
a. 歸類(lèi)排列，通過(guò)以上圖片可以看到，將所有的標(biāo)簽類(lèi)切圖或者不需要切圖的部分都已經(jīng)整理到同一個(gè)文檔中。不僅如此，其他類(lèi)型切圖也都有統(tǒng)一整理，這里不一一展示。
b. 用色，尺寸都是在規(guī)范之中，導(dǎo)出也是一鍵式的。
優(yōu)化后的結(jié)果
1. 所有流程可見(jiàn)
整個(gè)項(xiàng)目合作中，流程可見(jiàn)，我們的每一步都有跡可循，不會(huì)產(chǎn)生冗余工作。
2. 設(shè)計(jì)結(jié)果條理清晰
組件庫(kù)、規(guī)范文件，以及最終的視覺(jué)稿，每個(gè)文件的結(jié)構(gòu)內(nèi)容都保持整潔清晰，無(wú)論是交接，還是傳播都比較容易理解。
3. 節(jié)省開(kāi)發(fā)資源
所有組件均有總覽，重復(fù)開(kāi)發(fā)的問(wèn)題減少。最終既節(jié)省了開(kāi)發(fā)資源，也保證還原品質(zhì)。
4. 問(wèn)題快速定位
這一點(diǎn)主要是影響了后期的開(kāi)發(fā)還原，前文也提到，視覺(jué)走查時(shí)，可根據(jù)還原結(jié)果對(duì)比規(guī)范，準(zhǔn)確定位組件的還原問(wèn)題，并迅速跟進(jìn)。
總結(jié)
結(jié)合組件化和 Libraries 功能對(duì)視覺(jué)設(shè)計(jì)流程的優(yōu)化?？梢园l(fā)現(xiàn)設(shè)計(jì)師之間，降低了協(xié)作成本，提升了工作效率，變相改善了設(shè)計(jì)結(jié)果；設(shè)計(jì)師和開(kāi)發(fā)之間，優(yōu)化交接流程，更可控的交付物，以雙贏的方式推動(dòng)開(kāi)發(fā)更好地設(shè)計(jì)還原。
后續(xù)我們將深入到組件化的細(xì)節(jié)，討論如何構(gòu)建組建化，敬請(qǐng)期待。
