导航设计与信息架构

大部分时候我们讲导航,讲的是导航对内容和结构的一种表现。就是说我们在讨论导航的时候,更多的去关注怎么与之交互,以及视觉上是怎么好看。但是导航,不仅仅局限于交互方式和视觉形式。

被狭义化的导航

回想一下我们是如何设计导航的?难道不正是根据内容、根据内容的结构去设计?最终,导航可能包含了三方面的功劳:交互设计、视觉设计,别忘了,还有信息架构。是信息架构决定了导航的设计。

信息架构决定了我们是用几级分类,一个项目是否可以属于两个或多个分类,等等。信息架构里面,有很大一部分工作是分类。分类,就是对已有的项目、内容,通过已知的共同属性,进行分组、归类。在计算机、信息系统被发明以前,人们就在不断进行着分类工作。从日常生活到科学研究,分类无处不在。我们为什么会要对动物、植物进行分类呢?哦,是为了形成科学的知识体系。那么当然,是先有了动物、植物、微生物的具体存在,才有了界、门、纲、目、科、属、种这样的生物分类法。为什么要分那么细致那么多层级?是因为生物届的复杂性要求分的这么细致。

所以我一直以来支持的观点是,根据内容去进行分类,和信息架构。所以我也十分推崇使用卡片分类法,既是定量分析也是定性分析。在有条件的情况下,推荐大家尝试。

回到开始的话题,如果我们考虑导航的时候,仅考虑其交互方式和视觉形式,那么很有可能反作用于信息架构。比如下面的例子。

Tab 式导航的例子

我们为什么要用 Tab 式导航?是因为它能比较好的表现出分类以及分类的结构(一般是两级)。并不是因为有了 Tab 式导航,所以人们才把分类分为两级。最初的时候,一定是因为先有了两级分类,设计师才设计出了精妙的 Tab 式导航。而 Tab 式导航的大规模使用,也在反面的影响大部分信息架构的设计。简单的几项内容,本可以一级逻辑表明,却被套用了两级分类,理由是 Tab 式导航比较好看。就好比人们总是习惯于用四个汉字作为导航文案一样。比如蛮好用“新闻”两字可以的,非得用“新闻热点”。这道理是一样的。

导航的交互和视觉设计不应该影响信息架构的设计。鱼眼菜单真的那么好用么?如果原本一个下拉菜单就十个菜单项,你会选择用鱼眼菜单吗?或者又是仅仅因为它很酷。

仍然是那个问题,什么样的内容,决定了什么样的导航。尤其要注意下,我这里说的内容,不仅包括文本资料的分类,也包括功能型网站的用户任务和目标。

导航不仅仅是 Tab

我们看到在 Office 2007 系列产品中,原来的菜单已经被板砖儿样的按钮所取代。这些被称为 Ribbon 的板砖儿,或者称之为 Context Navigation(情景式导航),是对类似交互操作的一种分类。显然,情景式导航,已经超越了简单的针对内容的分类。

搜索框是一种导航吗?这样说似乎有些牵强。但是在信息检索系统中,搜索框、过滤器等,确实是起到了导航作用的。或者我们可以称之为辅助导航。

归本溯源,导航为什么会存在?在所有的系统、应用中,都是为了让使用者能够高效的完成任务、达成目标。这样的话,从广义上讲,引导用户快速完成任务的链接、按钮,都可以作为大导航系统的一部分。

可能很多朋友有这样一个问题:导航设计是否要考虑商业目标?我觉得这与上文并不冲突。具体的可留待讨论。

小结

不要为了导航而导航,前面一个导航是指表现形式,后面一个导航是指实际的导航系统。

对于导航的设计,信息架构比交互方式、视觉形式更加的重要。

导航不仅仅是内容的一种分类,也包括类似交互操作的分类。导航的目的是为了让使用者高效的完成任务、达成目标。

情景式导航有可能是导航设计的一种发展趋势。

34 Responses to “导航设计与信息架构”

  1. 奇遇 Says:

    沙发!~ 

     导航的广义话,这个定义可关系到导航的定义。

  2. Jsuper Says:

    板砖儿…这个读起来别扭,因为一般都说“板儿砖”。

  3. 草根网 Says:

    好文,收藏至20ju.com

  4. 餐桌美食 Says:

    比如说马路边的指示牌就能为你导航,引导用户去完成任务!

  5. John Says:

    菜鸟请教,请问UED和UCD有什么区别吗?不要说只是“体验”和“中心”的区别啊,呵呵。

  6. 奇遇 Says:

    哈哈,从字面意思上说,UED:用户体验设计,UCD:以用户为中心的设计。干嘛非要划清界限?

  7. JunChen Says:

    @John UCD已经很明白了;UED我们通常用来指用户体验部门或者用户体验团队或者用户体验设计师;

  8. emily Says:

    请问各位前辈,你们讲这些的时候,同时是否参与界面的设计呢?

     这方面的工作应怎么找呢?嘿嘿.

  9. xueyue Says:

    同上问~

    新手没经验的公司不要 可交互这块引进国内也才没几年 哪这么多老手呢

  10. JunChen Says:

    @emily

    我本人也参与产品设计,从架构到交互到图形到前端,因为工作细分,现在图形和前端渐渐减少,当然原型阶段仍然会涉及到不少图形和前端。

    用户体验设计没有什么神秘的地方,别想得太玄了。

    @xueyue

    没有那么多老手,哪看到有那么多老手?多是指什么概念?从一些公司招聘UED相关岗位的要求可以看出来,一般用户研究员所要求的工作经验较少,建议从该岗位切入。

    新手没经验的公司不要,这很容易理解,不是么?大部分岗位都这样。

  11. 小Z Says:

    不要为了导航而导航,前面一个导航是指表现形式,后面一个导航是指实际的导航系统。

    这话太经典了,可是领悟起来有些抽象,是不是可以说导航完全为了“为用户导航”而存在?

  12. seo菜鸟 Says:

    网站导航做好,对优化什么都好

  13. 阿森 Says:

    对于导航的设计来说,信息架构是骨架,交互方式是肌体,视觉形式犹似锦上添花!

    上文可以这么理解吗?

  14. shanshui2006 Says:

    你做产品体验设计,是否策划环境体验设计?把虚拟现实应用于环境体验营销,应用于品牌体验营销你认为是否可以?

  15. JunChen Says:

    @小Z

    为达成用户目标而存在,因为我的观点是需要传达给用户的商业信息,和用户目标不冲突。

    @阿森

    三分天下吧。如果说视觉形式是锦上添花,可能有些弱化其作用。

    @shanshui2006

    没有接触过,但思想、方法应该是一致的。

  16. Robin Says:

    文字游戏否?

  17. laky Says:

    最近都在讲导航,怎么感觉这个博客的导航就有点问题,博客的翻页给人造成很大的麻烦,是人为的故障吗?  呵呵

  18. azhu Says:

    新手刚到,似懂非懂的状态。努力学习ing! 我觉得博主可以加些实际应用的例子,这样更形象点。

  19. lizhen Says:

    您好,这篇文章写得不错,收藏了,我有如下的问题和想法:

    1 “根据内容去进行分类,和信息架构。”这句话是什么意思?

    2  我理解“鱼眼菜单”,“酷”也是人的心理需求之一,不能因为它样式的多变性,因为它和传统的不一样就对它的价值怀疑;

    3 “搜索框是一种导航”,我觉得你这种提法很好:) 

    4 "对于导航的设计,信息架构比交互方式、视觉形式更加的重要。",我认为信息架构、交互方式、视觉形式是设计的几个层面,大家都很重要;

    5 “导航设计是否要考虑商业目标?”。。。。?这好像不是一个层面的东西吧?

     

     

  20. JunChen Says:

    @lizhen

    1、文中已有解释,就是指不要因为看到一些有某些局限的UI patterns 但是很酷,就用了,根据表现层面的限制去修正原有的设计;

    2、我的意思并不是否认Fish Eye的价值,而是只在某些情况下适用,但很多人确实因为它的酷而忽视了它的局限性;

    3、谢谢理解;

    4、我说的是“更加” ,确实,大家都很重要的;但信息架构是基础;

    5、所谓考虑商业目标,意思比如你老板提出了一些以他或者商业为出发点的建议,而听上去又好像是错的。改、还是不改?

  21. wow Says:

    导航设计就好比女人化妆一样,精心打扮2个小时,只要泼一盆冷水,妆就化掉了。

    但是女人不打扮,难看。打扮了,好看(但心疼钱)。

    少花钱,少花时间,多办事了。

  22. redfall Says:

    导航就像书的目录或者更精妙点是提纲,导航也好信息架构也罢都为了更好的呈现内容。内容、导航的明晰归类是非常重要的。

  23. wsxiaogao Says:

    导航,是一个网站的重要入口,非常重要,与之相关的设计和构架当然也很重要了。

  24. chemsin Says:

    导航,是一个网站的非常重要入口,就是人靠衣装一样。

  25. iris Says:

    同意!

  26. gutang » 内容索引 » [转载]帮助是什么 - gutang Says:

    […] 我觉得有时候把概念扩大化对问题的理解并没有益处。比如说帮助,从广义的去讲,很有可能我们会把导航也说成是帮助,把整个网站都说成是帮助你也不能说它错。于是讨论导航的时候,会说:瞧,其实整个网站就是一个导航。(比如我之前写的“导航设计与信息架构”好像是陷入了这个怪圈) […]

  27. 谷百优 Says:

    导航很重要哈,一定要给用户眼前一亮的感觉,因为用户进去网站后首先看到的手导航

  28. iceFiFi » Blog Archive » 《UCD火花集》电子书版下载 Says:

    […] 第十章 不得不说的网站导航 导航设计与信息架构 http://ucdchina.com/blog/?p=393 […]

  29. piqiu Says:

    原来导航还要这么讲究的,学习了,平时我都是随便导航一下的。。

  30. 冰棍 Says:

    抄书是为了分享 但是最好阐述点自己的想法

  31. 汽车配件展销网 Says:

    导航就像高速公路一样,是主流。

  32. 博客导航 Says:

    听着听深奥的,没直观的图像和例子!不知这是不是一种体验呢!

  33. 1314 Says:

    看文字信息不太够,想看点实际例子!

  34. 《UCD火花集》电子书版下载 « Tokgoo Says:

    […] 第十章 不得不说的网站导航 导航设计与信息架构 http://ucdchina.com/blog/?p=393 […]

Leave a Reply

You must be logged in to post a comment.