《众妙之门——网页设计专业之道》——1.2 Keypress导航

简介:

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

1.2 Keypress导航

由于设计师们都在努力使设计更加直观,因此设计出来的网站也就变得越来越有响应力。它不仅适用于现代Web应用程序的用户界面(成为强劲的桌面应用程序),而且随着JavaScript库的广泛应用,“传统”网站也变得越来越强大,更具有交互性。一个令网站更具响应力的方式就是使用“Keypress导航”,虽然目前为止它还没有被广泛采用,但是最近很多设计已经有效地实施了这一方案。这类导航最受欢迎的的设置是在照片网站上,如Flickr和FFFFound。总之,给用户简单的快捷键,让他们能够执行单调乏味的任务。例如,在博文之间浏览、版块移动图片、改变当前视图(如从水平变为垂直)、链接到文章或网站版块之间的浏览,等等。Keypress导航是最常见的基于Flash设计的导航,但如今它也适用于基于CSS的设计。Google Reader是采用先进的Keypress导航的最好例子,其他很多网站也有很好的设计。

They Make Apps
去年,They Make Apps开始向用户提供流畅和先进的Keypress导航代替先前的经典滑动导航。用户只需使用页面主导航菜单的下拉菜单即可在两个模式之间切换。在Keypress导航模式中,用户使用方向键在各内容版块之间切换:按“Enter”键查看详情,而按“Esc”键则是返回到主页。出于某种原因,这个导航不再可用了。


2ac2b66960618f6409366045d85656846d12f127

Mad-ar.ch
Marc Anton Dahmen的网站是基于Flash基础的,其导航功能也十分先进:用户可以通过“c”键直接进入“Contact”(联系)页面,使用“-”号或“+”号来缩放图像,然后通过方向键来使用导航或按顺序浏览图片。

9084e9a873260749a29c2ce27db5a73efdef263a

9GAG
9GAG是一个具有图片网址收藏夹。用户可以通过“j”和“k”键分别导航到下一个画面或之前的一个画面。在当前画面可以使用“l”键来投票,没有必要滚动鼠标。在这种情况下,有个网格视图的快捷键是非常有用的。

449822158f34d6114ed0e4d49bd77fdd7dbc2f7c

Feta
Feta是另一个基于Flash的网站。你能够在该网站上使用左箭头和右箭头来浏览每个部分的内容,“↑”键选择,“↓”键返回。


2343ed32ae8af96ebdd94abd1cde949d07718c01

NY Times: Times Skimmer
NY Times的快速浏览页面拥有非常先进的Keypress导航。用户可使用箭头来导航章节,使用“Shift”键来放大,使用“t”键返回顶部,使用“r”键刷新当前页面,使用“a”键和方向键来选择文章。虽然记住这些按键会花费一些时间,但是一旦你掌握了这些操作要领,浏览网页时会轻松很多。


55b4955598339ac6e16eba2d0baa89471fdf7628

Pictory
PictoryMag是一个专注于照片故事的在线杂志,也使用“j”键和“k”键导航来浏览图片。

ab5cfbda8adeee4fde4d3f02a4e339fac8c2f4ef

CrushLovely
CrushLovely是一个单页作品集网站,让你能够使用方向键来导航至网页的各个部分。


24cf95c804d5347140cd9a6cedd3cfc6ed730bd7

Picnic Extraterrestre
这是我们迄今为止见过的最不寻常的设计之一。Iván Ferreiro的Picnic Extraterrestre拥有十分先进的Keypress导航,其设计模仿了老式显示器效果,并且惟妙惟肖。所有的导航项目都是可供加载的数字快捷键,十分有趣!


7eba21419ac53c4e2583e407af81ae86a1ccc5b7
相关文章
《众妙之门——自由网站设计师成功之道》一导读
《众妙之门——自由网站设计师成功之道》出自世界知名Web设计网站Smashing Magazine,其内容是全球顶级设计师的精华总结。全书共4章:第1章介绍了作为一名自由网站设计师需要具备的基本技能,读者可以从中找到自己还欠缺的能力;第2章讲述了应该如何与客户及合作伙伴进行有效地沟通,以便达到共赢;第3章展现了自由网站设计师的营销策略——说服客户,完成任务;第4章涉及谈合同与报价的技巧,这是自由设计师最为关心,也是最不擅长的,读者可以直观高效地了解如何与甲方谈酬劳。
1593 0