5步提升UI交互驗(yàn)收效率

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

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

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

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

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

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