这是一个测试
本文的部分内容已发表至专业期刊:
1955年大跃进的时候,为了让粮食增产中国掀起了消灭麻雀的热潮,认为粮食产量提不上来是因为麻雀吃田里的粮食引起来的。但是麻雀实在太多了,没有办法一只只的打完,于是,人们想了一个办法,拿出了每个家里面的锅碗瓢盆和一切能发出声响的东西出来,打算把麻雀“累死”。麻雀死了8万只,但是粮食的产量并没有上来。为什么呢?因为虫子变多了。无奈之下,只好又去国外“进口”麻雀… …
图0-1
【作者简介】
梁颖
网龙网络公司的资深体验设计师,主要负责公司设计培训以及教育类产品的体验设计。研究生毕业于美国硅谷的加州艺术学院(CCA)交互设计专业,本科毕业于浙江大学工业设计系,曾在华为担任车机交互设计师及产品经理,涉及的其他产品平台包括手机、平板、智能电视机。她有丰富的交互设计理论知识,曾经在美国出版”Systematic Modeling”(系统性模型)一书。尤其擅长交互设计的系统性思维,师从系统性思维大师休·杜伯里(Hugh Dubberly)。
【目录】
什么是系统性思维?
我们为什么要学习系统性思维?
系统性思维包含哪些内容?
信息结构
信息架构
【正文】
1.1 什么是系统性思维?(What is system thinking?)
系统性思维定义:
“系统性思维是指将认识对象作为一个“系统”来进行观察,从系统与要素、要素与要素、系统与环境之间的相互联系、相互作用等方面综合地考察对象的一种思维方式。”
“系统是一组相互连接的事物,在一定时间内,以特定的行为模式互相影响。”[2]
其实我们日常生活中存在着非常多的系统,我们可以把生活中的许多抽象的概念或者具体的实体看作是一个系统。
图1-1 将家庭看作是一个系统
例如,我们的家庭就是一个系统,系统里面的要素就是爸爸、妈妈、孩子、爷爷、奶奶;要素与要素之间的关系就是爷爷奶奶生了爸爸,爸爸妈妈生了孩子等等;系统与环境之间的关系就是指我们的小家庭与大家庭之间的关系等等。
再例如,我们可以把软件看作一个系统,例如“苹果OS操作系统”。我们也可以把操作系统里面的任何一款应用也看作是一个系统,如果我们将微信看作是一个系统,那么系统要素就包括用户、消息、群组、我的好友等等;系统与环境之间的关系就包括微信是在怎样的操作系统下面运行的,用户是在怎样的使用环境下使用微信的,微信的竞争环境是怎样的,等等。
但是,世界上并非所有的事物都是一个系统。
“系统”是指“一群相互连接的实体”,可以将系统的对立面理解为“堆”(heap),因为尽管“堆”也由很多实体构成,单他们没有相互连接。这里的“堆”是一种随机堆砌的意思,就像一堆垃圾,他们之间没有必然的联系。碰巧在某个时间待在同一个地点的人的集合(比如凑巧在一辆巴士上旅游的人们),就构成了一个“堆”,因为他们之间没有相互连接;相反,在一起工作的人,比如在竞标的过程中,一旦这些人之间建立起了连接,就随时会出现一种非常特殊的、可以称之为高效团队的系统。[1]
1.2 我们为什么要学习系统性思维?(Why we need to learn system thinking?)
系统性的思考方式可以让我们发现整个系统,从整体的角度来思考问题。一个很细微的变化可以带来巨大的改变。
图1-3
例如,蝴蝶效应:一只南美洲亚马逊河流域热带雨林中的蝴蝶,偶尔扇动几下翅膀,两周后就会引起美国德克萨斯州的一场龙卷风。
图1-4
系统思考将有助于我们发现问题的根本原因,看到多种可能性,从而让我们更好地管理、适应复杂挑战,把握新的机会。[2] 我们只有认识和发现了整个系统、系统中要素与要素之间的关系之后才能改变事物的发展轨迹。
系统性思维方式给了我们另外的一种观察了解世界的维度,就像有时候,你可以通过你的眼睛去观察某些事物,而有时又必须通过显微镜或者望远镜去观察另外一些事物。系统理论就是人类观察世界的一个透镜。通过不同的透镜,我们能看到不同的景象,它们都真真切切地存在于那里,而每一种观察方式都丰富了我们队这个世界的认知,使我们的认识更加全面。尤其当我们面临混乱不堪、纷繁复杂且快速变化的局面时,观察的方式越多,效果就越好。[3]
在交互设计领域和互联网行业,系统性思维是一个必不可少的素养,因为任何一款软件产品都是一个系统,而且这个系统往往会非常复杂。
从上个世纪开始,设计实践的关注点由实体产品和外观向意义、结构、交互和服务方向进行了转变。[4] 实体工具(例如,锤子)相对来说交互较为简单,制作方式也较为简单,但是一款软件产品就会复杂得多(例如,美国选举系统软件)。工具的复杂化,工具所处环境的复杂化要求我们以更加系统的思维方式来分析我们的工具和产品。
图1-5
Hugh Dubberly认为,设计正在由“手工制作”(Hand-Craft)向“服务制作”(Service-Craft)转变,“手工制作”和“服务制作”的特点可以由下面这个表格来概括:
图1-6
当然,“手工制作”并没有消失,“服务制作”和“手工制作”也不是完全脱离的。“手工制作”在“服务制作”中有着很重要的角色(例如在软件的开发过程中,编程就是一种“手工制作”)。然而,“服务制作”侧重于行为,它用一系列的产品来服务于行为。“服务制作” 需要团队来完成,团队依赖于团队中的个人。“服务制作”并没有取代“手工制作”,“服务制作” 是“手工制作”的一个延伸,并且“服务设计”是以“手工制作”为基础的。[4]
设计方式的复杂化和设计环境的复杂化都要求设计师应具备系统性的思维方式。
这个系列课程我们会分为下面几个课程来给大家讲解:
首先,我们要解决的问题是:什么是信息?信息,英文叫作information,是指音讯、消息、通讯系统传输和处理的对象,泛指人类社会传播的一切内容。[5]与“知识”不一样的是,信息更加强调是人与人之间沟通,因为有了“沟通”和“传播”,而后才有“信息”。因此广义上来说,信息可以指人与人说话的内容、书本里的文字内容、我们眼睛所能看到的一切内容、以及计算机所传递的一切内容。
图1-7
2.1 信息结构 Information Strucutres
你可能会问,为什么会有信息结构(Information Structures)和信息架构(Information Architecture) 两个概念?信息架构是指一款特定的应用或者应用的某个模块的信息的组成方式,而信息结构是指某一类信息的构成方式,是信息架构的模型。
什么是信息结构?What is information strucutres?
信息有着不同的结构和模式,这个模式解释了信息存储的方式。信息结构就是指某种信息的存储的结构和模式。信息结构分为四种:线性结构(Sequential Strucuture)、矩阵结构(Matrix Structure)、树状结构(Tree Structure)、网状结构(Web Structure)。
“如果你理解了基本的信息结构,那么对于一款应用是如何‘工作’的已经理解了一大半了。”
——休·杜伯里
If you understand the basic information structure, you understand a great deal about how an application “works”.
—— Hugh Dubberly
信息结构最基本元素——节点
图2-2
节点是信息结构里面最基本单位,节点可以对应任意的信息片段或者组合,它就像信息存储的容器,这个容器里面存储的内容可大可小,小到可以是一个数字,大到可以是一座城市或者一个国家。
信息结构最基本单元——两点一线
图2-3
两个节点之间可能会有一定的关系,这个关系可以用一条线来表示,这样就形成了信息结构最基本的单元。两个节点之间的关系可以是从属关系,也可以是其他关系,例如,“我是梁颖”这句话里面,“我”是主语,“是”是谓语,“梁颖”是宾语,这句话的信息结构就是 “主语——宾语”的结构。最常见的节点与节点间的关系是从属关系。以时钟为例,一个普通的时钟有着比较简单的信息架构:时钟包含了当前时间,当前时间是12点,其中“当前时间”就是节点的名称,“12点”就是节点的值。当我们用下方这种图形化的形式表现出来时,加上箭头和关系可以让我们的信息架构图更加清晰。
图2-4
线性结构 Sequential Structure
图2-5
当多个节点被连接起来的时候就形成了线性结构,线性结构是指只有一个维度的信息存储方式。线性结构具有方向性,有一些线性结构首尾相连、自我循环。例如,时间就是一种线性结构,从12点到1点到2点等等周而复始、循环反复,时间点就是线形结构里面的节点,因此时间是线性结构;我们坐在公交车上面,看一个一个经过的公交站台,把公交站台看作节点,那么一个个的公交站台组成的信息流也是线性结构;书本里面的文字也是线性结构,我们看文字的时候一般是有方向性的,向一个方向看,把每一个文字看作节点,那么书本、文章也是属于线性结构;我们平时上班,中午到食堂里面打饭,端着餐盘经过一个个不同的菜品,如果我们把这些菜品看作是节点,那么食堂打饭所接触到的信息流也是线性结构;以此类推太阳运行的轨迹、音频、视频都可以属于线性结构。
图2-6
线性结构是信息架构里面最简单,也是最常见的一种结构。我们一般所接触的网站或者是手机应用是由多个线性结构组成的。注意我在列举线性结构的例子的时候强调了把什么内容作为节点,这个节点的设定非常重要,同一样事物,不同的节点,它可能属于不同的信息结构。
矩阵结构 Matrix Structure
图2-7
多个节点可以组成一个矩阵的形式,形成一个矩阵的结构。这是一种可以有n个维度的网格式的信息存储方式。
如果以像素为信息节点,那么一张图片就是一个大型的矩阵结构图片里面包含了成千上万的像素,每个像素包含了颜色的信息。
图2-8
我们在设计软件的时候也会用到矩阵结构。矩阵结构允许用户在节点与节点之间沿着两个或更多“维度”移动。由于每一个用户的需求都可以和矩阵中的一个“轴”联系在一起,因此矩阵结构通常能帮助那些“带着不同需求而来”的用户,使他们能在相同内容中寻找各自想要的东西。举个例子来说,如果你的某些用户确实很想通过颜色来浏览产品,而其他人偏偏希望能通过产品的尺寸来浏览,那么矩阵结构就可以同时容纳这两种不同的用户。[6]因此我们也可以这样理解矩阵结构:矩阵结构可以从不同的维度来排列同一类的信息。
然而,矩阵结构目前还是一种比较有争议的信息结构。它与网状结构的区别是什么?这个信息结构是否有必要?这些还是比较有争议的话题。Nelson Norman Group也有对信息结构的总结,他们把信息结构分为了三类:Hierarchy(树状结构), Liner(线性结构), and Web(网状结构)[7]。其中并没有矩阵结构。大家后续可以对这个话题进行进一步的讨论。
树状结构 Tree Structure
图2-9
树状结构是软件产品里面最常见的一种结构,也是设计师最常用的一种结构。树状结构有强烈的层级性与归属性。节点与节点之间存在父子关系。因为在人的思维方式里面会天然地对信息进行归类,树状结构就是对信息进行归类和组合的一种信息结构。
图2-10
例如,公司的组织架构图就是典型树状结构,在这个例子里面最顶级的是总经理,总经理下面包含了管理中心、营销中心、销售支持中心、总经理助理这些子级,而子级下面又分下一层的子级,这种有着强烈的归属和包含关系的信息结构就属于树状结构。第二张生物分类结构图和第三张知识结构图也都属于树状结构。
网状结构 Web Structure
图2-11
网状结构是指没有明确从属关系和分类关系,节点与节点间呈不规则的连接方式的信息结构。 我们所熟知的“互联网”、“社交网”就是属于网状结构。网状结构的特点是非线性(Nonlinearity)、非集权化(Decentralization)、互联性(Interconnectedness)、互相依赖性(Interdependence)、多样性(Multiplicity)。[10]
例如,以每一个人的信息作为信息节点,社交网络就是典型的网状结构,神经元、星系和生物链都属于网状的信息结构。
在《用户体验要素》这本书里面Jesse James Garrett把这种结构称之为自然结构(Organic Structure)然而,Hugh Dubberly认为,信息结构不能说是自然的还是非自然的,我也比较认同这个观点,“网状结构”比“自然结构”更加贴切。
信息架构总结:
图2-14
2.2 信息架构
什么是信息架构?What is an Information Architecture (IA)?
信息架构是指一个网站、一款软件、或者任何一个面向用户的系统的导航或者内容结构的展现。信息架构的英文是Information Architecture,它就像某个具体的建筑,指的是某个特定的产品的建筑骨架。而前面所讲的信息结构就类似于某一类建筑风格,是信息架构的分类,也可以说是信息架构的模型。
某一个产品的信息架构可能是由多种信息结构组合而成,例如一个网站,它可能主要是树状结构,但是包含矩阵结构和网状结构。
为什么要分析产品的信息架构?Why we need to analyze information architecture?
信息架构是产品的骨架,它区别于产品的“皮肤”, 也区别于产品的展现形式。架构是相对稳定的,而产品的展现形式是相对多变的。信息架构的设计师对产品的内容进行分类和组织管理。信息架构的完善可以确保用户可以快速有效地找到自己需要的内容。
如何构建产品信息架构?How to analyze IA?
信息架构应该在概念模型之后进行,首先要确定产品的概念模型(概念模型是对用户心智模型的预设),而后来进行信息架构的设计。如果是对已有产品进行设计,要先分析现有产品的信息架构,找到其中的问题,而后再来设计未来产品的信息架构。
参考文献/扩展阅读:
[1]丹尼斯·舍伍德. 系统思考[M]. 刘昕,邱昭良,译. 北京:机械工业出版社, 2017:3.
[2]德内拉·梅多斯. 系统之美[M]. 邱昭良,译. 杭州:浙江人民出版社,2012:7
[3]德内拉·梅多斯. 系统之美[M]. 邱昭良,译. 杭州:浙江人民出版社,2012:13
[4]Hugh Dubberly. Cybernetics and Service-Craft: Language for Behavior-Focused Design[J/OL]. Dubberly Design Office, 2007: http://www.dubberly.com/articles/cybernetics-and-service-craft.html
[5] https://baike.baidu.com/item/%E4%BF%A1%E6%81%AF/111163?fr=aladdin
[6]Jesse James Garrett. 用户体验要素[M]:以用户为中心的产品设计.[M]范晓燕,译. 北京:机械工业出版社, 2011:93
[7]Nelson Norman Group. Information architecture[J/OL], 2017: https://www.nngroup.com/courses/information-architecture/
[10] Manuel Lima. A visual history of human knowledge[J/OL]. TED 2015 : https://www.ted.com/talks/manuel_lima_a_visual_history_of_human_knowledge/transcript?quote=1223#t-337523
1 Comment
Great, I really like it! Youre awesome