引言

設計稿不僅是設計師設計水平的體現，它同時也體現了公司的設計水平。即使我們設計師使用藍湖這種帶標注功能的軟件給到前端，也阻擋不了他們有自己的想法。如果原設計是100分的話，開發實現是50分，那么在客戶眼里我們公司產品設計能力就只有這50分。所以設計走查在整個產品設計過程中起著很重要的作用。

    

在講述設計走查前，我想先給說一下盒模型。理解盒模型能更好的做出設計稿，也能更好的和開發進行對接。

當我們明白前端是如何布局咱們設計稿后，我們設計師在作圖的過程中就會懂得如何從落地的角度思考問題。

有開發思維的設計稿弄好、待開發實現后，就可以開始設計走查了。

筆者在做設計走查的時候最常用的就是瀏覽器自帶的“檢查”工具。

我們從檢查里看它的CSS樣式，如字體、字號、顏色、邊框、背景色、間距等等。如果這個div沒有樣式，也可以去它的父級看看。這里就簡單的拿字體、字號、顏色舉個例子，涉及的元素過多，就不一一展示啦～

設計師開始走查時，意味著前端框架搭建結束、產品即將定型、用戶即將見到的版本，所以在交付之前設計師需要查驗以下內容：

一、整體架構

1.導航是否清晰易理解？

一般設計走查檢查的是【全局導航】，所謂全局導航指的是它可以覆蓋整個產品的通路，一般情況都是產品的一級分類。用戶可以根據導航快速定位到目標節點。

2.頁面中信息層級是否清晰合理？

一般通過設計評審的設計稿在信息層級這里都沒有問題。設計師可以看看公司過往的項目，檢查一下有沒有需要改進的地方。

3.樣式是否符合高保真？

4.內容距離上下左右的間距是否統一 、是否符合規范？

二、視覺走查

1.文本：

（1）文字是否使用公司規范字體？

（2）標題字號、內容字號是否和規范保持一致？需要加粗的字體有無加粗？

（3）文字顏色是否使用正確？（需要檢查的有普通文本、標題、超鏈接、提示/重點信息等等）

（4）行間距、段落間距是否正確？

2.按鈕

（1）是否根據功能劃分為主按鈕、次按鈕、文字按鈕及特殊按鈕？

（2）按鈕狀態是否分為以下四種狀態：默認狀態、懸浮狀態、點擊狀態、禁用狀態？

（3）按鈕各個狀態下樣式是否正確？

         需要檢查：長度、高度、字號、字體顏色、邊框顏色、圓角、背景顏色。 

         按鈕寬度如果為自適應，需檢查文字到按鈕兩邊的間距（padding）是否為規范固定值。

3.頁簽

（1）是否根據功能劃分為選中態、未選中態和懸浮狀態？三種狀態區分是否明顯？

（2）頁簽各個狀態下的樣式是否正確：

         需要檢查：長度、高度、字號、字體顏色、邊框顏色、背景顏色。  

         頁簽寬度如果為自適應，需檢查文字到按鈕兩邊的間距（padding）是否為規范固定值。

4.選擇器（單選、多選、日期選擇、開關切換、下拉選擇、 滑塊選擇等）

（1）單選是否為圓形、多選是否為方形？橫向縱向的間距是否符合規范？

（2）日期選擇分為標準日期和組合日期，樣式是否統一？使用場景是否正確？

（3）下拉選擇要區分普通下拉、樹選擇、級聯選擇，需要判斷使用場景是否正確？

5.表單

（1）表單狀態是否齊全？樣式是否正確？

         默認狀態、懸停狀態、激活狀態、只讀狀態、禁用狀態、報錯狀態。

         需要檢查各個狀態下的樣式：字體顏色、輸入框邊框顏色、長度、寬度、圓角。

（2）表單是上下結構還是左右結構？如果是左右結構，是否為文本右對齊、輸入框左對齊？

         文本最長為多少字，超出的文字統一用什么樣的形式體現？

         輸入框內如果有圖標，圖標樣式是否統一？

6.表格

（1）表格樣式是否正確？

         長度、寬度、文本、邊框、斑馬線、鼠標懸停、選中行。

（2）對齊方式、間距等是否符合規范？

（3）分頁器樣式是否符合規范？

7.其他

彈窗、提示、缺省狀態、圖表、圖標樣式等是否和高保真保持一致？

三、交互走查

1.流程

（1）是否支持自動保存？退出前是否有保存提示？

（2）異常流程是否有提示？是否可以恢復？

2.頁面操作

（1）是否在1秒內打開新頁面？

（2）下鉆頁、新開頁場景是否使用正確？

（3）執行具有破壞性的操作（如刪除、格式化等）是否有彈窗提示？

3.顯示內容

（1）語言是否簡潔、易懂、有禮貌？

（2）文字內容是否無錯別字、無歧義、無語法錯誤？

（3）數據的極值、排序規則是否考慮周全？

（4）數據顯示的內容是否涉及權限和隱私？

4.選擇輸入

（1）是否選擇了正確的表單形式？

（2）輸入前是否有提示？

（3）輸入完成是否需要及時反饋？（填寫正確、填寫錯誤等）

（4）是否設置默認項和自定義選項？

（5）是否告知用戶的完成時間及進度展示？（測試、線上考試等）

5.反饋

（1）成功操作的反饋，是否需要引導下一步操作？（根據實際業務來定）

（2）預警類的信息是否存在提示？

（3）失敗操作的反饋，是否存在解釋與建議？

6.用戶

（1）新用戶是否需要新手提示？

（2）多種用戶之間是否可以角色切換？

（3）角色變更后用戶是否清楚？

設計走查插件推薦

1.Copiexl

Copixel是字節跳動的一款走查驗收瀏覽器插件，通過在網頁上放置設計稿圖片檢查設計稿與開發結果是否完全重疊來判斷開發的還原精度，精確到像素實現高質量的項目還原效果。

因為官網里有使用教程，所以這里就不過多講解，大家可以點擊官網查看。官方網址為https://copixel.bytedance.com/。

2.CSS Peeper

這是一個設計走查 / 樣式復制 / 資源下載的效率神器，它能夠輕松查看網頁端當中所有元素的 CSS 屬性。如果是作為設計走查工具的話，它的特色主要就是高效，不像“檢查”一樣要在眾多CSS中去找我們需要的，但是弊端就是查看不了全局。查看全局還是需要我們使用瀏覽器自帶的檢查功能哦。

官網往下翻也有教程哦，官方網址為https://csspeeper.com/。

有些人認為走查是測試工程師的工作，我并不否認，但我也不是很贊同。只能說這種想法太過于理想化，并不是每個測試工程師既懂視覺、又懂開發、又懂業務流程的。畢竟是在我們自己的專業領域里，所以設計師做好走查還是很重要的～