移动网站开发指南

我们已经说了好几年了…“Mobile即将变得非常强大。”现在它做到了，只比我们所期待的晚了一两年的时间。现在智能机无处不在，app开发人员开发了数百万计的应用，每天都有更多的人使用移动浏览器在网上冲浪。可惜大多数网站的移动体验大失水准。当然，移动浏览器可以处理一个普通网站，但是在这一点上它们做得不怎么好。

一年之前我会说移动设备可有可无，但是现在情况完全变了。事实上，一些作者强调应该先开发移动web。我不能说我不同意，毕竟这是可靠的战略。移动web设计听起来容易，

然而你“只是”设计一个简化的网站？如果是这么简单就好了。

首先我们要考虑开发移动网站的方法，很多人都忽略了这一点。第二是移动界面的用户体验本质上是不同的。我们首先来看一下设计和开发一个网站的移动版。

在我们讨论设计方法之前，我们必须弄清楚移动网站和移动应用程序之间的差异。

网站vs应用程序

尽管这看上去很简单，但是很多人都混淆了移动应用程序和移动网站的概念。两者之间的区别是显而易见的，用户和app的交互与用户和website的交互是不同的。应用程序需要下载到用户手机里，程序安装在用户设备上，并且可以连接联机服务器。移动网站不需要下载也不用安装在用户设备上。它通过浏览器输入访问站点的URL来进行访问。

一些设计师把他们的移动网站设计成移动应用程序的样子，这会让人（尤其是用户）产生混淆。有某些情况，这么做是有道理的，比如说用户熟悉这种界面。但是大多数情况下，他们只熟悉web浏览。除非你确定尝试用网站来模拟移动应用程序，不然最好避免“应用程序样式”。

手机应用程序的用法

手机应用程序的用法较为复杂。用户必须先搜索该应用程序（或者是某一种类型的应用程序），下载安装，然后了解如何使用它。在这过程中几乎没有任何阻碍。许多移动apps仍然是未知的因为没有人想到尝试并且发现他们。比如说，一个以当地设计师的鞋店为原型开发的购物应用程序很少会有人使用。

移动网站的用法

移动网站的使用非常简单，用户不需要搜索，下载甚至安装任何东西。他们只需要访问你的站点。对于用户和公司/组织来说，毫不费力就能上手。移动网站唯一缺点就是持久性太差。只要用户不卸载app，app就一直在用户的设备里。而当用户停止访问某个站点，这个站点就从用户的设备中消失了。

既然你理解了应用程序和网站之间的区别，下面就可以仔细想一下移动设计的方法了。

移动网站设计的方法

有四种主要方法来设计移动网站，每一种方法都有其的优点和缺点。他们是：

1. 有所不为
2. 修改现有的设计（用CSS）
3. 设计一个独立的移动网站
4. 设计一个负责任的网站

下面我们依次来看一下这四种方法吧。

1.“有所不为”

正如前面所说的，现在的移动浏览器能够处理大多数网站，大多数浏览器允许用户在阅读的时候放大页面，在浏览网页候缩小页面。这样虽然麻烦，但是用户习惯了这种工作流。有所不为是所有选择中花费最小的一种方法，因为你差不多“什么都没做”。同样这也是最有效的方法。移动浏览器的性能一定会有极大的提高。但是作为一个整体，移动用户的体验大大减少。这不会使所有移动用户不再访问你的网站，但是会使某些用户对你的网站不再感兴趣。

2.修改已有的设计

保留原有的标记，但是调整现有的设计样式是完善移动体验的长期方法。通常，通过更换移动浏览器的样式表来达到这个目的，该样式表简化了布局，隐藏了大幅图像/动画，并使得浏览页面更加容易。

利：

低成本，并且只需要修改外观。

该方法和“有所不为”相比，改进了用户体验。

弊：

限制了能够做出的改变的数量

内容仍需要下载，（给用户）带来了速度及带宽等一系列问题。

无法改变基于该站点上下文的内容。

对于大多数移动设备和屏幕分辨率来说，很难进行设计。

3.单独设计一个移动站点

如果有大量预算的话，那么最理想的方法就是开发一个独立的专门由移动设备访问的网站。移动网站的设计，组织和填充一直关注移动用户的需求。因为该站点独立于公司的主网站，因此它可以是完全不同的。当用户访问主站点的时候，他们被标识为移动用户，页面自动跳转到为移动设备访问版本，这给用户提供了最好的体验。他们可以浏览专门为移动用户的需求设计的站点。

利：

给用户提供最好的移动体验。

弊：

开发和维护的成本太高。

一些用户习惯了该网站的桌面版本，并倾向于通常使用的版本。

对于大多数移动设备和屏幕分辨率来说，很难进行设计。

4.设计一个负责任的网站

负责人的设计是个新成员。该设计非常有用，并且可行。因此它的普及率大幅上升。这个设计背后的观点非常简单，不仅仅只有一个样式表。你可以在不同的分辨率下使用不同的样式表。结果是站点展开和折叠取决于浏览器窗口的大小。负责任的设计让你保持最佳的演示不管用户是在使用移动电话，平板电脑还是一个大型的电脑屏幕。

利：

能够为多种分辨率设计一个良好的视觉体验。

比移动特定的网站花费要少。

弊：比移动特定的样式表花费要高。

无法修改基于移动使用的站点内容。

布局受制于资源顺序。

总结

设计任何移动网站的第一步就是选择你用的方法。选择的方法能够表明设计的局限性和性能。目前，有四种主流的设计方法，且每种方法有各自的优缺点。最古老，最有优越感，最贵的方法就是专门为移动设备设计一个站点。最少的花费且长期存在的方法是使用一个特定的样式表。方法是创建一个设计，该设计响应不同的屏幕分辨率。如果预算比较少，移动用户的访问量比较小，你可以什么都不做。现代的移动浏览器自己提供可以接受的体验。

原文链接：移动网站指南--移动101

译文来源：http://www.webapptrend.com/

WebAppTrend是一个独立的技术博客，关注WebApp前瞻和实践，以及智能浏览器发展

请大家在关注CSDN的同时，关注我们的新浪微博 @WebAppTrend，欢迎加入我们的：193775364