把导航系统做薄

和朋友讨论时,我提到过一个观点,所有框架层设计中,最核心的是导航设计。最近更看到有国外同行提出“80%的可用性是导航!”因为良好的导航可以保证用户找到任何信息。也就是说,提供到达的可能,远比如何到达的可用重要。

我习惯把导航分为一维、二维、多维来简单理解,一维对应线性结构,二维对应分层结构,多维对应无序结构。这么说可能比较抽象,其实都已经是耳熟能详的应用,分别举例阐述设计意图:

  1. 最原始仅限于一二三级的,单对多树状应用就是“分层导航”,基本属于必要元素。
  2. 跟踪用户行为,记录的用户在网站的活动足迹就是“线性导航”,俗称面包屑。
  3. 管理系统的后台,在首页增加的类似跨分层结构的链接就是“无序导航”,俗称快捷方式。

二维结构复杂到一定程度,必然造成导航纵深过度,用户到达的难度增加。此时就需要考虑其他方案综合实施,具体设计可以概括如下:

从无到有的堆积过程,把当前所有能够调度的资源全部拿出来。
由多到少的序化过程,分解任务找出主次任务线索并重组。

回忆起Flickr改版,前几次重要的导航改动,都会更换版本代号,可见Flickr把导航系统看的相当重要。同时,Beta和Gamma两个版本的升级也对应了我的想法,参考头部导航片段:

Flickr Beta版顶部导航

Flickr Gamma版顶部导航

Beta的特点是想要什么就能看到什么,从Alpha起就在不断的加功能,虽然期间也在做任务分解的调整。但显然,量太大怎么调整也会感觉复杂。Gamma的特点是想要什么就有什么,只不过把要不要的权利还给了用户。

如果从用户体验的角度来阐述,Beta已经满足了用户的认知体验,好玩够用;Gamma提升了用户的操作体验,耐玩易用。大家仔细对比,还能找到豆瓣改版与之相似的痕迹。

有了运营数据,问题很容易暴露。比如北京的交通,最理想的状况是把北京市划分成N个小区域,各区域之间使用地铁/城铁等高速交通工具,各区域之内则使用公交等低速交通工具,同时地铁/城铁和公交站上下一体化,如此可以尽量避免公交路线的大范围交叉(扁平结构),主动预防而不是被动减压。

我们面临的事实,首都不能重建,但产品完全可以重来。

24 Responses to “把导航系统做薄”

  1. 奇遇 Says:

    恩!简化、突出、增加辅助导航。

  2. artec Says:

    沙发~

  3. 奇遇 Says:

    haha~

  4. 草根网 Says:

    好文,收藏至20ju.com

  5. hello Says:

    有没有对城管提过上条意见?我觉得很好.

  6. 千鸟 Says:

    城管的抱负是“维护”交通,比较擅长抓盗版、盯地摊,还有欺负老百姓。

  7. jdf0819 Says:

    楼主的文章,一出手就让我感觉到了高手风范!

    “提供到达的可能,远比如何到达的可用重要。”

    “必然造成导航纵深过度,用户到达的难度增加。”

    只是对于俺这样的普通老百姓来说实在是太有深度了!

    俺没指望楼主能耐心的解释“一维导航”“二维导航”“三维”

    只是希望能不能可怜可怜俺们这些对从小没啥机会好好读书对科学文化无限充满崇拜在城市中辛苦劳作默默承受城里人歧视又对城市生活依然充满渴望向往的农村小孩儿

    请楼主慷慨的把一些话说的简单浅显些吧。。。。。。

    提前对此表示由衷的感谢

  8. jdf0819 Says:

    如果楼主觉得 科学就应该有科学的深度 就应该用科学而严禁的语言来表达的话

    那俺们这些没啥文化的农村小孩 对科学文化的了解也就只能限于 在电视上看看“于丹讲论语”了

    哎。。。。。。

  9. wayne Says:

    不明白可以请教,但不要摆谱。

    你不懂不一定就是作者没写清楚,如果“提供到达的可能,远比如何到达的可用重要。”和“必然造成导航纵深过度,用户到达的难度增加。”都觉得理解有困难,那你真该回去读四书五经了。

  10. xmlove52 Says:

    我很喜欢深度加工的导航,因为感觉通过一种探索反而记得清楚一些

     

  11. weiguang Says:

    我是说的话有些偏,这是我的不对。但根本没有摆谱的意思,如果我说的那些话会被人理解为我“摆谱”的话,那我也只能说兄弟你这可能是误解我了。am so sry.

    我更没有说“作者没写清楚”,因为有人看懂了。而确实是我不懂,我上面也说了,我是菜鸟。

    我只是期望作者也许可以说的更简单一些,这样有可能让更多像我这样对这种“把导航系统做薄”想法感兴趣的但又确实在这方面很菜鸟的人看的懂。这和于丹在电视上讲论语的做法有些类似

    当然我们不能要求所有的学者都要去像于丹那样跑到电视机里给老百姓去用白话讲论语。

    但作为 希望传递自己的想法和观点并用自己的主张来影响观看者的人来说 我觉得于丹的做法是合适的。

    这和“以用户为中心的设计”思想有点类似。 如果设计者希望让使用的人接受自己的设计,那么他肯定要站在使用者的角度想问题。

    如果一个人的目的是要向外传播自己的主张并希望对人有影响,那么肯定得站在听众的角度想想“我的话该怎样说才更容易让他们明白”。

    我前面还留过一个评论但被管理员删了,我想也可能是因为我的话说的语气不合适。

    但我还要在认真的再说一次,我看白鸦写的东西,大都能很容易的跟上他的想法。

     

  12. 千鸟 Says:

    我已经讲的很清楚了,我没能力讲的更清楚,您跟不上我的想法是我的错。

    我从来没打算影响谁,评论是用来讨论的,讨论就得提出可讨论点,希望这个问题您不要再发表长篇大论,就此打住。

  13. 白鸦 Says:

    不行,我发现你们大家跟不上我,我脑袋转的太快了,聪明…
    我总觉得楼上的楼上说“我看白鸦写的东西,大都能很容易的跟上他的想法”,一层意思是说:白鸦写的东西向来肤浅,二层意思是想:我夸白鸦一句他估计不会删我的评论。

    weiguang:
    我刚才仔细查看了一下所有被过滤的垃圾评论,没有看到你的。

    看来你的评论确实是被删了!

    没办法,我们的原则就是:评论是用来讨论的,讨论不欢迎态度不好的言语。可以攻击我的观点不要攻击我的人,攻击我的人我必须让它“滚蛋”!
    没办法,兄弟们都是很用心很认真的写文章,付出的时间和劳动,半毛钱收入也没有;不可能再忍着去看别人那些“风凉”的评论。
    所以,“删之”是我经常跟大家说的,“不要手软”也是我经常强调的,这些都是我让大家一定要执行的“政策”。

    对了,千鸟那两句话说的真的不深,你再理解一下肯定能明白。
    我看好你哟~~

     

  14. weiguang Says:

    千鸟:我从来没有指责你的错或者你的能力的意思,上面我说了一些语气不对的话,抱歉!也许我上面提出的问题很简单,可讨论的点不多,但我仍然觉得一个好的思想值得用更合适的方式去表达,好对更多的需要它的人起到的有意义的帮助的作用,我想这可能就是UCD被需要的原因或者说它存在的价值。

    白鸦:你觉得的两层意思都不是我的本意 是我表达的不够清楚 我只是很喜欢你讲话的方式 轻松、准确、让人也很愿意接受。如果我是怕人删我的评论,那就也不会用我和我老婆的照片当头像 :)

    anyway吧 碰了“墙”却起码让我明白了一些 去不太熟悉的朋友家做客 不好太放肆而要有礼貌 这是规矩

     

     

     

  15. 千鸟 Says:

    您没必要做这种解释,我只是在求您不要再(在本文)发言了,我希望看到有意义的评论。

    OK?

  16. Breeze Says:

    flickr的navigation的确越做越好了, 但是随之而来的是变成了一个heavy ajax apps, 感觉这不是一个好兆头.

    有没有种折中的办法?

    btw. 看不懂说明智商有问题, 还好意思长篇大论, 有意思.

  17. weiguang Says:

    千鸟:我又认真读了你的文章,觉得明白了一些你讲的观点。

    这就好像 比如我先后有了100个苹果100个橘子100个水蜜桃100个大鸭梨,我把他们分别放在4个不同的箱子里,苹果的箱子里我再用4个不同的盒子分装那25个很胖的苹果、25个偏胖的苹果、25个偏瘦的和25个很瘦的、其他水果也这样照做。。。。这看起来很有秩序,但其实走路下去找到每个果子都挺费劲的。所以还不如把400个果子都拿出来放在一个大箱子里,因为都是水果吗!而且我还在箱子外面安装上一个搜索的框框。

    更何况,现在基本上每个网站里面放的东西都远比这400个果子多的多的多。

  18. serein Says:

    从无到有的堆积过程,把当前所有能够调度的资源全部拿出来。
    由多到少的序化过程,分解任务找出主次任务线索并重组。

    这两个的意思是不是

    1.搜索

    2.使导航/结构更加清晰?

    提个问题:

    Beta到Gamma的过渡是不是必须的?如果一开始就设计成gamma的样子是不是更好?

  19. 千鸟 Says:

    @Breeze
    在产品的角度,任何兆头和技术本身没有关系,关键是技术实现是否能到位,做好是促进,没做好就是别扭。

    @serein
    意思不对。由Beta过渡到Gamma与直接设计成Gamma是两个概念,一步到位不一定就是好,过程需要培养。我的看法,其实不是刻意规划,而是针对产品发展的方案演变。

  20. Macky Says:

    对于一个有一定份量的网站,一个清淅的webmap必不可少.一个专门的页面来细分各个版块,这才是真正的完美的导航

  21. Yoese团队日志 » Blog Archive » 导航相关讨论 Says:

    […] 把导航系统做薄 […]

  22. keyu Says:

    @weiguang

    400个果子,比喻真的很恰当…不过真的把这400个或更多的果子摆在混在一起,如果有人要买20斤胖苹果,我们需要多久才能把这20斤胖苹果挑出来给别人?用搜索?但是习惯用搜索的用户数量所占的比例能有多大?现在一般都google和baidu,直接进入网站终极页面,没有简单易懂的导航,这个浏览者就很难成为真正的用户。

    赞成把导航做薄,纵深了做,有句话的意思是什么来着:我马上告诉你,你就不容易记住。纵深的导航结构明晰,用户用过一次后印象深刻。

  23. Says:

    颜色不错。

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

    […] 把导航系统做薄 http://ucdchina.com/blog/?p=382 […]

Leave a Reply

You must be logged in to post a comment.