手机网站页面设计技巧

      手机在国内已经是人手必备的装备了,手机浏览在全球的使用程度各有不同。在韩日，手机浏览器被广泛应用于移动服务，在欧洲，Wap服务一直在增长，而在美国，人们更多通过PDA浏览器浏览网页而不是手机。

虽然手机浏览目前并不是在每个地方都受欢迎，但是在接下来的10年内，它将成为大多数人上网的主要途径，手机浏览器也将成为人们每天都会用到的工具。而这些都要求手机浏览的用户体验都要得到改善，主要体现在：连接速度、服务数量、可用性增加以及流量成本降低。本文主要简单地说明手机浏览可用性的几个方面。

手机浏览可用性

手机浏览可用性包含几个层次（如图1），不过用户是不会发现是哪个层次导致可用性问题的。对于终端用户，手机浏览是一个整体的体验，所有层次都必须无缝配合以提高可用性。

图片文字：

设备可用性：

键·展示 
浏览器入口 
UI风格 
浏览器可用性：

交互 
页面渲染 
缓存等等 
站点可用性：

结构 
内容 
布局 
图1：三个独立层次构成整体的可用性

在手机设备设计过程中，浏览器应用的重要性决定了硬件设计以及整体UI风格。如果是触摸屏且有手写笔，那么浏览器交互会容易多。另外完整的QWERTY键盘也让用户可以输入网址以及填写表格。如果不将浏览作为主要应用，那么手机设备必须轻巧，从而能够满足一只手使用的需求。在一些非触摸屏设备上，浏览器主页上必须有几个关键性的键，还有网络连接状态以及最重要的回退功能。

小屏幕的手机浏览器设计比较困难。同时大多数手机设备在不同国家都有使用，所以理解不同手机浏览文化的差异以及理解目标用户的手机浏览体验变得尤为重要。一个好手机浏览器必须能够承载所有类型的内容，不仅是专门为移动设备优化的内容而且还包括为PC屏幕设计的网页内容。

在为手机设计服务时，设计人员必须知道哪些内容是在移动状态下会使用的，以及一个友好的网站结构和UI设计原则是什么[参见注释1,2]。

内容人员和浏览器开发人员都需要理解移动环境属性和移动状态下的用户需求，而且必须测试自己的产品在移动环境下的效果，要分清楚哪些功能可以在实验室里测试，而什么内容是必须在移动环境下测试的。我们一直在做用户在手机上的注意力分配以及浏览器交互行为等等方面的用户研究。

在移动状态下浏览完整网页

针对手机用户优化的服务要求研发人员需要确定移动状态下的用户在手持设备上的需求。许多服务往往跟地点有关，比如旅游信息或者地图；与时间有关，比如列车时刻表；或者是非常个人化的需求，必须最喜欢的酒吧等等。这就要求服务必须具有灵活性，基于不同因素而变化。

手机用户使用PC网址登陆网站的原因往往是由于很多用户只记得PC上的网站网址，不知道手机版网站的地址，很多情况下，用户在手机上登陆电脑版网站，然后得到手机版网站的链接。如果网页不提供手机版网站的链接，那么肯定会丧失一些用户。

另外我们相信大多数国家的用户仍旧需要登陆完整网页，3G网络再加上优秀的手机屏幕使得在手机上浏览完整网页仍具有比较好的用户体验。所以我们希望针对手机优化的内容能够增加，而且内容人员还要注意到，手机浏览器用户在增加，不过还要在Web网站上提供手机网站的入口。

1、狭窄布局

在小屏幕上显示大的web页面仍旧需要一些信息视觉处理方法。目前一些浏览器采用狭窄布局作为默认查看模式，Opera将其称为小屏幕渲染，NetFront将其称为SmartFit，我们称之为狭窄布局，因为整个内容的显示窄且长，并且所有内容都做了简化以符合屏幕宽度。

我们对这一布局做过很多用户研究[参见注释5]，狭窄布局的主要好处就是文本容易阅读，如果文本的宽度超过屏幕的宽度，用户的阅读就会很困难，虽然可以采取滚动的方法处理这一问题。

不过根据我们的调查，狭窄布局仍有很多问题。最糟糕的就是为了符合屏幕宽度，一些大图片被删减，结果导致图像细节丢失。第二个问题就是表格。如果有一行表格不与屏幕吻合，就会自动调至下一行。

还有一点就是内容排序。如上图，所有内容的显示变得很长，所以用户很难找到一些想要的内容，经常需要在屏幕滚动时去寻找关键词，这也就意味着滚动速度不能太快，结果看完所有内容会是一个非常漫长的过程。如果加快滚动速度，用户又可能丢失一些重要信息。

一个典型的Web页面中，最左边往往有很多链接，主要内容显示在页面中部。在狭窄布局中，用户必须滚过这些链接，才能看到主体内容。不过在浏览一个网站时，这些链接多数情况下是不相关，用户会变得很生气。还有一个相关的问题就是，一个网站的任何页面的上端往往很类似，用户会弄不清楚自己在哪个页面，所以如果这些链接中包含用户已经点击过的，那么用户很有可能再点击这些链接。我们遇见过很多用户由于这个问题而放弃阅读，他们会说浏览器坏掉了。

2、原始布局

由于狭窄布局存在很多可用性方面的问题，所以很多浏览器还提供原始布局页面模式，这很类似在PC上，让用户根据内容来选择不同的视图模式，原始布局中，大图片细节和表格的效果会更好，同时如果用户知道PC上的网站的结构，那么就很容易找到自己所需要的内容。

当然原始布局并非什么问题都没有。最糟糕的就是阅读宽文本内容，会很费力。用户每次都得向前向后拉动滚动条。另外由于页面很大，所以需要滚动的地方也越多。

3、理想布局

很明显，小屏幕手机上的页面浏览仍需要很多改进和革新。如果想让自己的网站在小屏幕上具有可读性，可以遵守以下3个指导建议：

避免那些一眼就能看出来的大物体； 
避免在图片上使用小文本； 
页面要轻化。 
注释：
[1] Kaikkonen, A., Roto, V.: Navigating in a Mobile XHTML Application. In Proceedings of CHI2003 (2003)

[2] Roto, V., Kaikkonen, A.: Acceptable Download Times in the Mobile Internet. In Stephanidis, C. (ed.): Universal Access in HCI. Volume 4 of the Proceedings of HCI International 2003.

[3] Roto, V., Oulasvirta, A., Haikarainen, T.,Kuorelahti, J., Lehmuskallio, H., Nyyssönen, T.: Examining Mobile Phone Use in the Wild with Quasi-Experimentation. HIIT Technical reportshttp://www.hiit.fi/publications/pub_files/hiit2004-1.pdf (2004).

[4] Roto, V., Oulasvirta, A.: Need for Non-Visual Feedback with Long Response Times in Mobile HCI. To appear in Prodeedings of WWW 2005 Conference (2005).

[5] Roto, V., Kaikkonen, A.: Perception of Narrow Web Pages on a Mobile Phone. Proceedings of Human Factors in Telecommunications (2003).