B 端設(shè)計師在工作當(dāng)中一定會遇到這樣的情況：因為上線的項目與設(shè)計稿不符而與前端進行爭論、為了知道開發(fā)顏色使用是否準(zhǔn)確只有“截圖”，然后在設(shè)計軟件當(dāng)中“吸色”來進行判斷。

所以在我們工作當(dāng)中設(shè)計走查就成為項目流程當(dāng)中非常重要的一環(huán)。雖然走查的流程往往比較復(fù)雜無聊，但是為了保證設(shè)計稿與上線項目的一致，我們就需要有“趁手的武器”才能夠項目的高度還原。不知道你們自己有什么好用的走查神器，我今天給大家分享兩款我自己非常常用的瀏覽器插件：

Copiexl

這是一款字節(jié)跳動出品的高效走查插件，它的原理十分簡單，首先打開需要校驗的線上項目;接著上傳你的設(shè)計稿圖片;然后通過降低設(shè)計稿的透明度，達到項目快速走查的目的。開發(fā)哪里有問題，一眼便知。簡單教大家如何安裝使用這樣一款插件：

1. 安裝方法：

首先打開軟件的官方網(wǎng)站( https://copixel.bytedance.com/ )，點擊免費下載(這里只支持 Chrome 瀏覽器，如果你是 Safari、Firefox、Opera 等瀏覽器，在官網(wǎng)往下滾動，同樣也是提供了下載入口)

點擊下載過后，就會跳轉(zhuǎn)到 Google 的應(yīng)用商店當(dāng)中，點擊安裝即可，與瀏覽器插件的安裝方式類似(這里需要搭梯子)

2. 使用教程

選擇合適的頁面設(shè)計尺寸

建議按照主流窗口尺寸的寬度設(shè)計，如：1366px、1440px、1920px;推薦最小設(shè)計尺寸使用 1366px、1440px，最大設(shè)計尺寸 1920px(寬)。目的是按照 1:1 導(dǎo)出設(shè)計圖，與開發(fā)頁面顯示效果一致

該如何輸出設(shè)計稿?

Copiexl 瀏覽器插件的原理是將你的設(shè)計稿懸浮在前端還原的頁面當(dāng)中進行對比，這樣就能快速知道自己的設(shè)計頁面有何問題。

因此我們需要將設(shè)計稿進行一次性導(dǎo)出成 PNG 文件。這樣可以批量導(dǎo)入到插件當(dāng)中，直接切換設(shè)計稿提高走查效率。

如何使用

打開前端實現(xiàn)好的頁面，使用你剛剛安裝好的瀏覽器插件“Copixel”，添加 UI 設(shè)計圖。

通過調(diào)整設(shè)計圖位置、大小和透明度使其與開發(fā)頁面高度重合，配合有截圖標(biāo)注功能的軟件(比如：Xinp)進行找茬標(biāo)記。使用走查文檔標(biāo)記存在問題的地方并說明問題，這樣就能高效完成項目走查。

然后將有問題的走查內(nèi)容直接分享給開發(fā)即可。

CSS Peeper

https://csspeeper.com/

這是一個設(shè)計走查 / 樣式復(fù)制 / 資源下載的效率神器，它能夠輕松查看網(wǎng)頁端當(dāng)中所有元素的 CSS 屬性，并且不需要像 Chrome 瀏覽器那樣 “右鍵” – “檢查” 瀏覽器元素，然后在許許多多的代碼當(dāng)中尋找你需要的 CSS 代碼。我們只需要點擊插件，選擇元素就能夠快速檢查樣式。

場景一：設(shè)計走查

比如當(dāng)前端工程師完成頁面過后，需要設(shè)計師進行一個頁面的走查，這個時候很多同學(xué)往往就會靠著自己的像素眼進行一一的比對，如果稍微有點經(jīng)驗的 B 端設(shè)計師會打開瀏覽器自帶的檢查，進行元素的核對

然而瀏覽器自帶的檢查其實更多是面向程序員進行設(shè)計的，對于我們設(shè)計師而言，能夠看懂的卻只有一小部分內(nèi)容，顯然檢查的效率并不會太高效

這時候使用 CSS Peeper，就可以輕松對網(wǎng)頁當(dāng)中的 CSS 樣式進行檢查，我們不僅可以看到元素的常規(guī)屬性，比如顏色、背景、間距;還可以看到元素的盒子模型，可以看到元素的 Padding、Margin…

通過這個插件，就能清晰的看見開發(fā)究竟是在哪一部分還原出現(xiàn)問題，并且能夠很“欠揍”的在他面前秀一下～

場景二：樣式復(fù)制

對于設(shè)計師來說，就不用再去糾結(jié)競品究竟是如何設(shè)計?如何還原出來，因為任何網(wǎng)頁上的元素，你都可以通過這個插件，去查看他的還原思路，并且知道它的設(shè)計樣式以及屬性

同時可以點擊顏色或者圖片，將該頁面用到的所有顏色或者圖片總結(jié)出來進行匯總，可以導(dǎo)出，方便在設(shè)計風(fēng)格上進行分析

場景三：資源下載

使用 CSS Peeper 能夠快速查看在該頁面當(dāng)中，所用到哪些圖標(biāo)、圖片。并且可以將這些資源快速下載到本地進行保存。這樣你就可以成為資源小能手

這也就是我工作當(dāng)中最常使用的插件，你最常使用什么插件?一起來分享聊聊!!