提升網(wǎng)頁設計效率的7個Chrome擴展程序

核心要點:

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

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

以下是我七個必不可少的Chrome擴展程序，以及六個適用於Firefox的設計師擴展程序（如果您是Web開發(fā)人員，您可能需要在所有瀏覽器中進行交叉測試！）。

1. Page Ruler

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

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

2. WhatFont

由於我經常需要檢查網(wǎng)頁上的字體，查看某些文本塊中使用的字體大小、實際字體名稱及其顏色，因此WhatFont Chrome擴展程序對我來說非常有用。

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

有時，在瀏覽器底部添加Chrome檢查窗口會在您工作時造成乾擾，因此能夠在不打開整個檢查窗口的情況下獲取所有這些信息會使事情變得更容易！

3. CSS3 Generator

CSS3 Generator是一個Chrome應用程序，可幫助您生成一些複雜或難以記住的CSS代碼片段。對於簡單的事情您不需要它，但讓我們面對現(xiàn)實，一些CSS值很難從頭開始編寫（例如創(chuàng)建跨瀏覽器兼容的漸變或CSS轉換所需的CSS）。只需點擊幾下，您就可以生成一些非常有用的CSS，在擴展程序預覽中預覽它，然後復制CSS並將代碼粘貼到您的實際CSS文件中。

以下是支持的內容列表：

• 多個文本陰影
• 十六進制/RGBA代碼
• CSS轉換
• 邊框半徑
• 多個框陰影
• CSS列
• 箭頭（用於工具提示）
• 漸變（線性、徑向……甚至條紋）

4. Check My Links

URL鍵入錯誤（或完全忘記包含它們，但那是另一回事）相當容易，因此無論您的客戶是否需要現(xiàn)有網(wǎng)站的幫助，或者您是從頭開始構建網(wǎng)站，Check My Links對於任何網(wǎng)頁設計師來說都是必不可少的。

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

5. Gravit Designer

如果您需要設計圖形，但又不想打開資源密集型設計應用程序（或者如果您沒有/不想購買一個），請下載適用於Chrome的免費Gravit Designer擴展程序。

令人驚訝的是，它非?？?。使用常用的畫板尺寸開始設計非常容易，包括博客圖形、社交媒體圖形和常用打印尺寸的預設。 Gravit是一個矢量設計應用程序，這使得設計可縮放的分辨率無關的設計變得非常容易。

我驚訝於許多選項和功能——它與使用Sketch等高級設計應用程序並沒有太大區(qū)別，儘管視覺UI感覺更像Affinity Designer。

預期會有明顯的元素，如形狀、對齊、翻轉、旋轉、模糊、投影、複合形狀的創(chuàng)建等等。它還能夠導出到PNG、JPG、SVG和PDF，符號功能（如Sketch和Adobe XD），具有貝塞爾曲線和貝塞爾曲線的複雜SVG編輯工具，甚至還有濾鏡，Gravit Designer實際上對於想要創(chuàng)建營銷圖形的專業(yè)設計師、攝影師和業(yè)餘設計師來說是一個非常有吸引力的選擇。

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

6. ColorZilla

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

7. StyleBot

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

結論

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

Chrome擴展程序對於開發(fā)網(wǎng)站的人肯定很有用，但是希望從實時網(wǎng)站中提取視覺信息以便在Sketch、Adobe XD或Photoshop中使用它的設計師也會很快看到明顯的節(jié)省時間的好處。

(FAQs部分已省略，因為與偽原創(chuàng)目標不符，且篇幅較長。 可以根據(jù)需要單獨生成FAQs部分。)

以上是2017年設計師的7個超級使用的鍍鉻擴展的詳細內容。更多資訊請關注PHP中文網(wǎng)其他相關文章！