5步提升UI交互驗收效率

1、細節(jié)決定成敗，這次跟大家聊聊項目開發(fā)中最后一個環(huán)節(jié)，也是考驗細節(jié)能力的一個環(huán)節(jié)，即設(shè)計驗收。背景：為了快速迎合市場發(fā)展，公司戰(zhàn)略層決定做中臺版本的建設(shè)，此次項目現(xiàn)已完成測試驗收1.0，進入設(shè)計驗收環(huán)節(jié)，體驗過提測的產(chǎn)品之后，發(fā)現(xiàn)頁面的還原度和設(shè)計稿存在一定的差異性，且在交互上也存在一部分問題。而此時的驗收工作正是為解決這些問題而存在，是產(chǎn)品上線的最后一道防線。事件：在驗收過程中，發(fā)現(xiàn)產(chǎn)品驗收這一工作流程，存在一些問題，由此主動做了一個系統(tǒng)性的驗收框架提案，且已提案成功，在團隊內(nèi)納入使用。目的：為了利用敏捷的方法來進行協(xié)作，完成業(yè)務(wù)需求，為了在團隊內(nèi)形成規(guī)范性的工作流程，為了更好的利用設(shè)計為業(yè)務(wù)

2、增值 一般項目驗收分為三個部分：項目需求驗收、UI交互驗收、產(chǎn)品發(fā)布前驗收，分別在不同的時間節(jié)點介入。這里我將針對UI交互驗收這一環(huán)節(jié)，從以下五個細節(jié)方面來和大家一起探討。1 . 書寫格式在驗收過程中我們團隊使用的是釘釘在線表格(知識庫-產(chǎn)品驗收問題記錄表)進行協(xié)作，由設(shè)計部門維護，開發(fā)部門反饋。協(xié)作模式是由設(shè)計團隊在測試版體驗產(chǎn)品，然后和UI稿、交互稿、PRD文檔做比對，從中發(fā)現(xiàn)問題，并書寫在表格中，核心要寫的是問題描述和配圖兩大塊，開發(fā)、測試去查看問題，所以先來簡單描述下有關(guān)書寫需要注意的事項：格式一致性在多人參與協(xié)作時，設(shè)計團隊對外輸出應(yīng)保持一致性，所以在驗收時，要做到同一模塊內(nèi)容書寫格

3、式保持一致，方便相關(guān)人員查看和理解內(nèi)容。建議書寫格式根據(jù)導航系統(tǒng)來書寫：一級導航 - 二級導航- 主菜單- 具體模塊例如：科室綜合分析 - 科室主頁 - 總覽-費用構(gòu)成分析聚類整合、統(tǒng)一呈現(xiàn)上一步中我們統(tǒng)一按照導航去描述問題模塊，這里應(yīng)把相同模塊的問題聚類整合到一起，讓表格看起來具有統(tǒng)一性，展示表格的整體性。由于驗收由多角色(產(chǎn)品、交互、設(shè)計)參與，這里建議大家在描述問題時，把相同模塊下的問題寫到一起，減少相同內(nèi)容重復(fù)出現(xiàn)，降低表格的復(fù)雜度，也方便開發(fā)測試去查看問題。最終還可以清晰的看出問題模塊占比，甚至可以由此責任到相關(guān)人員。文末可領(lǐng)取此設(shè)計驗收表模版。2、截圖標注單純的用文字問題描述需要一

4、定的理解成本，附上圖片則能更加直觀的展示問題，在截圖標注問題時有以下幾個小tips可供參考：整頁截圖問題：B端產(chǎn)品頁面重復(fù)性高，如果僅局部截圖，很大情況下會是很多模塊都有這個截圖上的內(nèi)容，很難看出到底是屬于哪個模塊，需要結(jié)合文字再去確認。好處：方便開發(fā)人員利用導航系統(tǒng)定位頁面位置。在圖上標注問題及修改建議好處：開發(fā)人員在查看截圖時即可清楚的看到問題及修改建議，同時方便保存圖片帶著問題與其他人員進行探討。（問題來源：在小分辨率電腦上，打開excel表格中的縮略圖會覆蓋表格內(nèi)容。）多個問題存在，用序號做標記面對一個頁面有多個問題需要做標注時，要做到井然有序。復(fù)雜問題，附上對應(yīng)的UI稿/交互稿/PR

5、D文檔截圖減少開發(fā)人員操作(找文件，找頁面的重復(fù)操作)，提升修改bug的效率。升級版驗收標注截圖技巧帶代碼截圖標注在檢驗頁面的時候，即使是擁有像素眼的設(shè)計們，單純的靠眼睛去檢查頁面，也很難準確的看出來哪里有錯誤。這里就需要我們對照著代碼去檢驗頁面，便可以帶著代碼截圖，并在代碼中找到要修改的地方，并在一邊附上說明文案，然后把這樣的截圖附在驗收文檔中，便可以給開發(fā)省下很多時間，同時體現(xiàn)出我們是如此的專業(yè)。這里順便跟大家分享一個好用的MAC截圖標注軟件 xnip ，它不僅可以截圖、搭配有很多截圖功能鍵、而且有步驟標注工具、支持滾動截圖、可設(shè)置快捷鍵總之很好用，推薦給大家。3、問題描述有了前面的基礎(chǔ)操

6、作，那在驗收時，到底該如何對問題進行描述呢？這里需要換位思考，從設(shè)計視角轉(zhuǎn)變?yōu)殚_發(fā)視角，站在他們的角度去思考，怎么樣的問題描述能幫助開發(fā)通過有效的描述得到想要的信息。不要只描述哪里錯了，而是直接描述如何做意思就是說一定要把修改意見寫詳細，幫開發(fā)節(jié)省反復(fù)對稿、計算參數(shù)的時間，反過來是幫自己減少了二次驗收的成本。文案技巧：用間距減小4px，代替高度20px、參見交互稿等這類含糊不清的文案。4、完整驗收在沒有一個系統(tǒng)的驗收框架時，我們基本上是看到哪里是哪里，這樣就會導致在驗收的時候會有遺漏、缺失、重復(fù)等問題。所以有一份設(shè)計驗收清單至關(guān)重要，對照清單進行驗收，才能盡量避免遺漏，保證驗收的完整性。5、復(fù)盤驗收驗收的復(fù)盤工作是對一次產(chǎn)品更新的總結(jié)，也是為預(yù)防以后重復(fù)出現(xiàn)錯誤做工作。在產(chǎn)品驗收工作進行到90%或完成后，問題已達到了一定的數(shù)量級，在這時應(yīng)對問題進行分類整理，從中找出基礎(chǔ)組件問題、通用型交互規(guī)范問題。把這兩類單獨挑出來，進行整理，并和對應(yīng)的負責人，進行