浅析导航设计

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
2644 3 8 2016-11-10

了解导航的基本作用和常见的几种分类

导航的基本作用


在做每一个设计之前,我们最好思考一下,为什么要做这个设计?它可以实现什么?——即设计的意义(我们是设计师,不是美工~)。


导航设计是框架设计的重中之重,如果说,网站是一座繁华的城市,导航就是这个城市的地图,方向指示牌,好的导航甚至堪比一个优秀的导游。

好的导航会告诉用户,此时他在哪里,面前有几条路可以走,这些路分别是通向哪里的,以及怎样从这个页面跳到另外一个页面。用户初来乍到,对网站是陌生的,如果没有导航,他将寸步难行。

因此,你必须确定,导航的内容必须简明易懂且不要有歧义,如果你到了一个陌生的地方,给你的地图连篇累牍没有重点或者充满了让你不敢确定的标志说明,相信我,你肯定会崩溃的。

导航的链接必须是真实有效的,想象一下,你根据导游说的路线却被告知此路不通的场景把。


小结一下:

导航的基本作用:

  1. 提供用户在网站间跳转的方法(怎么走): (1.引导用户行为 2.链接真实有效)
  2. 传达元素与它们包含的内容之间的关系(什么关系): 帮助用户理解“哪些选择对他们来说是有效的”
  3. 它的内容和用户当前浏览页之间的关系(在哪里):  帮助用户理解“哪个选择会更有效的支持用户的任务或者用户想要达到的目的”


导航的基本分类


已经了解了导航的基本作用,我接下来将举例介绍常见的6种导航,以及它们各自的作用和特点,便于日后设计时做参考。以下为基础的6种导航分类:

全局导航(global navigation)、  局部导航(local navigation)、  辅助导航(supplementary navigation) 、上下文导航又名内联导航(contextual navigation) 、友好导航(courtesy navigation)、  远程导航(remote navigation)。


1. 全局导航(global navigation)


全局导航就好像一个客运中心,也许你的目的地有车可以直达,又或许你的目的地需要转车才能到达,但是无论如何,你是可以通过他到达目的地的。

当然了,比如你是在一个小山村,村里人几乎不去远方,因此村里就没有客运中心,要去客运中心得坐村里的牛车赶到城里的客运中心。同理,全局导航也不一定每个页面都有。


我们日常浏览的网站,全局导航出现的频率很高,你可以通过全局导航,可能是直接,也可能是间接到达你想去的页面

Image title


2. 局部导航(local navigation)


之前说全局导航像是客运中心,那么局部导航好比公交车。走的范围比较小,就在你所在的地方周围。比如底下这两个例子,局部导航和你所在的页面关系紧密,帮助你在这个范围高效行动。面包屑也属于局部导航。

a. UI中国中,你到达你关注的人的主页面,这里的导航显示的则是关于个人主页这个架构下的导航

Image title


b. 在淘宝中,进入一个分类页面后,左侧是这个分类下细分的导航,引导用户快速找到自己感兴趣的商品。

Image title


c. 当然,小小的不起眼的【面包屑导航】也属于局部导航,可以用户快速返回该页面的父级页面
面包屑

3. 辅助导航(supplementary navigation)


讲了路上开的,也来说说天上飞的。辅助导航就像是飞机。直达目的地,不绕路,不转

全部评论:3条

  • aireon

    2017-03-29 16:35

    我这两天在搞B2B平台,找了很多资料都没什么用..跟自己截图分析的没什么区别,国外的教程还是好一点

  • qianqian616

    2016-11-25 09:24

    没啦???

  • xiaokang

    2016-11-10 18:47

    大神解析的很到位,好给力的文章,顶起来!

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票