酷站兩連發！谷歌的網站多設備在線測試工具+免費音效素材站

編者按：今天介紹的兩枚酷站，一個谷歌最近剛推出的Resizer，可以幫你測試網站在不同設備上的顯示效果（附教程），另外一個也是新推出的音效素材站，每周更新，免費商用，網站界面也特耐看，挑一個吧~

最近 Google 再推出一項免費工具 Resizer ，讓我們在計算機上測試網站于不同設備分辨率的顯示效果，這對于網頁開發者來說是相當實用的技巧，簡單來說，只要輸入網址，即可看到網站在不同畫面大小的顯示樣式。

如果你要開發網站，現今難度上已經降低不少，但要面對的另一項挑戰是如何在各種設備正常顯示內容，除了計算機外，還包括移動設備，例如：智能型手機或平板計算機，要設計出在不同分辨率、屏幕大小都能正確瀏覽的網站并不容易。

Google 提供免費工具 Resizer 能讓使用者直接在線實時測試，不用額外下載軟件，只要輸入檢測網址，就能得到計算機、平板計算機以及手機顯示效果，同時還能切換一些常用的屏幕分辨率，或者測試在行動設備直立、橫放的顯示狀況。

Google Resizer 跟微軟 Browser Screenshots 最大差異在于 Resizer 能真正模擬出網頁在不同設備的實際運作情形，當然你也可以控制畫面，點選鏈結，跳換到不同頁面，或者拉開側邊欄選單等等，相較之下 Resizer 會更為實用（如果不是只想看截圖的話）。

Resizer

STEP 1

開啟 Google Resizer 后，直接在上方輸入你要測試的網站鏈結，預設也提供 Google 部分網站來讓使用者進行實際操作，例如：Google Design、Material Design、Android。

STEP 2

接著就會看到網頁出現在 Resizer 中間，從右上角來切換計算機或手機（平板計算機）。

看到上方有一排類似尺的工具欄嗎？這是在 Resizer 調整窗口寬度的功能，點選后就可快速切換一些寬度大小，同時網站也會立即變化。

STEP 3

切換到行動設備后，默認有幾種寬度可以調整，例如：360、600、720 和 1024，寬度比較大的是將設備橫放或平板計算機，從下圖可以發現優設網在寬度過窄時會自動縮小，不會有擠出字段或跑到其他行列的問題。

一樣可以測試網頁在平板計算機上直立、橫放的顯示效果。

不過 Google Resizer 工具僅在窗口大小上進行調整，并無法重設 User-Agent 來仿真行動設備瀏覽器的顯示情形（例如行動設備用戶應該會看到行動版網頁，但在 Resizer 只會看到一般網頁），若有類似需求，我會建議使用 Responsive Web Design Tester 直接在瀏覽器測試網站顯示效果，可能會來得更為準確。

值得一試的三個理由：

1. Google 推出自家 RWD 網頁測試工具，輸入網址即可使用
2. 可測試網頁在計算機、平板計算機以及手機的顯示效果
3. 內建多種分辨率尺寸，可隨時切換實時預覽

如果在工作上會需要用到一些特殊音效，又擔心有版權問題的話，最好可以從使用 Creative Commons 授權的免費音樂音效找起，本文要介紹的 Wavy 是剛起步的免費音效素材下載網站。提供免費、可自由下載且無權利金的音樂樣本，藉此激發你在項目上的靈感。你可以在在線直接試聽某段落，然后把整張音樂素材包都下載下來使用，一般來說都會有十個左右的聲音文件。

順帶一提，Wavy 固定每周四更新。如果你想試試這些可能比較不會與其他人重復的音效素材，這網站值得一逛！

Wavy

STEP 1

開啟 Wavy 后，能看到網站收錄的不同主題專輯。點選播放列能試聽這張專輯收錄的其中一段音效，可能多少都跟主題有關。下方會顯示這張音樂樣本有幾段音樂。

點選「Download」就能把整張專輯免費下載下來。

STEP 2

試著任意下載了一張音效樣本素材，解壓縮后就能得到檔案，格式為 .wav 。

Wavy 提供的音樂音效樣本都是沒有使用限制的，無論你想用于個人或商業項目，都沒有任何規定（Wavy 使用 CC0 授權）。假如你會忘記經常回訪 Wavy，網站也提供訂閱服務，只要輸入你的 Email 就能在每次更新時收到通知。

「2016年設計趨勢」

1. 設計篇：《再作印證！2016年網頁設計領域11個流行趨勢預測》
2. 電商網站篇：《不學就落伍咯！2016年電商設計的9個熱門趨勢（附案例）》
3. 插畫設計：《畫出個未來！幫你梳理2016年網頁插畫設計趨勢》

「可能是最全面的自學指南」

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》

原文地址：https://free.com.tw

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量104萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com