每个网站都有自己的链接结构，也可以叫做信息架构，比如首页是一级页面，列表是二级页面，内容是三级页面等。这实在就是网站链接中的广度与深度，当拜候一个页面需要点击好几个页面的时辰，那末这个页面就属于深条理的网页，对于搜索引擎来说越难发现的页面可以被收录的几率也越低，是以大大都网站城市把网站链接结构中的广度做宽，而深度则连结一定比例就行。

不外假如网站数据量很大的情况下，深度与广度的公道平衡就非常重要

1. 什么是深广度？

实在“深广度”自己并不是一个单一的概念。在网站的信息架构中，有一种构造结构叫做树形结构：网站首页视为链接层级中第一级，与其有隶属关系的页面视为链接层级中的第二级，一般称其为二级页面。经过二级页面又可以继续获得第三级页面，依此类推可以获得一个完整的树形链接结构。这样一个完整的链接结构，我们称它为树形结构。

在全部树形结构中，链接的层数被称为网页链接的【深度】（depth）。而在树形结构里，最底层页面包括的页面总数被称为网页链接的【广度】（breadth）。

我们可以经过下面这张图来了解深度和广度的概念：

图2

2. 为什么深广度需要连结平衡？

我们回到开篇的小案例。左侧那店肆采用的是“只要内容链接的模子”（它们之间没有层级结构；链接没无形式可循；且没有某种导航计划将他们分手开）（注1）在这里每一条房产信息都可以看成一个内容链接，全部橱窗就像一张扑朔迷离的大网，让人头晕眼花。

而右侧的店肆采用的是“结构化阅读模子”（只要一组链接，作为获得网站信息的路子；导航地区与结构中其他内容有视觉上的分隔；要到达另一地区的某个页面，必须沿着树向上导航，再沿着另一个分支向下）（注2）店家将信息停止了规整，在房产信息上增加了一个分类，而且对分歧范例的信息利用了分歧的色彩，高效的将租房信息和售房信息区分隔来。

一个网站的链接深度和广度最好有一个合适的平衡关系，深度过大的网站晦气于用户快速获得信息，广度过大的网站则轻易让用户在无数并列的超链接眼前手足无措。

图3

图3的上图说了然又窄又深的层级系统，用户必须点击6次才能到达最底层的内容。对又宽又浅的层级系统而言（相对而言），用户必须从6个种别当挑选，才能找到6个条目。就像图3的下图所示，用户会面临主菜单上太多选项，而当他们选了一个选项，却没看到什么内容时，就会发生不良的观感。（注3）

我们再来看一张用户对于分歧层级结构所需反应时候的图表（注4），图4：

图4

总共512项内容，组成了三种分歧的分级计划，X轴是分级，Y轴是反应时候（秒）。可以很清楚看出，在过深和过广的分级计划上，用户所需要的反应时候都比力长。是以我们在构造网站信息的时辰，需要仔细平衡深度和广度之间的关系。

3. 若何连结深广度平衡？

我们在处置网站结构时，经常会利用按组分类的方式来构造信息。而信息的分类我们能利用时候序、主题或科目、地理、字母序、受众群体以及使命等计划。现在我们再来看看深广度平衡在web上的利用。

图5

这是某电脑公司的官方网站，他们的导航自己就是一个站点舆图。他们将14项内容分级组成了一个两层的结构树，每个分支上都有3-4项内容。对于这样一个信息量不是很庞杂的网站来说，利用主题或科目标计划，将信息组成一个两层的结构树，就是一种深广度平衡的方式。

再来看个案例，图6是某软件官方网站的一个下载区块，这个区块里密密层层罗列了N个下载链接。有分歧的版本、有分歧的下载工具、有分歧的外站下载。这些链接在没有停止任何构造的情况下显现给用户，体验是很是糟糕的。

图6

对于那些信息量很大很杂的网站来说，纯真的利用某一种按类分组的计划已经不太适用了。一般来说，广度比深度的结果更好。在深结构的各级别间挑选，比起在广导航的各选项间扫视，要支出更多精神。眼睛比起鼠标点击（和页面载入）要快很多。虽然用户在深结构更轻易丢失偏向，甚至能够迷路，但也不要在广度上走得太远。任何时辰都把一切链接展现出来会吓倒用户，让他难以挑选。用户会点击看起来合适他们需要的第一个选项，大概爽性放弃，下图清楚的论述了用户放弃率和深广度之间的关系：

图7

淘宝首页类目舆图大要有300个类目，利用了三层结构将他们清楚得展现出来，每层类目都是4～12个之间，是一个深广度连结平衡的典型案例，图8：

图8

小结

对于分歧范例，分歧信息量的网站，在深广度平衡上应采用分歧的战略和方式。本文仅以小我在工作中的经历来对深广度平衡的方式论停止一些实例化的分享。对这方面有爱好的同学接待留言探讨。

原文链接：http://ued.taobao.com/blog/2022/01/30/the-practice-guidelines-of-interaction-design-the-balance-between-breadth-and-depth/