起點讀書改版實戰！如何通過優化視覺流程大幅提高工作效率？
產品視覺設計大致是由80%產品介面和20%運營設計組成。80%的產品設計，屬於理性，有規律的部分；而20%運營設計，屬於感性，表達創意的部分。本文想討論的就是這80%理性的產品設計。面對產品不斷迭代，產品框架和結構不斷複雜化，視覺設計師如何對工作流程進行反思和優化，從而實現幹得更少，做得更多的目的，做一個高效的設計師。
設計語言不統一，元件運用不規範等情況，大部分網際網路產品都存在，原因有很多種。而作為產品視覺設計師，觀其表更應審其內。瞭解產品邏輯，理解互動思維，將視覺相似、功能相近（或其他可界定維度）模組整合，統一標準。如此既能保證產品功能的完整，又能保證控制元件統一，視覺可控。
藉著起點讀書APP 改版的契機，我們重新梳理了全域性 UI 控制元件，以及設計師之間，設計和開發之間的合作方式。通過幾個月的實踐，有了一些收穫和心得，沉澱總結出來以供分享和交流。
關鍵詞：元件化和 Libraries 功能。
Libraries 功能是什麼？怎麼用 → ofollow,noindex" target="_blank">《實用全面！教你用Sketch Libraries構建元件庫/設計體系》
所謂元件化是將產品設計中重複出現的控制元件整理歸類，究其共性，以最小顆粒重組，通過整齊排布，並最終以準確易懂的語言來命名；使用過程中既可準確定位，又方便維護和修改，這就是元件化。而 Libraries 功能是 Sketch 中的多人協作的元件管理系統。瞭解了這兩個概念，開啟本文正篇。因為產品視覺設計師工作性質問題，此流程優化涉及到兩個角色，設計師與開發。
編者注：什麼是元件化設計 → 《進階必讀！可能是最全面的元件化開發與設計指南》
一、設計師與設計師
1. 以往設計稿維護
以往設計師各自獨立維護設計稿，每個人的習慣各不相同，大致兩類：
- 獨立維護好幾份設計檔案（按版本或板塊分割檔案），沒有完整的元件庫。
- 擁有一份檔案，各個板塊與不同版本堆積在此檔案中，擁有獨立的元件庫。
2. 以往合作流程
請隨我們一起走一遍以往的合作流程：
- 設計師甲對視覺稿A的某個共用元素進行改動；
- 口頭或原始檔傳播形式告知設計師乙；
- 設計師乙根據最新改動手動刷一遍設計稿B；
- 設計改動是頻繁的，設計師乙也有改動影響到設計師甲；
- 按照1、2、3的流程再走一遍，如此反反覆覆。
這樣的合作模式既浪費時間，也在消磨設計師追求完美的意識。我們也嘗試過用很多流程、工具來優化這個合作的工作流，包括一些 Sketch 外掛，但結果並不理想。而如果設計師在這種損耗中放棄抵抗，最後的結果就是每個人負責的板塊視覺風格迥異，甚至連基本元件也不統一。
3. 現在設計稿維護
Sketch 的 Libraries 功能為這個問題帶來了轉機，這個功能，我們將設計稿與元件庫分開，元件庫單獨存放在雲端，設計稿存放雲端或本地；設計稿的所有控制元件呼叫都從元件庫抓取、同步，也可以不斷向下細分多稿並存，並相互影響。
4. 現在合作流程
更改元件的操作
- 設計師甲更改了元件庫中的某個元件；
- 元件庫儲存改動，並實時將改動自動同步到雲端；
- 設計師乙的設計稿收到雲端同步的提示，並根據提示點選同步，乙的檔案即完成同步。
新增元件的操作
- 設計師甲在元件庫中添加了部分元件；
- 元件庫儲存改動，並實時將改動自動同步到雲端；
- 設計師乙需要用到甲新建的控制元件時去雲端拉取即可，不產生重複勞動。
自動化規範的生成
因為個人習慣，通常專案都會維護一套規範檔案，不過是在專案定稿階段，但是隨著專案週期的拉長，以及不斷的調整變動，規範檔案會因版本過低失去其本身價值。元件庫的應用對這一現狀有了極大的改觀。具體步驟如下：
- 專案空檔期對元件庫的檔案進行排版規整，排布到元件庫的一個子目錄下，稍加命名、排版即可形成初始規範檔案；
- 當設計師修改元件時，元件庫會實時更新；
- 新增元件時，在空檔期把新建的元件再排版到規範中即可。
如此，元件庫可以始終保證同步。有時效性的規範，才體現出了規範的價值。
5. 優化後的結果
成本降低
舉一個最簡單的時間的例子，做一張設計稿，若以前要消耗1.5小時；現在用新方法只需要1小時，拆分一下0.7小時是製作元件庫的時間，0.3小時是設計消耗時間。這樣看來其實提高的效率也一般，但是如果把設計稿量放大到100倍，以前的方案需要消耗150小時；但是新方案只需要花費35+15小時，量大了，生產力其實會變的更加高效，因為這100個頁面中公共元素不需要再設計，相似板塊可以複用，所以時間減半。
而其實成本降低最高的體現是後期維護，因為運用了元件庫，不需要以前那樣一處一處的改正。設計初期，工具還沒這麼發達，在 PS 裡面做設計稿，改一個頂部欄的樣式可能就需要改動幾十個頁面，而現在維護起來，只需要改動一處，所有共用部分即可實時響應。大大降低了時間，提高了生產力。
交叉同步
交叉同步，不佔用各自時間，還可產生雙倍暴擊效果。舉個例子：設計時 A 花1小時修改導航，設計師 B 花1小時修改工具欄。在以往的流程中，雙方可能至少還要花1小時，前期溝通，後期刷稿，而現在這個同步時間幾乎可以忽略了。
修改可見
借用 Sketch 的 Libraries 功能，所有的改動都有列表提示，讓其他設計師可以二次確認，防止意外發生。
檔案變小
設計檔案從開始的 187M 減小到 72+7M，7M 是元件庫的大小。設計檔案的大小對設計師來說意義還是比較大的，會影響到 Mac 執行效率和設計時的手感。
二、設計師與程式員
與程式設計師的合作主要是檔案交接，以及線下交流，我們主要以檔案的交接入手，進行優化。
1. 以往提供
視覺標註
以往提供的檔案存在以下問題：
- 每份檔案都是相對獨立的，出自不同設計師之手；
- 開發只看視覺標註來進行頁面還原，沒有其他檔案做參考；
- 相同板塊因經手的人不一樣開發出來的效果也可能不同，即產生了重複開發。
img icon
以往提供的檔案存在以下問題：
- 同一個 icon 會產生大量重複切圖（顏色不同的 icon 都需要切圖）；
- 切圖多，App 檔案過大；
- img icon 顯示效果比較模糊，體驗較差。
圖形類切圖
以往提供的檔案存在以下問題：
- 檔案不聚類，沒有總覽；
- 尺寸凌亂，沒有規章；
- 設計風格不一致，看上去不像同一個 App 的配圖。
2. 現在提供
可能你會產生疑問，這不是提供的檔案更多了嗎？不著急，這些檔案雖然多了，但其實這是必要的，雖然提供的檔案多了，但是花費的時間是變少的，質量也是提高的，我們一個個分析。
控制元件規範（半自動化生成）
剛才我已經簡單介紹過控制元件規範是如何形成的了，現在我們來看，我們這樣做會帶來哪些具體好處：
思維同步，我們提出的元件化思維跟有追求的程式設計師的元件化思維是基本一致的，所以在合作中，這兩個角色間的理解程度會相應提高，並慢慢的互相理解，減少了很多不必要的時間浪費。
模組總覽，起點改版的規範都是按照型別細分的，定位查詢比較方便，既節省了程式設計師的時間，也能讓每個元件的還原擁有規範依據。
節約資源，這裡舉例來說明，上圖是同一個產品三個頁面的截圖，可以看出同樣的元件，因為是不同的程式設計師開發，所以產生了三種不同的前臺表現。這個在產品最終還原中算比較常見的 bug，但也是不能容忍的。而現在通過我們整理的規範，很容易就可以定位到此控制元件，並解決問題。
走查定位，其實這個問題剛才的圖也可以解釋這一點，以前設計師都是對比單個設計稿來走查。現在通用元件的走查可以用控制元件規範來對比查詢。這不僅幫助我們提高了效率，還可以一次性定位大部分頁面的問題。畢竟再優秀的設計結果，也依賴於開發的實現還原。設計師不能只關注視覺稿的交付，也必須要為最終在使用者面前展現的結果負責。所以輸出一份規範文件，還是非常有用的。
視覺標註（自動化）
直接推薦外掛 Sketch Measure，可以快速生成整套 html 的標註檔案。
目錄式表現，上圖中間部分是視覺稿的元件擺放展示，開發者可以根據設計師輸出的 html 標註檔案準確定位到元件命名，平時的開發只需要用到視覺標註檔案，控制元件有疑問時，還可根據命名去規範檔案中查詢詳細規則。
SVG 類 icon（手動但成本很小）
向量圖示的好處毋庸質疑，無論是從設計角度還是到產品還原角度，都應該安利給整個團隊。
- 靈活多變，可以隨便變化任意尺寸、顏色，而且只需要切一次就解決以前一個 icon 切了幾十個的現狀。
- 體積小，一個 SVG 格式的 icon，比單個的 img icon 都要小很多。
- 高清顯示，無論手機螢幕的解析度是多少，顯示都不會失真。
圖形類切圖（手動但成本很小）
- 歸類排列，通過以上圖片可以看到，將所有的標籤類切圖或者不需要切圖的部分都已經整理到同一個文件中。不僅如此，其他型別切圖也都有統一整理，這裡不一一展示。
- 用色，尺寸都是在規範之中，匯出也是一鍵式的。
3. 優化後的結果
所有流程可見
整個專案合作中，流程可見，我們的每一步都有跡可循，不會產生冗餘工作。
設計結果條理清晰
元件庫、規範檔案，以及最終的視覺稿，每個檔案的結構內容都保持整潔清晰，無論是交接，還是傳播都比較容易理解。
節省開發資源
所有元件均有總覽，重複開發的問題減少。最終既節省了開發資源，也保證還原品質。
問題快速定位
這一點主要是影響了後期的開發還原，前文也提到，視覺走查時，可根據還原結果對比規範，準確定位元件的還原問題，並迅速跟進。
總結
結合元件化和 Libraries 功能對視覺設計流程的優化。可以發現設計師之間，降低了協作成本，提升了工作效率，變相改善了設計結果；設計師和開發之間，優化交接流程，更可控的交付物，以雙贏的方式推動開發更好地設計還原。
歡迎關注「閱文體驗設計YUX」公眾號：
圖片素材來源：undraw.co