交互設計的系統性思維之信息結構和信息架構

摘 要：隨著計算機技術的進步和發展，交互設計面臨的問題越來越復雜，對設計師的要求也越來越高，系統性思維方式就顯得尤為重要。本文主要介紹了交互設計領域的系統性思維，以及我們如何用系統性思維方式來分析日常生活中面臨的問題。本文從這幾個維度進行了論述：什么是系統性思維、我們為什么要學習系統性思維、系統性思維包含哪些內容。本文著重介紹了系統性思維中的信息架構和信息結構，介紹了信息結構與信息架構之間的區別以及信息結構的種類。

關鍵詞：系統性思維；信息結構；信息架構；交互設計

中圖分類號：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-），女，漢族，湖北武漢人，資深體驗設計師。研究方向：用戶體驗設計。