資訊架構如何設計?5000字乾貨幫你快速掌握!

語言: CN / TW / HK

資訊架構​設計是每個互動設計​師都必須要掌握的基本功,那到底什麼是資訊架構設計?為什麼要進行資訊架構設計,以及如何進行資訊架構設計呢?下面我們一一來看。

從使用者體驗設計的 5 個層次來看,結構層和框架層是互動設計師設計的核心範疇:

圖 1 使用者體驗設計各角色分工

框架層呈現的是每一個介面中文字、圖片、按鈕、控制元件等元素的具體內容、位置及關係,包含介面佈局、導航設計和資訊設計。而結構層則決定了每個介面應該有哪些文字、圖片、按鈕和控制元件元素,以及這些元素在互動前後的邏輯對應的關係。如果說框架是面,那麼結構則是包含面+面與面串聯的關係網路。

1. What | 什麼是資訊架構?

① 資訊架構的起源

資訊架構(information architecture),簡稱 IA。

1976 年,瑞查德·索·烏曼在擔任美國建築師協會會長時創造了“資訊架構”術語,用來應對當代社會資訊的不斷增長和爆炸。她的妻子說道:“他所有的訓練,作為一個建築師,作為一個製圖者,作為一個平面設計師,作為一個企業家,作為一個出版商,還有作為一個作家,本質上都是想要讓資訊變得清晰易懂。”

“資訊架構”是一種使問題變清晰的方式。

② 資訊架構的定義

IA 的主體物件是資訊,由資訊架構師來加以設計結構、決定組織方式以及歸類,好讓使用者與使用者容易尋找與管理的一項藝術與科學。

對於資訊架構,不同的組織有不同的定義:

圖 2《資訊架構》書中的定義

在《資訊架構——超越Web設計》一書中,對資訊架構的定義如下:

共享資訊環境的結構化設計;

  1. 數字、物理和跨渠道生態系統中的組織、標籤、搜尋和導航系統的合成;
  2. 建立資訊產品和體驗的藝術及科學,以提供可用性、可尋性和可理解性;
  3. 一種新興的實踐性科學群體,目的是把設計和建築學的原理理導⼊入數字領域中;

我認同上面的定義,不過對於設計師來講,這個定義比較複雜難記,所以我結合自身經驗,給出了自己對資訊架構的理解:

圖 3 悅姐對資訊架構的理解

  • 資訊架構=資訊+架構。
  • 資訊包括各種文字、圖片、影音等元素;
  • 架構則對應這些元素的選擇、分類、導航和檢索。

通俗點說,資訊架構就是通過合理的組織和表達各種資訊元素,讓使用者獲取並理解資訊更容易。為資訊與使用者認知之間搭建⼀座暢通的橋樑。

2. Why | 為什麼要進行資訊架構設計?

① 資訊大爆炸

過去 60 年,人類社會的資料發生了爆炸式增長。

圖 4 資訊大爆炸的速度

  • 2008 年人類大約創造了近 10 億張 DVD 能儲存的資料,這等同於過去 5000 年的人類創造資料的總和。
  • 12 年,調研機構預測資訊每隔 18 月會翻一倍
  • 20 年,調研機構預測資訊每隔 73 天會翻一倍
  • ……

經歷了 Web2.0 的 UGC 時代,短影片爆發,資料正在以爆炸式的速度增長。

回到到產品,不同的業務部門/產品經理有不同的 KPI,大家都擠破頭顱想在產品上佔有一席之地,畢竟有入口才有流量,否則整個業務/產品/功能可能都無法被使用者感知,那他們的指標也就無法達成。

② 人類的生理侷限

在資訊爆炸的年代,人類進化的速度卻是緩慢的,我們現在的大腦跟 250 萬年前的原始人並沒有太大區別。

圖 5 人類的生理侷限

我們的大腦每秒鐘要接收約 4000 萬次的感官資訊輸入,但意識一次能注意到其中約 40 個,其中短期工作記憶能處理的只有 4±1 個。(大家可以看下這個影片, https://www.bilibili.com/video/av94974825/ 感受一下意識的侷限性)

正是由於現代資訊資料的大爆炸,多數產品日益臃腫的結構,以及人類有限的處理能力,所以呈現什麼資訊,以什麼形式呈現的資訊架構設計就非常重要。

圖 6 不同資訊架構的示意

作為設計師,我們有必要根據使用者的行為和特徵,結合資訊環境,選擇合適的資訊,並以適合的方式進行組織和呈現,以便讓使用者獲取並理解資訊更容易,完成資訊的組織和傳達作用。

3. How | 如何進行資訊架構設計?

在本章節,我們先了解一下構建資訊架構的 3 種方式,然後學習資訊架構的 4 種常見型別,再學習一下資訊架構的設計邏輯流程,最後給大家舉一個非常小的設計案例幫助大家理解。

① 資訊架構的構建方式

資訊架構有 3 種構建方式:自上而下,自下而上和綜合運用。

圖 7 資訊架構的構建方式

自上而下的構建方式

自上而下的構建方式是由戰略層驅動的,根據產品目標與使用者需求直接進行結構設計,進行新產品規劃或者產品重新定義的時候會用到。

圖 8 自上而下的構建方式

自上而下的構建方式,會先從最廣泛的,最有可能滿足目標的內容及功能開始分類,再依據邏輯細分次級分類。(MVP 的設計思路)所有分類都是空槽,最後將內容和功能按順序填入。它有一個明顯的缺點是:可能導致現有重要內容被忽略。

自下而上的構建方式

自下而上的構建方式是由範圍層驅動的,根據對現有的內容和功能需求的分析進行設計,這是專案實踐中大家最常用的一種方式。

圖 9 自下而上的構建方式

在具體專案實踐中,產品或設計師根據對現有內容和功能需求的分析,將它們分別歸屬到較高一級的類別,從而逐漸構建出能反映我們的產品目標和使用者需求的結構。(常用卡片分類法輔助)它也有一個缺點:可能導致不能靈活相容未來內容變動或增加。

綜合運用的構建方式

正因為自上而下和自下而上都有其明顯的缺點,所以理想的資訊架構的構建方式都是綜合運用的,同時從戰略層和範圍層進行驅動,以構建一個適應性強的系統。

圖 10 綜合運用的構建方式

一個適應性強的資訊架構系統,能把新內容作為現有結構的一部分容納進來(如圖左側),也可以把新內容當成一個完整的部分加入(如圖右側)。

資訊架構的基本單位是節點,節點可對應任意資訊要素或資訊要素的組合,小到一個欄位/控制元件,大到一個介面/功能都是可以的,不同場景下,節點的顆粒度不相同。

這些節點的排列方式有 4 種常見的型別,也就是我們所說的資訊架構型別。大家在具體設計的時候,可以參考使用。

② 資訊架構型別

常見的資訊架構型別有 4 種,層級結構、矩陣結構、自然結構和線性結構:

圖 11 資訊架構型別

層級結構

又叫樹狀結構或中心輻射結構。

圖 12 層級結構

層級結構的節點與其他相關節點之間存在父子關係。每一個節點都有父節點(不一定有子節點),最頂層的父節點被稱之為根節點。

層級結構的優點是:結構清晰,關係明確,有一定的冗餘度和擴充性。缺點是:改變父級結構,必然會影響其所有子級; 層級結構的適用場景非常廣泛,可以說是網際網路產品最通用的一種結構,它既可以用於主產品,也可用於子模組。

圖 13 層級結構的案例

比如美圖秀秀的底部 Tab 形式,以及首頁的宮格形式,設定的列表形式、官網分類的導航欄形式,都屬於層級結構的運用。

矩陣結構

矩陣結構允許使用者沿著兩/多個維度在節點之間移動,最終都可以幫助使用者找到想要的資訊。

圖 14 矩陣結構

矩陣結構的優點是:支援從多維度觸達同一內容,也可以從同一內容瞭解多維資訊,資訊觸達快捷,豐富。缺點是內容資訊較為複雜,學習成本較高。矩陣結構適用於高頻功能/資訊,需全域性考慮。

圖 15 矩陣結構的全域性示意

比如微信核心的對話功能,是社交的核心,需要能夠多維度觸達,所以微信設計了最近記錄、通訊錄、朋友圈頭像等多個入口觸達。

圖 16 矩陣結構的區域性示意

比如點評的美食列表,不同使用者對美食的核心訴求有差異,所以點評提供了多種篩選和排序方式,方便使用者快速找到符合要求的美食,也可以根據某一個美食關聯查詢到整個類別的美食。

自然結構

自然結構不遵循任何一致的模式。節點被逐一連線起來,節點與節點之間有聯絡,但沒有分類。

圖 17 自然結構

自然結構的優點是:自然流暢,接近現實認知。缺點是:隨機性,使用者不可控,再次查詢困難。常用於子模組,探索一系列關係不明確或一直在演變的內容。

圖 18 自然結構案例示意

比如各產品的推薦模組,推薦內容之間並無明確的歸屬或分類關係。

線性結構

線上性結構中,使用者不能進行跳轉,只能一步一步按順序瀏覽對應的資訊 。

圖 19 線性結構

線下的傳統媒體:書、文章、影視都是線性結構。它的優點是:簡單易懂,操作簡單單。缺點是:拓展性有限,使用者控制感較差。常用於小的節點,比如新功能引導、H5 活動等。

圖 20 線性結構案例示意

除了 H5 活動和新手引導,很多教育類產品為了保證學習難度的遞增性,通常也會採用線性結構。

③ 資訊架構的梳理邏輯與呈現

有了前面的構建方式和資訊架構型別作為指導思想,結合我們的設計分析,可以幫助我們梳理出特定結構的資訊架構和任務流程,並以受眾易理解的方式進行呈現。

圖 21 梳理資訊架構的過程

在梳理過程中,我們以業務側在範圍層提供的資訊範圍為基礎,通過競品分析(瞭解競品的組織系統、標籤系統、導航系統、搜尋系統規則),結合本品現有資訊架構的資料表現(瞭解我們使用者在我們產品中的行為偏好),再配合以使用者調研(通過使用者問卷或者卡片分類,瞭解使用者對資訊歸類組織的心智模型)最後利用邏輯推理,可以整理出適合我們產品的資訊架構和任務流程。

所以真實的專案中做資訊架構,絕不僅僅是將產品提供的功能、內容進行簡單的歸類分組,既要自上而下的考慮其拓展性,篩選/補充重要的節點納入資訊架構。還要考慮其命名(標籤系統)使用者能否很容易的認知理解。然後再是將所有資訊按照某個或某幾個特定的維度進行分類組織(組織系統),最後再考慮呈現,以何種形式表達給大家,讓大家更容易理解。

嚴格來講,並沒有標準的資訊架構表達模式,在《資訊架構——超越Web設計》一書中,羅列了多種資訊架構的表達方式,只要能夠向受眾傳達清楚,什麼表達形式都是可以的。

圖 22 資訊架構的表達方式

在網際網路專案中,大家用得比較多的形式包括:資訊架構圖和邏輯流程圖。

圖 23 資訊架構常見的表達形式

和互動設計原型一樣,重點不是這張圖的形式(這種圖在技術層面上誰都能畫),而是這張圖背後的(組織系統、標籤系統、導航系統、搜尋系統)。

  • 組織系統:選擇合適的維度及結構
  • 組織系統:以什麼維度來歸類組織這些資訊,我以曾經做 Material Design 的元件分享為例,官網提供的元件如下圖所示:

圖 23 MD 的元件

我在組織過程中,將其資訊架構歸納為 3 大類 8 小類:

圖 23 MD 的元件

但歸類方式肯定不止這一種形式,大家在學習的時候,可以按照自己的組織系統進行歸類整理。

以新聞呈現為例,可以按照時間維度歸類,可以按照主題維度進行歸類、可以按照媒體方的維度進行歸類,可以按照表現層影片、圖文、文字的形式進行歸類,到底按照什麼維度進行單一歸類還是進行矩陣歸類,這就是你的組織系統要解決的問題。

  • 標籤系統:選擇合適的語言及影象

標籤系統,通俗來講就是要我們對當前整個系統資訊節點的命名,從而讓資訊的呈現更容易識別,包括文字標籤和圖片標籤。

比如我歸類的欄、控制元件和檢視,使用者是否也習慣這樣的分類方式,我選擇的圖示是否能準確地表達文字標籤的涵義。

  • 導航系統:選擇合適的導航結構
  • 導航系統的內容比較多,我們將在下一堂課單獨講解
  • 搜尋系統:是否選擇搜尋。

搜尋系統是我們平日最常用的查詢資訊的功能,它能夠幫助我們快速進行資訊的檢索。雖然搜尋功能非常重要,但並不是每個系統每個頁面都需要搜尋。我們決策是否新增搜尋需要考慮三點:

圖 24 搜尋系統的考慮因素

  • 內容豐富度:產品所承載的內容豐富度/複雜度低,內容少(搜尋可能經常得不到結果)往往不需要提供搜尋。
  • 內容性質:產品提供的內容如果是偏興趣探索,瀏覽型的也可以不需要搜尋;
  • 搜尋場景:如果搜尋場景很簡單,考慮是否只用篩選或分類就能夠解決問題;反之如果搜尋內容很複雜,我們還可以搜尋結合篩選來更好地查詢資訊;

上述 3 點決定了我們是否需要考慮搜尋功能。而關於搜尋的具體設計,也是一個龐大的課題,我們先不做進一步的闡述。

資訊架構圖是一箇中間產物,他的呈現形式是相對簡單的,但這個形式背後的思考(組織系統、標籤系統、導航系統、搜尋系統)是需要設計師深思熟慮的,設計師在做資訊架構時,務必要將資訊(有哪些資訊,如何命名)和架構(如何分類組織,如何呈現)都考慮清楚,之後的框架層設計才能更清晰明確。