返回  

设计趋势:实验导航模式

2017/3/23 11:52:34 来源:深圳网站建设Clh

导航菜单必须固定在网站设计的顶部,这一想法已经不复存在了。虽然许多设计师基于安全性和一致性而选择通过无衬线的方式在屏幕顶部设置导航,但更多的设计正在突破这种模式。

实验导航模式可以可以使人足够感兴趣,并且这本来就是一个有趣的模式,如果它们足够直观,依然可以让用户迅速的理解和接受。不同的导航样式对于那些小型的网页设计或者没有太多的内容或希望用户以某种特定的方式浏览的网站来说,可以很好的网站内部的兴趣点。

虽然实验导航并不是适用于每个网页设计,但对于适合的项目来说,它可以是一个明智而且正确的选择。


1.侧导航

侧导航的使用目前在网页设计中也算是比较常用的样式

有很多方法可以实现侧面导航。它可以是静态的或动态的,并且对于它的宽度并没有具体的限制,几乎可以是任意的宽度。

尽管将导航从顶部移动到侧面看起来并不像是新的形式,但它几乎可以瞬间扭转你原来的网页设计风格,因为它会改变画布的纵横比。

接下来,你必须考虑这个通常被设置为“瘦”的侧边导航栏在其他屏幕尺寸上的外观。如果导航菜单包含长单词(你不想要一个填充省略号的导航栏),你该怎么办?

还是有很多因素需要综合考虑的。

最好的侧边导航应该是简单的,具有短字以及固定的空间。在导航中设置太多的滚动效果往往会让用户感到不适,并且它们难以理解。上面Sanctum的侧边导航设计的例子就很简单干净,当用户滚动时,导航停留在同一个位置,文本仅随着背景变化才会调整。

这个例子的优秀之处在于:垂直导航模式鼓励用户首先查看名称和品牌logo,然后沿着屏幕直线移动,以查看可用的导航选项。这使得它看起来是被用心规划和设计的结果,并且在功能上一应俱全。


2.隐藏以及弹出

隐藏和弹出的导航样式比较常见于手机端的汉堡导航,但在网站设计中也逐渐开始流行起来

大量的汉堡包和其他隐藏的图标风格的导航的共通的一个设计概念就是——弹出菜单。

点击或轻触该按钮,导航向外弹出覆盖部分或全部的屏幕(通常取决于屏幕大小)。

这本身并不是真正的实验性质。但是,在实际的网站建设工作中,仍有很多设计师通过不同的方式来实现它。虽然用户目前已经习惯使用汉堡图标,但对这些模式仍然有些陌生。而对于偏向于使用不同图标类型的设计师来说也有一点点的挑战。

然而,在上面的Caava Design的网站设计中,他的导航弹出的样式就很有趣。而对于大多数设计师正在使用的平坦,简单的弹出式效果,这个更加深入。这种设计可以帮助用户找到导航最重要部分,以引导他们浏览以及找到它们想要的信息。


3.水平滚动

水平滚动导航虽然目前在网页设计中所见不多,但是在未来可能会更好的发展

刚开始在网站上使用水平滚动的样式可能会让你觉得有点奇怪。这是由于物理和视觉运动本身存在的差异,所以它需要一个具体的设计来使这个流程感觉正确。

为了能够方便用户理解以及使用大部分的水平滚动导航,设计师应该使用视觉线索来帮助用户更加自然的过渡这种变化。箭头或其他定向工具可能会有所帮助。

以上Norgram的网页设计中也使用部分图像作为视觉提示,屏幕侧面上有更多内容,具有固定的上部和下部的外观。内容的结构使得水平运动由于提供的视觉提示而显得更加自然。


4.无导航

对于内容少或者栏目架构简单的网站来说,在它的网站设计中可以直接考虑去掉导航

一些网站干脆就直接“扔掉”了导航,它们选择将本来就不多的栏目内容直接就列在整屏的网站设计上。 这可能是一个棘手的模式。用户会知道点击什么以及应该采取什么样的行动吗?

这种“无导航”导航模式最适合用于指导用户仅做一件事的超小型网站。它可以适用于说明即将到来的页面或作为感谢/回顾等样式的网站,如上面的评论页面。只需少量可点击的项目和一个简短的滚动,很容易弄清楚具体你的操作将激发怎么的反馈。

设计中的简单动态效果也是很有帮助的(你可以称之为导航,因为它鼓励用户浏览)。不过这种模式可能也是比较棘手的。


5.单页与标记

指引性图标不管是在导航上还是在网页设计的其他内容中,都可以发挥很好的效果

目前正在使用的许多实验导航模式都是应用在单页网站上的。这么做实际上是考虑了各种综合因素的结果:用户在浏览单页面时很难在你的网页设计中迷失方向。

为了提供明确的方向和帮助用户感觉他们正在你的网站设计中逐步靠近它们想要的信息,这些单页导航模式中的许多元素依赖于标记。就像传统的滑块格式带点或条来提示用户注意进度一样,这种导航方式使用相同的概念。

上例的Socius网站对页面右侧的标记进行了非常好的考虑和设计,其中包括悬停的文本,告诉用户每个点代表什么(这是一种不常见的导航风格功能)。用户可以使用悬停效果和点跳转到特定信息或滚动七个“屏幕”。

这种设计风格的巧妙之处在于,它可以让你的网页设计上的一切在感觉上都是快乐的。Slick滚动效果加之可被“消化”的设计,如本示例所示,可以帮助用户查看和理解内容。


6.微妙的边缘导航

侧边的竖式导航也是比较少见的样式,但是一旦使用的好的话,将给网站的设计带来重大的视觉突破

一些设计师将导航旋转90度并将其定位在到页面的右边缘。这是一个微妙的设计“伎俩”,主要是针对较普遍出现的小型或多风格的组合网站。

这种风格的导航元素往往只是文字,只包含少数修饰的元素,而且通常很小。旋转的导航文本可以根据屏幕上的其他元素指向或退出设计。

就像垂直导航一样,这个想法可以改变设计的整体宽高比。对于这种风格,有一种担心是,导航元素有时过于微小,使它很容易被错过。


总结

在导航的设计和应用方面,你是偏向于传统主义者,还是更愿意尝试一些不同的东西?实验导航模式是这些趋势之一,似乎正在获得发展。

随着越来越多的设计师尝试这些技术,用户习惯了变化和适应。但我们在实际的网站设计的过程中还是会担心用户“不明白”。我很想知道你对不同导航风格的看法。



----图文来自:design shack 

----由深圳网站建设公司-Clh翻译编辑整理,为您提供更多有关深圳网站建设网站设计网页设计及其他互联网应用服务