設(shè)計(jì)驗(yàn)收，是我們?cè)诠ぷ鳟?dāng)中會(huì)面臨的一大難題，有些設(shè)計(jì)師說不過開發(fā)、有的設(shè)計(jì)師又不會(huì)代碼...

今天我們深度聊聊設(shè)計(jì)驗(yàn)收，剖析在驗(yàn)收過程當(dāng)中經(jīng)常遇到的坑。

一、什么是設(shè)計(jì)驗(yàn)收

設(shè)計(jì)驗(yàn)收，是我們?cè)O(shè)計(jì)師與開發(fā)、產(chǎn)品團(tuán)隊(duì)在協(xié)作的過程中，為驗(yàn)證產(chǎn)品實(shí)現(xiàn)的一致性，所經(jīng)歷的設(shè)計(jì)階段。

因?yàn)殚_發(fā)過程當(dāng)中一定會(huì)出現(xiàn)相應(yīng)紕漏，這時(shí)候可以通過驗(yàn)收的方式進(jìn)行彌補(bǔ)，從而讓我們的設(shè)計(jì)方案落地、產(chǎn)品體驗(yàn)不打折。

在之前經(jīng)常會(huì)遇到一個(gè)問題，很多中小型企業(yè)的老板來找到我咨詢，說到：“CE 我們系統(tǒng)也招了設(shè)計(jì)師，但為什么在最終的產(chǎn)出上沒有太好效果”。

當(dāng)我仔細(xì)詢問才發(fā)現(xiàn)，他們的設(shè)計(jì)師設(shè)計(jì)完頁面后就可以休息，也不會(huì)管開發(fā)落地的真實(shí)效果，這也就導(dǎo)致設(shè)計(jì)稿≠落地產(chǎn)品 ，整體存在較大偏差。

而在我們整個(gè)的設(shè)計(jì)流程當(dāng)中，主要包含：需求分析、產(chǎn)品規(guī)劃、交互視覺設(shè)計(jì)、開發(fā)集成、測(cè)試驗(yàn)收、部署上線。

驗(yàn)收是處于最后的收尾階段，因此很多時(shí)候團(tuán)隊(duì)容易忽視、開發(fā)不愿配合，這也就導(dǎo)致設(shè)計(jì)結(jié)果很難交付。

關(guān)于驗(yàn)收，其實(shí)本質(zhì)上就是存檔。也就是將自己當(dāng)前的信息內(nèi)容進(jìn)行存檔，等出現(xiàn)問題時(shí)能夠快速找到對(duì)應(yīng)問題點(diǎn)。

比如這里的設(shè)計(jì)驗(yàn)收，我們提交給開發(fā)過后，他不改，他是主責(zé)，你是次責(zé)；但是你不給他說，那就是你的問題。

所以將我們這個(gè)信息提交過后，給到相關(guān)人員，讓其明白我做了，只是沒人修改罷了。

想要全面了解設(shè)計(jì)驗(yàn)收，我們首先得了解設(shè)計(jì)驗(yàn)收的整體流程。

二、設(shè)計(jì)驗(yàn)收的流程

那如何進(jìn)行設(shè)計(jì)驗(yàn)收，是開發(fā)完了后我們就進(jìn)行，其實(shí)真實(shí)情況又會(huì)有所偏差。

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

首先在驗(yàn)收之前，我們都需要做好提前的準(zhǔn)備。也就是我們?cè)O(shè)計(jì)方案一定要將對(duì)應(yīng)重要信息標(biāo)注清楚，比如重要模塊的間距、頁面核心的顏色、組件庫、交互規(guī)則等內(nèi)容。

這里經(jīng)常會(huì)提到設(shè)計(jì)師說：“不是這些間距在 Figma 上都有么，開發(fā)不會(huì)看么？”

但在工作協(xié)同時(shí)，為了同事能夠快速理解你的意思，有些內(nèi)容是需要標(biāo)注清楚，才會(huì)使同事覺得你更為專業(yè)，更愿意與你合作。

因此這里建議各位同學(xué)都要將你的方案標(biāo)注清楚，這里大家可以查看之前寫過的標(biāo)注文章。

比如在這個(gè)功能模塊當(dāng)中，我們就會(huì)標(biāo)注清楚 導(dǎo)航菜單核心內(nèi)容的間距、重點(diǎn)顏色的提示（顏色肉眼看上去區(qū)別不大 開發(fā)容易忽略）、功能模塊當(dāng)中的重要模塊（因?yàn)樵陂_發(fā)精力有限的情況下 標(biāo)注重點(diǎn)進(jìn)行還原）

這就會(huì)使你的項(xiàng)目還原總是會(huì)優(yōu)于其他設(shè)計(jì)師的重要原因。

標(biāo)注清楚后，我們還需要明確在什么情況下可以進(jìn)行設(shè)計(jì)驗(yàn)收。

建議大家記住兩個(gè)時(shí)間節(jié)點(diǎn)：

1. 冒煙測(cè)試階段：先進(jìn)行簡單驗(yàn)收，要提醒開發(fā)，記得完成。這樣在后面正式驗(yàn)收時(shí)會(huì)有更多話語權(quán)，讓你的設(shè)計(jì)內(nèi)容順利落地。
2. 完全提測(cè)階段：深度查看內(nèi)容測(cè)試內(nèi)容，需要更為細(xì)致檢查。這樣能夠讓你的設(shè)計(jì)能力更具專業(yè)性。

執(zhí)行驗(yàn)收

執(zhí)行驗(yàn)收是我們的重中之重，在驗(yàn)收時(shí)會(huì)有不同的驗(yàn)收方式，我們也會(huì)將整體的驗(yàn)收分為兩類：設(shè)計(jì)模塊驗(yàn)收、多場(chǎng)景/設(shè)備驗(yàn)收

設(shè)計(jì)模塊驗(yàn)收就像我們做檢查，你不可能一下就能將系統(tǒng)所有模塊檢查完成，因此我們通常會(huì)按照 視覺層、交互層、內(nèi)容層 進(jìn)行驗(yàn)收。

視覺層：

主要驗(yàn)收的是系統(tǒng)當(dāng)中視覺部分的內(nèi)容，比如字體、顏色、圖標(biāo)、間距，這些都是驗(yàn)收時(shí)經(jīng)常犯的問題。

在視覺層級(jí)的驗(yàn)收普遍較為繁瑣，同時(shí)也是開發(fā)經(jīng)常出錯(cuò)的地方。因此這部分我們可以通過相應(yīng)的輔助插件實(shí)現(xiàn)驗(yàn)收效果的快速核查。

關(guān)于字體驗(yàn)收的部分，我們可以使用「什么字體 Whatfont」，它簡潔高效，當(dāng)你對(duì)字體有疑問時(shí)，你可以使用它快速查看，特別是字體本身使用較多的情況，可以快速核查。

對(duì)于字體落地，我們之前也寫過系列文章：

關(guān)于顏色驗(yàn)收，CSS Peepe、Smart Color Picker and Palettes，這類型插件它會(huì)更方便，快速生成當(dāng)前網(wǎng)頁所用顏色的整體色板。

不過現(xiàn)在 CSS Peepe 較多功能需要付費(fèi)，可以考慮第二個(gè)插件功能上也是平替的。

關(guān)于圖標(biāo)、圖片資源驗(yàn)收，可以使用圖片助手類似的插件，快速扒取當(dāng)前頁面的資源元素，即可做到 圖標(biāo)元素快速預(yù)覽，有問題直接提。

當(dāng)然在視覺層面， 整體的設(shè)計(jì)驗(yàn)收我們還可以使用 Copiexl、Pixelay Compare Design to Web，這兩個(gè)插件一個(gè)免費(fèi)、一個(gè)裝 X，大家自行選擇。

Pixelay 這個(gè)插件開會(huì)時(shí)，可以拖動(dòng)對(duì)比，然后范兒一下就起來了。

交互層：

主要服務(wù) 頁面跳轉(zhuǎn)、加載狀態(tài)、內(nèi)容通知 等模塊，由于這里的內(nèi)容通常都是動(dòng)態(tài)，因此更多時(shí)候需要通過錄屏軟件進(jìn)行記錄，才能讓開發(fā)同學(xué)明白邏輯。

關(guān)于交互層內(nèi)容的驗(yàn)收，建議大家先根據(jù)自己產(chǎn)品的核心流程開始，進(jìn)行對(duì)應(yīng)的設(shè)計(jì)驗(yàn)收，然后再去驗(yàn)收次要流程。

驗(yàn)收的插件上，建議使用 Screennity、Vidline，如果單純想要錄屏，會(huì)議軟件現(xiàn)在都有類似功能，自己開個(gè)線上會(huì)議也未嘗不可，本地錄屏就用 OBS 也以的。

內(nèi)容層：

它則更關(guān)注系統(tǒng)當(dāng)中 文案的準(zhǔn)確性、多語言適配、極端數(shù)據(jù)展示，比如系統(tǒng)中 長文本內(nèi)容、空狀態(tài) 都是我們需要關(guān)注的。

關(guān)于內(nèi)容層的部分，很多時(shí)候設(shè)計(jì)師需要反復(fù)創(chuàng)建數(shù)據(jù)，進(jìn)行測(cè)試。這樣效率極低同時(shí)異常麻煩。

如果你只是想查看靜態(tài)的數(shù)據(jù)樣式，其實(shí)可以直接使用 網(wǎng)頁編輯（WebEdit）插件，這樣呼出頁面后就可以直接操作，效更高。

多場(chǎng)景/設(shè)備驗(yàn)收

因?yàn)樵隍?yàn)收?qǐng)鼍爸?，?huì)涉及到多場(chǎng)景多設(shè)備的情況，比如移動(dòng)端會(huì)有 安卓、iOS、小程序等多設(shè)備端口，桌面端會(huì)有 Win、Mac、不同的瀏覽器 ，因此需要多設(shè)備來驗(yàn)收，保證設(shè)計(jì)的還原與準(zhǔn)確。

在設(shè)備方面因?yàn)榇蠖鄶?shù)設(shè)計(jì)師都使用 Mac 作為主系統(tǒng)，那我們也需要準(zhǔn)備一個(gè) Win 系統(tǒng)進(jìn)行使用，一般我們會(huì)要求電腦最好和用戶的大多數(shù)設(shè)備進(jìn)行匹配，這樣在最終的效果上會(huì)更具說服力。（記住屏幕顏色也要考慮一致）

如果沒有，也可以考慮安裝 Parallels Desktop、VMware Fusion 等虛擬機(jī)軟件，實(shí)現(xiàn)相同效果。

同時(shí)針對(duì)多分辨率情況，我們也需要使用 Window Resizer、Responsive Viewer，他們能夠快速生成多分辨率尺寸的方案，這樣可以減少設(shè)計(jì)師反復(fù)調(diào)整屏幕大小的時(shí)間，而且什么問題也一目了然。

移動(dòng)端驗(yàn)收

除了電腦端的驗(yàn)收之外，移動(dòng)端驗(yàn)收也是一大問題。

常見設(shè)計(jì)師對(duì)于移動(dòng)端的驗(yàn)收就是 截圖、傳圖片、界面標(biāo)注。在整個(gè)流程當(dāng)中斷點(diǎn)較多，很難解決流程當(dāng)中的各項(xiàng)問題。

作為體驗(yàn)設(shè)計(jì)師，我們要的就是將流程中的斷點(diǎn)打通，因此就可以利用現(xiàn)在較為成熟的平臺(tái)進(jìn)行推進(jìn)。

首先是 QtScrcpy，這是一個(gè)能夠在電腦端遠(yuǎn)程操控 安卓手機(jī) 的利器。

它能夠快速進(jìn)行移動(dòng)端的操作，并且軟件自帶就有高分辨率的錄屏功能，這對(duì)于我們?cè)O(shè)計(jì)驗(yàn)收來說異常簡單。

我們通常會(huì)使用錄屏+鼠標(biāo)晃動(dòng)，提醒開發(fā)有問題的位置，這樣省事，同時(shí)在電腦上就能形成閉環(huán)。當(dāng)然在系統(tǒng)當(dāng)中會(huì)有很多小功能，大家可以自行挖掘。

（很多設(shè)計(jì)師會(huì)用這個(gè)軟件摸魚，具體方法我就不得而知了...）

如果你是 Mac 系統(tǒng)，同時(shí)用的也是 iOS 設(shè)備，那就變得更容易。使用 Mac 自帶的鏡像軟件，就能高效解決驗(yàn)收問題，不過錄屏就得自己用其他軟件解決才行。

最后，微信小程序可以使用電腦版，同樣可以進(jìn)行快速的驗(yàn)收，因此可以作為一個(gè)備選可以進(jìn)行使用。

驗(yàn)收反饋

在驗(yàn)收過后，我們就需要記錄當(dāng)前系統(tǒng)中所存在的設(shè)計(jì)問題。

一般會(huì)用項(xiàng)目協(xié)同工具，如 jira、Trello、ONES 等，如果你們公司沒有這些軟件，也可以使用我們?cè)谥鞍l(fā)過的驗(yàn)收表格，已有 1000 人親測(cè)好用～

同時(shí)在問題截取層面，大家最好能夠?qū)I(yè)一些，盡量是使用 截圖軟件進(jìn)行快速標(biāo)注。比如 Xnip，里面的功能剛好可以滿足日常工作需求，因此十分推薦（免費(fèi)版即可）。

而驗(yàn)收最重要的便是同步，將重要信息同步給相關(guān)人員，因此你的問題描述不要拐彎抹角。

比如一個(gè)顏色問題，如果你描述“顏色不夠黑”，這對(duì)于大家來說過于主觀；你應(yīng)該描述為“顏色色值改為#222”，這樣會(huì)使溝通變得更簡單。

三、驗(yàn)收核心關(guān)注點(diǎn)

在實(shí)際工作當(dāng)中，驗(yàn)收其實(shí)并不簡單。

因?yàn)樵O(shè)計(jì)驗(yàn)收的本質(zhì)就是在向開發(fā)團(tuán)隊(duì)尋求資源，將設(shè)計(jì)任務(wù)進(jìn)行落地，對(duì)于很多團(tuán)隊(duì)而言設(shè)計(jì)師的話語權(quán)不高，會(huì)導(dǎo)致設(shè)計(jì)時(shí)奇思妙想，落地時(shí)雜亂無章，這時(shí)候我們就需要針對(duì)驗(yàn)收過程當(dāng)中的問題，進(jìn)行精準(zhǔn)打擊。

1. 建立合理的驗(yàn)收機(jī)制

有時(shí)候驗(yàn)收并不代表問題的結(jié)束，你會(huì)發(fā)現(xiàn)很多頁面牽一發(fā)而動(dòng)全身，所以當(dāng)驗(yàn)收后修改到其他地方還是會(huì)出現(xiàn)問題，所以我們需要針對(duì)系統(tǒng)進(jìn)行周期復(fù)查，來確保問題得到解決。

通常在團(tuán)隊(duì)當(dāng)中，我們會(huì)在每半年為系統(tǒng)進(jìn)行系統(tǒng)性的全面復(fù)查來確保問題得到解決。

通過這樣周期性的問題排查，也能夠保證系統(tǒng)正常運(yùn)轉(zhuǎn)。

2. 如何科學(xué)妥協(xié)

對(duì)于驗(yàn)收，很多設(shè)計(jì)師的期望就是 十全十美～

但真實(shí)情況你會(huì)發(fā)現(xiàn)開發(fā)真的很累。因作為設(shè)計(jì)師，可以在功能模塊與設(shè)計(jì)還原之間妥協(xié)，但是必須要告知后續(xù)優(yōu)化的時(shí)間節(jié)點(diǎn)，避免出現(xiàn)這個(gè)問題一直無人問津。

像是我們之前的做法，會(huì)說：“那這次迭代就先放放，把我標(biāo)注的這幾個(gè)重要問題改掉，我們下個(gè)小版本一起統(tǒng)一優(yōu)化?！?/p>

這樣你即妥協(xié)了，同時(shí)后續(xù)也會(huì)修改，大家其樂融融～