酷站两连发！谷歌的网站多设备在线测试工具+免费音效素材站

编者按：今天介绍的两枚酷站，一个谷歌最近刚推出的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