《移动优先与响应式Web设计》一2.1 屏幕大小

2.1 屏幕大小

移动优先与响应式Web设计
当年,网页设计界曾掀起了一场激烈的辩论,争论哪个分辨率才是最好的,最后终于采用1024像素×768像素。移动平台则裁去了我们的画布,现在与一张便条纸相差无几。

第一代的智能手机,无论是iOS系统、安卓系统还是Web OS系统,多数都会采用320像素×480像素的屏幕,比计算机屏幕小80%。因此,在移动平台上,有80%的内容都要移除,包括链接、广告、文字、图像和种种计算机版的设计。移动屏幕真的太小,太棒了!

多数计算机版的网页体验充斥着很多无用链接、多余内容、无谓广告。因此,其实移动版移除这些内容,也未尝不是好事。用过移动版后,很多人都希望计算机版也可以“这么简约”。

为什么?以美国西南航空的网站为例(见图2.1)似乎最好不过。这个网站信息泛滥。比起减东西,加东西更简单。因此,他们什么都加进去,尤其为了顾及不同利益相关者。

公司内部、股东、商业用户和个人用户都有不同要求,所以网页团队经常要想办法平衡各种信息,然后放进同一页中,包括广告、互动功能、内容组件、导航选项,等等。若屏幕分辨率为1024像素×768像素,当然能放进以上所有东西。

可是,以西南航空的iPhone版为例,移动体验非常集中,专注于为用户提供航空信息:网上购票、办理登机、查询航班、查询里数和接收提示(见图2.2)。没有其他信息,只有最重要的。

屏幕小了,团队必须浓缩内容,让用户和公司提取最重要的信息。屏幕大小有限,根本没有空间放任何垃圾信息,甚至一些次要的内容都放不进去。因此,必须知道哪些是最重要的。

要精简,必须明白用户和客户需要什么。不论喜欢与否,若想要设计好的移动体验,必须要这样做。

为了进一步阐明这一点,现在让我们来看看图片分享网站Flickr。纵使你很熟悉Flickr这个网站,你可能并不清楚内里所有功能。多年来,单击置顶菜单,就已经多了60多种导航选项(见图2.3)。

设计Flickr移动体验时,团队能够将这60多个功能浓缩至6个。它们如何做到的?他们了解用户的习惯以及为何会有这些习惯。多数Flickr用户登录后,就喜欢看看自己的照片有没有人响应;观看其他认识的人的照片;于不同页面发掘更多有趣图片。移动版专注于这些功能(见图2.4)。

若首先设计移动版本,就会知道最重要的是什么,然后就能将整套哲学移至网页或其他体验。如果你明白哪些才是最重要的内容和功能,就算屏幕更大,重要次序又岂能颠倒呢?

当然,移动版和网页版用法和习惯有别,但于任何平台,最基本的服务仍然一样。事实上,你很快就会发现,原来用户在使用移动设备时,尤其是用移动设备来上网时,他们差不多什么都会做。

移动优先的话,提供的体验会更注重于用户的真正需要,让他们专心完成想做的事,无阻碍,无垃圾,不像现今大多数的网页那样。分辨率为320像素×480像素的屏幕的确有限,没有多余空间放没有用的内容。

时间: 2024-11-15 00:37:29

《移动优先与响应式Web设计》一2.1 屏幕大小的相关文章

《移动优先与响应式Web设计》一上册 序

上册 序 移动优先与响应式Web设计 路克·弗罗布莱夫斯基(Luke Wroblewski)喜欢用数据说话,所以我们也用数据来看他的往绩.他写过1372篇文章,发表过190场演讲,写过3本书,以此来阐述移动平台和网页的可用性.互动和设计.现在你手上的这本就是他最重要的著作.并且,他只不过是在空闲时间写作,他的正职是在互联网公司做数字产品设计主管,并且还经营着自己的公司. 近年来,他一直在研究移动平台.他很幸运,因为移动平台现已掀起了一股淘金热,吸引了网络世界里的所有人.我们则更加幸运,因为路克不

《移动优先与响应式Web设计》一第1章 响应式网页

第1章 响应式网页 移动优先与响应式Web设计 "有一样东西,它大概是不喜欢墙--" --罗伯特·弗洛斯特<修墙> 在开始写这本书时,我就能意识到无法确保你会拿着这本小小的书,阅读印刷版.你或许会在台式计算机屏幕阅读电子版:或许会在坐车上班时,在手机上翻页:或在平板电脑上滑动页面:或许根本不会阅读这段文字,而是由计算机为你朗读此书. 总之,我并不了解你,不知道你如何阅读这本书,根本没可能知道. 出版业终于承袭了网页的一大特色--灵活性.图书设计师和出版人克雷格·莫特认为出版

《移动优先与响应式Web设计》一2.2 速度

2.2 速度 移动优先与响应式Web设计 人们不论身在何处,都会尝试使用移动设备,但并不是到处都有移动网络,就算有也会很昂贵(视乎用什么套餐),并且不稳定,以致网速更慢,等待更久. 设计移动体验时,必须接受这个现实,并施展浑身解数,设法提高速度.应减少文件的发送,采用好的浏览器和服务器技术,尽量提升传送速度,减少用户每月的上网费用. 传送文件时,尽量降低文件大小,减少文件数量,要求移动用户减少下载量.可是,由于有移动网络延迟,发送HTTP要求可能会耗时更多.因此请确保做到如下几点. 将多幅图片压

《移动优先与响应式Web设计》一导读

前 言 移动优先与响应式Web设计 这本书所讲的内容真的算不上什么大学问.即使不是大学问,仍包含了深层的意义.这本书改变了个人计算机的定义,也改变了我们上网的方式.虽然看来很复杂,但我们可以步步为营,循序渐进. 移动优先 长久以来,大部分网页设计团队的产品和信息都是为台式和笔记本电脑而设计的.移动平台对他们来说只不过是后话,他们甚至干脆忽略了这一市场.很可惜,好长一段时间,这个态度曾经广受认同.以前用手机上网非常痛苦,运营商控制了网络接入,移动网络的速度也并不是非常理想.那时候很少人用手机上网(

《移动优先与响应式Web设计》一第1章 增长

第1章 增长 移动优先与响应式Web设计坐地铁,逛商场,或经过任何一所中学时,你都会看到人类近期的变化.你会看到在街上每个人手上都会长着一个小小的发光屏.幸好,这不是什么基因异变,只不过是我们的老朋友-手机.它无处不在. 如果你不了解最近趋势,让我给你简述一下:移动设备增长得像疯了一般(得专业,我知道).近年来,分析师都预测移动设备会成为"下一件大事",他们的预言终于成真了,真的很大.想知道有多大,以下就是近年的数据. 曾有人预测,2012年时,智能手机的销量会超越手提电脑.台式计算机

《移动优先与响应式Web设计》一1.1 变了什么?

1.1 变了什么? 移动优先与响应式Web设计要解释移动平台为何突然爆发,我们就要回到2006年,上一堂美国历史课.若你想象不到当年是怎样的情境,就让我跟你重新介绍一下摩托罗拉的Z3-当年大热当红的RAZR的后继者(见图1.2). 2006年,Z3在美国是一台高端的移动电话.功能包括短信.电邮.实时通信.200万像素镜头.音乐播放器.全彩屏幕和WAP 2.0/XHTML网页浏览器:能联机至AT&T的EDGE高速数据网络.用来上网,体验完全是-糟透了. 到底有多糟?由开启浏览器到完全加载网页(页面

《移动优先与响应式Web设计》一上册 移动优先

上册 移动优先 移动优先与响应式Web设计 本文仅用于学习和交流目的,不代表异步社区观点.非商业转载请注明作译者.出处,并保留本文的原始链接.

《移动优先与响应式Web设计》一下册 序

下册 序 移动优先与响应式Web设计语言具有魔力."glamour"(美色)一词古时意指魔术或咒语,源自"grammar"(文法)一词.语言功能甚多,但命名这个功能却是最强大,最具魔力的. 网页设计的历史甚短,但是已经显出语言的转变能力.杰弗里·齐曼创造了"网页标准"一词来支持网页设计.杰斯·詹姆士·卡列特创造了"Ajax"一词,改变了网络交互的本质. 当伊森·马可特(Ethan Marcotte)创造出"响应式网页

《移动优先与响应式Web设计》一下册 响应式Web 设计

下册 响应式Web 设计 移动优先与响应式Web设计响应式Web 设计 本文仅用于学习和交流目的,不代表异步社区观点.非商业转载请注明作译者.出处,并保留本文的原始链接.

《移动优先与响应式Web设计》一1.4 事不宜迟

1.4 事不宜迟 移动优先与响应式Web设计设备更好,网速更快,移动网络正在爆发.移动优先不但让你大放异彩,还可替你抓紧机遇,接触用户. 移动优先不只是指开发移动版应用程序,而是指你应把握机会,提升整个用户体验. 以社交网站Facebook为例.Facebook约有2.5亿个活跃用户使用移动版.他们的使用量比非移动版用户高2倍. 结合移动和计算机平台的体验,用户会比预期用得更多.Facebook没有把移动体验当成计算机版的一部分,反而专注于移动体验,提升整体体验. Facebook前任首席.iP