交互设计实用指南系列(8)—深广度平衡
作者：温侯 来源：taobaoUED 发布时间：2010-02-01 12:59:00
相信大家对街边林林总总的房产中介并不陌生，那么我们先看看下面这张图片。
图1
从右侧这家店的橱窗里，我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类，并且在视觉上做了一些划分，让我们对信息能一目了然。借这个小案例引出我们今天要分享的话题：深广度平衡。
1. 什么是深广度？
其实“深广度”本身并不是一个单一的概念。在网站的信息架构中，有一种组织结构叫做树形结构：网站首页视为链接层级中第一级，与其有从属关系的页面视为链接层级中的第二级，一般称其为二级页面。通过二级页面又可以继续得到第 * 页面，依此类推可以得到一个完整的树形链接结构。这样一个完整的链接结构，我们称它为树形结构。
在整个树形结构中，链接的层数被称为网页链接的【深度】（depth）。而在树形结构里，最底层页面包含的页面总数被称为网页链接的【广度】（breadth）。
我们可以通过下面这张图来理解深度和广度的概念：
图2
2. 为什么深广度需要保持平衡？
我们回到开篇的小案例。左侧那店铺采用的是“只有内容链接的模型”（它们之间没有层级结构；链接没有模式可循；且没有某种导航方案将他们分离开）（注1）在这里每一条房产信息都可以看成一个内容链接，整个橱窗就像一张错综复杂的大网，让人头晕目眩。
而右侧的店铺采用的是“结构化浏览模型”（只有一组链接，作为获取网站信息的途径；导航区域与布局中其他内容有视觉上的分隔；要到达另一区域的某个页面，必须沿着树向上导航，再沿着另一个分支向下）（注2）店家将信息进行了规整，在房产信息上增加了一个分类，并且对不同类型的信息使用了不同的颜色，高效的将租房信息和售房信息区分开来。
一个网站的链接深度和广度最好有一个合适的均衡关系，深度过大的网站不利于用户快速获取信息，广度过大的网站则容易让用户在无数并列的超链接面前不知所措。
图3
图3的上图说明了又窄又深的层级系统，用户必须点击6次才能到达最底层的内容。对又宽又浅的层级系统而言（相对而言），用户必须从6个类别中选择，才能找到6个条目。就像图3的下图所示，用户会面临主菜单上太多选项，而当他们选了一个选项，却没看到什么内容时，就会产生不良的观感。（注3）
我们再来看一张用户对于不同层级结构所需反应时间的图表（注4），图4：
图4
总共512项内容，组成了三种不同的分级方案，X轴是分级，Y轴是反应时间（秒）。可以很清晰看出，在过深和过广的分级方案上，用户所需要的反应时间都比较长。因此我们在组织网站信息的时候，需要仔细平衡深度和广度之间的关系。
0
投稿猜你喜欢
- 测试方法首先使用implode, serialize, json_encode, msgpack_pack创建四个文本文件，用于测试。创建代
前天在生产环境中遇到一个问题：使用 GROUP_CONCAT 函数select出来的数据被截断了，最长长度不超过1024字节，开始还以为是n- 很久没有发表文章了，最近一直在研究产品设计标准的问题，之前有发过一篇关于 Axure的教程 ，相信很多人已经学会如何使用，这次我给大家介绍一
- 程序一：负责从字典中随机提取数据，写入一个新文件。（1.php） <?php /* 从字典文件中提取随机值 */
- 如果你是pytorch的用户，可能你会很熟悉pytorch生态圈中专门预处理图像数据集的torchvision库。从torchtext这个名
- 一、装饰器的本质：装饰器（decorator）本质是函数闭包（function closure）的语法糖（Syntactic sugar）函
- 首先下载源tar包可利用linux自带下载工具wget下载，如下所示：wget http://www.python.org/ftp/pyth
- 一、协程官方描述;协程是子例程的更一般形式。 子例程可以在某一点进入并在另一点退出。 协程则可以在许多不同的点上进入、退出和恢复。 它们可通
- 前言python 中 if 的用法(if else, if not, elif)if语句实际上是：if True: …
- 本文实例讲述了javascript中createElement的两种创建方式。分享给大家供大家参考。具体实现方法如下：<html xm
- 1.Airbus Ship Detection Challengeurl: https://www.kaggle.com/comp
- 作者： wyh草样出处：https://www.cnblogs.com/wyh0923/p/14084898.html什么是文件文件是系统存
- 介绍大家好，我是小F～在数据时代，我们每个人既是数据的生产者，也是数据的使用者，然而初次获取和存储的原始数据杂乱无章、信息冗余、价值较低。要
- 以查询前20到30条为例,主键名为id 方法一: 先正查,再反查 select top 10 * from (select top 30 *
- 占位符说明1、％c，格式化字符及其ASCII码2、％s，格式化字符串3、％d，格式化整数4、％u，格式化无符号整数5、％o，格式化无符号八进
- 前言对于很多接触Python的人而言，字符的处理和语言整体的温顺可靠相比显得格外桀骜不驯难以驾驭。文章针对Python 2.7，主要因为3对
- 交叉表（cross-tabulation，简称crosstab）是⼀种⽤于计算分组频率的特殊透视表。语法详解：pd.crosstab(ind
- 思路有些混乱，希望大家能理解我的意思。看了faster rcnn的tensorflow代码，关于fix_variables的作用我不是很明白
- 今天用Python提取了Linux内核源代码的目录树结构，没有怎么写过脚本程序，我居然折腾了2个小时，先是如何枚举出给定目录下的所有文件和文
- 测试系统环境 Windows 2003 python 2.5.1
