不管你喜欢不喜欢,汉堡图标反正已经是大势所趋了。今年无数的网站将这个小元素纳入到界面中来,成为页面导航的要紧组成部分。不过汉堡图标并非今年唯一的导航设计趋势。全屏导航、底部导航等很多设计手法都是网页设计人员们的心头好。今天这篇文章将会对今年所时尚的10个导航设计趋势进行概要,并附上精彩案例若干,记得珍藏哟。
当导航是整个网站制作的核心的时候,页面会是什么样的?只须合理地策划整理,全屏导航其实是一种很有效的技术,用户可以愈加便捷地切换到不一样的页面,内容成为愈加近在咫尺的东西。
全屏导航式页面可以做的很明显,也可以以愈加微妙的方法呈现出来。用户是不是真的非得了解地意识到它是导航呢?并不肯定,假如你设计的够合理,用户会在无意识间充分运用起它的导航功能。
绝大多数的导航会置于网页的顶部,这也是最容易见到的方法。顶部的导航符适用户的阅读习惯,也符合一般的网站制作的逻辑。
但置于底部的导航栏更有意思,它的设计不再拘泥于顶部导航设计的流程,它可以设计得更大,在很多单页式页面中这种导航的样式还可以愈加自由多样。
不过这种导航设计最好是常驻于底部,防止用户迷失,便捷定位也易于回到首页。
打破常规设计的手法有不少,其中之一就是将导航菜当设计成纵向的。垂直的导航设计并非简单的将横向变为纵向的就成,你需要结合内容重新考虑整个网站的布局和空间的用法。
最火爆的两种这种排版,一种是用汉堡菜单的隐藏式的导航菜单,另外一种用的是固定的侧边栏来承载菜单。
第二种菜单的有趣之处在于,它为网站建设提供了一种新的视觉设计可能性。同时,这种导航在小屏幕上可以做成悬停隐藏式的,需要的时候点击显示。
有的规模较小的网站会选择用无导航的轻量级框架来设计网站,这里需要的注意的是,这种网站一般是单页网站。这种设计其实是可行的,特别是用作预告、预览或者介绍功用的时候。
假如你的网站包括很多页面,其实并不推荐这种设计,尽管有些网站还真就是这么做的,并且做的很好。Quincy Requin & Associes 的Q&A页面就是这么设计的,每一个问题链接到一个独立的页面。这种功能的独特质使得这种设计看上去并不突兀。
滑出式导航菜单已经时尚了一阵子了,这种设计让手机端的网页设计体验愈加出色,当用户打开页面的时候第一眼看到的会是主要的内容而非菜单,给用户更好的第一印象。耳熟能详的汉堡图标在这种场所下出镜率也很之高。
当然,这种滑出菜单的设计也可以很灵活的运用在大屏幕上,响应式全屏滑出导航也可以给人愉悦的体验,毕竟极少有桌面网页会享有这样“手机端”的设计福利。
这种大型的导航菜单设计在几年前有短暂的时尚,并且大多运用在拥有很多细分内容的公司网站。因为这种导航菜单的设计并不适合于手机端的显示,因此并未大规模时尚。不过目前设计师开始重新考虑这种巨型菜单在今天用的可能性。
作为大型零售企业的Target ,现在就使用的如此的设计。这个巨型菜单的完成度极高,两级式的菜单设计,第一级常驻于页面,第二级菜单占据的空间是固定的,如此一来看着颇为整齐。如此的设计会让页面看着整齐而干净。
动效是近年来的设计重头戏,而它在导航中得到更多的运用也是自然的事情。当动效融入导航设计中的时候,并无需过于复杂的展示。
好看的悬停动效,或者利落的跳跃成效,都可以用来引导用户。案例中的导航设计也很贴心,导航借用动效延展成为彩色的线条,增加用户点击的面积。动效不只让用户了解他们在哪儿,而且以愈加明确的方法引导他们去点击。
小巧微妙的动效不只带来很好的视觉加成,而且为用户带来惊喜,鼓励用户操作,提示用户界面的边界。
Pinterest 就是典型,它所用的卡片式导航几乎存在于网站的所有角落,明确直观,简单大方,几乎所有用户都可以在这种导航下找到他们想要的东西。
每一个卡片可以承载一个特定的类型,也可以容纳若干小的分支,这种设计自由而充满延展性,你可以在这种网站里面来回点击探索一整天。
Google的Material Design的逐步推行则让这种设计为大众所熟悉,并且愈加深入人心。
在绝大部分用户对网络并不熟知的阶段,拟物化的按钮设计是引导大伙点击的要紧方法,而伴随互联网的大规模普及和扁平化/现代风的时尚,无按钮的文字导航也拥有了愈加大的市场。
无按钮导航和大图背景配合起来很好,这时无按钮导航设计足够简单,也具备最强的可读性,可以和背景形成鲜明的对比。控制好文字的间距,确保用户有足够的空间阅读和点击。
当网站用单页设计的时候,它的导航就是你的手指和鼠标。仅需你翻下去,内容就会持续不断地到你的眼前。
对于不含有很多内容的网站而言,单页式的导航的成效其实很好。如此的网站仅需简单的向下滚动操作就能解决,用户也期待滚动浏览的结果。不过如此的页面需要给予用户足够的刺激和吸引力,才能鼓励他们浏览下去,所以请务势必有趣的内容呈现给他们。
目前标题网页导航设计趋势&案例竞价罗