設計還原五步曲-視覺篇

在這個快速發展、迭代、更新的時代，互聯網產品的用戶體驗重視度越來越高，而其中的產品設計還原也成為了重要的一環。在緊張而有限的時間內，效率與方法得到了考驗，設計師們如何與前端工程師們密切配合，提升設計還原度，成了設計師的主要工作之一。本人根據自己過往的幾次實戰項目經驗，整理並與大家交流一番。

一、設計規範

設計規範對於設計師的重要性不言而喻，那麼對於前端工程師又能直接吸收多少呢？經溝通以及之前的設計驗收來看，我們內部的工程師在標準色、標準字、布局間距、按鈕樣式方面基本沒什麼大問題，然而列表、輸入框、標籤選項、彈窗等(以上每個類別展現形式不止一種)還原就不是那麼完美了。其實，這不能怪前端工程師們，規範的內容確實過多，短暫時間內不可能完全消化，有時設計師自己也會有出錯。那麼可見，一個視覺設計規範遠遠不夠的。

至於設計規範的具體內容，網上發布的有很多，大家請自行搜索查看。

提供一個規範集合，涵蓋眾多應用。

此步驟作用：讓前端工程師對項目的前端樣式有個整體了解，快速查找部分基礎樣式(如標準色、標準字、按鈕等)。

二、設計輸出

關於設計輸出，我們常見是源文件、效果圖、切圖，之前常見的人工標註減少了(因為現在插件工具marketch、pxcook等都能讓工程師們很方便看到標註)。

不過我們還是有標註，因為很多數據是後台傳輸到前端，有圖片、有文字，每個內容都需要給運營設置一個上傳標準(如圖所示)。

除了額外的一些標註，我們還需要寫一些重要部分設計說明，例如模塊區分、局部特殊設計(該內容根據自身產品而確定)。

此外，如果是APP一級頁面，可以考慮預載入圖，我們常見的一些應用天貓、ins、Facebook等都有，所以需要輸出預載入圖的源文件。

此步驟作用：讓前端工程師快速查找所需文件，源文件用於標註查詢尺寸，效果圖用於查看整體效果，切圖用於頁面搭建，重點內容標註能讓界面減少誤差，而預載入圖能讓界面用戶體驗更佳。

三、設計宣講

如果產品設計的內容比較容易理解，那麼，這一步可以省略。否則，需要設計師們約個會議室，與前端工程師們講解一下規範和輸出的內容，確保當場能解決問題。設計師做好會議記錄(記錄問題及解決方案，以及達成的共識)，並且在會議結束後以郵件形式發送前端們，抄送產品和運營，確保會議內容的傳達到位。值得注意的是，該宣講主要是解決問題，提升效率，提高質量，而不是劃清某種責任界限，因為可能存在為了更好的解決某個問題，增加設計師們的些許工作量。

此步驟作用：讓設計師與前端工程師相關問題達成一致，提升工作效率。

四、開發溝通

前端工程師們安排好自己的任務，往往會有個開發排期表，從開始到結束，以及中間的相關時間細節。設計師們根據排期表，時刻關注進度，需要每隔一段時間諮詢一下「XX項目有碰到什麼問題嗎？需要我幫什麼嗎？」但與此同時，建議千萬不要這麼問的過於頻繁，對比自己設計時被催儘快完成的畫面，你就會控制頻次，也會注意一些用語表達。同理，這個過程的溝通也是以解決實際問題和提升效率為目的。

此步驟作用：主要是設計師主動推進項目發展，減少前端開發過程中的不夠完美之處，同時也是為了加快工作效率。

五、測試驗收

經過了前面的四步，設計師們還是不能高枕無憂。為確保產品上線前的最後一步，設計師們仍要參與測試驗收環節。測試環節一般有兩個大步驟，第一是產品功能測試，讓功能從頭到尾走一遍，直到第一步完成，設計師們才參與第二大步驟：交互與視覺驗收。

不同的機型(iPhone、小米、華為、vivo、三星、oppo等)，不同的版本的系統(iOS、安卓各自不同版本)，不同狀態的數據(字元的長短、內容的有無等)都需要設計師們過一遍，一有問題及時提交，前端工程師們會根據問題進行修復，直到驗收通過，應用完成打包，等待上線。

此步驟作用：確保項目的交互與視覺能達到上線要求，並堅守最後一關，直至上線成功。

結語

那麼，做到以上五步是否設計還原就能達到100%？答案是基本做不到，幾乎不存在100%還原的情況，除非是很簡單的一些頁面。至於要還原到多少，90%？95%？99%？……每個設計師心中都有一個標準，項目時間不等人，有限的時間內做到最好，我們希望是做到99.9999%。

如今設計還原已成為設計師日常考核之一，需要大家重視，也相信大家會在工作中總結出更好的相關流程和經驗，從而提升產品設計的還原度。