交互设计的系统性思维之信息结构和信息架构

摘 要：随着计算机技术的进步和发展，交互设计面临的问题越来越复杂，对设计师的要求也越来越高，系统性思维方式就显得尤为重要。本文主要介绍了交互设计领域的系统性思维，以及我们如何用系统性思维方式来分析日常生活中面临的问题。本文从这几个维度进行了论述：什么是系统性思维、我们为什么要学习系统性思维、系统性思维包含哪些内容。本文着重介绍了系统性思维中的信息架构和信息结构，介绍了信息结构与信息架构之间的区别以及信息结构的种类。

关键词：系统性思维；信息结构；信息架构；交互设计

中图分类号：TP399-C8 文献标识码：A 文章编号：2096-4706（2018）07-0084-04

Abstract：With the progress and development of computer technology，the problems facing interactive design are becoming more and more complex，and the demands for designers are becoming higher and higher. The systematic thinking mode is particularly important. This article mainly introduces the systematic thinking in the field of interaction design，and how we analyze the problems in daily life in a systematic way of thinking. This paper discusses from these dimensions：what is systematic thinking，why do we have to learn systematic thinking，what is the content of systematic thinking. This paper introduces the information structure and information structure in the systematic thinking，and introduces the difference between the information structure and the information architecture，as well as the types of the information structure.

Keywords：systematic thinking；information structure；information architecture；interaction design

1 系统性思维

1.1 系统性思维的定义

系统性思维的定义为：系统性思维是指将认识对象作为一个“系统”来进行观察，从系统与要素、要素与要素、系统与环境之间的相互联系、相互作用等方面综合地考察对象的一种思维方式。

“系统是一组相互连接的事物，在一定时间内，以特定的行为模式互相影响。”其实我们日常生活中存在着非常多的系统，我们可以把生活中的许多抽象的概念或者具体的实体看作是一个系统。例如，我们的家庭就是一个系统，系统里面的要素是爸爸、妈妈、孩子、爷爷、奶奶；要素与要素之间的关系是爷爷奶奶生了爸爸，爸爸妈妈生了孩子等；系统与环境之间的关系是指我们的小家庭与大家庭之间的关系等。再例如，我们可以把软件看作一个系统，例如“苹果OS操作系统”。我们也可以把操作系统里面的任何一款应用也看作是一个系统，如果我们将微信看作是一个系统，那么系统要素包括用户、消息、群组、我的好友等；系统与环境之间的关系包括微信是在怎样的操作系统下面运行的，用户是在怎样的使用环境下使用微信的，微信的竞争环境是怎样的等。

世界上并非所有的事物都是一个系统。“系统”是指“一群相互连接的实体”，可以将系统的对立面理解为“堆”（heap），因为尽管“堆”也由很多实体构成，但是他们没有相互连接。这里的“堆”是一种随机堆砌的意思，就像一堆垃圾，他们之间没有必然的联系。碰巧在某个时间待在同一个地点的人的集合（比如凑巧在一辆巴士上旅游的人们），就构成了一个“堆”，因为他们之间没有相互连接。在一起工作的人，比如在竞标的过程中，一旦这些人之间建立起了连接，就随时会出现一种非常特殊的、可以称之为高效团队的系统。[1]

1.2 学习系统性思维的原因

系统性的思考方式可以让我们发现整个系统，从整体的角度来思考问题。一个很细微的变化可以带来巨大的改变。例如，蝴蝶效应：一只南美洲亚马逊河流域热带雨林中的蝴蝶，偶尔扇动几下翅膀，两周后就会引起美国德克萨斯州的一场龙卷风。

系统思考将有助于我们发现问题的根本原因，看到多种可能性，从而让我们更好地管理、适应复杂的挑战，把握新的机会。[2]我们只有认识和发现了整个系统、系统中要素与要素之间的关系之后，才能改变事物的发展轨迹；系统性思维方式给了我们另外的一种观察了解世界的维度，就像有时候，你可以通过你的眼睛去观察某些事物，而有时又必须通过显微镜或者望远镜去观察另外一些事物。系统理论就是人类观察世界的一个透镜。通过不同的透镜，我们能看到不同的景象，它们都真真切切地存在于那里，每一种观察方式都丰富了我们对这个世界的认知，使我们的认识更加全面。尤其当我们面临混乱不堪、纷繁复杂且快速变化的局面时，观察的方式越多，效果就越好。[2]

在交互设计领域和互联网行业，系统性思维是一个必不可少的素养，因为任何一款软件产品都是一个系统，而且这个系统往往会非常复杂。从上个世纪开始，设计实践的关注点由实体产品和外观向意义、结构、交互和服务方向进行了转变。[3]实体工具（例如，锤子）相对来说交互较为简单，制作方式也较为简单，但是一款软件产品就会复杂得多（例如，美国选举系统软件）。工具的复杂化和工具所处环境的复杂化要求我们以更加系统的思维方式来分析我们的工具和产品。Hugh Dubberly认为，设计正在由“手工制作”（Hand-Craft）向“服务制作”（Service-Craft）转变，“手工制作”和“服务制作”的特点如表1所示。

当然，“手工制作”并没有消失，“服务制作”和“手工制作”也不是完全脱离的。“手工制作”在“服务制作”中是很重要的角色（例如在软件的开发过程中，编程就是一种“手工制作”）。“服务制作”侧重行为，它用一系列的产品来服务行为。“服务制作”需要团队来完成，团队依赖于团队中的个人。“服务制作”并没有取代“手工制作”，“服务制作”是“手工制作”的一个延伸，并且“服务设计”是以“手工制作”为基础的。[3]设计方式的复杂化和设计环境的复杂化都要求设计师应具备系统性的思维方式。

1.3 系统性思维的内容

系统性思维大致包括下面几部分：

（1）信息结构与信息架构 Information Structures Information Architecture；

（2）心智模型和概念模型 Mental Model and Concep tual Model；

（3）控制系统及其他模型 Cybernetics and Other Models；

（4）产品服务生态学 Product Service Ecology；

（5）信息结构与信息架构 Information Structures Information Architecture。

首先，我们要解决的问题是：什么是信息？信息，英文叫作information，是指音讯、消息、通讯系统传输和处理的对象，泛指人类社会传播的一切内容。[4]与“知识”不一样的是，信息更加强调是人与人之间沟通，因为有了“沟通”和“传播”，而后才有“信息”。因此广义上来说，信息可以指人与人说话的内容、书本里的文字内容、我们眼睛所能看到的一切内容以及计算机传递的一切内容。

2 信息结构和信息架构

2.1 信息结构 Information Strucutres

为什么会有信息结构（Information Structures）和信息架构（Information Architecture）是两个不同的概念。信息架构是指一款特定的应用或者应用的某个模块的信息组成方式，而信息结构是指某一类信息的构成方式，是信息架构的模型。

信息有着不同的结构和模式，这个模式解释了信息存储的方式。信息结构是指某种信息的存储的结构和模式。信息结构分为四种：线性结构（Sequential Strucuture）、矩阵结构（Matrix Structure）、树状结构（Tree Structure）和网状结构（Web Structure）。休·杜伯里曾说：“如果你理解了基本的信息结构，那么对于一款应用是如何‘工作’的已经理解了一大半了。”

2.1.1 信息结构的最基本元素——节点

节点是信息结构里面最基本的单位，节点可以对应任意的信息片段或者组合，它就像信息存储的容器，这个容器里面存储的内容可大可小，小到可以是一个数字，大到可以是一座城市或者一个国家。信息结构的最基本元素——节点（如图1所示）。

2.1.2 信息结构的最基本单元——两点一线

两个节点之间可能会有一定的关系，这个关系可以用一条线来表示，这样就形成了信息结构最基本的单元，如图2 所示。两个节点之间的关系可以是从属关系，也可以是其他关系，例如，“我是梁颖”这句话里面，“我”是主语，“是”是谓语，“梁颖”是宾语，这句话的信息结构就是“主语——宾语”的结构。最常见的节点与节点间的关系是从属关系。以时钟为例，一个普通的时钟有着比较简单的信息架构：时钟包含了当前时间，当前时间是12点，其中“当前时间”是节点的名称，“12点”是节点的值。当我们用下方这种图形化的形式表现出来时，加上箭头和关系可以让我们的信息架构图更加清晰，如图3所示。

2.1.3 线性结构Sequential Structure

当多个节点被连接起来时，就形成了线性结构，线性结构是指只有一个维度的信息存储方式。线性结构具有方向性，有一些线性结构首尾相连、自我循环，如图4所示。例如，时间就是一种线性结构，从12点到1点到2点等等周而复始、循环反复，时间点是线形结构里面的节点，因此时间是线性结构；我们坐在公交车上面，看一个一个经过的公交站台，把公交站台看作节点，那么一个个的公交站台组成的信息流也是线性结构；书本里面的文字也是线性结构，我们看文字的时候一般是有方向性的，向一个方向看，把每一个文字看作节点，那么书本、文章也是属于线性结构；我们平时上班，中午到食堂里面打饭，端着餐盘经过一个个不同的菜品，如果我们把这些菜品看作是节点，那么食堂打饭接触到的信息流也是线性结构；以此类推，太阳运行的轨迹、音频、视频都可以属于线性结构。

线性结构是信息架构里面最简单，也是最常见的一种结构。我们一般接触到的网站或者是手机应用是由多个线性结构组成的。注意这里列举线性结构的例子的时候强调了把什么内容作为节点，这个节点的设定非常重要，同一样事物，不同的节点，它可能属于不同的信息结构。

2.1.4 矩阵结构Matrix Structure

多个节点可以组成一个矩阵的形式，形成一个矩阵的结构。这是一种可以有n个维度的网格式的信息存储方式，如图5所示。如果以像素为信息节点，那么一张图片就是一个大型的矩阵结构，图片里面包含了成千上万的像素，每个像素包含了颜色的信息。

我们在设计软件的时候也会用到矩阵结构。矩阵结构允许用户在节点与节点之间沿着两个或更多“维度”移动。由于每一个用户的需求都可以和矩阵中的一个“轴”联系在一起，因此矩阵结构通常能帮助那些“带着不同需求而来”的用户，使他们能在相同内容中寻找各自想要的东西。例如，如果你的某些用户确实很想通过颜色来浏览产品，而其他人偏偏希望能通过产品的尺寸来浏览，那么矩阵结构就可以同时容纳这两种不同的用户。[5]因此我们也可以这样理解矩阵结构：矩阵结构可以从不同的维度排列同一类的信息。

然而，矩阵结构目前还是一种比较有争议的信息结构。它与网状结构的区别是什么？这个信息结构是否有必要？这些还是比较有争议的话题。Nelson Norman Group也有对信息结构的总结，他们把信息结构分为三类：Hierarchy（树状结构）、Liner（线性结构）和and Web（网状结构）[6]。其中并没有矩阵结构。大家后续可以对这个话题进行进一步的讨论。

2.1.5 树状结构Tree Structure

树状结构是软件产品里面最常见的一种结构，也是设计师最常用的一种结构。树状结构有强烈的层级性与归属性。节点与节点之间存在父子关系。因为在人的思维方式里面会天然地对信息进行归类，树状结构就是对信息进行归类和组合的一种信息结构，如图6所示。例如，公司的组织架构图就是典型树状结构，在这个例子里面最顶级的是总经理，总经理下面包含了管理中心、营销中心、销售支持中心、总经理助理这些子级，而子级下面又分下一层的子级，这种有着强烈的归属和包含关系的信息结构就属于树状结构。

2.1.6 网状结构Web Structure

网状结构是指没有明确从属关系和分类关系，节点与节点间呈不规则的连接方式的信息结构。我们所熟知的“互联网”、“社交网”就是属于网状结构。网状结构的特点是非线性（Nonlinearity）、非集权化（Decentralization）、互联性（Interconnectedness）、互相依赖性（Interdependence）和多样性（Multiplicity），如图7所示。例如，以每一个人的信息作为信息节点，社交网络就是典型的网状结构，神经元、星系和生物链都属于网状的信息结构。

在《用户体验要素》这本书里面，Jesse James Garrett把这种结构称之为自然结构（Organic Structure），然而Hugh Dubberly认为，信息结构不能说是自然的还是非自然的。我也比较认同这个观点，“网状结构”比“自然结构”更加贴切。

2.2 信息架构

2.2.1 信息架构的定义

信息架构是指一个网站、一款软件或者任何一个面向用户的系统的导航或者内容结构的展现。信息架构的英文是Information Architecture，它就像某个具体的建筑，指的是某个特定的产品的建筑骨架。而前面所讲的信息结构就类似于某一类建筑风格，是信息架构的分类，也可以说是信息架构的模型。

某一个产品的信息架构可能由多种信息结构组合而成，例如一个网站，它可能主要是树状结构，但是包含矩阵结构和网状结构。

2.2.2 分析产品的信息架构的原因

信息架构是产品的骨架，它区别于产品的“皮肤”，也区别于产品的展现形式。架构是相对稳定的，而产品的展现形式是相对多变的。信息架构的设计师对产品的内容进行分类和组织管理。信息架构的完善可以确保用户快速有效地找到自己需要的内容。

2.2.3 构建产品信息架构

信息架构应该在概念模型之后进行，首先要确定产品的概念模型（概念模型是对用户心智模型的预设），而后进行信息架构的设计。如果是对已有产品进行设计，要先分析现有产品的信息架构，找到其中的问题，再来设计未来产品的信息架构。

参考文献：

[1] 丹尼斯·舍伍德.系统思考 [M].刘昕，邱昭良，译.北京：机械工业出版社，2017.

[2] 德内拉·梅多斯.系统之美 [M].邱昭良，译.杭州：浙江人民出版社，2012.

[3] Hugh Dubberly，Paul Pangaro. Cybernetics and service-craft：language for behavior-focused design [J].Kybernetes，2007（36）.

[4] https：//baike.baidu.com/item/%E4%BF%A1%E6%81%AF/111163？fr=aladdin

[5] Jesse James Garrett.用户体验要素：以用户为中心的产品设计 [M].范晓燕，译.北京：机械工业出版社，2011.

[6] Nelson Norman Group. Information Architecture [J/OL].https：//www.nngroup.com/courses/information-architecture/.

作者简介：梁颖（1989.04-），女，汉族，湖北武汉人，资深体验设计师。研究方向：用户体验设计。