交互设计实用指南系列(8)—深广度平衡（2）
作者：温侯 来源：taobaoUED 发布时间：2010-02-01 12:59:00
3. 如何保持深广度平衡？
我们在处理网站结构时，常常会使用按组分类的方法来组织信息。而信息的分类我们能使用时间序、主题或科目、地理、字母序、受众群体以及任务等方案。现在我们再来看看深广度平衡在web上的应用。
图5
这是某电脑公司的官方网站，他们的导航本身就是一个站点地图。他们将14项内容分级组成了一个两层的结构树，每个分支上都有3-4项内容。对于这样一个信息量不是很庞杂的网站来说，使用主题或科目的方案，将信息组成一个两层的结构树，就是一种深广度平衡的方式。
再来看个案例，图6是某软件官方网站的一个下载区块，这个区块里密密麻麻罗列了N个下载链接。有不同的版本、有不同的下载工具、有不同的外站下载。这些链接在没有进行任何组织的情况下呈现给用户，体验是非常糟糕的。
图6
对于那些信息量很大很杂的网站来说，单纯的使用某一种按类分组的方案已经不太适用了。一般来说，广度比深度的效果更好。在深结构的各级别间选择，比起在广导航的各选项间扫视，要付出更多精力。眼睛比起鼠标点击（和页面载入）要快得多。虽然用户在深结构更容易迷失方向，甚至可能迷路，但也不要在广度上走得太远。任何时候都把所有链接展示出来会吓倒用户，让他难以选择。用户会点击看起来适合他们需要的第一个选项，或者干脆放弃，下图清晰的阐述了用户放弃率和深广度之间的关系：
图7
淘宝首页类目地图大概有300个类目，使用了三层结构将他们清晰得展示出来，每层类目都是4～12个之间，是一个深广度保持平衡的典型案例，图8：
图8
小结
对于不同类型，不同信息量的网站，在深广度平衡上应采用不同的策略和方式。本文仅以个人在工作中的经验来对深广度平衡的方 * 进行一些实例化的分享。对这方面有兴趣的同学欢迎留言探讨。
注1：摘录《Web导航设计》第1章 第一节 导航的需要（P6）
注2：摘录《Web导航设计》第1章 第一节 导航的需要（P9）
注3：摘录《Web信息架构》第5章 第四节 组织结构（P70）
注4：摘录微软论文《Web page design: implications of memory, structure and scent for information retrieval》
参考文献：
0
投稿猜你喜欢
- 一般调试程序的时候都比较倾向print，利用直接打印的方法作出判断，但是print只能打印出结果，对类型无法作出判断。例如：复制代码a =
- 存储函数也是过程式对象之一，与存储过程相似。他们都是由SQL和过程式语句组成的代码片段，并且可以从应用程序和SQL中调用。然而，他们也有一些
表单校验是页面开发中非常常见的一类需求，相信每个前端开发人员都有这方面的经验。网上有很多成熟的表单校验框架，虽然按照它们默认的设计，用起来没- 之前没有注意过div的background-image这个属性，只是设置它的url，今天遇到一个问题特此做一下记录。 <div id=
- python中判断文件结束符的方法：可以使用try except语句块来进行判断。具体使用方法：【try:while True:s = in
- 简介这篇博客涉及的脚本用来将bag文件批量转化为mp4文件dockerfileFROM osrf/ros:kinetic-desktop-f
- -- SQL Server 2000 SELECT a.name AS 字段名, CASE WHEN EXISTS (SELECT 1 FR
- 一、home页使用frametemplate/home.html<!DOCTYPE html><html lang=&qu
- 环境：vue 2.9.3; webpack目的：接口的调用跨域方式：1、express中间的使用2、nginx代理3、谷歌浏览器跨域设置--
- 现有两个元组(('a'),('b')),(('c'),('d'))，请使用p
- 在命令行中运行python代码是很常见的，下面介绍如何定义命令后面跟的参数。1 常规用法Python代码中主要使用下面
- 一、实现划词功能说是划词翻译，实际上我们是通过获取用户的剪切板内容，通过一系列的操作得到的。首先呢，我们就先实现如何获取剪切板内容的程序首先
- 触发器是一种特殊的存储过程，触发器主要是通过事件进行触发而被自动调用执行，而存储过程必须通过存储过程的名称被调用。一、触发器的定义触发器是在
- 相信很多人在使用Ajax与后台php页面进行交互的时候都碰到过中文乱码的问题。JSON作为一种轻量级的数据交换格式，备受亲睐，但是用PHP作
- CSS 和 JavaScript 的压缩已经很成熟，各大网站都在使用。HTML 的压缩（特指去除空白字符和注释），除了 Google 等搜索
- 下午的时候，配好了OpenCV的Python环境，OpenCV的Python环境搭建。于是迫不及待的想体验一下opencv的人脸识别，如下文
- 问题怎样捕获代码中的所有异常？解决方案想要捕获所有的异常，可以直接捕获 Exception 即可：try: ...except
- 本文实例讲述了Python实现的序列化和反序列化二叉树算法。分享给大家供大家参考，具体如下：题目描述请实现两个函数，分别用来序列化和反序列化
- 分享人：月漓作为交互设计师，你是否在一个项目中花费大量的时间来沟通、修改、明确需求？其实这些前期工作（设计原型前）是我们和PD、运营、开发之
- 日常我们见的多的水印大都是做到图片里的，我依据html元素的css position定位作出这个 * 印，供大家参考<!DOCTYPE
