这个问题今天拎出来单说,还是基于以用户为中心的产品设计原则。首先我们要明白导航是什么,它可以是这样
也可是是这样
导航的意义是提供一个方法,让用户可以在产品的信息架构中进行穿梭。而信息架构是为用户提供合理并且结构化信息的一种方式。属于结构层的信息架构在上篇帖子中已经写了很多,就不赘述了,这里想要强调的是信息架构和导航设计之间的关系。产品的信息架构呈现给用户是通过导航的设计,可以说信息架构是导航的根基。简单说,提供给你去某个地的能力,这就是导航。“信息架构把一个结构应用到我们设定好的内容需求列表中;而导航设计就是一个用户能够看到那个结构的镜头,这就表示,用户可以通过它,在结构中自由穿行”,Jesse 这个表述真心贴切。
如果觉得一个网站的导航有问题,首先要看这个网站的信息架构是否合理,一个优秀的导航是无法去弥补信息架构所犯下的错误的(我是在黑自家产品么。。。)。如果信息架构没问题,只是导航的设计上需要优化,那么下面就是针对导航设计的干货了。
导航设计要完成的三个目标:
1、必须提供给用户一种在网站间跳转的方法。(这是必须的)
2、导航设计必须传达出导航元素和它们所包含内容之间的关系。(导航名字叫女装,点进去一看都是进口食品,懵逼的同时这网站你也不会再去了)
3、导航设计必须传达出它的内容和用户当前浏览页之间的关系。(这就涉及到导航的维度了,一级导航是男装、女装、儿童装,二级导航有男商务、男运动、男休闲、男朋克、男等等;如果把朋克和女装、儿童装放在同一级导航中,明显是不合适的,除非你的信息架构就是这么设计的。)
几种常见的导航
全局导航(global navigation)提供了覆盖整个网站的通路。全局导航不是说我能从一个面,只要一个导航点击,就能到我想要去的第二个目标页面,如果这样设计,你也页面里也没别的了,全是导航链接。全局导航提供的是用户最有可能需要从网站的最终页到其他什么地方的一组关键节点。
比如:在淘宝店铺商品详情,比如你在看一个键T恤,想看看和它搭配的裤子,除了店主推荐的搭配套餐之外,从一级导航去找裤子,就要点击导航--裤子--裤子列表--详情。这就是全局导航的一种表现。
局部导航(local navigation)提供给用户在这个架构中找到“附近地点”的通路。在一个严格的层次结构中,这种导航只提供到达父级、兄弟级、子级的通路。这种导航一般只应用在重点向用户体现信息架构的产品中。
比如:锤子的欢喜云。
这种局部导航,只提供了欢喜云内部兄弟级界面(功能)的切换,比如联系人、便签和查找手机。
辅助导航(supplementary navigation)提供了全局导航或局部导航不能跨苏到达的相关内容的快捷路径。一般都是使用在整体信息架构非常板正,但是有些常用功能或者相关功能使用时,需要需要重头开始点击,这时候就比较适合使用辅助导航。
比如:大多数APM类产品的FAQ。
上下文导航(contextual navigation)有时候也叫“内联导航”,一般是嵌入在页面自身内容里的一种导航。
比如:百度中搜索“APM”,搜到的不是Application Performance Management(应用性能管理),(百度推广的不算),而是Action Per Minute(每分钟操作次数)。接着看解释APM —每分钟有效操作的次数,又称“手速”多见于星际争霸和魔兽争霸3(WAR3)这两款游戏中一定程度上反映了玩家的水平。这时候“星际争霸”就是一个超链接,点击之后会跳转到“星际争霸”的知道内容。
注意:上下文导航的使用,真心要慎重,一段文章里有很多超链接是非常让人抓狂的。
友好导航(courtesy navigation)提供给用户他们平时不太会用到的导航,它们是作为一种便利的途径来使用的。
比如:很多网站下面都会有的“联系信息”“法律声明”这种。他们通常会独立于你的网站架构,单独存在。
网站地图(site map)是一种常见的远程导航工具,它给用户一个简单明确的单页的网站结构的快捷浏览方式。一般情况这种网站地图都是作为网站的分级概要。
索引表(index)是按照字母排序的链接到相关页面的列表,看看书的最后的索引就懂了。这种导航一般使用在特定的情况下,比如你的产品涵盖了大量的、不同主题的内容,而用户的浏览需求也存在很大的差异,这时候使用这种导航比较有效。
这些导航的类型只是大家总结出来的,活学活用是关键,知道问题的核心是:清晰的告诉用户在哪儿,而且告诉他们,他们能去哪儿,这个才是最重要的。