超實用!設計師必備的 12 款 Chrome 瀏覽器插件,工作效率提升

Angel Wang・2021-09-08

身為設計師的你平常使用 Google Chrome 作為你的主要瀏覽器嗎? 那你別忘了下載 Chrome 瀏覽器的插件小工具來幫助你提升設計的生產力及工作效率! 以下我們整理了設計師愛用且必備的 Google Chrome 瀏覽器擴充插件,你可以透過它們:

  • 查看網站字體、字型樣式、大小
  • 在網站上自動檢測顏色色碼
  • 一鍵下載網頁上所有的圖片
  • 收集、擷取喜愛的瀏覽器頁面

以下推薦的所有 Google Chrome 瀏覽器擴充都是免費的,可從 Chrome 線上應用商店下載!祝瀏覽愉快!

1. ColorZilla

ColorZilla
圖片來源 - ColorZilla

想要輕鬆不查 code 的情況下知道網頁上顏色的色碼嗎? ColorZilla 可以幫助你快速偵測網頁上所有的顏色,包括顏色擷取、顏色滴管、漸層…等許多其他顏色功能。也可以快速調整顏色細節,並將色碼複製貼上到其他地方, 還可以建立符合 CSS 漸層的語法。

2. Dark Reader

Dark Reader
圖片來源 - Dark Reader

身為設計師長期盯著電腦是一件無法避免的事情,你是否對於螢幕的亮度很困擾呢?這個 Dark Reader 的瀏覽器插件就是你必下載的護眼神器,它可以幫助你把網站自動調整成夜間模式,並反轉明亮的顏色,讓你在夜晚時更容易閱讀,不傷害眼睛。你也可以針對你自己的需求調整亮度、對比度、套用棕褐色濾鏡、深色模式、設定字體等功能。

3. SVG Grabber

SVG Grabber
圖片來源 - SVG Grabber

你希望擁有一些網站上很酷或是特別的 logo 嗎? 原本取得 logo 的方法是到開發人員工具→檢查代碼→一條又一條地看→下載,這不僅花費很多時間,還超麻煩! 有了 SVG Grabber ,現在你只需要點擊一下按鈕,即可快速預覽、下載和複製網站上所有 SVG logo 和插圖的 code。

4. Window Resizer

Window Resizer
圖片來源 - Window Resizer

想要透過調整瀏覽器視窗的大小模擬各種螢幕的解析度嗎? 這個 Windows Resizer 對於網頁設計師來說是一個超方便的工具,能夠在不同瀏覽器的解析度下測試設計圖。它的解析度的選項可以依照你的需求客製(增加/刪除/重新排序)。 你可以設置瀏覽器視窗的寬度、高度、視窗的位置、圖標…等,調整符合你的手機、平板電腦和電腦的設計圖。

5. ColorPicker

ColorPicker
圖片來源 - ColorPicker

如果你正在尋找一個快速且簡單上手的彩色滴管工具,那麼 ColorPicker 可能是你正在尋找的工具。它有將網頁區域放大、縮小的放大鏡功能,可以輕鬆顯示顏色的細節,還可拖動滑鼠進行微調, ColorPicker 可以滿足你在網頁設計工作上面對顏色像素細節的需求。

6. Whatfont

Whatfont
圖片來源 - Whatfont

如果你想要徒手不靠工具之下,就辨識的出網頁上的字體,要花上不少時間,若你沒有經驗,這個難度簡直是天方夜譚! Whatfont 可以幫助你輕鬆且優雅的辨識出字體,你只需將滑鼠停留在你感興趣的字體上,答案就一目了然。

7. CSS Peeper

CSS Peeper
圖片來源 - CSS Peeper

你有沒有想過網頁上的按鈕大小、字體、樣式是什麼? 你還在用開發者工具一一檢查它們嗎? CSS Peeper 是為設計師量身打造的 CSS 檢測器。 只要移動滑鼠,即可查看網頁上的物件、顏色和元素的 CSS 樣式。

8. Eagle

圖片來源 - Eagle

作為一名設計師,我們喜愛蒐藏及保存漂亮的圖片或任意的瀏覽網頁尋找靈感。 然而,你是否厭倦了一張一張的下載圖片? 或者有時你遇到了禁止右鍵下載的的網頁? Eagle 可幫助你輕鬆地解決全部問題,它支援一鍵下載該網頁上所有的圖片,你還可以隨意的螢幕截圖不同大小,最重要的是幫助你在下載圖片的同時,一次整理它!

當儲存圖片時,Eagle 還會自動幫助你記下 URL,未來當你突然想重新訪問下載圖片的網頁時,你就不會無頭緒啦!

PS:你必須下載 Eagle App 才能充分使用瀏覽器擴充功能。

9. Mobile Simulator

Mobile simulator
圖片來源 - Mobile Simulator

你的工作需要一直查看手機版網站解析度嗎? Mobile simulator 允許你在電腦版中輕鬆測試。 您可以利用這個插件測試所有不同的手機和平板電腦型號。 如果你需要與團隊討論工作成果,可以匯出 PNG 格式,將檔案插入電子郵件、PPT 裡輕鬆展示。

10. Page Ruler Redux

Page Ruler Redux
圖片來源 - Page Ruler Redux

你想知道網頁上的像素尺寸和元素大小嗎? Page Ruler Redux 可以幫助你快速取得網頁像素和元素大小。 它透過虛線的尺來幫助你測量,你可以用滑鼠調整尺的大小以符合你的需求。在邊緣也提供定位線,幫助設計師們輕鬆定位。

11. Image Downloader

Image downloader
圖片來源 - Image Downloader

想從網頁下載圖片嗎? 像 Eagle ,這款也是一個圖片下載工具,當你看到喜歡的任何靈感或圖片時,只需點擊一下即可隨心所欲地下載它們!若遇到太多想要下載的圖片時,透過 Image downloader 的篩選器,可以篩選出圖片的寬度、高度或 URL,找到你想要下載的目標圖片!

12. Fonts Ninja

Fonts Ninja
圖片來源 - Fonts Ninja

Fonts Ninja 是另一款很棒的字體辨識工具,可以直接告訴你網頁上所有字體的樣式、CSS 屬性並提供有關字體的資訊,甚至是價格! 特別的是,你可以在插件中為網站上找到的字體增添書籤,未來如果要使用相同字體時,利用書籤就可以直接找到,幫助你加快設計的工作流程。

如果你想在繪圖軟體中使用在網站上發現的字體,你可以下載它們的 macOS/Windows 應用程式,幫助你同步使用新發現的字體。(支援:Illustrator、Photoshop、Figma)。

Conclusion

不管你是剛要成為設計師的新手,還是已經是資身設計師了,我們永遠都在尋找新的設計技巧和設計工具來提高工作效率並改進我們的工作流程。 希望我們收集到的 Chrome 擴充插件對你每天都有幫助,並且可以間接的幫助你更專注於設計以創造更厲害的作品!

相關文章

【社群小編必備】5個熱門社群媒體素材管理工具大評比
身為一個社群管理者,你必須擁有一個實用的素材管理工具,以便收集貼文、排版和行銷案例!本文將介紹我曾經使用過的5個軟體,一起來挑選最適合你的吧!
羅傑摩爾・2021-09-08
最齊全!26個圖片壓縮工具推薦,輕鬆幫網站減重
網站跑得特別慢,填表單無法上傳圖片?本文將介紹26個快速好用的圖片壓縮工具,並提供幾個簡單的選擇指標,讓網站升級、清出電腦空間,馬上來看!
羅傑摩爾・2021-09-14
想當遊戲設計師?32 個必訂閱的 YouTube 頻道推薦,一學就上手
遊戲設計師是時下最受歡迎的工作之一,想要了解有關遊戲設計的產業、職涯發展、美術技巧、遊戲關卡設計等,那你一定不能錯過必追蹤的 YouTube 頻道推薦
約瑟夫·威廉姆斯・2021-09-08
30 個免費 icon 下載網站推薦:圖示、SVG、向量圖等使用指南
本篇文章特別提供給需要使用各種圖標及 icon 來美化自己的網頁風格、用戶體驗及UI介面的設計師,內文包含了 30 個免費圖標網站下載連結和使用說明。
羅傑摩爾・2021-09-01
47 個免費商用圖庫!無版權、高解析度、可商用圖片素材下載
本文收集了 47 個免費、高品質、高解析度的 CC0 圖片網站,大部分皆可商用,也保有二次創作的空間,讓你不必再擔心侵權問題,輕鬆下載製作,吸睛又吸金!
羅傑摩爾・2021-09-01