移动时代，做好Web设计的7条黄金定律

 2012-03-28  

我们现在所熟知的Web主要是从桌面端进行访问的。但近些年来，随着智能手机的普及，人们越来越倾向于通过移动设备来问Web。

就如同任何一个飞速发展的领域一样，我们并不清楚这样的改变意味着什么。但目前我们所知道的是，问题的解决方案似乎就是一个移动站点。

但问题究竟是什么呢？因此，或许我们应该重新考虑一下我们正在努力解决的这个问题。

我是做Web设计的，我有个问题

据说解决问题的第一步是承认你有一个问题。那么，我们现在的问题可能就是我们还把移动互联网当做一个独立的东西。

移动互联网不仅仅是独立于现在的Web那么简单，而是被看成了一个完全不同的东西，这个东西包括一系列产品、性能或者是行为。这个想法是很吸引人的，因为它让移动互联网看起来是个全新的东西（因此有一些新的东西去学，需要推销，需要给出预算）。

而事实是，我们要过渡到移动互联网还需要时间，需要一系列站点、Apps以及其他平台的合作，而我们甚至不太知道具体的过渡方式是什么。在这段过渡时期内，我们要重视围绕着桌面端站点建立起来的关系和信任。

用户对于渠道都是不了解的。他们不关心他们访问的站点是什么站点（如果他们确实是在访问一种站点的话），他们只是想要达到自己的目的（即使他们的目的不过是浏览YouTube）。

开始去做

在内容还没有达到完全无缝对接时，用户还需要做出自己的选择：

有些人会更倾向于你的桌面端站点，是因为它更熟悉。
其他一些人可能无法在你的移动站点上找到他们想要的东西。
一些人会被重新定向到你的桌面端站点，只因为移动站点在他们的设备上无法工作。
其他一些人可能会从平板电脑大小的设备上访问你的站点，他们选择这么做只因为这样做比起用一个放大的移动站点“感觉更好”（尽管这样可用性很糟糕）
大多数人只是简单浏览一下，他们访问哪个站点取决于手上的是什么设备，或者朋友通过消息或者邮件发给他们的链接是哪个。

所以很重要的事情就是要记住——在可以预见的将来——这些行为都会成为新的常规行为（除非你的移动站点在他们的手机上无法工作……如果是这种情况，你就必须要处理一下了）。

所以，为什么不从现在就开始呢？从审视你的桌面端站点开始。

如果你已经在把你的站点重新设计为一个移动站点，那么下面的提示就会很有用了，因为它们讲述了为不同屏幕和操作模型设计的很多方法，还描述了一些性能，这些性能可能会改变你关于Web设计的一些假设。

1、减小规模

你站点上的任何字节都应该是有价值的。

如果说这个逻辑对于小而便携的设备来说是适用的，那么，它对于大一些的设备也应该是适用的。

用户对于价值的评估方式有很多种，因此，不可能为所有访问者都提供一个最低标准的通用的应用。我们应该记住的是：我们不能假设我们知道用户所拥有的时间以及带宽的多少。

事实是我们现在的站点比以前更臃肿了。从2003年起，排名前1000的站点的大小变成了以前的六倍多。在2011年，站点的平均大小要比2010年的站点大小大25%。

页面庞大不止是唯一的问题。每一幅图、样式表或者脚本都会引发http调用，降低你的站点的加载速度。这包括来自于第三方服务的http请求，比如analytics，font hosting, 广告服务，以及很多的小工具，“Like”按钮，以及我们随意分散在站点各处的元素。

2、让用户自己去选择

别阻止移动用户访问你的桌面端站点。

如果你提供了一个单独的移动站点，那么将移动用户带向你的桌面端站点就很值得一做。但是别希望他们在那里停留太久。除非你已经将所有桌面端内容以及功能都设计得适应于小屏幕了，否则你的用户会从一个站点移向另外一个站点——如果他们这么做了，考虑下是否是因为站点没有提供预期的内容。

当用户选择从一个站点移到另外一个站点的时候，请让他们的操作更简单。要保证这样的跳转路径是很容易被用户发现的，并且要让移到桌面端的链接或者移到移动端的链接不止是简单地将他们带回主页。如果桌面端和移动端之间不存在对应的内容，那么提供一个友好的出错提示信息，其中要包含一些到其他内容去的建议。

要记住用户的访问路径是可以反映用户喜好的。你可以使用这些数据来优化你的移动策略，保证最受欢迎的内容是所有用户都能看到的。

3、考虑整个流程

社交媒体是发现Web内容最常见的机制之一。研究显示，世界上有70%的互联网用户在使用社交网络。事实上，有66%的欧洲人每天都登陆社交网络。其中有很大一部分流量来自于移动端。Twitter 和 Facebook中有30~50%的流量来自于便携设备。

造成这一现象的原因是什么呢？

一个用户（恰好在使用移动设备）发现了一件很棒的产品，并在Facebook上发布了这个产品的链接。在理想情况下，这个用户的好友会点击这个链接并跳转到一个设计合理的页面——不论他们的浏览器是什么或者使用什么设备，这个页面都应该是良好呈现的。这个产品确实很棒，有些人会立刻买下这个产品。还有些人会顺手点一下“Share Me”链接，将这个产品推送给他们的好友。

于是皆大欢喜。多么美好的局面。

但是，这样的理想情况仅仅是一种幻想象。在现实世界中，当人们点击链接的时候，更有可能发生的是以下情况：

移动端的链接不能对应到相应的桌面端链接，因此桌面端用户会被定向到首页而非这个产品的页面。
一些移动用户也被定向到主页上（因为他们使用了“不被支持的”浏览器）。
一些移动站点顺利达到了产品页面（这实在是太棒了），但是这个页面在用户设备上的呈现却十分糟糕。有小部分用户会尝试在随后在PC上重新查看这个链接。（希望那时候他们能看到一个优雅呈现的页面……）
一些移动站点到达产品页面，点击“Share Me”，并花费功夫编辑了一条消息，但却因为这个“Share Me”表单在他们的设备上消失而放弃了分析这个产品。
其他一些用户根本就没有使用浏览器。他们通过一个Native Facebook App的Web view打开了这个链接。他们到达了正确的页面，却因为一个产品视频开始自动播放而让这个App崩溃了。
一些移动站点到达了产品页面，点击了“Buy”按钮，却无法通过登录验证，因为这个验证窗口在手机上不能正确加载。
诸如此类，还有很多……

这些问题是很普遍的，但也同时都是可以解决的。只需要多加一点注意，多一些测试，多一些重构，你就能极大提升应用品质。

弥补缝隙

记住，有时候最好的解决方案（临时方案或者其他方案）可能和Web毫不相关。一些在线旅行网站提供给用户一个显眼的“Call Us”按钮。如果用户需要完成交易，他们直接使用手机通过代理进行呼叫。一旦他们完成了交易，这个网站会发送一封Email或者SMS作为确认。

在网络、线下（甚至是商店）、交易间构建起的关系能够满足Mobile用户多变行为的需求。最近的一个研究显示，智能手机用户中有56%的人曾经在家通过移动设备购物。另外有42%的人在家以外的地方通过他们的手机买过东西，他们可能是在各种地方，比如学校、餐馆或者工作的地方。另外有36%的人在实体商店中在也通过移动设备来购物。

一个用户可能今天在你的移动站点上看到一个产品，然后明天在桌面端上又查看一遍，接下来他们可能带着自己的移动设备到实体商店中进行比价。最后交易可能发生在任何地方。

因此，精心设计你所有的应用是非常关键的，不管是在线上还是线下。这绝不仅仅是“移动互联网b”相关的设计，更关系到用户行为和商业交互方式发生的改变。而这一改变十分重要。

4、别想当然

移动让人们有机会去挑战已有的很多假设——这些假设都是关于移动本身的。

不要假设你的站点是在移动设备上工作。相对稳定的桌面端设计模式在移动环境下很可能分崩离析，因为移动设备上的屏幕大小、设备性能以及操作模式可能各不相同。任何一次不良体验都有可能让用户厌烦——最糟糕的情况就是让用户在操作途中无法进行下去。

在最近的一个调查中显示，61%的用户说他们基本不会再访问一个曾经出现问题的站点。这意味如果你的测试工作做得不好，可能就会有大量机会就此流失，因为你根本不知道你的用户可能会遇到什么问题。

不要假设用户用的都是最好的或者最新的设备。永远记得先去查一下你的统计数据。在英国，一个有代表性的站点会有60%的流量来自于iOS，剩下的40%中大概有70部Android设备以及半打Blackberry。还需要考虑到来自于iOS的流量可能来自于不同版本的iOS，至少有两种不同的屏幕大小，不同的分辨率，以及相差极大的CPU。（你试过在一个iPhone 3G手机上运行CSS动画吗？）

不要假设最新的设备就是性能最强的设备。Android设备尤其具有欺骗性。现在更小更便宜（$60-$100）的Android设备人气越来越旺。生产厂商只能在不同产品的材料和性能间进行平衡。有的设备可能有全键盘，但却有很慢的 CPU。有的设备可能有最新版本的Android操作系统，但其设备响应却比较慢。除非你能考虑到这些细节，否则你永远无法设计出能满足各种设备的应用来。

不要假设每个人的设备都是触屏。尽管我们现在随处可见设备屏幕，但是我们和这些屏幕交互的方式却千差万别。大概有30%的触屏设备现在支持一些附加的操作方法（通常是键盘或者轨迹球）。另外，尽管现在很多的非智能机支持触屏，但是现在Smart TVs的出现让间接操作模式和代理操作模式开始流行起来。

有一些新的设备甚至连基本的显示屏都没有。

5、移动用户真正做的事情

由于现在可以通过便携设备随时随地上网，用户在上网的时候，不必坐在一个有着宽带连接的电脑前了。相反，研究显示，一种新的模式正在出现。每天在Web上，会出现间歇性的、短期的突然爆发的网络流量。这样网络流量突然增加的时期是变化的，并且和时间、用户的意愿、用户使用的屏幕设备相关（在更长时间的浏览中，平板电脑用户居多）。这些行为和传统的 “移动用户” 是不一样的——传统的“移动用户”不会试图在他们的设备上完成复杂的任务。

对于一个时不时用智能手机上网的用户来说，他可能在商场购物时上会儿网，然后在家看电视的时候躺在沙发上浏览三个小时网页，或者在机场等飞机的时候也会用一下机场的Wi-Fi。越来越多的用户把在移动设备上上网当做他们主要的上网方式。

对于移动用户来说，任何Web内容都可能是至关重要的。尽管有些用户会因为设备上Web的可用性很糟而放弃使用，但需要记住，那些愿意坚持的人——愿意不厌其烦地花30分钟在iPhone上完成旅行保险业务的人——是最需要争取的用户。尽管麻烦，但他们确实真地想要用你的产品。

6、了解设备

买一些设备吧。现在就去。

我们经常讲可以通过大量的桌面端测试以及在老板的iPhone上做点测试再加上一个模拟器就可以做移动端开发了。

但有很多理由证明这一点是行不通的：

桌面端浏览器不能评估你的站点性能，因为它们的性能通常比移动端要强大得多。而且它们会自动更新，因此会拥有最新性能。而移动设备上的浏览器，包括一些Android设备上的，不一定会得到及时的更新。
现在的模拟器与桌面端浏览器相比，更能接近移动端的浏览器，因为它们能模拟常见的设备屏幕尺寸，还能提供在一个设备上出现的不同浏览器版本。然而，在硬件方面，它们是无法进行模拟的，因此也不能得到和真实设备上一样的性能表现。
需要注意的一点是，有很多用户在使用你的应用的时候是通过Operator Network联网的。在桌面端使用你那个速度很快的Wi-Fi网络进行测试是不能反映现实生活中的情形的。因为用户有可能是用着咖啡馆里速度极慢的 Wi-Fi来访问你的站点。

此外，要在真实的设备上进行测试，它会给你很棒的感觉。每次你在一个真实的机器上测试时，摸着那个真实的触摸屏，真实的按键，有真实的用户设置——你都会了解到更多。每当你了解更多，你对于如何设计、规划、测试、预算都会做得更好。通过经常性的测试，你会知道你缺少哪些关键的浏览器或者设备，然后让购买新设备的钱花得更值得。

建立你自己的设备收藏显然是需要花钱的，但通过一些规划你可以用更少量的钱达到你的目的。尽管这看起来有点难，但你可以参照这里的一些步骤。