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