WAP2.0网页设计中的交互细节（3）
作者：fuziyue 来源：腾讯wsd 发布时间：2010-08-12 20:50:00
手机端WAP页，由于手机硬件上没有内建功能（个别浏览器除外，qq浏览器支持快捷键返回顶部），焦点跳转的体验非常艰辛，门户等产品单页的大信息量导致页面过长。所以“返回顶部”的设计有其必要性。然而，将其放在哪里，怎么用都需要斟酌再三。很多WAP网站做了相关尝试，例如手机腾讯网旧版WAP2.0，手机新浪网炫彩版等。
前一版手机腾讯网WAP2.0版页面，在标题栏左端有模块间快速跳转的控件，页面最下面的标题左端则是跳转到顶部的控件。跳转按钮带来的不良体验是，控件表现传达不出预期，点击率较低。五向键定位困难，尤其在鼠标形或轨迹球焦点切换方式下；跳转后，由于没有动画转场，初次体验模块跳转的用户会对跳转失去方位感（但回顶部可以明确认知）。
手机新浪网的“↑TOP”穿插在页面上中下部，分布较随机。视觉上，生硬嵌入了几行跳转链接，破坏界面的整体性，容易影响阅读的顺畅体验。
手机QQ空间 WAP2.0页底的回顶部，设计的很到位。左边的小图标和文字处理在同一个panel里，焦点切换时只会得到一次焦点。
仔细分析一下浏览行为模式和使用情境，什么原因驱动用户希望快捷地返回顶部。一般可推测出两种情形：当网页顶部有导航栏时，用户会希望浏览完整页面内容后，借由导航去往别的频道；另一种情形是页面顶部会有动态更新，需要用户关注（比如，手机QQ微博）。所以手机新浪网各频道页的设计，底部都会复现头部的导航，“↑TOP”的存在就显累赘了。
手机腾讯网WAP2.0交互设计中，规范了“返回顶部”的使用场合——仅在频道页的底部foot之上出现“返回顶部”。基于一个假设，用户返回顶部利用页面头部的导航切入其他频道。触屏版的手机腾讯网，因为触屏设备滚屏操作的压力很小，会谨慎用之。
返回顶部后，焦点应该到哪里
返回顶部后，焦点位置应该落在哪里？手机新浪网的处理方式是，跳转到页面第一个链接。手机腾讯网的处理方式是回到页面浏览的初始状态，即按两次向下键，页面才出现焦点。这个细节，个人认为手机新浪网的设计更到位。
0
投稿猜你喜欢
- 要读懂这些代码主要是要了解ASP中操作二进制数据的对象ADODB.Stream！本程序主要用的就是Adodb.Stream，如果你有这个基础
- 以下以 IE 代替 Internet Explorer，以 MF 代替
- Oracle是世界上用得最多的数据库之一，活动服务器网页(ASP)是一种被广泛用于创建 * 页的功能强大的服务器端脚本语言。许多ASP开发人
Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解，他是这个领域杰出的专家，曾写过不少 CSS 方面的书- 另：@会影响效率如：@mysql_connect() 可以导出错误，但会影响效率。mysql与mysqli的区别：
- 五、XML带来的好处 （1）更有意义的搜索 数据可被XML唯一的标识。没有XML，搜索软件必须了解每个数据库是如何构建的。这实际上是不可能的
- 在程序的开发过程中，处理分页是大家接触比较频繁的事件，因为现在软件基本上都是与数据库进行挂钩的。但效率又是我们所追求的，如果是像原来那样把所
- Logminer是每个Dba都应熟悉的工具，当一天由于用户的误操作你需要做不完全的恢复时，由于你无法确定这个操作是哪个时间做的，所以这对你的
- 以下的文章主要是介绍MySQL5创建存储过程的实例演示，MySQL5创建存储在实际操作中应用的频率还是很高的，以下就是MySQL5创建存储过
- 晚上突然间看到大猫的头像在闪动，速度打开一看，发现他问，以前我写button标签的时候有没有写type属性，老实的我只有诚实地告诉他，我没写
- 以下为谷歌国际少年绘画大赛，小学1-3年级作品。看孩子们的logo创意，自愧呀！ 彩色世界我们热爱温暖的阳光，“O”代表我们心中的太阳。我们
- 相信各位网页爱好者都对网页的loading很感兴趣吧!,想不想知道如何做一个:)现在给大家介绍一下一种loading的制作..效果图:loa
- 最近发现数据库服务器压力很大，CPU经常达到100％。查看进程，发现有大量的sp_cursorclose;1进程信息。网上查了下，出现sp_
- 做为一个专职的页面重构者， 我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从里导出成网页；也可复杂
- 游标的使用提到游标这个词,人们想到的是在屏幕上一个闪动的方框,用以指示用户将要输入字符的位置。而在关系型数据库的SQL语言中,游标却有另外的
- 我用FSO生成了unicode的文件，但这不是我想要的。FSO可以生成utf-8格式编码的html文件吗？用什么办法才能生成？FSO的编码问
- 如果你有一字段dm记录了一个url，为了更好的优化模糊查询速度或统计速度，在数据表原有的结构上增加3个字段，分别为 `sdm`
- 代码如下: <％ '屏蔽主流的下载工具 Dimxurl,xtool '获取浏览器AGENT xurl=lcase(Re
- asp之家注：有时候我们需要知道我们链接的远程图片是否正常，是否存在，当不存在时如果我们继续引用，就会在网页上留个大大的X，影响了页面美观。
- 所谓“评论”不是必须得有文本框，用户录入提交数据才算，广义上的评论包括用户的任何“表态”，典型如打分。我接触电子商务时间并不长，最早应该是0
