五步教你提升 UI 交互驗(yàn)收效率

3 評(píng)論 8310 瀏覽 69 收藏 11 分鐘

導(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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 大佬您好??!可以分享一下設(shè)計(jì)驗(yàn)收清單么!?

    來自廣東 回復(fù)
  2. 請(qǐng)問設(shè)計(jì)驗(yàn)收清單能分享一下嘛?

    來自廣東 回復(fù)
  3. 您好~想問下這個(gè)設(shè)計(jì)驗(yàn)收清單要怎么下載呀

    回復(fù)