引言

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

    

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

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

有開發(fā)思維的設計稿弄好、待開發(fā)實現(xiàn)后，就可以開始設計走查了。

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

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

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

一、整體架構

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

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

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

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

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

4.內(nèi)容距離上下左右的間距是否統(tǒng)一 、是否符合規(guī)范？

二、視覺走查

1.文本：

（1）文字是否使用公司規(guī)范字體？

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

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

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

2.按鈕

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

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

（3）按鈕各個狀態(tài)下樣式是否正確？

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

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

3.頁簽

（1）是否根據(jù)功能劃分為選中態(tài)、未選中態(tài)和懸浮狀態(tài)？三種狀態(tài)區(qū)分是否明顯？

（2）頁簽各個狀態(tài)下的樣式是否正確：

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

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

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

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

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

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

5.表單

（1）表單狀態(tài)是否齊全？樣式是否正確？

         默認狀態(tài)、懸停狀態(tài)、激活狀態(tài)、只讀狀態(tài)、禁用狀態(tài)、報錯狀態(tài)。

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

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

         文本最長為多少字，超出的文字統(tǒng)一用什么樣的形式體現(xiàn)？

         輸入框內(nèi)如果有圖標，圖標樣式是否統(tǒng)一？

6.表格

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

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

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

（3）分頁器樣式是否符合規(guī)范？

7.其他

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

三、交互走查

1.流程

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

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

2.頁面操作

（1）是否在1秒內(nèi)打開新頁面？

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

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

3.顯示內(nèi)容

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

（2）文字內(nèi)容是否無錯別字、無歧義、無語法錯誤？

（3）數(shù)據(jù)的極值、排序規(guī)則是否考慮周全？

（4）數(shù)據(jù)顯示的內(nèi)容是否涉及權限和隱私？

4.選擇輸入

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

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

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

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

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

5.反饋

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

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

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

6.用戶

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

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

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

設計走查插件推薦

1.Copiexl

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

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

2.CSS Peeper

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

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

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