設計資源
|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 分析等等,幫你統整網站詳細的資訊,非常厲害!
參考網站:
https://medium.com/@vic20087cjimlin/design-tips-today-2-ab3330178d74