手机端WAP页，由于手机硬件上没有内建功能（个别浏览器除外，qq浏览器支持快捷键返回顶部），焦点跳转的体验非常艰辛，门户等产品单页的大信息量导致页面过长。所以“返回顶部”的设计有其必要性。然而，将其放在哪里，怎么用都需要斟酌再三。很多WAP网站做了相关尝试，例如手机腾讯网旧版WAP2.0，手机新浪网炫彩版等。

前一版手机腾讯网WAP2.0版页面，在标题栏左端有模块间快速跳转的控件，页面最下面的标题左端则是跳转到顶部的控件。跳转按钮带来的不良体验是，控件表现传达不出预期，点击率较低。五向键定位困难，尤其在鼠标形或轨迹球焦点切换方式下；跳转后，由于没有动画转场，初次体验模块跳转的用户会对跳转失去方位感（但回顶部可以明确认知）。

手机新浪网的“↑TOP”穿插在页面上中下部，分布较随机。视觉上，生硬嵌入了几行跳转链接，破坏界面的整体性，容易影响阅读的顺畅体验。

手机QQ空间 WAP2.0页底的回顶部，设计的很到位。左边的小图标和文字处理在同一个panel里，焦点切换时只会得到一次焦点。

仔细分析一下浏览行为模式和使用情境，什么原因驱动用户希望快捷地返回顶部。一般可推测出两种情形：当网页顶部有导航栏时，用户会希望浏览完整页面内容后，借由导航去往别的频道；另一种情形是页面顶部会有动态更新，需要用户关注（比如，手机QQ微博）。所以手机新浪网各频道页的设计，底部都会复现头部的导航，“↑TOP”的存在就显累赘了。

手机腾讯网WAP2.0交互设计中，规范了“返回顶部”的使用场合——仅在频道页的底部foot之上出现“返回顶部”。基于一个假设，用户返回顶部利用页面头部的导航切入其他频道。触屏版的手机腾讯网，因为触屏设备滚屏操作的压力很小，会谨慎用之。

返回顶部后，焦点应该到哪里

返回顶部后，焦点位置应该落在哪里？手机新浪网的处理方式是，跳转到页面第一个链接。手机腾讯网的处理方式是回到页面浏览的初始状态，即按两次向下键，页面才出现焦点。这个细节，个人认为手机新浪网的设计更到位。

转载：http://wsd.tencent.com/2010/08/wap2-minutia-design.html

本文链接：http://www.blueidea.com/design/doc/2010/7880.asp　

出处：腾讯wsd
责任编辑：bluehearts

上一页 WAP2.0网页设计中的交互细节 [2] 下一页