設計資源

擴充插件

｜Window Resizer

網頁 RWD 自適應很重要，安裝這個插件，點選預設尺寸，網頁會自動縮放到指定的尺寸。

插件右邊工具欄，點擊「Open as popup」會以當前選擇頁面彈出新視窗，能夠在不影響原本操作大小，快速檢視排版。

第一份工作，設計網頁的時候，有和工程師學到一招，這裡一並分享給大家！

Step 1：在網頁上面，點擊右鍵 ➔ 點擊「檢查」

Step 2：如下圖，點擊 icon

Step 3：有許多預設的尺寸可以檢視

｜CSSViewer

以往我只會用右鍵的檢查功能，現在有這個插件超方便！

開啟你想檢視的網站，點擊插件，開啟功能之後，透過移動滑鼠，停留在元件上方，會顯示字體大小、顏色、物件長寬…等。

｜Redline Tool

可以幫助檢查網頁上物件使用的顏色、字體大小…等，和 CSSViewer 最不同的是，Redline Tool 可以檢查物件之間的間距。

｜Fontface Ninja

每次看到不錯的字體，看著工程師查找的速度極快，簡直是眼花撩亂…

這個插件能夠告訴你全站使用的文字，也提供下載連結。

當你將滑鼠移動到文字上方，會顯示字體、字級、行高、顏色等細節資訊。

｜Wappalyzer

能顯示一個網站架設的環境、使用者體驗工具、開發工具、行銷流量來源、A/B testing 分析等等，幫你統整網站詳細的資訊，非常厲害！

參考網站：

提升設計效率？網頁UI設計師必裝的7個Chrome擴充插件 | 喬瑟人夫

超實用！設計師必備的 22 款 Chrome 瀏覽器插件，提升工作效率 | Eagle

https://medium.com/@vic20087cjimlin/design-tips-today-2-ab3330178d74