建站
咨詢
售后
建站咨詢
新聞中心
B 端設(shè)計(jì)師在工作當(dāng)中一定會(huì)遇到這樣的情況：因?yàn)樯暇€的項(xiàng)目與設(shè)計(jì)稿不符而與前端進(jìn)行爭論、為了知道開發(fā)顏色使用是否準(zhǔn)確只有“截圖”，然后在設(shè)計(jì)軟件當(dāng)中“吸色”來進(jìn)行判斷。
所以在我們工作當(dāng)中設(shè)計(jì)走查就成為項(xiàng)目流程當(dāng)中非常重要的一環(huán)。雖然走查的流程往往比較復(fù)雜無聊，但是為了保證設(shè)計(jì)稿與上線項(xiàng)目的一致，我們就需要有“趁手的武器”才能夠項(xiàng)目的高度還原。不知道你們自己有什么好用的走查神器，我今天給大家分享兩款我自己非常常用的瀏覽器插件：
Copiexl
這是一款字節(jié)跳動(dòng)出品的高效走查插件，它的原理十分簡單，首先打開需要校驗(yàn)的線上項(xiàng)目;接著上傳你的設(shè)計(jì)稿圖片;然后通過降低設(shè)計(jì)稿的透明度，達(dá)到項(xiàng)目快速走查的目的。開發(fā)哪里有問題，一眼便知。簡單教大家如何安裝使用這樣一款插件：
1. 安裝方法：
首先打開軟件的官方網(wǎng)站( https://copixel.bytedance.com/ )，點(diǎn)擊免費(fèi)下載(這里只支持 Chrome 瀏覽器，如果你是 Safari、Firefox、Opera 等瀏覽器，在官網(wǎng)往下滾動(dòng)，同樣也是提供了下載入口)
點(diǎn)擊下載過后，就會(huì)跳轉(zhuǎn)到 Google 的應(yīng)用商店當(dāng)中，點(diǎn)擊安裝即可，與瀏覽器插件的安裝方式類似(這里需要搭梯子)
2. 使用教程
選擇合適的頁面設(shè)計(jì)尺寸
建議按照主流窗口尺寸的寬度設(shè)計(jì)，如：1366px、1440px、1920px;推薦最小設(shè)計(jì)尺寸使用 1366px、1440px，最大設(shè)計(jì)尺寸 1920px(寬)。目的是按照 1:1 導(dǎo)出設(shè)計(jì)圖，與開發(fā)頁面顯示效果一致
該如何輸出設(shè)計(jì)稿?
Copiexl 瀏覽器插件的原理是將你的設(shè)計(jì)稿懸浮在前端還原的頁面當(dāng)中進(jìn)行對(duì)比，這樣就能快速知道自己的設(shè)計(jì)頁面有何問題。
因此我們需要將設(shè)計(jì)稿進(jìn)行一次性導(dǎo)出成 PNG 文件。這樣可以批量導(dǎo)入到插件當(dāng)中，直接切換設(shè)計(jì)稿提高走查效率。
如何使用
打開前端實(shí)現(xiàn)好的頁面，使用你剛剛安裝好的瀏覽器插件“Copixel”，添加 UI 設(shè)計(jì)圖。
通過調(diào)整設(shè)計(jì)圖位置、大小和透明度使其與開發(fā)頁面高度重合，配合有截圖標(biāo)注功能的軟件(比如：Xinp)進(jìn)行找茬標(biāo)記。使用走查文檔標(biāo)記存在問題的地方并說明問題，這樣就能高效完成項(xiàng)目走查。
然后將有問題的走查內(nèi)容直接分享給開發(fā)即可。
CSS Peeper
https://csspeeper.com/
這是一個(gè)設(shè)計(jì)走查 / 樣式復(fù)制 / 資源下載的效率神器，它能夠輕松查看網(wǎng)頁端當(dāng)中所有元素的 CSS 屬性，并且不需要像 Chrome 瀏覽器那樣 “右鍵” – “檢查” 瀏覽器元素，然后在許許多多的代碼當(dāng)中尋找你需要的 CSS 代碼。我們只需要點(diǎn)擊插件，選擇元素就能夠快速檢查樣式。
場景一：設(shè)計(jì)走查
比如當(dāng)前端工程師完成頁面過后，需要設(shè)計(jì)師進(jìn)行一個(gè)頁面的走查，這個(gè)時(shí)候很多同學(xué)往往就會(huì)靠著自己的像素眼進(jìn)行一一的比對(duì)，如果稍微有點(diǎn)經(jīng)驗(yàn)的 B 端設(shè)計(jì)師會(huì)打開瀏覽器自帶的檢查，進(jìn)行元素的核對(duì)
然而瀏覽器自帶的檢查其實(shí)更多是面向程序員進(jìn)行設(shè)計(jì)的，對(duì)于我們?cè)O(shè)計(jì)師而言，能夠看懂的卻只有一小部分內(nèi)容，顯然檢查的效率并不會(huì)太高效
這時(shí)候使用 CSS Peeper，就可以輕松對(duì)網(wǎng)頁當(dāng)中的 CSS 樣式進(jìn)行檢查，我們不僅可以看到元素的常規(guī)屬性，比如顏色、背景、間距;還可以看到元素的盒子模型，可以看到元素的 Padding、Margin…
通過這個(gè)插件，就能清晰的看見開發(fā)究竟是在哪一部分還原出現(xiàn)問題，并且能夠很“欠揍”的在他面前秀一下～
場景二：樣式復(fù)制
對(duì)于設(shè)計(jì)師來說，就不用再去糾結(jié)競品究竟是如何設(shè)計(jì)?如何還原出來，因?yàn)槿魏尉W(wǎng)頁上的元素，你都可以通過這個(gè)插件，去查看他的還原思路，并且知道它的設(shè)計(jì)樣式以及屬性
同時(shí)可以點(diǎn)擊顏色或者圖片，將該頁面用到的所有顏色或者圖片總結(jié)出來進(jìn)行匯總，可以導(dǎo)出，方便在設(shè)計(jì)風(fēng)格上進(jìn)行分析
場景三：資源下載
使用 CSS Peeper 能夠快速查看在該頁面當(dāng)中，所用到哪些圖標(biāo)、圖片。并且可以將這些資源快速下載到本地進(jìn)行保存。這樣你就可以成為資源小能手
這也就是我工作當(dāng)中最常使用的插件，你最常使用什么插件?一起來分享聊聊!!
當(dāng)前名稱：讓設(shè)計(jì)稿還原度更高！兩款高手都在用的B端設(shè)計(jì)走查神器
分享鏈接：http://m.5511xx.com/article/copopid.html
