設(shè)計(jì)驗(yàn)收，幾乎是每位設(shè)計(jì)師都要做的設(shè)計(jì)工作環(huán)節(jié)。雖然叫作“設(shè)計(jì)驗(yàn)收”，其實(shí)更確切地應(yīng)該被叫作“線(xiàn)上產(chǎn)品質(zhì)量驗(yàn)收”，因?yàn)轵?yàn)收的不僅僅產(chǎn)品的設(shè)計(jì)稿還原度，也包括產(chǎn)品在使用時(shí)的真實(shí)體驗(yàn)效果。

通常來(lái)說(shuō)驗(yàn)收工作可以分為五個(gè)環(huán)節(jié)：

1. 驗(yàn)收準(zhǔn)備
2. 發(fā)現(xiàn)問(wèn)題
3. 記錄問(wèn)題
4. 溝通問(wèn)題
5. 復(fù)查問(wèn)題

一、驗(yàn)收準(zhǔn)備

在大廠，通常會(huì)有兩個(gè)團(tuán)隊(duì)介入到驗(yàn)收工作中：設(shè)計(jì)團(tuán)隊(duì)和測(cè)試團(tuán)隊(duì)。這兩個(gè)團(tuán)隊(duì)的側(cè)重點(diǎn)有所不同：

- 設(shè)計(jì)團(tuán)隊(duì)：重點(diǎn)驗(yàn)收開(kāi)發(fā)后的實(shí)際界面對(duì)比原設(shè)計(jì)稿的還原質(zhì)量，確保線(xiàn)上產(chǎn)品的視覺(jué)和交互與設(shè)計(jì)稿的一致性。

- 測(cè)試團(tuán)隊(duì)：重點(diǎn)檢測(cè)用戶(hù)各種類(lèi)型的帳號(hào)以及不同身份的用戶(hù)在使用產(chǎn)品時(shí)可能遇到的各種體驗(yàn)問(wèn)題，確保產(chǎn)品的功能流暢性，以及在合規(guī)風(fēng)險(xiǎn)要求下和極端情況下的可用性。

在一些人員精簡(jiǎn)的小團(tuán)隊(duì)中，測(cè)試人員也可能會(huì)由設(shè)計(jì)師和開(kāi)發(fā)來(lái)代替。

?? Tips：

- 提前做好通知：在每次驗(yàn)收工作開(kāi)始前，需要由前端開(kāi)發(fā)來(lái)通知相關(guān)驗(yàn)收方做好準(zhǔn)備。通?？梢圆捎冒l(fā)郵件或群通知的方式邀請(qǐng)相關(guān)方來(lái)進(jìn)行驗(yàn)收。

- 使用標(biāo)準(zhǔn)模版：由于驗(yàn)收工作相對(duì)頻繁，所以這類(lèi)郵件或群消息可以使用統(tǒng)一的模版，注明驗(yàn)收內(nèi)容、時(shí)間節(jié)點(diǎn)、相關(guān)人員、驗(yàn)收地址、驗(yàn)收賬號(hào)和密碼等，讓通知更有專(zhuān)業(yè)性和重要性。

二、發(fā)現(xiàn)問(wèn)題

在查找和發(fā)現(xiàn)問(wèn)題這個(gè)階段，設(shè)計(jì)師通常可以通過(guò) Chrome 瀏覽器自帶開(kāi)發(fā)者工具中的元素檢查功能，進(jìn)行 CSS 代碼走查（在頁(yè)面上單擊鼠標(biāo)右鍵，點(diǎn)擊“檢查”，只需要設(shè)計(jì)師初步理解 CSS 基礎(chǔ)的代碼邏輯即可） ：

除了對(duì)于頁(yè)面視覺(jué)效果做驗(yàn)收，設(shè)計(jì)師還需要對(duì)交互操作體驗(yàn)做驗(yàn)收。如果在驗(yàn)收開(kāi)始時(shí)發(fā)現(xiàn)設(shè)計(jì)實(shí)現(xiàn)與設(shè)計(jì)稿有很大差異，可以拒絕驗(yàn)收，直接退回重做開(kāi)發(fā)。

?? Tips：

- 不拘泥于形式：驗(yàn)收的具體形式和時(shí)間可根據(jù)團(tuán)隊(duì)的協(xié)作習(xí)慣自行溝通，比如：可以讓設(shè)計(jì)師自行在 dev 環(huán)境下驗(yàn)收；也可以由前端提供頁(yè)面和操作狀態(tài)的各種截圖進(jìn)行交互視覺(jué)驗(yàn)收。

- 整理走查列表：設(shè)計(jì)師需要對(duì)驗(yàn)收內(nèi)容輕車(chē)熟路。

三、記錄問(wèn)題

在發(fā)現(xiàn)和走查出設(shè)計(jì)及體驗(yàn)問(wèn)題后，我們需要將問(wèn)題整理出來(lái)，并使用需項(xiàng)目排期和管理工具給開(kāi)發(fā)提交相應(yīng)的修改意見(jiàn)和問(wèn)題修復(fù)需求。包括一些重點(diǎn)內(nèi)容：

1. 問(wèn)題描述
可以同時(shí)提供線(xiàn)上效果和設(shè)計(jì)稿的兩張截圖，便于更清楚的呈現(xiàn)問(wèn)題。清晰地描述問(wèn)題以及為什么要修改的原因。

2. 問(wèn)題優(yōu)先級(jí)
除了描述清楚，還需要給問(wèn)題排序，至少可以將問(wèn)題分為兩級(jí)：

- 緊急修復(fù)：指嚴(yán)重的交互問(wèn)題，如不修復(fù)用戶(hù)的使用流程就無(wú)法進(jìn)行，需要優(yōu)先做修復(fù)。

- 普通修復(fù)：指與設(shè)計(jì)稿中交互方式不同，但用戶(hù)可完成全部流程，如布局及樣式（文字，顏色，間距等）規(guī)范問(wèn)題。

3. 問(wèn)題負(fù)責(zé)人
需要將問(wèn)題指派給確定的開(kāi)發(fā)負(fù)責(zé)人，以及時(shí)追蹤問(wèn)題進(jìn)展情況。

四、溝通問(wèn)題

在完成問(wèn)題記錄與任務(wù)指派后，需要及時(shí)與指派的前端開(kāi)發(fā)進(jìn)行溝通。及時(shí)追蹤問(wèn)題修復(fù)進(jìn)度。

?? Tips：

- 問(wèn)題解決有先后：由于實(shí)際工作中的情況復(fù)雜多變，通常來(lái)說(shuō)并不是所有的走查問(wèn)題都可以順利解決。前端開(kāi)發(fā)會(huì)按照問(wèn)題的優(yōu)先級(jí)逐一修復(fù)，但也會(huì)有個(gè)別問(wèn)題遺留到下一次迭代或更新中再做解決。這就需要大家做好溝通和記錄，確保問(wèn)題進(jìn)行可查、妥善解決。

五、復(fù)查問(wèn)題

在開(kāi)發(fā)完成問(wèn)題修復(fù)后，設(shè)計(jì)師需要再次進(jìn)入測(cè)試環(huán)境，確認(rèn)之前記錄的問(wèn)題是否已被完全修復(fù)，同時(shí)也要留心是否出現(xiàn)了新的問(wèn)題。

如果在復(fù)查中發(fā)現(xiàn)仍存在問(wèn)題，可以直接在需求管理工具中更新原問(wèn)題的修復(fù)需求，并與開(kāi)發(fā)溝通；如果確認(rèn)問(wèn)題已被修復(fù)并符合交付標(biāo)準(zhǔn)，就可以結(jié)束 / 關(guān)閉問(wèn)題修復(fù)需求，這也意味著設(shè)計(jì)驗(yàn)收工作正式結(jié)束。

?? Tips：

- 驗(yàn)收工作要跟隨團(tuán)隊(duì)與時(shí)俱進(jìn)：一個(gè)團(tuán)隊(duì)到設(shè)計(jì)驗(yàn)收整體工作流程和方式，需要跟隨團(tuán)隊(duì)發(fā)展不斷地迭代和更新。能夠在工作流程中發(fā)現(xiàn)大家的協(xié)作不便之處和導(dǎo)致不方便的原因，并及時(shí)優(yōu)化工作流程與方式，也是驗(yàn)收工作中很重要的內(nèi)容之一。