五步教你提升 UI 交互驗(yàn)收效率
導(dǎo)語(yǔ):本文作者近期項(xiàng)目在做驗(yàn)收相關(guān)的工作,從中發(fā)現(xiàn)了一些可總結(jié)優(yōu)化的點(diǎn),并做了以下輸出。細(xì)節(jié)決定成敗,通過本文跟大家聊聊項(xiàng)目開發(fā)中最后一個(gè)環(huán)節(jié),也是考驗(yàn)細(xì)節(jié)能力的一個(gè)環(huán)節(jié),即「設(shè)計(jì)驗(yàn)收」。
背景:為了快速迎合市場(chǎng)發(fā)展,公司戰(zhàn)略層決定做中臺(tái)版本的建設(shè),此次項(xiàng)目現(xiàn)已完成測(cè)試驗(yàn)收 1.0,進(jìn)入設(shè)計(jì)驗(yàn)收環(huán)節(jié),體驗(yàn)過提測(cè)的產(chǎn)品之后,發(fā)現(xiàn)頁(yè)面的還原度和設(shè)計(jì)稿存在一定的差異性,且在交互上也存在一部分問題。
而此時(shí)的驗(yàn)收工作正是為解決這些問題而存在,是產(chǎn)品上線的最后一道防線。
事件:在驗(yàn)收過程中,發(fā)現(xiàn)產(chǎn)品驗(yàn)收這一工作流程,存在一些問題,由此主動(dòng)做了一個(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ù)增值……
一般項(xiàng)目驗(yàn)收分為三個(gè)部分:項(xiàng)目需求驗(yàn)收、UI 交互驗(yàn)收、產(chǎn)品發(fā)布前驗(yàn)收,分別在不同的時(shí)間節(jié)點(diǎn)介入。
這里我將針對(duì) UI 交互驗(yàn)收這一環(huán)節(jié),從以下五個(gè)細(xì)節(jié)方面來和大家一起探討。
一、書寫格式
在驗(yàn)收過程中我們團(tuán)隊(duì)使用的是釘釘在線表格(知識(shí)庫(kù)-產(chǎn)品驗(yàn)收問題記錄表)進(jìn)行協(xié)作,由設(shè)計(jì)部門維護(hù),開發(fā)部門反饋。
協(xié)作模式是由設(shè)計(jì)團(tuán)隊(duì)在測(cè)試版體驗(yàn)產(chǎn)品,然后和 UI 稿、交互稿、PRD 文檔做比對(duì),從中發(fā)現(xiàn)問題,并書寫在表格中,核心要寫的是問題描述和配圖兩大塊,開發(fā)、測(cè)試去查看問題,所以先來簡(jiǎn)單描述下有關(guān)書寫需要注意的事項(xiàng):
1. 格式一致性
在多人參與協(xié)作時(shí),設(shè)計(jì)團(tuán)隊(duì)對(duì)外輸出應(yīng)保持一致性,所以在驗(yàn)收時(shí),要做到同一模塊內(nèi)容書寫格式保持一致,方便相關(guān)人員查看和理解內(nèi)容。
建議書寫格式根據(jù)導(dǎo)航系統(tǒng)來書寫:一級(jí)導(dǎo)航 -> 二級(jí)導(dǎo)航 -> 主菜單 -> 具體模塊
例如:科室綜合分析 -> 科室主頁(yè) -> 總覽 -> 費(fèi)用構(gòu)成分析
2. 聚類整合、統(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ā)測(cè)試去查看問題。
最終還可以清晰的看出問題模塊占比,甚至可以由此責(zé)任到相關(guān)人員。
二、截圖標(biāo)注
單純的用文字問題描述需要一定的理解成本,附上圖片則能更加直觀的展示問題,在截圖標(biāo)注問題時(shí)有以下幾個(gè)小 tips 可供參考:
1. 整頁(yè)截圖
問題:B 端產(chǎn)品頁(yè)面重復(fù)性高,如果僅局部截圖,很大情況下會(huì)是很多模塊都有這個(gè)截圖上的內(nèi)容,很難看出到底是屬于哪個(gè)模塊,需要結(jié)合文字再去確認(rèn)。
好處:方便開發(fā)人員利用導(dǎo)航系統(tǒng)定位頁(yè)面位置。
2. 在圖上標(biāo)注問題及修改建議
好處:開發(fā)人員在查看截圖時(shí)即可清楚的看到問題及修改建議,同時(shí)方便保存圖片帶著問題與其他人員進(jìn)行探討(問題來源:在小分辨率電腦上,打開 excel 表格中的縮略圖會(huì)覆蓋表格內(nèi)容)。
3. 多個(gè)問題存在,用序號(hào)做標(biāo)記
面對(duì)一個(gè)頁(yè)面有多個(gè)問題需要做標(biāo)注時(shí),要做到井然有序。
4. 復(fù)雜問題,附上對(duì)應(yīng)的 UI 稿/交互稿/PRD 文檔截圖
減少開發(fā)人員操作(找文件,找頁(yè)面的重復(fù)操作),提升修改 bug 的效率。
升級(jí)版驗(yàn)收標(biāo)注截圖技巧??????
5. 帶代碼截圖標(biāo)注
在檢驗(yàn)頁(yè)面的時(shí)候,即使是擁有像素眼?的設(shè)計(jì)們,單純的靠眼睛去檢查頁(yè)面,也很難準(zhǔn)確的看出來哪里有錯(cuò)誤。
這里就需要我們對(duì)照著代碼去檢驗(yàn)頁(yè)面,便可以帶著代碼截圖,并在代碼中找到要修改的地方,并在一邊附上說明文案,然后把這樣的截圖附在驗(yàn)收文檔中,便可以給開發(fā)省下很多時(shí)間,同時(shí)體現(xiàn)出我們是如此的專業(yè)。
這里順便跟大家分享一個(gè)好用的 MAC 截圖標(biāo)注軟件「xnip」,它不僅可以截圖、搭配有很多截圖功能鍵、而且有步驟標(biāo)注工具、支持滾動(dòng)截圖、可設(shè)置快捷鍵……總之很好用,推薦給大家。
三、問題描述
有了前面的基礎(chǔ)操作,那在驗(yàn)收時(shí),到底該如何對(duì)問題進(jìn)行描述呢?這里需要換位思考,從設(shè)計(jì)視角轉(zhuǎn)變?yōu)殚_發(fā)視角,站在他們的角度去思考,怎么樣的問題描述能幫助開發(fā)通過有效的描述得到想要的信息。
1. 不要只描述哪里錯(cuò)了,而是直接描述如何做
意思就是說一定要把修改意見寫詳細(xì),幫開發(fā)節(jié)省反復(fù)對(duì)稿、計(jì)算參數(shù)的時(shí)間,反過來是幫自己減少了二次驗(yàn)收的成本。
文案技巧:用間距減小 4px,代替高度 20px、參見交互稿等這類含糊不清的文案。
四、完整驗(yàn)收
在沒有一個(gè)系統(tǒng)的驗(yàn)收框架時(shí),我們基本上是看到哪里是哪里,這樣就會(huì)導(dǎo)致在驗(yàn)收的時(shí)候會(huì)有遺漏、缺失、重復(fù)等問題。所以有一份設(shè)計(jì)驗(yàn)收清單至關(guān)重要,對(duì)照清單進(jìn)行驗(yàn)收,才能盡量避免遺漏,保證驗(yàn)收的完整性。
這里我根據(jù)結(jié)合項(xiàng)目,整理了一份設(shè)計(jì)驗(yàn)收清單。這份清單可以助力大家更全面的驗(yàn)收產(chǎn)品,同時(shí)應(yīng)根據(jù)項(xiàng)目的迭代不斷的優(yōu)化其內(nèi)容,持續(xù)的修正和完善,使其覆蓋更全面、更好的賦能業(yè)務(wù)。
五、復(fù)盤驗(yàn)收
驗(yàn)收的復(fù)盤工作是對(duì)一次產(chǎn)品更新的總結(jié),也是為預(yù)防以后重復(fù)出現(xiàn)錯(cuò)誤工作。
在產(chǎn)品驗(yàn)收工作進(jìn)行到90%或完成后,問題已達(dá)到了一定的數(shù)量級(jí),在這時(shí)應(yīng)對(duì)問題進(jìn)行分類整理,從中找出基礎(chǔ)組件問題、通用型交互規(guī)范問題。把這兩類單獨(dú)挑出來,進(jìn)行整理,并和對(duì)應(yīng)的負(fù)責(zé)人,進(jìn)行一對(duì)一的對(duì)接調(diào)整,嚴(yán)格按照組件庫(kù)和交互標(biāo)準(zhǔn)進(jìn)行修改,以達(dá)到百分百還原度,在源頭上解決基礎(chǔ)性問題,這樣后續(xù)在其他項(xiàng)目中沿用此類組件/交互時(shí),不會(huì)重復(fù)出現(xiàn)此類問題。
這樣一次完整的驗(yàn)收工作就可以完美的結(jié)束了。
小結(jié):有了這個(gè)系統(tǒng)性的驗(yàn)收流程之后,可以幫我們?cè)隍?yàn)收過程中更好的與上下游協(xié)作,當(dāng)然相對(duì)應(yīng)的提出人也要負(fù)責(zé)到底,問題提出后時(shí)刻關(guān)注開發(fā)人員的反饋狀態(tài),若有問題積極溝通,具體問題給出具體解決方案,直到問題解決,以保證產(chǎn)品順利上線。
以上就是我個(gè)人對(duì)產(chǎn)品驗(yàn)收這一環(huán)節(jié)做的提案,希望可以在為團(tuán)隊(duì)工作提效,為業(yè)務(wù)賦能,同時(shí)更希望大家提出寶貴的建議。
本文由 @做設(shè)計(jì)的小仙草 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自?Unsplash,基于 CC0 協(xié)議
大佬您好??!可以分享一下設(shè)計(jì)驗(yàn)收清單么!?
請(qǐng)問設(shè)計(jì)驗(yàn)收清單能分享一下嘛?
您好~想問下這個(gè)設(shè)計(jì)驗(yàn)收清單要怎么下載呀