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