做好設計驗收，需要這5大環節！

設計驗收，幾乎是每位設計師都要做的設計工作環節。雖然叫作“設計驗收”，其實更確切地應該被叫作“線上產品質量驗收”，因為驗收的不僅僅產品的設計稿還原度，也包括產品在使用時的真實體驗效果。

更多驗收方法：

1. 驗收準備
2. 發現問題
3. 記錄問題
4. 溝通問題
5. 復查問題

一、驗收準備

在大廠，通常會有兩個團隊介入到驗收工作中：設計團隊和測試團隊。這兩個團隊的側重點有所不同：

- 設計團隊：重點驗收開發后的實際界面對比原設計稿的還原質量，確保線上產品的視覺和交互與設計稿的一致性。

- 測試團隊：重點檢測用戶各種類型的帳號以及不同身份的用戶在使用產品時可能遇到的各種體驗問題，確保產品的功能流暢性，以及在合規風險要求下和極端情況下的可用性。

在一些人員精簡的小團隊中，測試人員也可能會由設計師和開發來代替。

?? Tips：

- 提前做好通知：在每次驗收工作開始前，需要由前端開發來通知相關驗收方做好準備。通常可以采用發郵件或群通知的方式邀請相關方來進行驗收。

- 使用標準模版：由于驗收工作相對頻繁，所以這類郵件或群消息可以使用統一的模版，注明驗收內容、時間節點、相關人員、驗收地址、驗收賬號和密碼等，讓通知更有專業性和重要性。

二、發現問題

在查找和發現問題這個階段，設計師通常可以通過 Chrome 瀏覽器自帶開發者工具中的元素檢查功能，進行 CSS 代碼走查（在頁面上單擊鼠標右鍵，點擊“檢查”，只需要設計師初步理解 CSS 基礎的代碼邏輯即可） ：

除了對于頁面視覺效果做驗收，設計師還需要對交互操作體驗做驗收。如果在驗收開始時發現設計實現與設計稿有很大差異，可以拒絕驗收，直接退回重做開發。

?? Tips：

- 不拘泥于形式：驗收的具體形式和時間可根據團隊的協作習慣自行溝通，比如：可以讓設計師自行在 dev 環境下驗收；也可以由前端提供頁面和操作狀態的各種截圖進行交互視覺驗收。

- 整理走查列表：設計師需要對驗收內容輕車熟路。

三、記錄問題

在發現和走查出設計及體驗問題后，我們需要將問題整理出來，并使用需項目排期和管理工具給開發提交相應的修改意見和問題修復需求。包括一些重點內容：

1. 問題描述
可以同時提供線上效果和設計稿的兩張截圖，便于更清楚的呈現問題。清晰地描述問題以及為什么要修改的原因。

2. 問題優先級
除了描述清楚，還需要給問題排序，至少可以將問題分為兩級：

- 緊急修復：指嚴重的交互問題，如不修復用戶的使用流程就無法進行，需要優先做修復。

- 普通修復：指與設計稿中交互方式不同，但用戶可完成全部流程，如布局及樣式（文字，顏色，間距等）規范問題。

3. 問題負責人
需要將問題指派給確定的開發負責人，以及時追蹤問題進展情況。

四、溝通問題

在完成問題記錄與任務指派后，需要及時與指派的前端開發進行溝通。及時追蹤問題修復進度。

?? Tips：

- 問題解決有先后：由于實際工作中的情況復雜多變，通常來說并不是所有的走查問題都可以順利解決。前端開發會按照問題的優先級逐一修復，但也會有個別問題遺留到下一次迭代或更新中再做解決。這就需要大家做好溝通和記錄，確保問題進行可查、妥善解決。

五、復查問題

在開發完成問題修復后，設計師需要再次進入測試環境，確認之前記錄的問題是否已被完全修復，同時也要留心是否出現了新的問題。

如果在復查中發現仍存在問題，可以直接在需求管理工具中更新原問題的修復需求，并與開發溝通；如果確認問題已被修復并符合交付標準，就可以結束 / 關閉問題修復需求，這也意味著設計驗收工作正式結束。

?? Tips：

- 驗收工作要跟隨團隊與時俱進：一個團隊到設計驗收整體工作流程和方式，需要跟隨團隊發展不斷地迭代和更新。能夠在工作流程中發現大家的協作不便之處和導致不方便的原因，并及時優化工作流程與方式，也是驗收工作中很重要的內容之一。