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