2011移动网站设计指南

Sponsor

在过去的几年里，我们不止一次地听专家们宣称”这是移动Web之年”，而且每一次听起来都比之前更具说服力。不管2011年是否真是”移动之年”，一个无可争议的事实是Web在移动设备上的使用率正在不断上升。移动Web通常指用移动设备接入互联网的操作，包括智能手机或平板电脑。所以各公司都争先恐后地追逐 iPhone风潮，而不是第一时间了解用户真正需要的是什么，然后依据客户的需求为其提供最佳的移动方案。因为用户需要的或许并不是一个应用，有可能只是 一个移动网页。移动网页可以在全球范围内范围，其开发和保存所需的投入都比较少，而且大多数手机都可以接入这些网页。

本文关注的是如何设计移动网页，增加用户体验，尽管这一过程可以也通过创建应用来完成。Web设计与 电脑上的网页设计类似，只是在设计的时候有很多移动设备的要素要考虑进去，比如显示屏比较小，设备性能，限制和连接性等事项。以用户为主导的移动设计生命 周期可以用下图来表示：

下面让我们就更多细节进行探讨。

1. 现状评估：你现在真的需要移动网页吗？

虽然听起来有点傻，但是这确实是我们首先要弄清楚的问题。虽然移动用户众多，但是其中又有多少是真正 的目标客户呢？以美国为例，2010年移动贸易额大约是34亿美元，但是如果你没有在线出售物品，那这样的数据又有什么用？与移动网页设计师更具相关性的 数据是有多少用户在使用移动设备访问你的网页。一个简便的测算方法是看看现有的电脑网页分析，然后了解其中通过移动设备访问的用户比重是多少。要深入分析 为什么这些用户会通过移动设备访问你的网页，他们想获取什么以及他们使用的内容和功能有哪些。

现在，想一想还有什么与这些移动用户相关，然后看一看竞争对手的网页，想想他们是如何做移动网页的。 电脑网页的制作当然是出于某些商业目的。移动网页能对传统网页起到什么补充作用呢？在推进商业目的的同时还要了解哪些内容和功能对移动用户有用，然后保留 那些商业需求——因为在设计移动网页的时候可能用得着。

如果，在完成这些调查之后，你发现自己拥有的移动用户非常少，而且他们并没有经常访问你的网页，那么 你应该优化自己的电脑页面，以便移动用户可以更好更简便地访问你的页面，而不是另外去创建单独的移动页面。如果你的网页恰好也是在WordPress上运 行，那有些插件也非常适合在移动设备上使用。

并不是所有的网页都要转向移动平台。需要向用户拓展核心业务的企业当然是需要移动网页的，但像军用飞机或工业专用天然气的供应商现在就不需要单独的移动网页。总而言之，关键的一点是用户群决定了我们是否需要创建单独的移动网页。

2. 以用户为主导的移动网页设计

以用户为主导的移动网页设计主要是在设计过程中充分考虑用户因素，其目的是要为用户提供有用的网页， 使用户乐于使用网页。为了实现这一目的，设计师首先要了解自己的用户群。假设客户是一家医药公司，那么其用户肯定是病人，医疗专家和护理人员。其中前两个 是主要用户群，护理人员是与病人有着类似需求的二级用户群。要找到关键用户群，然后为这些用户量体裁衣。BBC在构建未来移动策略的时候，就是这样操作 的。

BBC的移动用户群

为了让移动用户体验与目标用户的需求和期望匹配，设计师必须深入有代表性的用户并从他们那里获得反馈 意见。可以对用户进行直接的调查，如观察用户，采访。还要跟进那些愿意让你深入了解其移动设备使用情况的用户，包括他们想在移动网页上面做什么，何时，如 何使用移动网页。这类基础调查会让你产生如下思考：

为什么用户要用在移动设备上使用你的网页？

他们会使用哪些性能？

通过移动平台访问的时候，哪些性能是关键性能？

哪些情况会打击他们使用移动网页的积极性？

他们使用什么设备来访问移动网页？

当你对用户的使用模式等全面了解后，再参考 Forrester，eMarketer，Nielse，comScore, comScore Data Mine, DeviceAtlas 以及Opera等给出的移动网页现状分析做一个有关行业和移动市场趋势的二级调查。除了了解用户和他们的需求，你还要了解他们使用的移动设备的类型。

3. 优化移动网页的功能

评价一个移动网页是否受到用户追捧，还得看你的网页是否能够为提供一系列的性能。理想情况下，这些商业目的应该紧密贴合用户搜索时的需求。如果用户不认可，那么你添加的东西又有什么用呢？确保自己的商业目的与用户的需求一致才是真正意义上的以用户为主导。

通常，如果你最后添加的性能超出了你所能掌控的范围，那么要对其进行优化，优先提供你有把握的性能，切莫过分求全。

4. 移动网页设计中的考量

现在基础工作已经完成，接下来就可以轻松一点，进行真正的设计！电脑页面的基础设计步骤和原理同样可应用于移动网页的设计，只要加入一些移动要素的考量就行了。移动设备是个人设备，其显示屏更小，设备一般都是开启状态，连接速度慢而且用户多是在移动状态下使用。

这就给我们带了三个问题：1.语境。移动用户不像电脑用户容易受控制。使用电脑页面的用户是舒服地坐 着，可能听着音乐，时不时地发着帖子。而移动用户在移动状态下，不可能用一只手完成如上操作。如果你能够考虑到用户的使用状态，比如用户可能是在地铁上， 昏暗灯光下，嘈杂的环境中使用设备，那么你就会知道要提供什么样的语境。简而言之，语境是用户的使用环境和条件，包括娱乐，多任务，移动，光线和连接性 等。在Tapworthy，就有作者提出了下面三点用户可能关注的事情：

微任务：用电话完成突发任务。

本地情况：了解周边发生的事情。

无聊时候：用手机进行娱乐。

除了记住这样要素，还要注意以下的因素：

设计要更适合小屏幕

移动设备和台式机最显著的差别是屏幕尺寸。我们已经增加了屏幕的最小分辨率。手机屏幕也在增加，不过 即便是iPhone4，其屏幕也远不及1024×768的台式机。不要忘了有些智能手机可以改变定位，而其用户也希望网页能重新确定大小。即使现在许多智 能手机浏览器都可以将电脑页面变小，可用户使用起来要不停地放大缩小，所以还是有些麻烦。

设计师Bryan Rieger 用四个步骤解决这一问题：

通过将相同宽度的屏幕大小归类将设备分为可管理的若干组。

创建可适应不同屏幕大小的默认设计。

对页面内容和设计的规则进行定义。

选择页面标准和灵活的布局。

简化导航

初始页一般都使用主要性能和内容的链接。这样网页的结构就是垂直模式而不是扁平模式。

减少目录数量和导航层级，按照优先顺序重新安排。

整个页面的导航要使用清晰，明了的标签。

要为访问键提供快捷菜单，以便用户可以输入键盘号码，迅速创建链接。

触摸按钮的感应范围至少要有30个像素。

链接要瞩目，要提供清晰而迅速的视觉反馈以便显示选定链接。

在内部页面显示主要导航，将其放在底部而不是顶部（下图CNN网站示例）。如果不是显示所有链接，则推荐Southwest的方法。

在移动主页的底部，提供对整个网页的链接，这样用户可以切换到电脑页面，反之亦然。

历史记录并不常用，因为移动网页的导航层级并不是那么多，所以用户不一定需要倒回。

上图分别展示了美国航空，CNN和Southwest的移动页面

优先的内容

优先重要的内容，删除不需要的信息。上图是Amazon的移动主页，显示了它提供的产品。

最小化用户输入

简化URL

使用输入替换机制。

必要时，在某些输入域中限制输入长度。

选择最佳的移动输入选项。

使用智能输入值。

用户登录时，提供保留登录状态的选项。

NJ Transit使用地理定位来记忆当日的选择和默认值。

大众的网页要求输入地名，但是却不能使用。

考虑连接不畅的情况

页面小一点，以便加载速度快一点。

删除不需要地代码，内容和标签。

减少图像大小和分辨率。

减小嵌入的图像以减少HTTP请求和加载时间。

保障跨渠道的一致性和连贯性

平衡形式与功能的关系

保持连贯性。

扩展用户体验。

创建连贯的用户体验。

Sephora在移动语境上扩展了用户体验。

5. 初稿检验和修改

初稿也要以用户为主动，这样设计师才能快速看到网页的各个部分，检查和修改自己的设计。

结论

完美无缺的移动网页是不可能的，不过在设计过程中牢记以用户为主导，想他们所想，就可以极大改善你的设计。

翻译:e800
原文链接：http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。