引言
設(shè)計(jì)稿不僅是設(shè)計(jì)師設(shè)計(jì)水平的體現(xiàn)，它同時(shí)也體現(xiàn)了公司的設(shè)計(jì)水平。即使我們?cè)O(shè)計(jì)師使用藍(lán)湖這種帶標(biāo)注功能的軟件給到前端，也阻擋不了他們有自己的想法。如果原設(shè)計(jì)是100分的話，開發(fā)實(shí)現(xiàn)是50分，那么在客戶眼里我們公司產(chǎn)品設(shè)計(jì)能力就只有這50分。所以設(shè)計(jì)走查在整個(gè)產(chǎn)品設(shè)計(jì)過(guò)程中起著很重要的作用。
在講述設(shè)計(jì)走查前，我想先給說(shuō)一下盒模型。理解盒模型能更好的做出設(shè)計(jì)稿，也能更好的和開發(fā)進(jìn)行對(duì)接。
當(dāng)我們明白前端是如何布局咱們?cè)O(shè)計(jì)稿后，我們?cè)O(shè)計(jì)師在作圖的過(guò)程中就會(huì)懂得如何從落地的角度思考問(wèn)題。
有開發(fā)思維的設(shè)計(jì)稿弄好、待開發(fā)實(shí)現(xiàn)后，就可以開始設(shè)計(jì)走查了。
筆者在做設(shè)計(jì)走查的時(shí)候最常用的就是瀏覽器自帶的“檢查”工具。
我們從檢查里看它的CSS樣式，如字體、字號(hào)、顏色、邊框、背景色、間距等等。如果這個(gè)div沒(méi)有樣式，也可以去它的父級(jí)看看。這里就簡(jiǎn)單的拿字體、字號(hào)、顏色舉個(gè)例子，涉及的元素過(guò)多，就不一一展示啦～
設(shè)計(jì)師開始走查時(shí)，意味著前端框架搭建結(jié)束、產(chǎn)品即將定型、用戶即將見到的版本，所以在交付之前設(shè)計(jì)師需要查驗(yàn)以下內(nèi)容：
一、整體架構(gòu)
1.導(dǎo)航是否清晰易理解？
一般設(shè)計(jì)走查檢查的是【全局導(dǎo)航】，所謂全局導(dǎo)航指的是它可以覆蓋整個(gè)產(chǎn)品的通路，一般情況都是產(chǎn)品的一級(jí)分類。用戶可以根據(jù)導(dǎo)航快速定位到目標(biāo)節(jié)點(diǎn)。
2.頁(yè)面中信息層級(jí)是否清晰合理？
一般通過(guò)設(shè)計(jì)評(píng)審的設(shè)計(jì)稿在信息層級(jí)這里都沒(méi)有問(wèn)題。設(shè)計(jì)師可以看看公司過(guò)往的項(xiàng)目，檢查一下有沒(méi)有需要改進(jìn)的地方。
3.樣式是否符合高保真？
4.內(nèi)容距離上下左右的間距是否統(tǒng)一 、是否符合規(guī)范？
二、視覺走查
1.文本：
（1）文字是否使用公司規(guī)范字體？
（2）標(biāo)題字號(hào)、內(nèi)容字號(hào)是否和規(guī)范保持一致？需要加粗的字體有無(wú)加粗？
（3）文字顏色是否使用正確？（需要檢查的有普通文本、標(biāo)題、超鏈接、提示/重點(diǎn)信息等等）
（4）行間距、段落間距是否正確？
2.按鈕
（1）是否根據(jù)功能劃分為主按鈕、次按鈕、文字按鈕及特殊按鈕？
（2）按鈕狀態(tài)是否分為以下四種狀態(tài)：默認(rèn)狀態(tài)、懸浮狀態(tài)、點(diǎn)擊狀態(tài)、禁用狀態(tài)？
（3）按鈕各個(gè)狀態(tài)下樣式是否正確？
需要檢查：長(zhǎng)度、高度、字號(hào)、字體顏色、邊框顏色、圓角、背景顏色。
按鈕寬度如果為自適應(yīng)，需檢查文字到按鈕兩邊的間距（padding）是否為規(guī)范固定值。
3.頁(yè)簽
（1）是否根據(jù)功能劃分為選中態(tài)、未選中態(tài)和懸浮狀態(tài)？三種狀態(tài)區(qū)分是否明顯？
（2）頁(yè)簽各個(gè)狀態(tài)下的樣式是否正確：
需要檢查：長(zhǎng)度、高度、字號(hào)、字體顏色、邊框顏色、背景顏色。
頁(yè)簽寬度如果為自適應(yīng)，需檢查文字到按鈕兩邊的間距（padding）是否為規(guī)范固定值。
4.選擇器（單選、多選、日期選擇、開關(guān)切換、下拉選擇、 滑塊選擇等）
（1）單選是否為圓形、多選是否為方形？橫向縱向的間距是否符合規(guī)范？
（2）日期選擇分為標(biāo)準(zhǔn)日期和組合日期，樣式是否統(tǒng)一？使用場(chǎng)景是否正確？
（3）下拉選擇要區(qū)分普通下拉、樹選擇、級(jí)聯(lián)選擇，需要判斷使用場(chǎng)景是否正確？
5.表單
（1）表單狀態(tài)是否齊全？樣式是否正確？
默認(rèn)狀態(tài)、懸停狀態(tài)、激活狀態(tài)、只讀狀態(tài)、禁用狀態(tài)、報(bào)錯(cuò)狀態(tài)。
需要檢查各個(gè)狀態(tài)下的樣式：字體顏色、輸入框邊框顏色、長(zhǎng)度、寬度、圓角。
（2）表單是上下結(jié)構(gòu)還是左右結(jié)構(gòu)？如果是左右結(jié)構(gòu)，是否為文本右對(duì)齊、輸入框左對(duì)齊？
文本最長(zhǎng)為多少字，超出的文字統(tǒng)一用什么樣的形式體現(xiàn)？
輸入框內(nèi)如果有圖標(biāo)，圖標(biāo)樣式是否統(tǒng)一？
6.表格
（1）表格樣式是否正確？
長(zhǎng)度、寬度、文本、邊框、斑馬線、鼠標(biāo)懸停、選中行。
（2）對(duì)齊方式、間距等是否符合規(guī)范？
（3）分頁(yè)器樣式是否符合規(guī)范？
7.其他
彈窗、提示、缺省狀態(tài)、圖表、圖標(biāo)樣式等是否和高保真保持一致？
三、交互走查
1.流程
（1）是否支持自動(dòng)保存？退出前是否有保存提示？
（2）異常流程是否有提示？是否可以恢復(fù)？
2.頁(yè)面操作
（1）是否在1秒內(nèi)打開新頁(yè)面？
（2）下鉆頁(yè)、新開頁(yè)場(chǎng)景是否使用正確？
（3）執(zhí)行具有破壞性的操作（如刪除、格式化等）是否有彈窗提示？
3.顯示內(nèi)容
（1）語(yǔ)言是否簡(jiǎn)潔、易懂、有禮貌？
（2）文字內(nèi)容是否無(wú)錯(cuò)別字、無(wú)歧義、無(wú)語(yǔ)法錯(cuò)誤？
（3）數(shù)據(jù)的極值、排序規(guī)則是否考慮周全？
（4）數(shù)據(jù)顯示的內(nèi)容是否涉及權(quán)限和隱私？
4.選擇輸入
（1）是否選擇了正確的表單形式？
（2）輸入前是否有提示？
（3）輸入完成是否需要及時(shí)反饋？（填寫正確、填寫錯(cuò)誤等）
（4）是否設(shè)置默認(rèn)項(xiàng)和自定義選項(xiàng)？
（5）是否告知用戶的完成時(shí)間及進(jìn)度展示？（測(cè)試、線上考試等）
5.反饋
（1）成功操作的反饋，是否需要引導(dǎo)下一步操作？（根據(jù)實(shí)際業(yè)務(wù)來(lái)定）
（2）預(yù)警類的信息是否存在提示？
（3）失敗操作的反饋，是否存在解釋與建議？
6.用戶
（1）新用戶是否需要新手提示？
（2）多種用戶之間是否可以角色切換？
（3）角色變更后用戶是否清楚？
設(shè)計(jì)走查插件推薦
1.Copiexl
Copixel是字節(jié)跳動(dòng)的一款走查驗(yàn)收瀏覽器插件，通過(guò)在網(wǎng)頁(yè)上放置設(shè)計(jì)稿圖片檢查設(shè)計(jì)稿與開發(fā)結(jié)果是否完全重疊來(lái)判斷開發(fā)的還原精度，精確到像素實(shí)現(xiàn)高質(zhì)量的項(xiàng)目還原效果。
因?yàn)楣倬W(wǎng)里有使用教程，所以這里就不過(guò)多講解，大家可以點(diǎn)擊官網(wǎng)查看。官方網(wǎng)址為https://copixel.bytedance.com/。
2.CSS Peeper
這是一個(gè)設(shè)計(jì)走查 / 樣式復(fù)制 / 資源下載的效率神器，它能夠輕松查看網(wǎng)頁(yè)端當(dāng)中所有元素的 CSS 屬性。如果是作為設(shè)計(jì)走查工具的話，它的特色主要就是高效，不像“檢查”一樣要在眾多CSS中去找我們需要的，但是弊端就是查看不了全局。查看全局還是需要我們使用瀏覽器自帶的檢查功能哦。
官網(wǎng)往下翻也有教程哦，官方網(wǎng)址為https://csspeeper.com/。
有些人認(rèn)為走查是測(cè)試工程師的工作，我并不否認(rèn)，但我也不是很贊同。只能說(shuō)這種想法太過(guò)于理想化，并不是每個(gè)測(cè)試工程師既懂視覺、又懂開發(fā)、又懂業(yè)務(wù)流程的。畢竟是在我們自己的專業(yè)領(lǐng)域里，所以設(shè)計(jì)師做好走查還是很重要的～