交互设计实用指南系列(8)—深广度平衡.pdf

交互设计实用指南系列(8)—深广度平衡
相信大家对街边林林总总的房产中介并不陌生，那么我们先看看下面这张图片。从右侧这家店的橱
窗里，我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类，
并且在视觉上做了一些划分，让我们对信息能一目了然。借这个小案例引出我们今天要分享的话题
：深广度平衡。
图1
？
其实“深广度”本身并不是一个单一的概念。在网站的信息架构中，有一种组织结构叫做树形结构：
网站首页视为链接层级中第一级，与其有从属关系的页面视为链接层级中的第二级，一般称其为二
级页面。通过二级页面又可以继续得到第三级页面，依此类推可以得到一个完整的树形链接结构。
这样一个完整的链接结构，我们称它为树形结构 。 在整个树形结构中，链接的层数被称为网页链接
的【深度】（depth）。而在树形结构里，最底层页面包含的页面总数被称为网页链接的 【广度
】（breadth）。 我们可以通过下面这张图来理解深度和广度的概念：
图2
2. 为什么深广度需要保持平衡？
我们回到开篇的小案例。左侧那店铺采用的是“只有内容链接的模型”（它们之间没有层级结构；链接
没有模式可循；且没有某种导航方案将他们分离开）（注1）在这里每一条房产信息都可以看成一个
内容链接，整个橱窗就像一张错综复杂的大网，让人头晕目眩。 而右侧的店铺采用的是“结构化浏览
模型”（只有一组链接，作为获取网站信息的途径；导航区域与布局中其他内容有视觉上的分隔；要
到达另一区域的某个页面，必须沿着树向上导航，再沿着另一个分支向下）（注2）店家将信息进行
了规整，在房产信息上增加了一个分类，并且对不同类型的信息使用了不同的颜色，高效的将租房
信息和售房信息区分开来。 一个网站的链接深度和广度最好有一个合适的均衡关系，深度过大的网
站不利于用户快速获取信息，广度过大的网站则容易让用户在无数并列的超链接面前不知所措。
图3 图3的上图说明了又窄又深的层级系统，用户必须点击6次才能到达最底层的内容。对又宽又浅
的层级系统而言（相对而言），用户必须从6个类别中选择，才能找到6个条目。就像图3的下图
所示，用户会面临主菜单上太多选项，而当他们选了一个选项，却没看到什么内容时，就会产生不
良的观感。（注3） 我们再来看一张用户对于不同层级结构所需反应时间的图表 （注4），图4：
图4 总共512项内容，组成了三种不同的分级方案，X轴是分级，Y轴是反应时间（秒）。可以很清
晰看出，在过深和过广的分级方案上，用户所需要的反应时间都比较长。因此我们在组织网站信息
的时候，需要仔细平衡深度和广度之间的关系。
3. 如何保持深广度平衡？
我们在处理网站结构时，常常会使用按组分类的方法来组织信息。而信息的分类我们能使用时间序
、主题或科目、地理、字母序、受众群体以及任务等方案。现在我们再来看看深广度平衡在web上
的应用。
图5 这是某电脑公司的官方网站，他们的导航本身就