首页

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

蓝蓝设计的小编

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

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

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

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

Ableton 

Music production with Live 9 and Push | Ableton

 

大型网站导航设计指南

蓝蓝设计的小编

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

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

定义大型网站

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

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

大型网站上的导航挑战

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

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

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

51abfabb03e0436170000001

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

传统导航无法承载多入口

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

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

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

蓝蓝设计的小编

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

图标式导航的案例

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

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

这是Squarespace的图标式导航:

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

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

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

问题所在

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

 

日历

链接

个人资料

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

存档