這是一款 字節(jié)跳動(dòng) 出品的高效走查插件，它的原理十分簡(jiǎn)單，首先打開(kāi)需要校驗(yàn)的線上項(xiàng)目；接著上傳你的設(shè)計(jì)稿圖片；然后通過(guò)降低設(shè)計(jì)稿的透明度，達(dá)到項(xiàng)目快速走查的目的。開(kāi)發(fā)哪里有問(wèn)題，一眼便知。簡(jiǎn)單教大家如何 安裝使用 這樣一款插件：
1.安裝方法：
首先打開(kāi)軟件的官方網(wǎng)站（https://copixel.bytedance.com/），點(diǎn)擊免費(fèi)下載（這里只支持Chrome瀏覽器，如果你是Safari 、Firefox、Opera等瀏覽器，在官網(wǎng)往下滾動(dòng)，同樣也是提供了下載入口）。
點(diǎn)擊下載過(guò)后，就會(huì)跳轉(zhuǎn)到 Google 的應(yīng)用商店當(dāng)中，點(diǎn)擊安裝即可，與瀏覽器插件的安裝方式類似（這里需要科學(xué)網(wǎng)絡(luò)，如果你訪問(wèn)不了 Google應(yīng)用商店，可以直接在公眾號(hào)后臺(tái)回復(fù)“設(shè)計(jì)走查”，提供了另一種安裝方式）。
2.使用教程
01.選擇合適的頁(yè)面設(shè)計(jì)尺寸
建議按照主流窗口尺寸的寬度設(shè)計(jì)，如：1366px、1440px、1920px；推薦最小設(shè)計(jì)尺寸使用1366px、1440px，最大設(shè)計(jì)尺寸1920px(寬)。目的是按照 1:1 導(dǎo)出設(shè)計(jì)圖，與開(kāi)發(fā)頁(yè)面顯示效果一致。
02.該如何輸出設(shè)計(jì)稿？
Copiexl 瀏覽器插件的原理是將你的設(shè)計(jì)稿 懸浮在前端還原的頁(yè)面當(dāng)中進(jìn)行對(duì)比，這樣就能快速知道自己的設(shè)計(jì)頁(yè)面有何問(wèn)題。
因此我們需要將設(shè)計(jì)稿進(jìn)行一次性導(dǎo)出成 PNG 文件。這樣可以批量導(dǎo)入到插件當(dāng)中，直接切換設(shè)計(jì)稿提高走查效率。
03.如何使用
打開(kāi)前端實(shí)現(xiàn)好的頁(yè)面，使用你剛剛安裝好的瀏覽器插件“Copixel”，添加UI設(shè)計(jì)圖。
通過(guò)調(diào)整設(shè)計(jì)圖位置、大小和透明度使其與開(kāi)發(fā)頁(yè)面高度重合，配合 有截圖標(biāo)注功能的軟件（比如：Xinp）進(jìn)行找茬標(biāo)記。使用 走查文檔 標(biāo)記存在問(wèn)題的地方并說(shuō)明問(wèn)題，這樣就能高效完成項(xiàng)目走查。
然后將有問(wèn)題的走查內(nèi)容直接分享給開(kāi)發(fā)即可。
插件使用的視頻方法：
轉(zhuǎn)載至Copiexl幫助文檔
CSS Peeper
這是一個(gè) 設(shè)計(jì)走查 / 樣式復(fù)制 / 資源下載 的效率神器，它能夠輕松查看網(wǎng)頁(yè)端當(dāng)中所有元素的CSS屬性，并且不需要像Chrome瀏覽器那樣 “右鍵” – “檢查” 瀏覽器元素，然后在許許多多的代碼當(dāng)中尋找你需要的CSS代碼。我們只需要點(diǎn)擊插件，選擇元素就能夠快速檢查樣式。
場(chǎng)景一、設(shè)計(jì)走查
比如當(dāng)前端工程師完成頁(yè)面過(guò)后，需要設(shè)計(jì)師進(jìn)行一個(gè)頁(yè)面的走查，這個(gè)時(shí)候很多同學(xué)往往就會(huì)靠著自己的像素眼進(jìn)行一一的比對(duì)，如果稍微有點(diǎn)經(jīng)驗(yàn)的B端設(shè)計(jì)師會(huì)打開(kāi)瀏覽器自帶的檢查，進(jìn)行元素的核對(duì)。
然而瀏覽器自帶的檢查其實(shí)更多是面向程序員進(jìn)行設(shè)計(jì)的，對(duì)于我們?cè)O(shè)計(jì)師而言，能夠看懂的卻只有一小部分內(nèi)容，顯然檢查的效率并不會(huì)太高效。
這時(shí)候使用CSS Peeper，就可以輕松對(duì)網(wǎng)頁(yè)當(dāng)中的CSS樣式進(jìn)行檢查，我們不僅可以看到元素的常規(guī)屬性，比如顏色、背景、間距；還可以看到元素的盒子模型，可以看到元素的 Padding、Margin…
通過(guò)這個(gè)插件，就能清晰的看見(jiàn)開(kāi)發(fā)究竟是在哪一部分還原出現(xiàn)問(wèn)題，并且能夠很“欠揍”的在他面前秀一下～
場(chǎng)景二、樣式復(fù)制
對(duì)于設(shè)計(jì)師來(lái)說(shuō)，就不用再去糾結(jié)競(jìng)品究竟是如何設(shè)計(jì)？如何還原出來(lái)，因?yàn)槿魏尉W(wǎng)頁(yè)上的元素，你都可以通過(guò)這個(gè)插件，去查看他的還原思路，并且知道它的設(shè)計(jì)樣式以及屬性
同時(shí)可以點(diǎn)擊顏色或者圖片，將該頁(yè)面用到的所有顏色或者圖片總結(jié)出來(lái)進(jìn)行匯總，可以導(dǎo)出，方便在設(shè)計(jì)風(fēng)格上進(jìn)行分析。
場(chǎng)景三：資源下載
使用CSS Peeper 能夠快速查看在該頁(yè)面當(dāng)中，所用到哪些圖標(biāo)、圖片。并且可以將這些資源快速下載到本地進(jìn)行保存。這樣你就可以成為資源小能手。
這也就是我工作當(dāng)中最常使用的插件，你最常使用什么插件？一起來(lái)分享聊聊！！
原文鏈接：CE青年（公眾號(hào)）
作者：CE青年
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》資源分享｜兩款B端設(shè)計(jì)走查神器
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.dzxscac.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)