手机站点和桌面站点设计的10个区别

桌面网站的一些设计原则是大家广泛认可，并积极付诸实践的。例如：系统状态保持可见，避免错误信息，在错误发生时，应该提供一些具体的指南帮助用户解决这些问题等。

很多人认为这些适合网页设计的原则和指南也同样适用于移动平台。毕竟，网页设计是从一些基础的，基于文本的HTML出发，才发展成为今天的WEB标准的。因此，我们也可以想象依靠这些原则，手机站点的设计也会和网页站点的设计一样，获得巨大的成功。

然而，移动站点的设计仍处于初步阶段。Jakob Nielsen在2009年移动可用性调查时指出，相比与网页站点80%的成功率，用户使用移动设备查看移动站点时平均成功率只有64%， 形式要素的差异对用户交互成功率的影响是巨大的，因此，在进行移动站点的设计时要充分考虑移动设备的形式要素，

随着手机站点设计的持续增长，一些新的原则，以及一些好的设计实践将会浮出水面。作为前进的第一步，本人通过分析一些成功的手机站点来研究两者的不同。在我的研究中，涵盖了航空，电子商务，社交网站，娱乐等一些较成功的站点，并得出了至少10个区别。

1. 内容优先

桌面站点可以有1024*768的分辨率，而智能机仅有320*480分辨率，如何在如此小的分辨率中，在不降低用户体验效果前提下进行设计是很有挑战性的。桌面站点常常包涵更广的内容，而移动站点仅包涵一些符合使用情境的主要功能和特征，如图1、图2所示Orbitz的桌面站点和移动站点。移动站点应该通过移动设备将用户最需要的内容和特征展现给用户。一些站点内容，信息架构和屏幕布局都是在深度理解客户需求的前提下设计的。

图 1—Orbitz桌面站点特征

图 2—Orbitz移动站点特征

2. 垂直浏览取代水平浏览

如图三Urban Outfitters站点所示的那样，在呈现数据结构和数据内容时，水平导航是一种广泛采用的导航方式。用户可以从左到右，点击不同的站点链接来浏览。Joshua Porter在一篇名为“The Challenge of Moving to Horizontal Navigation“的博客中，讨论了在页面顶端而不是页面两侧使用水平导航的好处。至于顶端时，用户可以更容易聚焦于页面的内容，而在两侧时，会很容易干扰用户视线。在我的研究中，90%的移动站点采用垂直导航的方式取代水平导航，包括如下图所示的Urban Outfitters移动站点。

图 3—Urban Outfitters桌面站点中的水平导航

图 4—Urban Outfitters移动站点的垂直导航

3. 导航条，标签和超文本

如图5所示，超链接是因特网站点的主要组成部分，然而，在移动站点中，我们则很少看到超链接。并不是在移动站点中没有超链接，而是被一些导航条，标签和按钮等取代了，如图6所示。用户使用手指来操作移动设备是产生垂直导航方式的原因之一。

在电脑上，移动鼠标，点击超链接是很理想的查看信息的方式，但是在移动设备中，通过手指触摸屏幕来打开超链接就不那么容易了。用户可以很容易激活一个链接，进入一个新页面，但，这并不是用户期望的页面，如果这样的话，会产生非常差的体验效果。Fitts定律告诉我们使用指点设备达到一个目标的时间与设备当前的位置和目标位置的距离，以及目标的大小有移动的关系。在一些大的手机站点中，导航条，标签和按钮会吸引更多的注意力。

图 5—Kayak 网页链接

图 6—Kayak 手机页，没有链接

4. Text and Graphics文本和图形

在网页中，我们经常会看到一些促销，营销或者导航的图形信息。如图7所示的dell站点，设计者经常需要设计一些促销或营销的图形，如图8所示、公司LOGO始终保持着导航的目标，通过它，用户可以进入主页。而在移动站点设计中，应该减少这些图形，原因有二：其一，一些移动设备并不支持和传统网页站点一样显示方式；其二，移动屏幕较小，显示内容有限，除此之外，过多的显示内容会降低移动设计的运行速度。

图 7—Dell首页，有图形

图 8—Dell 移动页，只有较少的图形