2016-03-04

Google 推出好用工具「Resizer」免費測試 RWD 響應式網頁畫面 Category: 功能設計

行動科技不斷進步,智慧型手機早已是用戶使用的主流,在當今行動的世代,行動網頁與 App 都不斷的在行動市場上競爭。

Google 從 2015 年公布網站行動裝置體驗將會影響網站的搜尋排名,到今年 Google Design 推出 Resizer 多裝置的檢測工具,可見 Google 對行動裝置的重視,行動網站優化勢在必行,若想要在行動商務市場掌握更多的商機,品牌購物網站本身也必須越做越好,才能成為消費者喜愛的線上購物平台。

Google 推出 RWD 檢測工具 Resizer

Google Design - Resizer 
http://design.google.com/resizer/

Google Resizer

Resizer 可以幫助網站測試在電腦、平板及手機上顯示的畫面,不用再拿著各種裝置一個一個的檢查畫面,只要一個電腦螢幕就可以檢閱完所有裝置的 UI 畫面呈現,對於設計人員和開發人員來說,真是一個很實用的工具呢!

Google Resizer 使用說明

說明一、輸入網址
在頁面中上方的欄位,輸入欲檢測的網站網址,下方多裝置的畫面即會帶出裝置實際的畫面呈現。
Google Resizer

說明二、PC電腦版畫面檢測
點選 PC 電腦的 icon,而下方橫條帶出的數字即是各種畫面尺寸,可以點選並切換畫面來檢閱。

電腦版的檢測畫面如下:
Google Resizer

說明三、手機板畫面檢測
點選最右邊的 icon,就可檢測平板、手機各種尺寸的畫面,其中還包含翻轉畫面時的尺寸,如下圖: 
RWD 響應式檢測
除此之外,在尺寸切換的橫條中間,還會顯示裝置的對應名稱。這樣的使用工具,是不是很方便呢?

延伸推薦:
什麼是 RWD 響應式網頁設計?
跨螢幕的行動商機
返回列表