ESPN在顶端有一个更为明显的“Menu”按钮,点击后可在按钮下面展开一个详细(多级)的导航菜单(图4.7)。这种方式让你在导航时仍然停留在当前页面,而不需要移动到并加载一个新的页面。ESPN还在它的大多数页面底部使用了这样的导航按钮。
图4.7:ESPN的移动Web应用在每一页的顶部和底部都有导航选项
在页面底端的控制方式可以让人们容易用单手进行操作,并在人们浏览至屏幕底端时,提供给他们更多选择和想法。YouTube的设计在页面底端缺乏这样的导航,因此当你达到页面底端时,你就不知道下一步该做什么了(图4.8)。
图4.8:在YouTube的移动Web应用的页面底端的选项基本上是走向了一条死胡同。退出登录(Sign out)?还是发送反馈(Feedback)?
尽管底端的菜单对于人们进行进一步搜索是很有帮助的,但它们不应该与其他地方能找到的菜单相同。与此相反,一个顶端的菜单按钮应该可以将人们链到移动Web页面的底部导航菜单(在内容之后)。我们最近在Bagcheck移动Web应用使用了这种方式(图4.9)。
图4.9:一个在Bagcheck顶部的锚链接能让你跳到页面底端的导航菜单
在站点顶部的一个简单的锚链接能让人们跳到页面底端的导航选项。在内容页面底端显示的这个菜单能让人们搜索站点的其他部分,特别是当他们直接到了一个内容页面而不熟悉站点其他内容的时候。如果他们想要返回到他们刚刚浏览的内容的话,在Bagcheck页面底端的菜单也有一个“Top”链接让人们可以回到页面的初始位置。这种设计使用了最少量的导航元素(仅仅是顶部的一个链接),让人们在到达页面底端时可以搜索站点其他地方的内容,没有复制其他菜单的内容,并且(最好的一点)只需要一个锚链接就可以工作。这就对了:没有很炫的JavaScript,没有很炫的叠层(Overlays),也不需要去维护一个单独的导航页面,而只需要一个链接到页面底端的锚,就是最简单HTML 。(据我了解,在IE外的其他大多数浏览器都运行无碍)Bagcheck的内容页面也有一种很独特的相关导航菜单(related navigation lists),让人们选择深入探索某个话题的时候提供进一步搜索导航(图4.10)。他们也可以只是使用底部的全局导航选项来到达站点的不同位置。
图4.10:Bagcheck手机Web应用中的基于关联导航菜单(Contextual navigation menu)可以让人们进一步搜索相关内容关联导航选项(Contextual navigation options)对任务来说是很有用的。
在Gmail的手机应用中(图4.11),可以在屏幕顶端看到一个内容关联菜单,因为这些操作直接和当前邮件内容相关,将它们放在底端的话就妨碍效率,而让它们一直置顶就可便于操作。
图4.11:在Gmail移动Web应用中关联动作选项(Contextual actions)可以让人们迅速对他们的邮件进行操作