提升網(wǎng)頁(yè)設(shè)計(jì)效率的7個(gè)Chrome擴(kuò)展程序

核心要點(diǎn):

• Chrome擴(kuò)展程序能簡(jiǎn)化設(shè)計(jì)流程，提供檢查和編輯網(wǎng)頁(yè)元素、鏈接檢查和生成復(fù)雜CSS代碼的工具，無(wú)需離開(kāi)瀏覽器。
• Page Ruler、WhatFont、CSS3 Generator、Check My Links、Gravit Designer、ColorZilla和StyleBot等擴(kuò)展程序?qū)υO(shè)計(jì)師特別有用，提供顏色取樣、字體識(shí)別和實(shí)時(shí)網(wǎng)站定制等功能。
• 使用這些擴(kuò)展程序可以節(jié)省時(shí)間并減少對(duì)其他軟件的需求，使其成為設(shè)計(jì)師和開(kāi)發(fā)人員的寶貴資源。

每個(gè)設(shè)計(jì)師都有自己獨(dú)特的工作方式。無(wú)論您是直接在瀏覽器中進(jìn)行設(shè)計(jì)（使用代碼），還是僅使用瀏覽器實(shí)時(shí)測(cè)試網(wǎng)頁(yè)設(shè)計(jì)，都有許多Chrome擴(kuò)展程序可以極大地簡(jiǎn)化您的工作流程。我最討厭的事情是什么？不得不打開(kāi)一個(gè)龐大的桌面應(yīng)用程序來(lái)完成一個(gè)相對(duì)較小的任務(wù)，所以我一直在尋找可以快速解決常見(jiàn)設(shè)計(jì)問(wèn)題的Chrome擴(kuò)展程序。

以下是我七個(gè)必不可少的Chrome擴(kuò)展程序，以及六個(gè)適用于Firefox的設(shè)計(jì)師擴(kuò)展程序（如果您是Web開(kāi)發(fā)人員，您可能需要在所有瀏覽器中進(jìn)行交叉測(cè)試?。?。

1. Page Ruler

Page Ruler是一個(gè)有用的Chrome擴(kuò)展程序，用于查找瀏覽器中任何元素的位置和/或大小——它比使用Chrome代碼檢查器更快，或者更糟糕的是，笨拙地遍歷CSS文件。首先，使用十字準(zhǔn)星圍繞目標(biāo)元素繪制一個(gè)選擇框。瀏覽器頂部的欄將顯示該元素的長(zhǎng)度和寬度，以及它距屏幕每一側(cè)的距離（好像應(yīng)用了fixed/absolute定位）。

提示：使用箭頭鍵微調(diào)您的選擇，以獲得最大精度。

2. WhatFont

由于我經(jīng)常需要檢查網(wǎng)頁(yè)上的字體，查看某些文本塊中使用的字體大小、實(shí)際字體名稱(chēng)及其顏色，因此WhatFont Chrome擴(kuò)展程序?qū)ξ襾?lái)說(shuō)非常有用。

單擊任何文本部分即可查找十六進(jìn)制/RGBA值、粗細(xì)、行高、字體樣式以及字體系列。

有時(shí)，在瀏覽器底部添加Chrome檢查窗口會(huì)在您工作時(shí)造成干擾，因此能夠在不打開(kāi)整個(gè)檢查窗口的情況下獲取所有這些信息會(huì)使事情變得更容易！

3. CSS3 Generator

CSS3 Generator是一個(gè)Chrome應(yīng)用程序，可幫助您生成一些復(fù)雜或難以記住的CSS代碼片段。對(duì)于簡(jiǎn)單的事情您不需要它，但讓我們面對(duì)現(xiàn)實(shí)，一些CSS值很難從頭開(kāi)始編寫(xiě)（例如創(chuàng)建跨瀏覽器兼容的漸變或CSS轉(zhuǎn)換所需的CSS）。只需點(diǎn)擊幾下，您就可以生成一些非常有用的CSS，在擴(kuò)展程序預(yù)覽中預(yù)覽它，然后復(fù)制CSS并將代碼粘貼到您的實(shí)際CSS文件中。

以下是支持的內(nèi)容列表：

• 多個(gè)文本陰影
• 十六進(jìn)制/RGBA代碼
• CSS轉(zhuǎn)換
• 邊框半徑
• 多個(gè)框陰影
• CSS列
• 箭頭（用于工具提示）
• 漸變（線(xiàn)性、徑向……甚至條紋）

4. Check My Links

URL鍵入錯(cuò)誤（或完全忘記包含它們，但那是另一回事）相當(dāng)容易，因此無(wú)論您的客戶(hù)是否需要現(xiàn)有網(wǎng)站的幫助，或者您是從頭開(kāi)始構(gòu)建網(wǎng)站，Check My Links對(duì)于任何網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)都是必不可少的。

Check My Links將掃描網(wǎng)頁(yè)并查找損壞的鏈接——就這么簡(jiǎn)單。它可以免去您手動(dòng)檢查它們的麻煩。UI非常直觀(guān)。Check My Links不會(huì)列出無(wú)效鏈接，而是簡(jiǎn)單地將實(shí)際網(wǎng)頁(yè)上的損壞鏈接變成紅色，而有效鏈接將顯示為綠色，因此您可以一目了然地看到需要修復(fù)的內(nèi)容。簡(jiǎn)單！

5. Gravit Designer

如果您需要設(shè)計(jì)圖形，但又不想打開(kāi)資源密集型設(shè)計(jì)應(yīng)用程序（或者如果您沒(méi)有/不想購(gòu)買(mǎi)一個(gè)），請(qǐng)下載適用于Chrome的免費(fèi)Gravit Designer擴(kuò)展程序。

令人驚訝的是，它非常快。使用常用的畫(huà)板尺寸開(kāi)始設(shè)計(jì)非常容易，包括博客圖形、社交媒體圖形和常用打印尺寸的預(yù)設(shè)。Gravit是一個(gè)矢量設(shè)計(jì)應(yīng)用程序，這使得設(shè)計(jì)可縮放的分辨率無(wú)關(guān)的設(shè)計(jì)變得非常容易。

我驚訝于許多選項(xiàng)和功能——它與使用Sketch等高級(jí)設(shè)計(jì)應(yīng)用程序并沒(méi)有太大區(qū)別，盡管視覺(jué)UI感覺(jué)更像Affinity Designer。

預(yù)期會(huì)有明顯的元素，如形狀、對(duì)齊、翻轉(zhuǎn)、旋轉(zhuǎn)、模糊、投影、復(fù)合形狀的創(chuàng)建等等。它還能夠?qū)С龅絇NG、JPG、SVG和PDF，符號(hào)功能（如Sketch和Adobe XD），具有貝塞爾曲線(xiàn)和貝塞爾曲線(xiàn)的復(fù)雜SVG編輯工具，甚至還有濾鏡，Gravit Designer實(shí)際上對(duì)于想要?jiǎng)?chuàng)建營(yíng)銷(xiāo)圖形的專(zhuān)業(yè)設(shè)計(jì)師、攝影師和業(yè)余設(shè)計(jì)師來(lái)說(shuō)是一個(gè)非常有吸引力的選擇。

我的意思是，想象一下能夠在Google Chrome中創(chuàng)建設(shè)計(jì)，而無(wú)需打開(kāi)Photoshop、Illustrator、Sketch或Adobe XD。實(shí)際上，您不必想象，您可以立即免費(fèi)下載Gravit Designer！

6. ColorZilla

ColorZilla是Google Chrome的吸管工具——它使您能夠通過(guò)幾次點(diǎn)擊從網(wǎng)頁(yè)中采樣任何顏色。首先，單擊Chrome中的ColorZilla擴(kuò)展程序圖標(biāo)，然后將光標(biāo)懸停在您要采樣的區(qū)域上。您將獲得該顏色的HSL、十六進(jìn)制和RGBA值。通常情況下，您需要截取網(wǎng)站屏幕截圖并將其導(dǎo)入Photoshop，但ColorZilla更快。ColorZilla還可以根據(jù)任何網(wǎng)站按需生成調(diào)色板，并使用顏色歷史記錄功能保存您最近使用的顏色，這使其在ColorPick Eyedropper等競(jìng)爭(zhēng)對(duì)手中脫穎而出。

7. StyleBot

StyleBot是一個(gè)方便的Chrome擴(kuò)展程序，適用于那些想要在實(shí)時(shí)網(wǎng)站上快速試用自定義CSS的人。它使您可以嘗試不同的字體、不同的顏色、不同的樣式等，而無(wú)需在代碼編輯器和Google Chrome之間來(lái)回切換。我們發(fā)現(xiàn)StyleBot作為一種在實(shí)際提交到代碼庫(kù)之前在實(shí)時(shí)網(wǎng)站上原型設(shè)計(jì)微小調(diào)整和更改的方法非常有用。

結(jié)論

使用這些節(jié)省時(shí)間的擴(kuò)展程序，通常很繁瑣或需要您打開(kāi)/購(gòu)買(mǎi)更多軟件的任務(wù)可以通過(guò)幾次點(diǎn)擊完成，您甚至不必離開(kāi)Web瀏覽器即可完成。設(shè)計(jì)師和開(kāi)發(fā)人員都會(huì)發(fā)現(xiàn)這些Chrome擴(kuò)展程序非常有用。

Chrome擴(kuò)展程序?qū)τ陂_(kāi)發(fā)網(wǎng)站的人肯定很有用，但是希望從實(shí)時(shí)網(wǎng)站中提取視覺(jué)信息以便在Sketch、Adobe XD或Photoshop中使用它的設(shè)計(jì)師也會(huì)很快看到明顯的節(jié)省時(shí)間的好處。

(FAQs部分已省略，因?yàn)榕c偽原創(chuàng)目標(biāo)不符，且篇幅較長(zhǎng)。 可以根據(jù)需要單獨(dú)生成FAQs部分。)

以上是2017年設(shè)計(jì)師的7個(gè)超級(jí)使用的鍍鉻擴(kuò)展的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！