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

本节书摘来异步社区《移动优先与响应式Web设计》一书中的第2章，第2.1节，作者： 【美】Luke Wroblewski , Ethan Marcotte 译者： 司徒卓恆 责编： 赵轩，更多章节内容可以访问云栖社区“异步社区”公众号查看。

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像素的屏幕的确有限，没有多余空间放没有用的内容。