2019年10月14日
Web端互联网产品的设计模式-导航丨UIMAX设计思考

导航是什么?

当你在黄金周出去旅游的时候有没有过迷路的经历呢?当你去商场购物时有没有找不到商铺抓狂的时候呢?当我们来到一个完全陌生的地方时,导航就显得尤为重要,无论是街道上的指示牌导航,商场里的楼层导航,还是开车时的地图导航,其作用都是为了让我们不会迷失方向,更快的找到目的地。
 

那么我们在设计网站的时候,也会遇到这样的情况。面对一个全新的网站,我们并不知道网站到底有什么内容,而导航系统就能很快的帮助我们,知道我们现在在哪里,要去哪里和可以去哪里。

那么接下来就让我们逐一揭开网页导航系统的面纱
 

全局导航

全局导航一般由站点ID、实用工具、搜索方式和栏目构成。全局导航提供覆盖整个网站的通路,底下的内容不断变换,但全局导航始终固定存在在某一个位置,它就像一个指南针,随时可以看你现在在哪里,你可以去哪里。但有一点,在那些需要填写表单的页面,全局导航会造成不必要的干扰,因此这里只需要最小规模的全局导航。

全局导航

作为界面的一部分全局导航需要符合界面设计的三大标准,即易识别、可理解和易操作。
 

易识别:指用户能清晰看到和认出全局导航,根据尼尔森F型视觉模型,全局导航作为首先让用户发现的视觉元素,多放于页面顶部或左侧,事实上绝大多数网站也是这么布置的,在顶部通常为水平导航,左侧则为垂直导航,两种方式各有千秋,水平导航最符合阅读习惯,但承载导航数量有限,垂直导航能承载更多的导航选项,可扩展性好,不过当导航选项较少时则有些浪费空间,且不利于营造沉浸式体验,因此选择哪种导航主要依据导航数量。

 

可理解:指用户能否清晰明白导航中的每一个项目的含义以及应当如何操作,因此全局导航的每一个导航命名都要贴近用户,面对普通消费者,不要使用专业词语,而面对专业B端用户,则要准确的使用行业用语。除此之外我们还需要让用户理解应当如何操作界面,因此交互中的每一个细节都要认真对待。比如用户想选中一个导航,他需要点击文字还是图片,还是包含文字和图片的整个区域,再比如当用户想要知道自己在哪个模块时,他是否需要不同的状态来进行区分理解,又或者对一个有子层级和没有子层级的导航,用户是否能够感知到他们的区别来方便进行下一步的决策。
 

易于操作指当用户想去某个地方时,操作能否高效不出错,这方面的问题主要来自复杂层级的导航,常见层级导航处理方式有:水平层级导航,垂直层级导航和手风琴层级导航。除此之外设计师还要考虑全局导航的可扩展性。

 

局部导航

当信息复杂,内容体量过大时,局部导航能更好的囊括内容,而局部导航的每一个分类都可以是一个单独的网站,所以局部导航又被称为“子网站”或者“网站中的网站”。如下图新浪官网,点击体育标签,进入体育子页面。

局部导航

局部导航-进入子页面

巨型菜单:有些网站会把全局导航和局部导航结合使用,我们把这种导航叫做巨型菜单。这种导航的好处在于无论你在哪里都可以跳转到其他的一个地方,如下图阿迪达斯官网,全局导航和局部导航相结合,在全局导航处移入鼠标时,局部导航显示,移出鼠标时,局部导航隐藏。

巨型菜单
 

情景导航

情景导航又称上下文导航,当你在阅读某类信息时系统会给你推送一些其他相关内容的信息,而这些信息被认为是在这些情景下你可能会用到的。有节制的使用情景导航可以增加灵活性来弥补主导航涉及不到的地方。对于内容为主的网站,情景导航可能是文章中的链接,可能是同类文章的推荐,对于售卖为主的网站,情景导航还可以提供交叉销售。

但情景导航需要对用户需求有准确的理解后再进行应用,如果情景导航不能明确的支持用户目标,那么它将会被认为是一团糟。

情景导航的一种展现形式
 

辅助导航

辅助导航提供了全局导航和局部导航不能快速到达相关内容的快捷链接,局部导航不属于网站的层级结构,但是可以提供查找内容和完成任务的辅助方法 。

它又分为站点地图,索引,指南

站点地图:站点地图更适用于大型的网站,当你在主导航搜不到想要的信息时,我们可以在站点地图以一种更直观,更结构化的方式来查看和寻找你想要的信息,它通常展示信息结构的前几层,而对于只有2-3层的产品来说,站点地图是多余的,不应用站点地图用户也足以找到他想要的东西。

站点地图
 

索引索引和站点地图的目的是一样的,都是希望以一种平面化、结构化的方式来呈现信息,不同的是它采用更精确的分类方式,帮助目标清晰的用户找到它所想要的东西。
 

指南我们可以理解为是为新手介绍有关网站内容和功能的工具,通常以线性步骤呈现。

 

更多导航

友好导航提供给用户不常用的链接,以便在需要的时候提供便利,比如一些法律的信息,联系信息,反馈表单等。
 

个性化导航根据用户不同类型,推送不同的导航,实现起来较耗费人力物力。自定义导用户可自定义导航顺序和内容,将常用导航放置于页面上。

最新文章