編者按：設計還原如何做才能達到至少80%的落地效果？本文從設計前期的嚴謹，設計中期的積極溝通到設計后期的主動跟進3個方面，讓你的設計方案完美落地。

1. 關于設計還原

設計還原是開發實現的效果不斷校正并與設計稿保持一致的過程。在項目開發的流程中，設計還原和功能測試一樣，是上線前最后的質檢工作。設計界面是直接呈現給用戶的，還原度的高低影響用戶對產品的第一印象。

設計還原這么重要，在實際執行中是什么樣的？

2. 設計還原現狀

其實很多時候，設計驗收環節不太受到各方重視。設計師更多思考的是如何達到美觀的界面、流暢的交互等問題，認為開發能會完全按照設計稿標注來，而忽略掉后期的設計驗收；開發則關心的是實現這個功能需要花費多長時間，實現難度如何等等。大家站在不同的角度看待問題，雙方的目標沒有對齊，最終影響到工作效率也是必然的。

設計還原，終究是一個合作問題。還原度的高低與否，取決于設計-開發-測試這些環節的協作質量，也直接影響上線產品的用戶體驗。

影響設計還原的原因

3. 如何高效驗收

在對接的整個流程中，本文梳理了前中后三個階段分別需要做的準備工作，來幫助解決設計師和開發如何高效驗收的問題。

前中后三個階段需要做的工作

前期·嚴謹設計

建立設計規范

設計規范的目的是為了統一設計內部及前端工程師的開發，提升團隊的協作效率，從而實現設計稿到線上頁面輸出統一的設計語言，從根本提升設計質量和還原度。我們把顏色、字體、組件等內容預設定成規范，保證了視覺上的統一，也方便組件的復用。

在設計前期需要確認哪些模塊有可調用的開發組件，若沒有，需要評估開發成本，預留好制作規范組件的時間。如果不了解這些情況，后期會有調整設計稿或延期風險。

建立統一的設計規范和設計組件

設計完整輸出

我們在做設計交付前期，需要把全部的頁面狀態、切圖標注、動效視頻等文件整理好，避免在開發過程中臨時進行補充，影響項目開發進度。關于設計稿內的切圖，我們要提前與研發溝通，切圖的范圍和形式，最后把設計稿上傳到公司統一使用的協作網站，如 58 使用的是自研開發協作平臺風火輪。

設計稿輸出到風火輪等設計開發協作平臺

關于標注，現在的標注軟件雖然能解放設計師的雙手，但是它們只是生成各元素的基本樣式、尺寸等，對于重要模塊部分建議手動標注，告知開發設計說明及注意事項。

中期·積極溝通

設計宣講會

一個產品的完整流程中，從創意發散到設計實施，由一開始的抽象目標到最終具象的方案形成，背后很多工作是不為人知的。這就解釋了為什么很多時候開發同學不理解設計師對一個字號、一個像素的差異要“錙銖必較”。所以我們需要通過設計宣講環節把設計的理念表達出來，與開發對齊目標，避免開發同學帶著疑問寫頁面。

設計宣講會的意義是把問題前置化。通過宣講可以把視覺變化最大的地方和開發說明清楚。有些細微的地方我們特別向開發說明，加深他們的印象，在實現時候減少出錯，我們前面每走一步，都是為了開發落地更效率、后續驗收更輕松。

設計師需要與項目成員闡述設計方案，達成一致目標

在設計宣講前，確認項目組主要成員到場，包括前端、測試、產品、后端同學等。我們對已確認的設計稿進行宣講，結合設計文檔對設計理念、組件規范、動效、特殊樣式等模塊進行講述，幫助開發同學理解。同時開發同學也要及時反饋是否有還原困難，如：是否有技術限制？是否有組件改動困難？實現成本過高等問題。針對宣講過程當中的問題和解決方案以會議紀要的形式記錄下來，會議結束后根據達成的共識和重要結論郵件周知項目組全員。

對宣講會重要信息做會議記錄

及時同步信息

在項目正式上線前，都可能出現產品臨時更改需求，計劃趕不上變化，這種情況比較常見。有時候產品同學認為更改個顏色或交互形式是比較小的調整，只告知了設計師調整往往忽略了同步給開發。那么在測試上線后暴露出的問題，可能導致了延期等狀況時，各方就出現責任劃分。所以信息的同步非常重要，在項目組成立時，把涉及到的項目成員建立項目溝通群，所有相關信息同步在群內，有問題及時溝通，必要時拉會面聊。

避免頻繁修改

除了產品需求上變更導致設計稿調整外，應避免對設計稿的頻繁修改。因為在隨意更新設計稿的時候，我們不清楚當前的開發進度，如果修改的部分已開發，會給他們產生不必要的工作量，也可能會影響開發同學的代碼規范。如果必須要修改，一定要及時說明原因，否則會有被開發同學“追殺”的風險。

后期·主動跟進

跟進開發進度

設計稿交付后，我們還需要實時跟進項目的進度，了解當前項目開發的時間節點，根據開發給出的時間排期，在計劃提測時間介入走查。如果開發反饋有延期風險，我們需要跟產品及時了解原因，然后評估是否對設計有影響。

建立走查機制

盡管我們前面做了詳細的溝通和宣講，但有時也避免不了在開發過程中發現有些問題才暴露出來。設計師需要在提測階段提前介入走查，給開發預留出修改時間，通過建立合理完善的走查機制，來提升團隊整體的協作效率。

建立合理的走查機制流程

① 保證視覺還原度在80%左右

在項目排期階段可與開發溝通，要求對自身負責的部分進行設計自查，同時將設計實現效果納入測試同學的工作中，保證視覺還原度在 80%以上，再介入視覺驗收工作。因為很多時候不要求測試走查設計還原度，我們在驗收的時候就會浪費很多時間和精力在那些對照視覺稿就能發現的簡單問題上，反復驗收導致設計與測試的工作量變大。

② 規范走查文檔

在視覺走查階段，我們應該建立線上協作走查文檔，支持設計、開發、測試、產品等項目成員共同管理和跟進走查進度，避免口頭溝通造成的信息遺漏、溝通誤差等扯皮事件。走查文檔中包含對設計走查問題的分類、分級等，再根據影響程度、實現難度、資源配比等情況綜合分析進行排期。

在走查過程中，設計師還需要給予充分的支持響應，必要時補充設計示意圖或交互動效幫助開發同學理解，避免信息偏差導致再次調整。

建立健全的線上協作走查文檔

③ 關注特殊情況

特殊場景在走查中常常被忽略，等上線后在現實中碰到缺失異常狀態體驗會大打折扣，所以完成主流程的走查后，一定要記得考慮到特殊場景，包括括網絡異常、內容缺失、空狀態等。同時還要看下不同機型適配的問題，保證不同機型的界面呈現效果一致，包括關鍵信息及操作是否超出屏幕，是否出現覆蓋、拉伸等情況。

數據監測

功能上線后也不代表需求的完結，我們還要及時追蹤數據的情況。數據的量化指標可以很好佐證我們方案的價值，也能幫助我們在錯誤道路上及時轉向。我們可根據數據反映的情況及時調整對應的產品策略，促進我們設計上的修改、完善等工作。

4. 寫在最后

所以設計能力再強，設計方案再好，沒有后續良好的執行，也終究不過是廢紙一張。一個優秀的項目落地是大家共同協作的結果。如果設計還原出了問題，首先要自查，確保自身工作做到位，提升設計輸出質量，依照設計規范做設計，做到邏輯自洽。我們要做足前期的準備工作，盡可能的多思考、多溝通，打造專業的“人設”，不僅贏得開發同學的尊重也更方便自己順利開展工作。

關于提升設計還原質量，這里只是拋磚引玉，如果大家有更好的工作方法，歡迎評論區留言交流～

歡迎關注「58UXD」的微信公眾號：