5个固定导航的顶级示例 - 以及如何正确使用它

随着jQuery等工具被广泛使用,我们看到了一些新的趋势响应式网站设计。其中一个是固定导航,其中主要导航页面上的元素固定在适当的位置,无论是在标题中还是在页面的一侧网站布局。这种类型的整体导航元素既有用又有视觉上的吸引力,但是当你构建网站时,避免仅仅为了它而制作导航棒。

对于固定导航设计,有许多值得练习的考虑因素。对于大尺寸显示器(例如台式机或笔记本电脑显示器)而言,有利于在像iPhone这样的小屏幕上工作。主要的互动集中在滚动,所以如果页面很长,它可能是非常适合的;但如果没有,它可能会感到无端。

导航设计在布局中是否可视作为固定元素?一些更成功的用途发生在设计元素彼此融合并在滚动时以某种方式消失或交互的情况下,创建比一些链接后面的一块颜色更丰富的交互。如果是单页设计,您可以使用固定导航来帮助访问者了解他们当前正在查看的页面的哪个部分,就像他们被带到新页面一样。

固定导航在用于帮助访问者时可以是强大的设计模式。当它可视化地与设计交互时,它还可以极大地增强您使用网站的体验。像所有事情一样,应该有它的理由。如果你不能以某种方式证明它的合理性,那么你应该退一步思考你为什么要使用它。执行不佳的导航可能会给用户体验带来灾难。

五个例子来看看

01. 理论

网页设计公司Theory的导航设计是一个很好的原型固定导航设计。它在视觉上与页面设计很好地混合,并使用颜色来表示您当前正在查看的页面的哪个部分。

02. 创意懒惰

设计公司Creative Sloth的网站上的固定导航标题是一个很好的例子,除了一些视觉设计队列之外不需要太多其它看起来很棒。

03. 基洼岛

度假胜地Kiawah Island网站上的固定导航互动是独一无二的,因为它保持固定的时间足够长,以便在幻灯片消失之前通过用于幻灯片放映的大图像。

04. 温哥华基督教青年会

温哥华YMCA网站的导航设计固定在页面左侧。通过向您显示您正在查看的部分,它会有所帮助。

05. 谷歌风险投资

Google Ventures网站没有典型的固定导航。它只在滚动时短时间内固定,然后消失。

:基因克劳福德

本文首次出现在第234期。网络杂志



翻译字数超限