本节书摘来异步社区《响应式Web设计实践》一书中的第1章,第1.2节,作者: 【美】Tim Kadlec 译者: 侯鸿儒 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.2 设备来了,设备来了

响应式Web设计实践
我是一名近乎疯狂的旅行者,我不害怕坐飞机,但我担心误机。于是我会常常发现自己坐在拥挤的候机厅里总想找点什么事做,以便用来打发时间。

于是我开始观察身边的人们,更多的时候我会去观察他们使用的是什么样的设备。在最近的一次旅途中,我飞到了一个非常小、非常偏远的机场,小到你只需要五分钟就能办完所有的登机手续。虽然候机厅里只有大概二十五个人,但是Android手机、iPhone以及一些老款的手机都能在那里见到。有人在用Nook读着什么,而我旁边一位头发花白的老太太正在用她的iPad看着新闻。

我们上了飞机。在空姐示意可以重新使用电子设备之后,人们便纷纷把手伸进了各自的包里。之前的那位老太太坐在我前面两排靠近过道的位置上,只见她取了手提包,从中拿出一部Kindle并开始阅读。当我们快要降落的时候,她把Kindle放了回去,继而又拿出了一部iPhone。

这位老太太在大概五个小时的时间里,使用了三种不同的设备来进行阅读。对于近年来非PC设备的大量涌现,无疑这是一个小小的缩影。

截至2011年年底,全世界大约有59亿手机用户——占世界总人口的87%,而且这一数字有望继续稳定增长:全球智能手机的出货量在2010年第四季度第一次超过了PC。

移动设备上的Web浏览量也在逐年上升,其中部分原因是现在的手机提供的浏览体验已得到大幅提升。在早期,可以访问互联网的手机还只是少数人的时尚用品,那时手机的硬件能力非常有限:只能识别XML的简化版本的无线标记语言(Wireless Markup Language,WML)、网络慢到令人无法忍受、屏幕也很小、输入法用起来更是让人显得尴尬而笨拙。

尽管随着科技的进步移动设备在不断地进化,一些具有很强功能的设备从2000年早期就开始出现,但是直到2007年iPhone的首次发布,才使得整个行业的游戏规则得以改变。霎时间,你便可以在你的移动设备上感受“完整的Web”了。iPhone以及后面接踵而来的各种智能手机的浏览体验,一扫之前人们对移动设备浏览功能的所有不满。

为人们提供一种不那么糟糕的使用体验会产生一个有趣的现象——人们会更频繁地使用。2011年,在线音乐网站Pandora的移动流量占其总流量的60%,而这一数字在2009年的时候还只有25%。同一时期,社交网站Twitter的移动流量也从25%上升到55%(图1.1)。实际上,手机网站的流量在2010年猛增了600%。

也许手机是一类不容忽视的设备,但绝不是造成这场混乱的唯一一种设备。由苹果的iPad所领军的平板电脑,在手机和笔记本电脑之间架起了一座桥梁——平板电脑一方面提供了手机的便携性,同时又不失近似于笔记本电脑的大屏幕。据估计,到2015年,平板电脑的销售额将达490亿美元。

虽然带上网功能的电视机市场目前还是一个相对年轻的市场,但是随着谷歌和苹果这样的重量级选手的加入,想必在不久的将来这块市场会非常有潜力。与此同时,微软的Xbox 360和任天堂的Wii等内置浏览器的游戏设备,也使得用户可以通过电视屏幕来浏览Web页面。

被亚马逊的Kindle系列产品和巴诺的Nook占据大片市场的电子书中同样内置有浏览器。虽然也许比起平板电脑、智能手机或者PC的浏览器来说,电子书的浏览体验不是那么细致而优雅,但你可别被它们愚弄了、觉得人们不会使用它们。在这个网络连接无处不在的时代,最好的浏览器就是你手里的那个。

由此可见,现如今的网站比以往任何时候都更需要能够在不同的设备上被使用,而每一种设备又都是种种限制与功能的组合。

1.2.1 屏幕尺寸

虽然设备的屏幕尺寸一直都在变化,但是至少我们可以预测出它们的发展趋势。1984年发布的第一款Macintosh的分辨率是512×342,随着时间的推移电脑屏幕的分辨率也在稳步提升——在十年之后的1994年,苹果发布了分辨率为1024×768的17英寸显示器。

事物的发展瞬息万变,随后可联网的移动设备开始登场。自从2007年iPhone为我们带来了320×480的分辨率后,我们已经无法想象以后的分辨率还会有怎样的提升。

仔细观察一下周围你就会发现,受人们欢迎的设备的屏幕宽度从280像素到1920像素不等。地毯已然从我们的脚下被抽走——再也没有标准的分辨率可寻。

1.2.2 网速

网速对于用户的Web使用体验有着巨大的影响,但不幸的是,网速总是戏剧性地不断变化着——前一个访问者也许是通过高速带宽的有线连接访问网站的;后一个访问者也许是通过低速率高延迟的EDGE移动网络访问网站的。

延迟
数据从一点发送到另外一点的等待时间。

有些设备或运营商允许用户利用他们的手机创建移动热点,这样用户的笔记本电脑就也可以接入移动网络了,而同时智能手机也能像笔记本那样接入Wi-Fi网络,因此设备与网络之间的相关性正在减弱,虽然我们可以对此做一些猜想,但这些猜想已远不及之前那么准确了。

1.2.3 对于标准的支持

我们应该感谢各种平台、浏览器和设备数量的增长,因为这使得竞争空前激烈,同时也促使各浏览器相继实现对于新标准的支持,而且其实现速度也是空前的。

但是,革命性增长的脚步在带来稳定的同时,也带来了同样多的混乱。“支持”这个词被人们用得太过宽松了——它已经不再是一个布尔值,而是成为了一种程度。虽然很多浏览器都声称支持同样的特性,但其语法还是会略有区别:有一些浏览器只支持一部分标准;而另一些更糟糕的浏览器打算将标准和他们自己的属性做一个混合式的实现,最后创建出了一团乱麻似的语法。

最糟糕的是许多尖端设备上的浏览器对于标准的支持也很有限。例如在大城市里非常流行的Kindle,作为人们阅读的主流设备,Kindle也有一个内置的浏览器,但是由于它只能使用和电子书一样的电子墨水来显示内容,因此所有内容都只能是灰阶的。

虽然没有人们说的那么糟糕,但IE 6和Kindle自带的浏览器对标准的支持确实有待提高,但这也并不表明没人会使用它们。当人们被诱惑说可以像对待二等公民那样来对待这些对标准支持欠佳的浏览器时,其实这种观点是无法令人接受的,因为被归到这个等级里的某些设备是全新的而且也是高质量的。

1.2.4 输入方式

长久以来,人类与计算机之间都有着相对稳定的交互方式。键盘始于打字机,鼠标始于苹果1984年推出的Macintosh(事实上,鼠标的原型可以追溯到20世纪50年代,但那时它还未引起人们的注意,直到后来被整合到Macintosh中)。

很多时候,事物发展的规律看起来都是往复循环的,但手机的发展还是给人们带来了一丝震颤。几乎一夜之间,手机输入方式囊括了滚动球、触控板,以及那些小到可怕的、难以按到的按钮(或只是因为我的指头太过肥大了?)。

之后触摸屏上的各种手势又成了人们需要面对的更为复杂的操作,因为人们需要给予触摸设备特别的考虑:按钮的大小要适于人们手指点击。不像那些非触摸的操作,这里可没有鼠标悬浮状态可供使用。虽然触屏设备会照顾到JavaScript的鼠标事件,但与触摸屏固有的触摸事件相比,单击等事件会有人们能明显察觉得到的延迟。此外,触屏设备还有很多固有的交互方式,例如滑动、下拉刷新以及拖动等等,所有这些触屏设备独有的操作方式,都需要有与之相对应的处理脚本和样式。

1.2.5 使用环境

设备在物理上和架构上的特性,并不是我们在针对设备进行设计时需要考虑的唯一因素,人们会在什么样的环境下使用设备是另外一个大大的问号。

人们可能在各种环境下使用各种设备:在家里、在路上、在公交车站、在白天、在夜晚、在被朋友或者陌生人围绕时,而且这些使用环境也无法与设备的类型相关联:虽然外出时会经常使用手机,但在家里沙发上休息时也会使用;虽然笔记本会经常被放在桌子上使用,但坐火车时也可以拿出来用。

虽然使用环境是一个讨论不完的话题,但我们也不能忽略掉它。我们将在第9章“响应式体验”的讨论中回到使用环境的问题上来。而现在,你只要认识到——了解使用环境是从响应设备的Web到响应人的Web的关键,这就足够了。

我前面曾经提到设备的多样性导致了混乱,但通常我们人类是一个喜欢稳定的物种,所以对于人们应对多样性想到的第一个办法是为不同设备创建独立的用户体验,我想,对此你应该不会感到太意外吧。

《响应式Web设计实践》一1.2 设备来了,设备来了相关推荐

  1. 《响应式Web设计实践》一2.1 布局选项

    本节书摘来异步社区<响应式Web设计实践>一书中的第2章,第2.1节,作者: [美]Tim Kadlec 译者: 侯鸿儒 责编: 赵轩,更多章节内容可以访问云栖社区"异步社区&q ...

  2. 《响应式Web设计实践》一2.2 字体大小

    本节书摘来异步社区<响应式Web设计实践>一书中的第2章,第2.2节,作者: [美]Tim Kadlec 译者: 侯鸿儒 责编: 赵轩,更多章节内容可以访问云栖社区"异步社区&q ...

  3. [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享

    写在前面 书籍介绍:本书主要讲解了如何运用HTML5和CSS3来进行响应式Web设计,使页面的设计与开发根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)来进行相应的响应和调整. 我的简评:响 ...

  4. 《响应式Web设计:HTML5和CSS3实践指南》——2.9节基于位置伪类的交替行样式

    本节书摘来自华章社区<响应式Web设计:HTML5和CSS3实践指南>一书中的第2章,第2.9节基于位置伪类的交替行样式,作者(美) Benjamin LaGrone,更多章节内容可以访问 ...

  5. 响应式Web设计读书笔记与实践

    前段时间在微博上看到了几个在当今前端圈中的大牛的撕逼大战,作为一个前端小白来说就只是看热闹的,热闹中看到了两本书,<无懈可击的Web设计>和<响应式Web设计>,前者没有买到纸 ...

  6. 【转发】响应式Web设计?怎样进行?

    什么是响应式Web设计?怎样进行? 眼下,几乎每个新客户都希望他们的网站可以有专门的移动设备版本.最完美的情况呐,就是为iPhone.iPad.黑莓.Kindle-各自打造一款--页面分辨率还必须兼容 ...

  7. 什么是响应式Web设计?怎样进行?

    开 始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也是在国庆假期里开始 做Joomla文档翻译的:长假好时光,总会可以抽出 ...

  8. 50种响应式web设计的奇妙工具

    在您开始着手响应式站点的搭建之前,如果能拥有强有力的开发工具会让您的世界另有一番风采.本文中Denise Javobs和Peter Gasston推荐了50种强大的工具来支持您建造响应式站点的过程. ...

  9. 什么是响应式Web设计?

    开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也是在国庆假期里开始做Joomla文档翻译的:长假好时光,总会可以抽出一两 ...

最新文章

  1. 安利Mastodon:属于未来的社交网络
  2. 从产品经理向人工智能产品经理进阶 | 机器学习必备知识
  3. 项目经理这些技能,是项目成功的关键保障
  4. boost::fusion::back_extended_deque用法的测试程序
  5. spring5新特性的介绍
  6. ASP.NET 构建高性能网站 架构设计
  7. RBSP、SODB、EBSP三者的区别和联系 SPS: sequence parameter sets
  8. ios传值给js_WKWebView JS与OC间相互传值调用
  9. 外虚内实是什么意思_广东潮州“茶”文化浓厚,为什么“工夫茶”常被谬传“功夫茶”?...
  10. Python+Flask京东电商价格实时监控,邮件提醒
  11. iphone safari不支持position fixed的解决办法
  12. 为什么有时候字母'f'不能从pdf文件中拷贝出来
  13. 详谈软件架构设计(四)之构件与中间件技术以及Web架构设计
  14. CSR8675项目实战:BlueAg蓝牙一拖二发射器
  15. 金融管理系统测试报告(内部测试案例)
  16. Making Sense of all these Crazy Web Service Standards
  17. java计算机毕业设计水果商城源代码+数据库+系统+lw文档
  18. Response to preflight request doesn‘t pass access control check: It does not have HTTP ok status.
  19. php 用户名长度,Discuz! X2修改注册用户名长度限制解决方案
  20. Web应用多账号系统设计及微信扫码登录实现

热门文章

  1. android 程序中设置默认输入法
  2. 替换node-sass为dart-sass
  3. 微信小程序+nginx+php+mysql实现数据库管理【第一期】数据库与php的正确连接
  4. [蓝桥杯python] 印章:共有n种图案的印章,每种图案的出现概率相同。小A买了m张印章,求小A集齐n种印章的概率
  5. 用*号输出字母C的图案。
  6. 如何 拆 贴片电容 而不是把焊盘给搞坏
  7. BCIduino整理|solidworks从“小白”到“比较精通”教程
  8. Python:实现jaccard similarity相似度无平方因子数算法(附完整源码)
  9. AE实践一:跑车动画
  10. 学习笔记-echarts自定义背景图片