設(shè)計師總是習(xí)慣于把時間用在雕琢設(shè)計稿上，而忽略掉后期的設(shè)計驗收，而這樣就會影響工作的效率。那么，我們到底要如何進行設(shè)計驗收呢？

一直以來，設(shè)計驗收都不太受重視，設(shè)計師總是習(xí)慣于把時間用在雕琢設(shè)計稿上，而忽略掉后期的設(shè)計驗收。這就導(dǎo)致程序員在修改bug的時候， 常常需要多次修改才能還原設(shè)計稿的效果， 重復(fù)返工， 極其影響效率。但其實很多時候只要設(shè)計師在驗收的時候做一點點改變， 多花費幾分鐘，就能大大提高bug的修改率。

關(guān)于設(shè)計驗收

之所以驗收不受重視，我覺得主要有兩個原因： 一個是對自己和合作的程序員極其自信， 認為對方能Get到自己所有的點， 會完全按照設(shè)計稿來， 另一個是設(shè)計師沒有意識到驗收的重要性， 潛意識里認為最后開發(fā)的效果不好是開發(fā)的鍋， 跟自己沒有關(guān)系。

但其實在外人看來， 開發(fā)后的效果不好，設(shè)計稿做的再完美也是徒勞，畢竟最后看的還是線上稿。誰也不想自己的稿子拿不出手吧…

錯誤的做法

1. 口頭說明

很不幸，實際工作中很多設(shè)計師發(fā)現(xiàn)問題后，只是口頭告訴開發(fā)哪里要改，這種方式很容易出現(xiàn)你說了10個，但開發(fā)只記得6個，最終只改對了4個，重復(fù)返工以及溝通的時間太長，效率不高。

當然在這種口頭說明的方法之下還產(chǎn)生了一個進階版，就是搬個小板凳坐到開發(fā)面前指哪改哪，但這個也僅限于對接開發(fā)人員少的時候，當你同時對接三五個開發(fā)的時候，是沒有這個精力的而且也會影響開發(fā)的進度。

2. 讓開發(fā)去找之前的標注稿

驗收的時候發(fā)現(xiàn)有問題的時候，讓開發(fā)自己去找之前的標注稿，對照著修改，就很容易出現(xiàn)重復(fù)返工，有時候開發(fā)改了但是沒改到位，比如：設(shè)計稿的元素大小是20px，第一次開發(fā)做的是27px，一輪驗收后他自己回去對照標注稿，改成了18px，那也就意味著你在二輪驗收的時候還得去提這個問題，時間成本浪費較大。

作為設(shè)計師而言，我們每天都是跟像素打交道，間距、字號差個幾像素，我們一眼就能看出來，但是作為每天跟代碼打交道的開發(fā)來說，差了幾像素在他們眼里是沒區(qū)別的，覺得都一樣。所以我們需要明確的告訴他這里移動幾像素，那里字號改大幾像素。

這就跟談戀愛一樣，男生和女生的思維很不一樣，同理，設(shè)計師和開發(fā)的思維也是不一樣的，我們在驗收的時候，可以稍微改變一下方式，多站在開發(fā)的角度考慮問題。

正確的做法

1. 截圖

驗收的時候，我們需要把開發(fā)實現(xiàn)后的效果截圖，然后再去和設(shè)計稿做對比。

2. 和設(shè)計稿作對比

我們可以直接把截圖放在設(shè)計圖上方，降低透明度，大致比對下，就知道哪里不太對，然后再具體標注需求修改地方的參數(shù)。

在這其中也有幾個小技巧，當設(shè)計稿做的間距是48px時，開發(fā)實現(xiàn)后的效果是30px，這個時候我們可以直接標明間距縮小18px，而不是間距高度48px。開發(fā)也只需要在原來設(shè)置的參數(shù)上加或者減18px，而不用再去算參數(shù)了。當圖標切圖錯誤的時候，直接注明該圖標需要更換，圖片比例不對的時候也一樣。

驗收需要注意的問題

1. 分割線

在驗收的時候要特別注意分割線的問題，分割線是在所有屏幕上都是1px，但是很多程序員沒有注意這個，或者說設(shè)計師在開發(fā)前沒有特別說明，程序員就寫成了1pt。因為pt是1x下的單位，px是實際單位。

所以在做分割線的是，單位需要是“px”，這樣才能保證每個屏幕的分割線都是1像素。

2. 文字截斷范圍

當文字左右兩邊有內(nèi)容的時候，我們需要標明文字可顯示的范圍，也就是說它最多能顯示幾個字。

3. 小屏適配問題

設(shè)計師普遍用的設(shè)計尺寸都是750（1x為375），一些板式排版也是基于這個尺寸的，那么對于640的手機來說，某些地方就會出現(xiàn)排不下的情況，這個時候是需要設(shè)計師在做設(shè)計稿的時候就考慮到這一點，并給出適配規(guī)則。在后期驗收的時候也需要特別去注意這個問題。

4. 溝通不到位導(dǎo)致的問題

有一些頁面有很多種實現(xiàn)方式，如果前期沒有跟開發(fā)溝通清楚，就會導(dǎo)致最終實現(xiàn)的效果存在誤差，比如：下方這個頁面，單給一張靜態(tài)圖，開發(fā)根本不知道設(shè)計師想要的實現(xiàn)方式是什么，固定間距還是控制左右距離，中間自適應(yīng)。最后很大可能就會按照自己的理解去做了，導(dǎo)致出現(xiàn)重復(fù)返工的現(xiàn)象。

總結(jié)

在后期視覺驗收的時候，我們可以換位思考，把自己當做程序員，站在他們的角度去思考問題，怎么樣的驗收方式會更方便開發(fā)修改，減少重復(fù)返工的次數(shù)，情愿驗收標注的時候多花10分鐘，也要把修改意見寫詳細，幫開發(fā)節(jié)省時間，反過來也幫我們自己減少了二次驗收的成本。

作者：橙子的橙子? ?公眾號：海鹽社

本文由 @橙子的橙子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議