Hi!下午好!欢迎访问互联网
当前位置:主页 > 网络

粘性菜单提升导航效率互联网的

时间:2018-09-09 17:55:37| 来源:| 编辑:笔名| 点击:0次

粘性菜单提升导航效率-互联的

粘性导航的定义

粘性导航或者说固定导航指的是站的菜单被锁定在某个位置,当用户滚动屏幕的时候这些菜单不会消失;换句话说,用户不需滚动屏幕即可在站任何位置访问它们。尽管粘性导航可以用在任何菜单上,例如站页脚亦或是社交媒体的按钮,但我们主要关注站的主导航。下图展示了移动设备中常规导航和粘性导航的不同。

可用性研究

研究条件

为了本次研究我创建了两个几乎一样的站。唯一的不同是一个使用常规导航,一个使用粘性导航。我让40名参与者先在第一个站中计时完成5项任务,然后在第二个站中完成5个不同的任务。用户交替完成这些任务以平衡两个站间的熟悉因子。站测试在台式机上进行,在测试结束之前不要告诉参与者两个站之间的不同,也不要进行数据分析。研究的结果带来两个有趣的结论。

1、粘性菜单能提升22%导航速度。

研究数据表明,当参与者不需要返回页面顶部就能访问导航菜单时,他们可以更快速地找到目标。尽管22%并不是一个很悬殊的数字,但对于访问者来说,这足够重要了。这份数据显示,在一个5分钟的测试中,粘性导航帮用户节省了36秒时间。当然了,如果通过提升用户体验让用户在页面上多逗留一段时间,这是可取的,但强迫用户在站中找来找去的做法并不明智。

2、100%参与者首选粘性菜单,尽管他们自己也不知道为什么。

在测试结束后,我们问参与者是否注意到了两个站之间的不同,结果没人能指出。变化是很小的,而且参与者都专注于他们的任务,因此注意到这一点。接下来,我们问参与者是否觉得某个站更好用。40各参与者中,有6人没有特别感觉,剩下的34人有自己的倾向,而且他们都觉得使用粘性菜单的站更简单或者更快捷。沿着这条线索我们做了更多的讨论,参与这也给出了自己的看法,例如虽然我不知道两个站有什么不同,但我感觉当我点击第一个站时用的时间比第二个少得多。这些看法表明参与者以压倒性的一致支持了粘性导航。

桌面软件导航菜单

想象一下,当你用Microsoft Word键入文档的时候,你每次使用加粗或者增加边距都必须返回第一页的顶部那会是怎样一种心情。只是想一下就知道那一定很糟糕。不管你在桌面软件中做什么,大部分软件都能保证所有的导航菜单都随时可用。使用浏览器也不例外,如果我们不得不返回站的顶部才能看到浏览器的地址栏,那会是件很可笑的事。

一些好的案例

Facebook 和Google+最近也采用了粘性导航的方案,但这毕竟是少数。美国前25名最常访问的站中目前只有16%拥有粘性导航。下面是其他一些把粘性导航运用的不错的站实例。

Fizzy Software

这是在顶部使用水平粘性导航比较完美的例子。当你使用这个站的时候你会觉得所有的操作都非常舒服。

Web Appers

此导航是垂直导航,位于页面左侧,有点类似于Google+的导航。唯一的缺陷是当我在上本上测试这个站的时候,由于屏幕高度不足560px,导致导航最下面的部分无法完全显示出来。

MakeBetterApps

这也是一个非常棒的例子。给导航条加一点透明,能稍微看到导航下面的内容,非常不错。

Rodolphe Celestin

此处的粘性导航贯穿整个页面的顶部,但当你滚动屏幕的时候,菜单会发生微妙的变化。用这样的方法简化设计是个不错的方法,只要别感觉太突兀就行了。同时,设计师也运用了一种越来越流行的方法:让整个站都在一页中展示。菜单的连接实质上是页面中的锚点,点击后让你跳转到页面的某个区域,一些好的转场动画和hover效果可以让站变得很有趣。

Ryan Scherf

这个站的导航是垂直的,而且只有icon。这个创意让我印象深刻。

Web Designer Wall

此处的粘性垂直导航效果不错,菜单中只有4个选项。这种方式很适合博客使用,但不知道为什么我很少发现其他站如此使用。

目前为止,粘性导航还得到普遍应用,我相信好案例将会层出不穷。

让我们开始吧!

避免使用iFrame

这看起来是创建粘性导航最简单的方法,如果你有这个想法,那就忘了吧。iFrame能带来的好处远没有带来的问题多,尤其是在跨浏览器兼容性、安全性以及搜索引擎优化方面。iFrame有它们的用武之地,但不应成为你HTML布局中的主要部分。

CSS

CSS是创建粘性导航的不错方法。而且也是最简单、最轻量级、写代码最快的方式。你要考虑的三个方面是: position, margin-top 和 z-index。把菜单的position设置成fixed从而让它们不随着页的其他部分滚动。如果你的导航是水平的,这样做可能会甩开margins,所以你需要调节一下。最后,用z-index来确保导航位于所有内容之上,这样就能保证当你滚屏的时候其他内容都在导航之下滑动。下面给出一种通常的做法:

你需要玩转CSS来确保这种方法在你的站上可行,你可以在W3C的站中找到相关的信息。

JQUERY 和 JAVASCRIPT

如果相比于使用CSS,你更倾向于使用jQuery或者JavaScript,我建议你试试下面的方法:

jScroll

Simple Smart Sticky Navigation Bar

jQuery Waypoints

Sticky MenuBar

噩耗传来?

关于这个话题有很多看法,也有人觉得粘性导航并不值得我们去做。下面几点是值得注意的。

设计上的限制

使用粘性导航可能会排斥某些设计,而你的团队可能不想放弃之前的做法。举个例子,水平粘性导航最符合逻辑的位置就是页面的最顶部,在所有内容之上。虽然这实现起来没有难度,但这可能不是用户需要的。

分散注意力,具有侵略性

如果做得不够恰当,粘性导航会分散注意力。例如,有些粘性元素在用户滚屏过程中会出现归位延时。再就是有些又高又宽的导航占据了页面,阻碍了其他内容的访问。导航应该易于访问,而且不能太抢眼。

移动终端的兼容性

在一些移动终端浏览器中,缺乏对固定位置CSS以及这种JavaScript实现方式的有效支持。这也是有些开发者的顾虑之处。 Luke Wroblewski 在他的文章 Organizing Mobile 中列出了一些关于给移动设备创建粘性导航时要注意的事项

粘性菜单提升导航效率互联网的

,这些原则很棒,值得时刻谨记。响应式设计也提供了一些根据屏幕尺寸调节导航的方法。

要时刻关注设备提供的支持水平。明确设备的兼容性可以让你事半功倍。什么时候可以用?

这里面大有文章。Brad Frost 在他的测试和分析中也给出了很不错的见解,如果感兴趣可以看看关于他的视频。

总结

为什么设计师和开发人员要不断强迫用户把屏幕滚来滚去来寻找导航呢?这种情况在桌面软件中是不存在的,现在我们有足够的数据说明粘性菜单的好处。在美国最常访问的前25个站中,84%可以通过使用粘性导航让访问更加快捷。

当然了,并不是所有的情况都适合粘性导航,但多考虑一下粘性导航对可用性和用户体验都是有帮助的。

作者:Hyrum Denney

翻译:王林