細節決定成敗，這次跟大家聊聊項目開發中最后一個環節，也是考驗細節能力的一個環節，即「設計驗收」。

背景：為了快速迎合市場發展，公司戰略層決定做中臺版本的建設，此次項目現已完成測試驗收 1.0，進入設計驗收環節，體驗過提測的產品之后，發現頁面的還原度和設計稿存在一定的差異性，且在交互上也存在一部分問題。

而此時的驗收工作正是為解決這些問題而存在，是產品上線的最后一道防線。

事件：

• 在驗收過程中，發現產品驗收這一工作流程，存在一些問題，由此主動做了一個系統性的驗收框架提案，且已提案成功，在團隊內納入使用。

目的：

• 為了利用敏捷的方法來進行協作，完成業務需求，為了在團隊內形成規范性的工作流程，為了更好的利用設計為業務增值……

一般項目驗收分為三個部分：項目需求驗收、UI 交互驗收、產品發布前驗收，分別在不同的時間節點介入。

這里我將針對 UI 交互驗收這一環節，從以下五個細節方面來和大家一起探討。

書寫格式

在驗收過程中我們團隊使用的是釘釘在線表格(知識庫-產品驗收問題記錄表)進行協作，由設計部門維護，開發部門反饋。

協作模式是由設計團隊在測試版體驗產品，然后和 UI 稿、交互稿、PRD 文檔做比對，從中發現問題，并書寫在表格中，核心要寫的是問題描述和配圖兩大塊，開發、測試去查看問題，所以先來簡單描述下有關書寫需要注意的事項：

1. 格式一致性

在多人參與協作時，設計團隊對外輸出應保持一致性，所以在驗收時，要做到同一模塊內容書寫格式保持一致，方便相關人員查看和理解內容。

建議書寫格式根據導航系統來書寫：一級導航 -> 二級導航 -> 主菜單 -> 具體模塊

例如：科室綜合分析 -> 科室主頁 -> 總覽 -> 費用構成分析

2. 聚類整合、統一呈現

上一步中我們統一按照導航去描述問題模塊，這里應把相同模塊的問題聚類整合到一起，讓表格看起來具有統一性，展示表格的整體性。

由于驗收由多角色(產品、交互、設計…)參與，這里建議大家在描述問題時，把相同模塊下的問題寫到一起，減少相同內容重復出現，降低表格的復雜度，也方便開發測試去查看問題。

最終還可以清晰的看出問題模塊占比，甚至可以由此責任到相關人員。

文章開頭可領取此設計驗收表模版。

截圖標注

單純的用文字問題描述需要一定的理解成本，附上圖片則能更加直觀的展示問題，在截圖標注問題時有以下幾個小 tips 可供參考：

1. 整頁截圖

問題：B 端產品頁面重復性高，如果僅局部截圖，很大情況下會是很多模塊都有這個截圖上的內容，很難看出到底是屬于哪個模塊，需要結合文字再去確認。

好處：方便開發人員利用導航系統定位頁面位置。

2. 在圖上標注問題及修改建議

好處：開發人員在查看截圖時即可清楚的看到問題及修改建議，同時方便保存圖片帶著問題與其他人員進行探討。(問題來源：在小分辨率電腦上，打開 excel 表格中的縮略圖會覆蓋表格內容。)

3. 多個問題存在，用序號做標記

面對一個頁面有多個問題需要做標注時，要做到井然有序。

4. 復雜問題，附上對應的 UI 稿/交互稿/PRD 文檔截圖

減少開發人員操作(找文件，找頁面的重復操作)，提升修改 bug 的效率。

!!!升級版驗收標注截圖技巧

5. 帶代碼截圖標注

在檢驗頁面的時候，即使是擁有像素眼👀的設計們，單純的靠眼睛去檢查頁面，也很難準確的看出來哪里有錯誤。

這里就需要我們對照著代碼去檢驗頁面，便可以帶著代碼截圖，并在代碼中找到要修改的地方，并在一邊附上說明文案，然后把這樣的截圖附在驗收文檔中，便可以給開發省下很多時間，同時體現出我們是如此的專業。

這里順便跟大家分享一個好用的 MAC 截圖標注軟件「xnip」，它不僅可以截圖、搭配有很多截圖功能鍵、而且有步驟標注工具、支持滾動截圖、可設置快捷鍵……總之很好用，推薦給大家。

下載鏈接： https://xnipapp.com/

問題描述

有了前面的基礎操作，那在驗收時，到底該如何對問題進行描述呢?這里需要換位思考，從設計視角轉變為開發視角，站在他們的角度去思考，怎么樣的問題描述能幫助開發通過有效的描述得到想要的信息。

1. 不要只描述哪里錯了，而是直接描述如何做

意思就是說一定要把修改意見寫詳細，幫開發節省反復對稿、計算參數的時間，反過來是幫自己減少了二次驗收的成本。

文案技巧：用間距減小 4px，代替高度 20px、參見交互稿等這類含糊不清的文案。

完整驗收

在沒有一個系統的驗收框架時，我們基本上是看到哪里是哪里，這樣就會導致在驗收的時候會有遺漏、缺失、重復等問題。所以有一份設計驗收清單至關重要，對照清單進行驗收，才能盡量避免遺漏，保證驗收的完整性。

這里我根據結合項目，整理了一份設計驗收清單。這份清單可以助力大家更全面的驗收產品，同時應根據項目的迭代不斷的優化其內容，持續的修正和完善，使其覆蓋更全面、更好的賦能業務。

復盤驗收

驗收的復盤工作是對一次產品更新的總結，也是為預防以后重復出現錯誤工作。

在產品驗收工作進行到90%或完成后，問題已達到了一定的數量級，在這時應對問題進行分類整理，從中找出基礎組件問題、通用型交互規范問題。把這兩類單獨挑出來，進行整理，并和對應的負責人，進行一對一的對接調整，嚴格按照組件庫和交互標準進行修改，以達到百分百還原度，在源頭上解決基礎性問題，這樣后續在其他項目中沿用此類組件/交互時，不會重復出現此類問題。

這樣一次完整的驗收工作就可以完美的結束了。

文末小結：

有了這個系統性的驗收流程之后，可以幫我們在驗收過程中更好的與上下游協作，當然相對應的提出人也要負責到底，問題提出后時刻關注開發人員的反饋狀態，若有問題積極溝通，具體問題給出具體解決方案，直到問題解決，以保證產品順利上線。

以上就是我個人對產品驗收這一環節做的提案，希望可以在為團隊工作提效，為業務賦能，同時更希望大家提出寶貴的建議。