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

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的关键,这就足够了。

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

时间: 2024-10-03 16:43:31

《响应式Web设计实践》一1.2 设备来了,设备来了的相关文章

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

2.2 字体大小 响应式Web设计实践 要想让你的设计拥抱Web的流动性,那就意味着在你的设计中要能够灵活地改变字体大小.你可以在Web上使用任意单位来设置字体大小,但主要的方法不外乎三种:像素.em,还有百分比. 2.2.1 像素 长期以来,像素一直都是人们喜欢使用的字体大小单位,其原因很简单:无论浏览器如何设置字体大小,你都能对其进行精确的控制.如果你把字体设置为18px,那么每个浏览器都会将其准确地显示为18px. 但这样的掌控是要付出一定代价的.对于初学者而言,虽然使用像素作为字体大小单

《响应式Web设计实践》一1.4 成为响应式的

1.4 成为响应式的 响应式Web设计实践 2010年5月,Ethan Marcotte为"A List Apart"写了一篇题为"Responsive Web Design"(响应式网页设计)的文章,他在文章中描述的方法不仅简单,同时又是革命性的.Ethan Marcotte利用三种已有工具:媒介查询(media queries).流动布局(fluid grids)和自适应图片(scalable images)创建了一个在不同分辨率屏幕下都能漂亮地显示的站点(图1

《响应式Web设计实践》一1.7 这本书写给谁

1.7 这本书写给谁 响应式Web设计实践 这本书本意上是为那些希望能在无尽的设备上创建出具有良好界面和功能的站点的设计师和开发者而写的.你不需要有任何响应式设计的经验--前面的几章会让你跟得上的. 但你应该精通HTML和CSS,同时至少要熟悉JavaScript.第8章"RESS"中会涉及一些PHP的代码,但即使你没有太多的PHP知识,你应该也能很容易地接受文中提到的概念.

《响应式Web设计实践》一2.3 网格布局

2.3 网格布局 响应式Web设计实践 早在Web出现前的数十年,在设计中使用网格就已经是一种异常流行的做法了,因为网格有助于实现站点的平衡.间距以及组织结构.一个实现良好的网格系统会使你的站点井井有条,同时还可以提高页面的可读性和可浏览性. 注意 关于网格的更多信息,可以参阅Khoi Vinh的书籍,或者找一份Mark Boulton的系列视频来看. 在<"Ordering Disorder: Grid Principles for Web Design"(秩序之美:网页中的网

《响应式Web设计实践》一导读

致 谢 响应式Web设计实践 人们常说写书是一件孤独的事情,也许有些时候的确是这样的,但这本书却是个例外.如果这本书能得到一些好评,那么这些好评都应归功于这一路上帮助过我的那些人,以及他们的勤奋.耐心和反馈. 我要向他们致以最真诚的感谢-- Michael Nolan,最先邀请我写这本书的人,谢谢你对我如此信任. Margaret Anderson和Gretchen Dykstra,谢谢你们能容忍我那糟糕的标点符号用法,而且还让我觉得是我通过自己的努力而摸索出了写作的要义. 感谢Danielle

《响应式Web设计实践》一1.1 我们错在哪里

1.1 我们错在哪里 响应式Web设计实践 观察我年幼的女儿们玩耍的过程,对我来说是一段启发性的经历.每当她们得到一个新的玩具,她们总会试着用玩旧玩具的方法来玩新玩具.她们寻找着新玩具和旧玩具之间相似的特性和关系,从而能够把它们联系起来.只有当她们用这种方法熟悉了一段时间新玩具后,她们才会发现新玩具的其他新玩法. 这很有意义:过去是被我们所熟知的,而未来是未知的.我们喜欢熟悉的心理模型,我们会选择那些安全和熟悉的事物,而不是冒险和崭新的事物.但问题是,将未来建立在过去经验之上的做法,限制了新想法

《响应式Web设计实践》一2.4 混合固定宽度和流动宽度

2.4 混合固定宽度和流动宽度 响应式Web设计实践到目前为止,文章页面看起来已经很不错了,而且布局十分灵活,下面让我们来加强一下右侧的边栏.现在它看起来好像没什么问题,但是如果我们能让它保持300px宽,而只让主体列流动岂不是更好?虽然这不是必需的,但是考虑到边栏里的广告,我想这将会是一次很好的润色. 使用浮动来实现这个任务几乎是不可能的.正如我们之前讨论过的那样,主要内容栏的宽度依赖于屏幕的分辨率,如果我将边栏设置为固定的300px宽,同时保持主要内容栏为当前的63.125%,那么我们将遇到

《响应式Web设计实践》一1.3 独立站点

1.3 独立站点 响应式Web设计实践在写这本书的时候,也许最普通的处理设备多样性问题的方法,就是为特定种类的设备(或者在被极端误导的情况下,为每一种特定的设备)开发一个独立的站点,通常这种做法会开发一个移动设备站点和一个台式电脑站点(如图1.2所示).然而如果采用这种方法的话,站点无疑会变得越来越多:对于一个公司来说,需要有一个台式电脑站点.一个平板电脑站点.一个可触摸移动设备站点以及一个类似的却不支持触摸的移动设备站点.一个公司拥有四个不同的站点,这似乎有点不太合常理. 这种方法当然有其优点

《响应式Web设计实践》一第2章 流动布局

第2章 流动布局 响应式Web设计实践一棵大橡树被风连根拔起,然后落到了一片芦苇丛中.橡树对芦苇们说:"我很想知道,你们如此轻而弱小,却为什么没有被大风吹走呢?"芦苇们回答道:"你和大风打斗对抗,结果就被摧毁了:而我们在大风来临之前便弯下了腰,并因此保持完好而存活了下来."* --"橡树与芦苇"伊索寓言 在"橡树与芦苇"的故事中,大橡树和芦苇都被风吹来吹去,橡树想要一直站得又高又稳,并因此与大风做着顽强的抵抗,但最终它还是被大