首页

网页新趋势:革命性的创新网页导航设计

蓝蓝设计的小编

每个网站有属于自己的个性——它能反射出背后的个人或者团队。如何做到让自己的网站显得与众不同、卓尔不群,让用户流连忘返或者立马下单?

为了让你的网站脱颖而出,不仅需要有丰富的高质量内容,同时也要兼顾网站的创新性和功能性。从用户的角度出发好好想一下,怎样让你的网站用户体验更友好?简单的搜索功能是需要的,或者你也可以精心设计一下网站的导航。同时,要注意保持整个网站设计语言的一致性。在这个html5狂潮涌进的时代,诞生了很多优秀的网页设计作品,他们都有卓越的导航设计,接下来整理的这些网站将唤起你关于导航的极限创意,快来亲自体验下吧!

Toybox

在需要的时候导航栏应该一直在那里,而当用户想要专注于某个特定的任务时,导航栏则应该优雅的隐藏起来。比如说,在设计一个网上商店的出纳页面时,网站的导航应该可以随时都易于使用,但同时也要注意突出像出纳表单和按钮控件之类的鲜明功能。Toybox的导航设计就恰好满足了这些。

如下图示,这个侧边导航给人的感觉就像是你在窥视页面背后或者是掀开了一个玩具盒的盖子看看里面到底有些什么。这个侧边导航非常方便使用,鼠标悬停在浏览器左侧即可出现,主体部分即时出现的旋转效果也很带感,可以很好的引导用户的注意力。将导航隐藏起来同时也实现了界面的简洁,使网站的浏览体验非常的愉悦,因为网站并没有留下太多无用的信息去分散用户的注意力。

Toybox

至于其他你想知道的信息,比如说Toybox公司的主营业务和地址,可以在顶部的一个直接呈现的导航栏里找到。首页的磁贴鼠标hover效果也非常的有趣,当鼠标悬停于某个项目的缩略图时,其余的项目缩略图都后退变暗并且产生景深的效果。

Olivier Bossel

交互设计师Olivier Bossel的个人作品博客非常有趣。该网站的导航元素在鼠标hover状态下会产生像素爆炸式的效果(译者注:火狐浏览器测试通过,chrome测试无效果)。这个效果相对于网站其余的简洁设计来说非常有动感,由此产生强烈的对比效果。作为一个视觉元素它非常有效的促进了用户继续阅读该网站,统一的视觉语言也彰显了品牌的特点。

Olivier Bossel

网页设计新趋势!25例出众的响应式导航设计

蓝蓝设计的小编

响应式设计是当前网页设计的趋势,针对不同的设备,提供布局解决方案。
而且很多技术狂人正在不断的进行各种实验,争取让响应式设计越来越好。

响应式设计的难点是导航菜单。可不能像缩放页面那样缩放导航菜单。在设计之前,要谋划好导航菜单在手机、平板、桌面上的布局。

更多超炫的网站:
《想让网站动感十足?试试网页设计中的韵律线条》
《想设计自己的网站?先来看这15个优秀设计师的酷站》

本文收集了25例出众的响应式设计,大家可以使用响应式在线测试工具Responsinator来看看,他们的导航菜单,是怎样设计的。

Ableton 

Music production with Live 9 and Push | Ableton

 

大型网站导航设计指南

蓝蓝设计的小编

对于大部分网站,导航并不算是个挑战。一条主导航加条二级导航支撑,通常就足够了。典型的做法是,二级导航显示出父、兄及当前子菜单。常显的主导航条显示最顶层的菜单,允许用户在菜单间切换。

然而,有一类网站让这种传统的导航样式承担有些吃力。这就是我要提的大型网站。

定义大型网站

一个大型网站由结合了综合服务和产品的典型大型组织所有。这个组织通常也服务各色用户。拥有大型网站的组织,包括BBC这类机构型的,类似微软这种项目多样化的公司型的,政府部门,高等教育类的以及运作多种活动的慈善组织类的,比如世界自然基金会。

这些网站:庞大,层级多而深,由多个小网站和频道组成,迎合受众众多,许多入口,这种规模级的复杂网站导航颇具挑战。

大型网站上的导航挑战

在我们公司,我们花费了大量工作在这类大型网站上,尤其当我们想使用传统的导航时特费劲儿。

传统的导航无法负担深层级

传统的导航随着网站层级越深变得越难用。传统导航很容易应付三层;超过的话,问题就会暴露。即便拓展到页面众多的房产类网站导航,他们会更致力于导航多过内容(大型网站里页面太多让问题变得更糟),或更顶层的页面不再出现在导航中。在后者中,如果用户处于网站的深层级页面,他们将搞不清上上下级关系,因为无法看见当前页面在整个网站中的所处位置。

51abfabb03e0436170000001

虽然传统的导航处理结合了面包屑,能够拓展适应综合型网站,但当在房产网站上如此做时,成本却不断升高。

传统导航无法承载多入口

如果用户经由小网站或网站某菜单页的进入,传统方式的导航将让用户感到困惑。以一个在考虑参加大学研究课题的学生举例。这个人可能对院系详情更感兴趣相比整个学校。因而很容易进入网站的院系层页面,而不是学校的主页。
另一个例子就是单身妈妈想了解宝宝福利。她们更像是要直达福利的次级频道而不是政府主页。在这种情况下,用户的关注是在当前内容。(如:课题页或儿童福利页)。他们不是立即对这整一个网站感兴趣。
不幸的是,不论用户是否愿意,传统的一级、二级导航都试图让用户去了解整个网站环境。

在这个大学页面上,这个“研究菜单是指整个大学的研究呢还是仅是这个学院的研究。当两个同样的菜单出现,并指向不同的地方会怎么样?

导航设计趋势!关于图标式导航的改进

蓝蓝设计的小编

不知不觉的,很多网页设计中采用了图标式导航(Navigation)——一般使用三道杠作为图标,用以导航。
这种导航的好处是节省空间,让界面更简洁。

图标式导航的案例

这是YouTube的图标式导航(移动版):

为导航瘦身!关于图标式导航的改进

这是Squarespace的图标式导航:

为导航瘦身!关于图标式导航的改进

AWARD的图标式导航不拘一格:

为导航瘦身!关于图标式导航的改进

问题所在

问题在于,点击图标式导航之后,图标本身没有任何变化。也就是说:操作缺乏反馈

 

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档