作為網頁UI設計師,我們常常都在尋找新的方式、技巧或工具來幫助我們改進和提升設計工作的效率。所以下面是我整理了7個好用Chrome擴充插件的列表。

Window Resizer

設計師因為工作關係,所以我們常常都使用大的螢幕來進行作業,但事實上一般多數人可能都不會接觸到這麼大尺寸的螢幕,或者又以筆記型電腦使用者居多

因此使用Window Resizer,在查看我們網站在不同螢幕尺寸的呈現時,這工具可以快速節省時間,只需打開擴展插件,然後點選預設視窗尺寸或輸入自定義螢幕數值,就可以看到不同螢幕尺寸的大小了。

Loom

現在很多遠端模式的工作,但如何有效的溝通一直以來都是一門學問,因此Loom是一款真正令人驚嘆的免費擴充插件

它主要透過螢幕錄影的方式,可以幫助我們記錄操作流程、錯誤發生的原因,並直接分享給團隊進行觀看。

若你常常試圖通過屏幕截圖來傳達無法捕捉的東西時,這工具就能帶給你很大的幫助。只需安裝擴展程序並按記錄即可。完成後就可以分享你的影片並獲取有瀏覽看過的人的訊息統計等。

Toybox

在與工程師溝通畫面的時候,常常是否花費大量時間檢查網頁元素,抓取屏幕截圖後再記錄網站上的錯誤?

或許你可以試試使用Toybox chrome擴充插件。他可以在網站上擷取畫面後直接留下反饋,可以省去非常多的畫面轉換步驟

你可以將其視為InVision評論和Zeplin,但是在你的網站上,而不是設計文件中。不僅如此,當您發表評論時,它會自動截取屏幕截圖,記錄瀏覽器數據、操作系統訊息、視窗大小等等,讓複製問題變得輕而易舉。

Muzli

這應該是堪稱所有設計師都必裝的擴充插件第一名無誤!

它主要是以瀏覽器起始頁作為呈現,每當您打開一個新的瀏覽器窗口時,您都會看到很多令人驚艷的設計最新資訊。你常常可以從Muzli眾多設計資源中汲取靈感,為您提供新穎,時尚和酷炫的產品。

這幾年我一直都使用這個擴充插件,每當打開瀏覽器時,常常都是為之震驚,真的讓你的靈不缺失,真的很棒。

CSSViewer

常常有時候想要快速確認一下網頁上的元素樣式設定,但又懶得開啟開發人員工具時,你不訪可以試試CSSViewer

它可以隨著你的滑鼠移動選擇到網頁各個區塊元素,並且直接顯示這區塊元素的相關設定,非常的方便快速。

延伸閱讀:
如何查看網頁HTML、CSS?網頁設計必懂,外掛工具、語法懶人包分享

Dark Mode Dev Tools

繼許多服務都提供的黑暗版模式,那Chrome開發工具當然也要來暗黑版一下吧。實際上這是內置於Chrome開發工具中,並非是擴充插件。

你只需打開開發工具>單擊右上角的3點橢圓>單擊設置>在外觀下,就可以切換為暗黑模式。就這麼簡單eazy

Fontface Ninja

常常看到很厲害的網站都善用著特殊的字體,但每當要去查看是用的什麼字體時候,都會遇到要不斷去翻開和挖掘CSS樣式的過程

厲害的地方就是,當你滑鼠直接滑到網頁上的文字時,就會顯示該文字使用的字體、顏色、行高等相關資訊,更重要的是還會顯示下載點方便你去下載,是十分便利的工具。

以上的分享希望能夠提升設計師們的工作效率。

延伸閱讀:
如何查看網頁HTML、CSS?網頁設計必懂,外掛工具、語法懶人包分享
【課程評價】從入門到業界實戰 – UI / UX 前端網頁設計

若你喜歡我的這篇文章,麻煩拍5次下面小手給予我支持與鼓勵喔!

Joseph

Hi 👋,我是Joseph
我是一名從理工界踏入設計圈的設計師,設計領域從網頁、UI/UX、平面、再到花藝,也剛開始踏入人夫生活。在這裡我不僅會分享轉職設計的經驗,也會分享一些我個人的其他學習,例如:設計資源、網路收入、聯盟行銷。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *