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

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

2016/03/02 5323评论区

design-resizer-wavy-audio-1

编者按:今天介绍的两枚酷站,一个谷歌最近刚推出的Resizer,可以帮你测试网站在不同设备上的显示效果(附教程),另外一个也是新推出的音效素材站,每周更新,免费商用,网站界面也特耐看,挑一个吧~

最近 Google 再推出一项免费工具 Resizer ,让我们在计算机上测试网站于不同设备分辨率的显示效果,这对于网页开发者来说是相当实用的技巧,简单来说,只要输入网址,即可看到网站在不同画面大小的显示样式。

如果你要开发网站,现今难度上已经降低不少,但要面对的另一项挑战是如何在各种设备正常显示内容,除了计算机外,还包括移动设备,例如:智能型手机或平板计算机,要设计出在不同分辨率、屏幕大小都能正确浏览的网站并不容易。

Google 提供免费工具 Resizer 能让使用者直接在线实时测试,不用额外下载软件,只要输入检测网址,就能得到计算机、平板计算机以及手机显示效果,同时还能切换一些常用的屏幕分辨率,或者测试在行动设备直立、横放的显示状况。

Google Resizer 跟微软 Browser Screenshots 最大差异在于 Resizer 能真正模拟出网页在不同设备的实际运作情形,当然你也可以控制画面,点选链结,跳换到不同页面,或者拉开侧边栏选单等等,相较之下 Resizer 会更为实用(如果不是只想看截图的话)。

Resizer

STEP 1

开启 Google Resizer 后,直接在上方输入你要测试的网站链结,预设也提供 Google 部分网站来让使用者进行实际操作,例如:Google Design、Material Design、Android。

1kz20160303

STEP 2

接着就会看到网页出现在 Resizer 中间,从右上角来切换计算机或手机(平板计算机)。

2kz20160303

看到上方有一排类似尺的工具栏吗?这是在 Resizer 调整窗口宽度的功能,点选后就可快速切换一些宽度大小,同时网站也会立即变化。

3kz20160303

STEP 3

切换到行动设备后,默认有几种宽度可以调整,例如:360、600、720 和 1024,宽度比较大的是将设备横放或平板计算机,从下图可以发现优设网在宽度过窄时会自动缩小,不会有挤出字段或跑到其他行列的问题。

4kz20160303

一样可以测试网页在平板计算机上直立、横放的显示效果。

5kz20160303

不过 Google Resizer 工具仅在窗口大小上进行调整,并无法重设 User-Agent 来仿真行动设备浏览器的显示情形(例如行动设备用户应该会看到行动版网页,但在 Resizer 只会看到一般网页),若有类似需求,我会建议使用 Responsive Web Design Tester 直接在浏览器测试网站显示效果,可能会来得更为准确。

值得一试的三个理由:

  1. Google 推出自家 RWD 网页测试工具,输入网址即可使用
  2. 可测试网页在计算机、平板计算机以及手机的显示效果
  3. 内建多种分辨率尺寸,可随时切换实时预览

如果在工作上会需要用到一些特殊音效,又担心有版权问题的话,最好可以从使用 Creative Commons 授权的免费音乐音效找起,本文要介绍的 Wavy 是刚起步的免费音效素材下载网站。提供免费、可自由下载且无权利金的音乐样本,藉此激发你在项目上的灵感。你可以在在线直接试听某段落,然后把整张音乐素材包都下载下来使用,一般来说都会有十个左右的声音文件。

顺带一提,Wavy 固定每周四更新。如果你想试试这些可能比较不会与其他人重复的音效素材,这网站值得一逛!

Wavy

STEP 1

开启 Wavy 后,能看到网站收录的不同主题专辑。点选播放列能试听这张专辑收录的其中一段音效,可能多少都跟主题有关。下方会显示这张音乐样本有几段音乐。

点选「Download」就能把整张专辑免费下载下来。

Wavy Audio

STEP 2

试着任意下载了一张音效样本素材,解压缩后就能得到档案,格式为 .wav 。

Wavy Audio

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

uisdc-hao

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量104万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/design-resizer-wavy-audio

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 海报设计 设计理论 神器下载 字体下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里