导航的问题

记录于

如何进行一个产品的交互设计?

第一步:信息构架设计
第二步:界面细节设计

信息构架设计表现在页面上就是导航

导航是个大问题。
导航的关系?

导航应该放在哪儿? 我们来看一个例子(新浪的新闻首页):

snap1.gif

标识红框的部分分别是网站的主导航和当前新闻中心的导航。这样的设计似乎会让人很难察觉到新闻中心的导航?

第二个例子(http://act.qzone.qq.com/polo):

snap2.gif

标识红框的部分分别是网站的主导航和玩家作品下的导航。这样的设计引发了一个议论,两行导航,彼此应该有关系,是什么样的关系?

同样,第三个例子(http://blog.qq.com):

snap3.gif

两层的导航设计上会有从属关系,但实际上栏目内容并非从属关系。

那么导航的设计,是不是要考虑到他们的从属关系?而不是一味地在视觉上追求好看、突出?而是设计上的一个合理性、逻辑性问题。

导航层级过多怎么办?

我们先看几个已有的处理例子:
(
QQ音乐播放器 ,两层导航结构)

snap4.gif
(城市达人 ,个人管理中心三层结构)

snap5.gif
再看看别人的处理方式,总结一下,有:

方式一:精简上一级
(Yahoo!News)

snap6.gif

方式二:保留最高级,放弃后面的
(Yahoo!News)

snap8.gif
是否导航的层级过多,路标也可以作为一个解决方式?

回到主题,作为导航,是网站的核心,索引方式。除了要有从属关系,我们是否也考虑到导航的层级过于多的情况,换一种方式解决?限制一个页面上最多只出现两级导航?第三级导航我们是否换一种方式去索引用户,而不是一味让用户觉得这个网站的结构很深很复杂,用起来也会十分累。我们这里有一个比较类似的例子,QQ秀2.0 。话题下一次待续。

  • http://hi.baidu.com/myey8 思域

    哈哈!看到片片会的介绍一样有意思啊!

    至于导航之间的关系的确有必要的!网站就像现实中的超市,超市的通道设计是否合理,有逻辑性关系到超市的销售业绩。

    当然,这个逻辑可以是从营销角度设计的,也可以是从用户角度设计的,还可以是从建筑设计角度出发的!

  • http://www.uespace.com 兔子

    薯片会这个名字满有意思的哈,提一个可用性问题,回复的字体的颜色太淡了,看不太清,也许是我的眼睛比较近视吧。

  • http://www.v4uu.com 稻草

    哈.早在 Minamax的时候我就来了。嘿嘿
    导航.永远的话题.
    记得yahoo Video/travel 频道改过一次导航很有创新. Junchen的blog也有介绍

    觉得 导航就是像您在逛商场时.
    知道什么在哪. 知道将要去哪 ,知道你现在在哪….
    .不会迷失方向.

  • http://www.qclqc.cn 清晨篮球场

    很多理论是矛盾的,比如逻辑上的从属关系,是否就必须在页面体现出上下级关系,那么如何避免层级关系太深导致的查找不便,很多情况下,是找一个平衡点。

  • http://www.xibeidesign.cn 西贝

    补充几个不错的导航形式:
    网站:http://www.thisnext.com/
    网站:http://www.kaboodle.com/
    网站:http://www.etsy.com/showcase.php

  • http://shing.cnblogs.com Shing

    关于页面链接之间的跳转问题,是新开页面好,还是本窗口跳转好?

  • 等等

    为什么发表评论,一定要留下邮箱地址呢?

  • http://i.cn.yahoo.com/lancemont 彩虹墓地

    居然能记住我的邮箱,没想到,赞一个。
    我同事问我“何谓信息架构”,我说“导航的骨头”。
    其实,明白了导航导的是什么,问题就简单多了。其实我觉得导航有狭义和广义之分,狭义的导航我们常说的导航。广义的导航是除了内容以外的一切。从banner、logo、站点布局到各式各样的标题、标签……一切能引导你继续下去的东西不都在navigate你吗?

  • lyhiving

    我觉得一般情况下导航尽量做到能进能退,突出先后关系就可以

    对于活动页面的导航就要做到能进能推,突出重点。

  • kingrever

    “我们是否也考虑到导航的层级过于多的情况,换一种方式解决?限制一个页面上最多只出现两级导航?第三级导航我们是否换一种方式去索引用户,而不是一味让用户觉得这个网站的结构很深很复杂,用起来也会十分累。”

    能否展开讨论

  • alps

    8楼TX说得对啊~ 从导航的角度看世界,世界就是无数信息点聚合成的信息矩阵or聚合体。所有的info-inquire过程就都是引导至信息点的一个行为。

  • http://www.ptu123.com ceres

    虽然看的不是太懂 但是还是有收获………
    这个薯片会更新的好慢呐!
    太慢了…不过所讨论的东西确实是很深…

  • jasper

    不错,学习了

  • http://www.bizhiol.com 壁纸在线

    导航也有这么多学问,学习了

  • zane

    偶然进来了,很不错,是个学习的好地方。

  • candy

    “信息构架设计表现在页面上就是导航”
    非常不同意这句话。认同Peter Morville他们对于信息构架的定义,信息架构包括四个内容:组织系统、标签系统、搜索系统,以及导航系统。
    那么信息架构在页面上的表现就不仅仅是导航,这么简单。
    首先,信息架构中的组织系统就决定了呈列的内容分类形式。且网站的整体标签系统不仅存在导航中也存在内容中。再还有搜索不说。
    那么信息构架设计表现在页面上远不是导航这么简单。
    他首先会在呈现的内容主旨上表现出来。就算这个网页,我不设计导航,它也有信息架构。
    而导航,起到的仅是对用户的引导作用。就算你导航层次或视觉设计得再好,如果你用了不被人们理解的标签,一样是反效果。
    但是导航的表达模式的确有串联各信息构架表现的功能,所以只能说信息架构设计在页面上的相对直观的表现是导航。

<< 返回首页 <<   >>

关于薯片会

...
第一步骤:左手拿起薯片,右手用鼠标慢慢滑动。

第二步骤:吃下薯片(你可以不吃,咬着),然后左手、右手放在键盘位置上,把你想要说的话写上。
...

薯片会成员


臭鱼(李钊)

北京人,男,29岁
www.chouyu.com.cn


Seven

外星人,男,25岁
www.hiseven.net


tesion

很热情的同学
www.tesion.cn


Evanchen

一个真正的交互设计师,应该能够丰富设计这一概念。
www.UExperience.cn


西贝

单纯使人更加专业
www.xibeidesign.cn


艺文

用爱心规划设计
QQ:4251538


流沙

Design to change the world
www.uesand.com


yanyan

真诚是设计的灵魂
Qzone


margaret

蛋小荒—女神


vijeun

按着心里的感觉走
Qzone


vv

万年12岁

readers