項目案例｜兩款B端設計走查神器
▲點擊"三分設"關注，回復"社群"加入我們
歡迎來到專業(yè)設計師學習交流社區(qū)
三分設｜連接知識，幫助全球 1 億設計師成長
轉(zhuǎn)自：CE青年
編輯：張夢如
共 2028 字 11 圖 預計閱讀 6 分鐘
B 端設計師在工作當中一定會遇到這樣的情況：因為上線的項目與設計稿不符而與前端進行爭論、為了知道開發(fā)顏色使用是否準確只有“截圖”，然后在設計軟件當中“吸色”來進行判斷。
所以在我們工作當中設計走查就成為項目流程當中非常重要的一環(huán)。雖然走查的流程往往比較復雜無聊，但是為了保證設計稿與上線項目的一致，我們就需要有“趁手的武器”才能夠項目的高度還原。不知道你們自己有什么好用的走查神奇，我今天給大家分享兩款我自己非常常用的瀏覽器插件：
Copiexl
這是一款 字節(jié)跳動 出品的高效走查插件，它的原理十分簡單，首先打開需要校驗的線上項目；接著上傳你的設計稿圖片；然后通過降低設計稿的透明度，達到項目快速走查的目的。開發(fā)哪里有問題，一眼便知。簡單教大家如何 安裝使用 這樣一款插件：
01.安裝方法：
首先打開軟件的官方網(wǎng)站（ https://copixel.bytedance.com/ ），點擊免費下載（這里只支持 Chrome 瀏覽器，如果你是 Safari 、 Firefox 、 Opera 等瀏覽器，在官網(wǎng)往下滾動，同樣也是提供了下載入口）
點擊下載過后，就會跳轉(zhuǎn)到 Google 的應用商店當中，點擊安裝即可，與瀏覽器插件的安裝方式類似（這里需要科學網(wǎng)絡，如果你訪問不了 Google 應用商店，可以直接在公眾號后臺回復“設計走查”，提供了另一種安裝方式）
02.使用教程：
1.選擇合適的頁面設計尺寸
建議按照主流窗口尺寸的寬度設計，如：1366 px 、 1440 px 、 1920 px ；推薦最小設計尺寸使用 1366 px 、 1440 px ，最大設計尺寸 1920 px (寬)。目的是按照 1 : 1 導出設計圖，與開發(fā)頁面顯示效果一致
2.該如何輸出設計稿？
Copiexl 瀏覽器插件的原理是將你的設計稿 懸浮在前端還原的頁面當中進行對比，這樣就能快速知道自己的設計頁面有何問題
因此我們需要將設計稿進行一次性導出成 PNG 文件。這樣可以批量導入到插件當中，直接切換設計稿提高走查效率
3.如何使用
打開前端實現(xiàn)好的頁面，使用你剛剛安裝好的瀏覽器插件“Copixel”，添加UI設計圖
通過調(diào)整設計圖位置、大小和透明度使其與開發(fā)頁面高度重合，配合 有截圖標注功能的軟件（比如：Xinp）進行找茬標記。使用 走查文檔 標記存在問題的地方并說明問題，這樣就能高效完成項目走查
然后將有問題的走查內(nèi)容直接分享給開發(fā)即可
插件使用的視頻方法：
CSS Peeper
這是一個 設計走查 / 樣式復制 / 資源下載 的效率神器，它能夠輕松查看網(wǎng)頁端當中所有元素的 CSS 屬性，并且不需要像 Chrome 瀏覽器那樣 “右鍵” - “檢查” 瀏覽器元素，然后在許許多多的代碼當中尋找你需要的 CSS 代碼。我們只需要點擊插件，選擇元素就能夠快速檢查樣式
場景一、設計走查
比如當前端工程師完成頁面過后，需要設計師進行一個頁面的走查，這個時候很多同學往往就會靠著自己的像素眼進行一一的比對，如果稍微有點經(jīng)驗的 B 端設計師會打開瀏覽器自帶的檢查，進行元素的核對。
然而瀏覽器自帶的檢查其實更多是面向程序員進行設計的，對于我們設計師而言，能夠看懂的卻只有一小部分內(nèi)容，顯然檢查的效率并不會太高效
這時候使用 CSS Peeper ，就可以輕松對網(wǎng)頁當中的 CSS 樣式進行檢查，我們不僅可以看到元素的常規(guī)屬性，比如顏色、背景、間距；還可以看到元素的盒子模型，可以看到元素的 Padding 、 Margin ...
通過這個插件，就能清晰的看見開發(fā)究竟是在哪一部分還原出現(xiàn)問題，并且能夠很“欠揍”的在他面前秀一下～
場景二、樣式復制
對于設計師來說，就不用再去糾結競品究竟是如何設計？如何還原出來，因為任何網(wǎng)頁上的元素，你都可以通過這個插件，去查看他的還原思路，并且知道它的設計樣式以及屬性
同時可以點擊顏色或者圖片，將該頁面用到的所有顏色或者圖片總結出來進行匯總，可以導出，方便在設計風格上進行分析
場景三：資源下載
使用 CSS Peeper 能夠快速查看在該頁面當中，所用到哪些圖標、圖片。并且可以將這些資源快速下載到本地進行保存。這樣你就可以成為資源小能手
— The end —
?? 原創(chuàng)文章精選??
游戲新手指導怎么做？一起看看《對馬島之魂》如何打造初次對抗體驗
35+ 的 Windows 系統(tǒng)到底有什么了不起？細數(shù)系統(tǒng)界面設計的演變
導師與學員的高效交流 APP 設計 —— Lightship
?? 我們一起聊設計 ???♂?
高質(zhì)量，學設計行交流微信群
期待與更多優(yōu)秀用戶體驗設計師一起成長
PS：歡迎大家關注三分設，每天早上9點，準時充電。分享優(yōu)質(zhì)設計、創(chuàng)意靈感、新知新識，定期大咖老師直播分享，零距離連麥，答疑解惑。 添加小小蟲微信號【 Lil_Bug 】，備注【 三分設 】加入！（只面向星標了公眾號三分設的粉絲）