《众妙之门——网页设计专业之道》——2.2 上下文精确导航

2.2 上下文精确导航

上下文精确(context-sensitive)导航是一种很有效的导航(往往附加在主导航上),这取决于用户的上下文页面(例如,他们正在做什么)。其最大的用途就是去除无关的干扰,控制用户当前的内容。上下文精确导航只显示用户实际需要的选项。显然,这种模式将对用户界面设计相当有帮助,它有助于简化界面,将用户的注意力集中到他们所执行的任务上来。

这种方法已经在网页开发中使用多年,但是根据我们的观察,现在越来越多的网站和Web应用程序开始使用它。Vimeo是上下文精确导航的一个典型的例子:当视频开始播放时,播放控件就消失,当有需求时它又再次出现(例如,当用户将鼠标悬停在视频界面时)。当执行上下文精确导航时,确保在用户需要时该导航是可用的。谨记各种设置和用户方案,并测试最坏的情况。对于播放控件而言,由于触屏界面的用户(如iPhone或iPad用户)无法切换导航,因此悬停效果在此是不可用的。针对这种情况,你可能要考虑用触摸手势来代替。

Vimeo
Vimeo是一个视频分享平台,通常在用户开始播放视频时才会呈现播放控件。一旦开始播放视频,控件就会消失,当用户将鼠标悬停在视频界面时控件才会再次出现。这是一个典型的上下文精确导航。这类导航正越来越广泛地被应用于某些视频网站,例如Blip.fm。

《纽约时报》网站
《纽约时报》网站在文章中巧妙地展现了相关的特色故事,这样做不但推广了文章中的实际内容,还将它们移动到了一个适当的位置:当用户浏览到文章的结尾时,一个滑块从右下角滑下来,给予用户便利和帮助。当然,最终要通过可用性研究来确定用户是否满意这个设定。此外,请注意,当点击文章中任何单词(链接除外)时,一个带“?”的提示工具就会出现,通过它能够查询已选择的单词。将这项服务呈现在内容中,比隐藏在顶部导航菜单或侧边栏更有意义。这使得上下文精确导航的作用发挥到极致。

《路透社》网站
下拉式(drop-down)导航是另一种常见的上下文精确导航。《路透社》网站的下拉式导航相当先进,不仅提供了导航选项的访问,还提供了有价值的信息,如当前股票和热点问题,并且是实时的。注意右边栏的“Open”按钮(没有在以下截图中出现),当点击它时,一个详细的信息框(起初是隐藏的,按需求显示)会覆盖当前页面并呈现相关信息(见第二幅截图)。《路透社》网站还允许用户根据喜爱的主题来保存文章在稍后阅读。可见个性化设置的确是未来网络的发展趋势。

AllTop
当右上角的信息被触发时,Alltop将根据用户需求来确定显示类别,而不是默认显示所有的几十个类别。这又是一个隐藏辅助信息的例子,提供了一种友好的用户体验。

DailyMile
DailyMile拥有简洁且吸引人的用户界面,主要导航选项呈现在左边栏。当用户将鼠标悬停在其中一个选项上时,就会出现该链接的说明。在其他网页应用程序中,当鼠标悬停时,它会突显导航选项和二级菜单。此外,还应注意底部边栏的“More”(更多),它提供了二级导航选项。但是,这仅在用户积极寻找这些选项时有用,否则它们是隐藏的。

Black Harbor
默认状态下,图像部分不显示实际图像以外的任何内容。但是当用户将鼠标悬停在图像上时就会显示标题、描述和评论数。请注意右上角的“SHARE”(分享)气泡。在鼠标悬停时(仅仅是悬停时),它滑出可转发到Tweet、Facebook、Digg和Stumble的超链接。当鼠标悬停在一个特定区域时,所有的信息都会呈现出来(特定的文本),一旦鼠标移开,它就会自动消失。

时间: 2024-11-01 21:21:47

《众妙之门——网页设计专业之道》——2.2 上下文精确导航的相关文章

《众妙之门——网页设计专业之道》——第2章 网页设计趋势2.1 微妙的互动

第2章 网页设计趋势 2.1 微妙的互动 尽管消极的言论很多,但是我们依旧相信Flash在现代网页设计中仍占有一席之地.现在,我们观察到HTML/CSS网站和Flash网站已经明确分开.尽管HTML/CSS已经成为基于文本的Web标准,但是重点却要放在信息消费上,而Flash正在通过它丰富的视听效果和丰富的用户交互来支配着娱乐和多媒体网站,但是这并不意味着HTML/CSS网站仅限于单纯的用户交互.我们看到越来越多的HTML/CSS网站变得交互.有趣和优秀,更多的动画用于视觉反馈(如鼠标悬停或点击

《众妙之门——网页设计专业之道》——1.6 丰富强大的版式

1.6 丰富强大的版式 多年以来,排版在网页设计中一直扮演着重要角色.大胆.强烈.沉重的刊头能够有效地宣传电子商务网站或作品集网站:然而一个巧妙的刊头则更有助于呈现内容的结构,并且提升易读性.很显然,我们见到了更大的变化,更灵活的排版,在一定程度上使@font-face属性和字体嵌入式服务的出现成为可能,如TypeKit.丰富的版式元素能够在浏览器中选择和复制,这在几年前可不是一件容易的事.未来追求的是夸张和大胆的排版.丰富的字族不仅将运用到标题上,还将运用到正文和副本中,将排版技术从印刷界带入

《众妙之门——网页设计专业之道》——1.3 传统印刷设计的影响

1.3 传统印刷设计的影响 虽说令人愉悦的设计主要是通过意想不到并且有趣的风格给访客留下深刻的印象,然而现代的网页设计师往往更进一步,对他们工作的底层细节进行试验,从而创造出更多创新和独特的布局.事实上,即使不是专家,也能看到网页设计对传统印刷设计日益扩大的影响力.它们往往表现在所谓的"art-direct"风格博客文章上,每篇博文都展现了其独特和精心的制作.这些网站的布局通常类似于一些传统杂志和海报,有着醒目的头条.多列文本.突出的标点.缩进文本,并且支持意象.旁注和脚注.设计风格通

《众妙之门——网页设计专业之道》——2.4 总结

2.4 总结 新的技术虽然很新潮,但是也会被滥用.好的设计会被快速纳入网页设计(通过现实生活的隐喻.反应灵敏的界面和上下文精确导航),我们已经观察到太多利用CSS3的功能"过度设计"的网站.设计的存在不是为了追随,而是为了打破,通过设计重塑或激发创造力.从本质上来看,这不是一个好的趋势:它们分散设计的主要目的,扰乱美学和功能之间的平衡.应该使用正确的工具在适当的范围内为了正确的目的而设计,而不是盲目追随趋势.这就是信息设计之美,这使一个漂亮的设计和一个漂亮而且很实用的设计之间产生巨大的

《众妙之门——网页设计专业之道》——1.5 平面主义

1.5 平面主义 在过去的几年里,我们注意到网页设计中文本加载方向的一个缓慢的转变.不仅设计获得了层次感和真实感,连导航也发生了改变.一些设计师用传统的垂直滚动和滑动导航,既可以水平滚动又可以垂直滚动,甚至是纯水平滚动.这就是所谓的"平面主义".由于鼠标设计的是垂直滚动,因此采用水平滚动条的网站更难以浏览.但是随着多点触碰设备的出现,让我们可以重新考虑这种设计的可用性.毕竟在这种设备上,用户是垂直浏览还是水平浏览真的无关紧要,并且一些插件(如Scrollable和jScrollHori

《众妙之门——网页设计专业之道》——1.7 现实生活中的隐喻和隐藏复杂性

1.7 现实生活中的隐喻和隐藏复杂性 在之前的章节中,我们讨论了印刷设计技术.keypress导航.横向布局.丰富的排版和美观的设计所带来的强大影响.今日的网页设计发展迅速,打破了传统方法的局限性,以探索即将到来的技术的可能性.设计师们不仅在尝试新的技术和设计方法,也在技术和理论方面改善他们的设计质量.现代的网站有很多优势,例如在灵活性方面.跨浏览器的兼容性方面.个性化方面,等等.另一方面,现代网站也变得越来越简洁和直观.这是通过微妙的可用性增强应用程序来完成的,无论是在网络本身还是离线交互系统

《众妙之门——网页设计专业之道》——第1章 网页设计的现状 1.1 为愉悦而设计

第1章 网页设计的现状 网页设计是一个多变的行业.就像其他艺术表现形式一样,网页设计经历了曲折的进化历程.它曾经是一个爱好者们的"游乐场",现在却变成了一个具有较强审美和宣传功能的成熟媒介.事实上,我们可能正经历着网页设计的黄金时代--至少是迄今为止的最好时期.在我们设计网页时,我们有强有力的新兴工具(CSS3.HTML5.font-embedding等).一大堆的免费资源,也有强大的设计团队, 以及在一些主流浏览器中Web标准的可靠支持. 我们看到了更好的交互式设计和更美观的界面,同

《众妙之门——网页设计专业之道》——2.3 快速适应CSS3

2.3 快速适应CSS3 随着主流浏览器对CSS3功能的支持和完善,设计界似乎对这一新的进展和发展潜力十分兴奋.每个人似乎都在尝试CSS3,无论是在RGBa透明度.先进的CSS3选择器.CSS3变换或其他属性上.结果是令人惊讶的,我们见识到越来越多的网站比以前更加美观.先进.多功能.强大,并且阻挡了更多的讨厌的浏览器黑客. 到目前为止,最受欢迎的CSS3功能似乎是圆角(border-radius).动画(animation).多背景(multi-background)和盒阴影(box-sholo

《众妙之门——网页设计专业之道》——1.4 如何与众不同

1.4 如何与众不同 这是一个丰富多彩.图文并茂.并且有着独特布局的页面.注意到它的与众不同了吗?该设计拥有CSS布局.有时候,art-directed风格的设计是很有必要的. Evan Dinsmore: 21该网页的设计是海报式的.在简洁的页面中以生动的图片取代了传统的纯文本.但是这样做的弊端是:在用户使用内容的便利性上,不如基于文本形式的界面. A Way Back: Revised Font Stack这是一个细节详尽的长版面设计.在art-directed风格的设计中,大型图片常被用来