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

简介:

本节书摘来自异步社区《众妙之门——网页设计专业之道》一书中的第2章,第2.2节,作者: 【德】Smashing Magazine 译者: 赵俊婷 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2 上下文精确导航

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

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

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


f68107995856d5867ddc72576a9f7fc2c514a666

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


46ca2088702f60e7632390898f542fe614037a61

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


eb5c73a639ea239d16d05272c7bd72711b3c357c


85ac9808a5db8eeece8c473081201256979e5fea

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


b19379c59d38c7aa984eeea41df7ce7614e233e6

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


255bd26ae99bb39f57005301fb3ea7c9f4b5aa5f

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


eb2df73a1ddb96c58c1cf97a1fbe42d575f5afe7
相关文章
|
2月前
|
前端开发 JavaScript 数据可视化
元宇宙基础案例 | 大帅老猿threejs特训
元宇宙基础案例 | 大帅老猿threejs特训
|
前端开发
《众妙之门——网页排版设计制胜秘诀》——导读
本书是Smashing Magazine网站的精选文章合辑,旨在帮助读者提升网页版式设计水平。本书囊括了字体抗锯齿技术,网页排版的原则,网页字体的设置技巧,CSS字体堆栈指南,CSS3的新特性,网页字体服务推荐以及排版工具介绍,等等。
1580 0

热门文章

最新文章

  • 1
    流量控制系统,用正则表达式提取汉字
    25
  • 2
    Redis09-----List类型,有序,元素可以重复,插入和删除快,查询速度一般,一般保存一些有顺序的数据,如朋友圈点赞列表,评论列表等,LPUSH user 1 2 3可以一个一个推
    26
  • 3
    Redis08命令-Hash类型,也叫散列,其中value是一个无序字典,类似于java的HashMap结构,Hash结构可以将对象中的每个字段独立存储,可以针对每字段做CRUD
    26
  • 4
    Redis07命令-String类型字符串,不管是哪种格式,底层都是字节数组形式存储的,最大空间不超过512m,SET添加,MSET批量添加,INCRBY age 2可以,MSET,INCRSETEX
    27
  • 5
    S外部函数可以访问函数内部的变量的闭包-闭包最简单的用不了,闭包是内层函数+外层函数的变量,简称为函数套函数,外部函数可以访问函数内部的变量,存在函数套函数
    24
  • 6
    Redis06-Redis常用的命令,模糊的搜索查询往往会对服务器产生很大的压力,MSET k1 v1 k2 v2 k3 v3 添加,DEL是删除的意思,EXISTS age 可以用来查询是否有存在1
    30
  • 7
    Redis05数据结构介绍,数据结构介绍,官方网站中看到
    22
  • 8
    JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
    20
  • 9
    JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
    20
  • 10
    定义好变量,${age}模版字符串,对象可以放null,检验数据类型console.log(typeof str)
    19