如何進(jìn)行高效設(shè)計驗(yàn)收？這3個步驟讓設(shè)計還原度更高！

編者按：設(shè)計還原如何做才能達(dá)到至少80%的落地效果？本文從設(shè)計前期的嚴(yán)謹(jǐn)，設(shè)計中期的積極溝通到設(shè)計后期的主動跟進(jìn)3個方面，讓你的設(shè)計方案完美落地。

1. 關(guān)于設(shè)計還原

設(shè)計還原是開發(fā)實(shí)現(xiàn)的效果不斷校正并與設(shè)計稿保持一致的過程。在項(xiàng)目開發(fā)的流程中，設(shè)計還原和功能測試一樣，是上線前最后的質(zhì)檢工作。設(shè)計界面是直接呈現(xiàn)給用戶的，還原度的高低影響用戶對產(chǎn)品的第一印象。

設(shè)計還原這么重要，在實(shí)際執(zhí)行中是什么樣的？

2. 設(shè)計還原現(xiàn)狀

其實(shí)很多時候，設(shè)計驗(yàn)收環(huán)節(jié)不太受到各方重視。設(shè)計師更多思考的是如何達(dá)到美觀的界面、流暢的交互等問題，認(rèn)為開發(fā)能會完全按照設(shè)計稿標(biāo)注來，而忽略掉后期的設(shè)計驗(yàn)收；開發(fā)則關(guān)心的是實(shí)現(xiàn)這個功能需要花費(fèi)多長時間，實(shí)現(xiàn)難度如何等等。大家站在不同的角度看待問題，雙方的目標(biāo)沒有對齊，最終影響到工作效率也是必然的。

設(shè)計還原，終究是一個合作問題。還原度的高低與否，取決于設(shè)計-開發(fā)-測試這些環(huán)節(jié)的協(xié)作質(zhì)量，也直接影響上線產(chǎn)品的用戶體驗(yàn)。

影響設(shè)計還原的原因

3. 如何高效驗(yàn)收

在對接的整個流程中，本文梳理了前中后三個階段分別需要做的準(zhǔn)備工作，來幫助解決設(shè)計師和開發(fā)如何高效驗(yàn)收的問題。

前中后三個階段需要做的工作

前期·嚴(yán)謹(jǐn)設(shè)計

建立設(shè)計規(guī)范

設(shè)計規(guī)范的目的是為了統(tǒng)一設(shè)計內(nèi)部及前端工程師的開發(fā)，提升團(tuán)隊(duì)的協(xié)作效率，從而實(shí)現(xiàn)設(shè)計稿到線上頁面輸出統(tǒng)一的設(shè)計語言，從根本提升設(shè)計質(zhì)量和還原度。我們把顏色、字體、組件等內(nèi)容預(yù)設(shè)定成規(guī)范，保證了視覺上的統(tǒng)一，也方便組件的復(fù)用。

在設(shè)計前期需要確認(rèn)哪些模塊有可調(diào)用的開發(fā)組件，若沒有，需要評估開發(fā)成本，預(yù)留好制作規(guī)范組件的時間。如果不了解這些情況，后期會有調(diào)整設(shè)計稿或延期風(fēng)險。

建立統(tǒng)一的設(shè)計規(guī)范和設(shè)計組件

設(shè)計完整輸出

我們在做設(shè)計交付前期，需要把全部的頁面狀態(tài)、切圖標(biāo)注、動效視頻等文件整理好，避免在開發(fā)過程中臨時進(jìn)行補(bǔ)充，影響項(xiàng)目開發(fā)進(jìn)度。關(guān)于設(shè)計稿內(nèi)的切圖，我們要提前與研發(fā)溝通，切圖的范圍和形式，最后把設(shè)計稿上傳到公司統(tǒng)一使用的協(xié)作網(wǎng)站，如 58 使用的是自研開發(fā)協(xié)作平臺風(fēng)火輪。

設(shè)計稿輸出到風(fēng)火輪等設(shè)計開發(fā)協(xié)作平臺

關(guān)于標(biāo)注，現(xiàn)在的標(biāo)注軟件雖然能解放設(shè)計師的雙手，但是它們只是生成各元素的基本樣式、尺寸等，對于重要模塊部分建議手動標(biāo)注，告知開發(fā)設(shè)計說明及注意事項(xiàng)。

中期·積極溝通

設(shè)計宣講會

一個產(chǎn)品的完整流程中，從創(chuàng)意發(fā)散到設(shè)計實(shí)施，由一開始的抽象目標(biāo)到最終具象的方案形成，背后很多工作是不為人知的。這就解釋了為什么很多時候開發(fā)同學(xué)不理解設(shè)計師對一個字號、一個像素的差異要“錙銖必較”。所以我們需要通過設(shè)計宣講環(huán)節(jié)把設(shè)計的理念表達(dá)出來，與開發(fā)對齊目標(biāo)，避免開發(fā)同學(xué)帶著疑問寫頁面。

設(shè)計宣講會的意義是把問題前置化。通過宣講可以把視覺變化最大的地方和開發(fā)說明清楚。有些細(xì)微的地方我們特別向開發(fā)說明，加深他們的印象，在實(shí)現(xiàn)時候減少出錯，我們前面每走一步，都是為了開發(fā)落地更效率、后續(xù)驗(yàn)收更輕松。

設(shè)計師需要與項(xiàng)目成員闡述設(shè)計方案，達(dá)成一致目標(biāo)

在設(shè)計宣講前，確認(rèn)項(xiàng)目組主要成員到場，包括前端、測試、產(chǎn)品、后端同學(xué)等。我們對已確認(rèn)的設(shè)計稿進(jìn)行宣講，結(jié)合設(shè)計文檔對設(shè)計理念、組件規(guī)范、動效、特殊樣式等模塊進(jìn)行講述，幫助開發(fā)同學(xué)理解。同時開發(fā)同學(xué)也要及時反饋是否有還原困難，如：是否有技術(shù)限制？是否有組件改動困難？實(shí)現(xiàn)成本過高等問題。針對宣講過程當(dāng)中的問題和解決方案以會議紀(jì)要的形式記錄下來，會議結(jié)束后根據(jù)達(dá)成的共識和重要結(jié)論郵件周知項(xiàng)目組全員。

對宣講會重要信息做會議記錄

及時同步信息

在項(xiàng)目正式上線前，都可能出現(xiàn)產(chǎn)品臨時更改需求，計劃趕不上變化，這種情況比較常見。有時候產(chǎn)品同學(xué)認(rèn)為更改個顏色或交互形式是比較小的調(diào)整，只告知了設(shè)計師調(diào)整往往忽略了同步給開發(fā)。那么在測試上線后暴露出的問題，可能導(dǎo)致了延期等狀況時，各方就出現(xiàn)責(zé)任劃分。所以信息的同步非常重要，在項(xiàng)目組成立時，把涉及到的項(xiàng)目成員建立項(xiàng)目溝通群，所有相關(guān)信息同步在群內(nèi)，有問題及時溝通，必要時拉會面聊。

避免頻繁修改

除了產(chǎn)品需求上變更導(dǎo)致設(shè)計稿調(diào)整外，應(yīng)避免對設(shè)計稿的頻繁修改。因?yàn)樵陔S意更新設(shè)計稿的時候，我們不清楚當(dāng)前的開發(fā)進(jìn)度，如果修改的部分已開發(fā)，會給他們產(chǎn)生不必要的工作量，也可能會影響開發(fā)同學(xué)的代碼規(guī)范。如果必須要修改，一定要及時說明原因，否則會有被開發(fā)同學(xué)“追殺”的風(fēng)險。

后期·主動跟進(jìn)

跟進(jìn)開發(fā)進(jìn)度

設(shè)計稿交付后，我們還需要實(shí)時跟進(jìn)項(xiàng)目的進(jìn)度，了解當(dāng)前項(xiàng)目開發(fā)的時間節(jié)點(diǎn)，根據(jù)開發(fā)給出的時間排期，在計劃提測時間介入走查。如果開發(fā)反饋有延期風(fēng)險，我們需要跟產(chǎn)品及時了解原因，然后評估是否對設(shè)計有影響。

建立走查機(jī)制

盡管我們前面做了詳細(xì)的溝通和宣講，但有時也避免不了在開發(fā)過程中發(fā)現(xiàn)有些問題才暴露出來。設(shè)計師需要在提測階段提前介入走查，給開發(fā)預(yù)留出修改時間，通過建立合理完善的走查機(jī)制，來提升團(tuán)隊(duì)整體的協(xié)作效率。

建立合理的走查機(jī)制流程

① 保證視覺還原度在80%左右

在項(xiàng)目排期階段可與開發(fā)溝通，要求對自身負(fù)責(zé)的部分進(jìn)行設(shè)計自查，同時將設(shè)計實(shí)現(xiàn)效果納入測試同學(xué)的工作中，保證視覺還原度在 80%以上，再介入視覺驗(yàn)收工作。因?yàn)楹芏鄷r候不要求測試走查設(shè)計還原度，我們在驗(yàn)收的時候就會浪費(fèi)很多時間和精力在那些對照視覺稿就能發(fā)現(xiàn)的簡單問題上，反復(fù)驗(yàn)收導(dǎo)致設(shè)計與測試的工作量變大。

② 規(guī)范走查文檔

在視覺走查階段，我們應(yīng)該建立線上協(xié)作走查文檔，支持設(shè)計、開發(fā)、測試、產(chǎn)品等項(xiàng)目成員共同管理和跟進(jìn)走查進(jìn)度，避免口頭溝通造成的信息遺漏、溝通誤差等扯皮事件。走查文檔中包含對設(shè)計走查問題的分類、分級等，再根據(jù)影響程度、實(shí)現(xiàn)難度、資源配比等情況綜合分析進(jìn)行排期。

在走查過程中，設(shè)計師還需要給予充分的支持響應(yīng)，必要時補(bǔ)充設(shè)計示意圖或交互動效幫助開發(fā)同學(xué)理解，避免信息偏差導(dǎo)致再次調(diào)整。

建立健全的線上協(xié)作走查文檔

③ 關(guān)注特殊情況

特殊場景在走查中常常被忽略，等上線后在現(xiàn)實(shí)中碰到缺失異常狀態(tài)體驗(yàn)會大打折扣，所以完成主流程的走查后，一定要記得考慮到特殊場景，包括括網(wǎng)絡(luò)異常、內(nèi)容缺失、空狀態(tài)等。同時還要看下不同機(jī)型適配的問題，保證不同機(jī)型的界面呈現(xiàn)效果一致，包括關(guān)鍵信息及操作是否超出屏幕，是否出現(xiàn)覆蓋、拉伸等情況。

數(shù)據(jù)監(jiān)測

功能上線后也不代表需求的完結(jié)，我們還要及時追蹤數(shù)據(jù)的情況。數(shù)據(jù)的量化指標(biāo)可以很好佐證我們方案的價值，也能幫助我們在錯誤道路上及時轉(zhuǎn)向。我們可根據(jù)數(shù)據(jù)反映的情況及時調(diào)整對應(yīng)的產(chǎn)品策略，促進(jìn)我們設(shè)計上的修改、完善等工作。

4. 寫在最后

所以設(shè)計能力再強(qiáng)，設(shè)計方案再好，沒有后續(xù)良好的執(zhí)行，也終究不過是廢紙一張。一個優(yōu)秀的項(xiàng)目落地是大家共同協(xié)作的結(jié)果。如果設(shè)計還原出了問題，首先要自查，確保自身工作做到位，提升設(shè)計輸出質(zhì)量，依照設(shè)計規(guī)范做設(shè)計，做到邏輯自洽。我們要做足前期的準(zhǔn)備工作，盡可能的多思考、多溝通，打造專業(yè)的“人設(shè)”，不僅贏得開發(fā)同學(xué)的尊重也更方便自己順利開展工作。

關(guān)于提升設(shè)計還原質(zhì)量，這里只是拋磚引玉，如果大家有更好的工作方法，歡迎評論區(qū)留言交流～

歡迎關(guān)注「58UXD」的微信公眾號：