网站设计——页面导航栏

发布时间:2014-05-30编辑发布:迪麦互动

 页面导航栏是一个网站设计的最重要部分,互联网的设计师们努力的在每一个网页的设计上设计出各种各样不同的导航栏,为的就是不让用户迷失在信息的大海中,完美的导航设计才能给予用户最舒适、便捷的体验。


具体哪几大原则指导设计:


1、符合页面导航原则的设计: 
 

图1:Nestle.com
 

图2:Nestle.com 

图3:amazon.com

  我们用导航原则来检验图1的导航设计,这个页面通过页面标题“baby foods”告诉我们当前位置,通过网站logo,二级导航栏中选中的“Brands”,左侧三级导航栏选中的“Baby foods”,告诉我们这个页面的固定路径是从home,选择brands分类,再选择Babyfoods。且导航栏的每一个分类都可以被点击,可以让用户返回到上一级。这个页面完成了导航所需要的所有信息传达元素。我们也可以明显地找到页面中的: → → 的页面路径。图1是根据它的面包屑的节点标签元素,将页面中的相同元素找出来,这些元素都已比较明显的样式表示选中,与相同信息不同状态的内容区分开来,导航布局从上而下形成了包含与被包含的关系,图2是将这些选中的元素用箭头连接起来,这样就找到了页面中的的页面路径。

  图3是在amazon浏览到web navigation的搜索结果页。图中将隐藏的页面路径和实际存在的面包屑都标示出来了。面包屑的每个节点标签在页面的其它导航方式中都有被选中的状态,且自上而下,从外到内形成包含与被包含的关系,从而形成一个隐藏的页面路径。这里使用的导航方式和前面都不一样,不止用了导航菜单,还使用了树形的级联菜单的方式。当前页面也不是用页面标题,而是直接用的实体面包屑的最后一级节点标签的强化样式。这个页面通过不同的方式完成了用户的导航需求。

3、不符合页面导航原则的设计:

图4:meilishuo.com

  Meilishuo的一个杂志内容页面,没有实际存在的面包屑,那么我们寻找其它导航方式,如上图网站logo、导航栏、页面标题等,如箭头所指,我们会发现页面路径少了了一段。我们不知道从首页去了什么分类,然后来到“所在杂志”。这样用户想找杂志所在的上一分类就找不到了,回不到上一级。这个页面的导航原则就没有满足,用户在此处就会迷失。它主要少了主导航条没有选中当前所在内容分类,从而让路径断了一节。

3.符合页面导航原则的新型样式:




  后话:大多数网站使用的导航栏不只是一种导航模式,无论选择哪种都必须符合导航设计原则才不会迷路,导航栏是网站设计的重要部分,它的效果必须有坚实的基础设计。

 

 

 

分享至: