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