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

来源：徐州亿网网络科技有限公司 时间：2011-06-26 作者：

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

很多人认为这些适合网页设计的原则和指南也同样适用于移动平台。毕竟，网页设计是从一些基础的，基于文本的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 移动页，只有较少的图形

5. 全局导航与情境导航

桌面站点提出使用多种导航方式，如图9 Best Buy 站点。一些全局性的导航可以保持站点的一致性，而其他一些情境导航会随着用户使用站点的不同而不同。在移动站点中，全局导航是最常见的导航方式，如图10 Best buy的移动站点就是非常典型的例子。

在移动站点中，移动设备有限的屏幕决定了应该减少全局导航和情境导航。然而，缺少全局导航和情境导航则会让用户迷失，为此，在构建移动内容时，应该尽量减少层级关系，这样，用户无需挖得太深就可以找到自己所需的信息，作为设计师，应该让用户在迷失之前找到自己的信息。

图 9—在Best Buy桌面站点中各式各样的情境导航

图 10—在Best Buy 移动站点中，没有情境导航

6. 页脚

在桌面站点设计中，有两种典型的页脚，第一种页脚提供了一些内容的连接，用户可以查看主页，或其他一些较低优先级的内容，如“人才招聘”和“站点地图”。第二种脚注，则提供了用户想看的所有内容结构，如图11所示，在页脚中列出一些快速入口，用户就可以纵观整个站点。在移动站点中，通过页脚，用户可以查看首页，但尽量保持最少连接数，如图12所示，在页脚中，不包含全部快速链接。

图 11—Dell 桌面站点的页脚

图 12—Dell 移动站点，较少的页脚

7. 面包屑

如图13所示，在桌 面站点中，面包屑导航可以有效地标明用户所在的位置，查看自己的导航路径，但通常会让用户产生站点内容多，层级关系深的感觉。面包屑导航方式很少出现在移 动站点中，通常也是没有必要的。有限的空间结构是原因之一，另外，这种方式使得用户需要经过很深的途径才能找到所需要的信息。同样，我们应该让用户在有迷 失感之前获取想要的信息。

图 13—Amazon移动站点的面包屑

8. 进度条

在桌面站点中，如果用户需要通过多种步骤才能完成某一过程，如购买过程或者填写较长注册表过程，如表14所示， 在页面的顶端经常会给出一个进度条，指导用户完成这个过程，这种进度条在移动站点中还没有出现。

采用一些替代的方法，让用户无需进度条，就可以表明当前所在的位置。如，不使用一些暗含用户操作“下一步”或“继续”的按钮，使用明确的标签按钮，告知用户的下一个步骤，如“前往收银台”“指定送货及付款”。这样，用户不仅知道当前的过程，还期待下一步的信息。

图 14—Amazon 站点的进度条

9. 集成手机功能

智能机是通信设备，打电话是其基本功能。尽管移动平台的设计和内容都是有限的，但仍具有一些桌面平台无法比拟的新机会，例如，可以使用直接拨打电话或短信的方式订购物品，如图15所示，将促销短信与产品功能进行整合，用户只需选择一个手机号码，然后通过这个号码来打电话或发短信，无需输入数字。

图 15— Best Buy 移动站点，电话购物

10. 本地化和个性化搜索

基于地理位置的服务是移动站点独一无二的优势。仅在5年前，地理位置服务才和消费市场结合起来，现在，在一些移动程序和网页站点中，地理位置服务作为增值服务的一部分而广泛使用。

很多移动设备可以自动检测用户的地点，并给出一些本地化的检索结果。如图16，Best Buy本地商店搜索功能，Yelp的餐厅搜索，Kayak的班机搜索，通过了解用户的交易地点以及一些临时服务，商家就可以有针对性地推广自己的产品或服务。

图 16—在Kayak中，自动监测地理位置并给出一些检索建议

小结

基于我们的研究，我们总结了移动站点和桌面站点设计10大不同点：

1. 桌面站点可以包含更丰富的信息，而移动站点包含一些在大部分时间，地点中使用的典型功能和特征。
2. 桌面站点采用顶端的水平导航方式来呈现站点结构和内容，而90%的移动站点采用垂直导航的方式。
3. 桌面站点通常使用超链接，移动站点极少使用超链接
4. 桌面站点会根据促销，营销，导航目的的不同设计不同的图形，移动站点应避免一些促销或营销的图形，较少使用导航图形。
5. 在桌面站点中，可以使用各种各样的导航方式，如全局导航和情境导航。移动站点采用全局导航，情境导航极少。
6. 在桌面站点中，用户可以通过页脚查看站点内容，或查看一些快速链接。移动站点较少采用一些页脚，更不会使用页脚来包含一些快速链接。
7. 在桌面站点中，面包屑导航可以帮助用户找到需要的页面，或者返回查看一些导航路径。而在移动站点设计中，由于自身的一些平台结构的限制，面包屑导航的方式是没有必要的。
8. 桌面站点通常在页面顶端增加进度条来引导用户完成某项进程。移动站点并不出现进度条。
9. 移动站点可以更好地整合手机功能，如电话直接订货或发送促销信息。
10. 移动站点可以使用一些技术手段自动检测获取本地搜索结果。根据用户的一些喜好提供个性化的搜索结果，对用户来说更加重要

• 上一篇: 每个苦逼的设计师背后都有一群指点江山的神
• 下一篇: 2011互联网大会23日在京举行 微博带您对话CEO