編輯導(dǎo)語：結(jié)合信息架構(gòu)設(shè)計(jì)，我們?cè)谶M(jìn)行產(chǎn)品規(guī)劃、產(chǎn)品設(shè)計(jì)時(shí)便可以擁有相對(duì)更加清晰的思路，后續(xù)用戶在體驗(yàn)產(chǎn)品時(shí)，也可以更加清楚地獲得信息，擁有更加完美的用戶體驗(yàn)。不過，你了解如何進(jìn)行信息架構(gòu)設(shè)計(jì)嗎？本文作者做了解讀，一起來看看吧。

從用戶體驗(yàn)設(shè)計(jì)的5個(gè)層次來看，結(jié)構(gòu)層和框架層是交互設(shè)計(jì)師設(shè)計(jì)的核心范疇：

▲圖1 用戶體驗(yàn)設(shè)計(jì)各角色分工

框架層呈現(xiàn)的是每一個(gè)界面中文本、圖片、按鈕、控件等元素的具體內(nèi)容、位置及關(guān)系，包含界面布局、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)。而結(jié)構(gòu)層則決定了每個(gè)界面應(yīng)該有哪些文本、圖片、按鈕和控件元素，以及這些元素在交互前后的邏輯對(duì)應(yīng)的關(guān)系。如果說框架是面，那么結(jié)構(gòu)則是包含面+面與面串聯(lián)的關(guān)系網(wǎng)絡(luò)。

對(duì)于交互設(shè)計(jì)師而言，信息架構(gòu)設(shè)計(jì)是每個(gè)交互設(shè)計(jì)師都必須要掌握的基本功，那到底什么是信息架構(gòu)設(shè)計(jì)？為什么要進(jìn)行信息架構(gòu)設(shè)計(jì)，以及如何進(jìn)行信息架構(gòu)設(shè)計(jì)呢？下面我們一一來看。

一、What | 什么是信息架構(gòu)？

1. 信息架構(gòu)的起源

信息架構(gòu)(information architecture)，簡(jiǎn)稱 IA。

1976年，瑞查德·索·烏曼在擔(dān)任美國(guó)建筑師協(xié)會(huì)會(huì)長(zhǎng)時(shí)創(chuàng)造了“信息架構(gòu)”術(shù)語，用來應(yīng)對(duì)當(dāng)代社會(huì)信息的不斷增長(zhǎng)和爆炸。她的妻子說道：“他所有的訓(xùn)練，作為一個(gè)建筑師，作為一個(gè)制圖者，作為一個(gè)平面設(shè)計(jì)師，作為一個(gè)企業(yè)家，作為一個(gè)出版商，還有作為一個(gè)作家，本質(zhì)上都是想要讓信息變得清晰易懂。”

“信息架構(gòu)”是一種使問題變清晰的方式。

2. 信息架構(gòu)的定義

IA 的主體對(duì)象是信息，由信息架構(gòu)師來加以設(shè)計(jì)結(jié)構(gòu)、決定組織方式以及歸類，好讓使用者與用戶容易尋找與管理的一項(xiàng)藝術(shù)與科學(xué)。

對(duì)于信息架構(gòu)，不同的組織有不同的定義：

▲圖2《信息架構(gòu)》書中的定義

在《信息架構(gòu)——超越Web設(shè)計(jì)》一書中，對(duì)信息架構(gòu)的定義如下：

• 共享信息環(huán)境的結(jié)構(gòu)化設(shè)計(jì)；
• 數(shù)字、物理和跨渠道生態(tài)系統(tǒng)中的組織、標(biāo)簽、搜索和導(dǎo)航系統(tǒng)的合成；
• 創(chuàng)建信息產(chǎn)品和體驗(yàn)的藝術(shù)及科學(xué)，以提供可用性、可尋性和可理解性；
• ?一種新興的實(shí)踐性科學(xué)群體，目的是把設(shè)計(jì)和建筑學(xué)的原理理導(dǎo)?入數(shù)字領(lǐng)域中。

我認(rèn)同上面的定義，不過對(duì)于設(shè)計(jì)師來講，這個(gè)定義比較復(fù)雜難記，所以我結(jié)合自身經(jīng)驗(yàn)，給出了自己對(duì)信息架構(gòu)的理解：

▲圖3悅姐對(duì)信息架構(gòu)的理解

信息架構(gòu)=信息+架構(gòu)。

信息包括各種文本、圖片、影音等元素；架構(gòu)則對(duì)應(yīng)這些元素的選擇、分類、導(dǎo)航和檢索。

通俗點(diǎn)說，信息架構(gòu)就是通過合理的組織和表達(dá)各種信息元素，讓用戶獲取并理解信息更容易。為信息與用戶認(rèn)知之間搭建?座暢通的橋梁。

二、Why | 為什么要進(jìn)行信息架構(gòu)設(shè)計(jì)？

1. 信息大爆炸

過去60年，人類社會(huì)的數(shù)據(jù)發(fā)生了爆炸式增長(zhǎng)。

▲圖4信息大爆炸的速度

2008年人類大約創(chuàng)造了近10億張DVD能存儲(chǔ)的數(shù)據(jù)，這等同于過去5000年的人類創(chuàng)造數(shù)據(jù)的總和。

• 12年，調(diào)研機(jī)構(gòu)預(yù)測(cè)信息每隔18月會(huì)翻一倍
• 20年，調(diào)研機(jī)構(gòu)預(yù)測(cè)信息每隔73天會(huì)翻一倍
• ……

經(jīng)歷了Web2.0的UGC時(shí)代，短視頻爆發(fā)，數(shù)據(jù)正在以爆炸式的速度增長(zhǎng)。

回到到產(chǎn)品，不同的業(yè)務(wù)部門/產(chǎn)品經(jīng)理有不同的KPI，大家都擠破頭顱想在產(chǎn)品上占有一席之地，畢竟有入口才有流量，否則整個(gè)業(yè)務(wù)/產(chǎn)品/功能可能都無法被用戶感知，那他們的指標(biāo)也就無法達(dá)成。

2. 人類的生理局限

在信息爆炸的年代，人類進(jìn)化的速度卻是緩慢的，我們現(xiàn)在的大腦跟250萬年前的原始人并沒有太大區(qū)別。

▲圖5人類的生理局限

我們的大腦每秒鐘要接收約4000萬次的感官信息輸入，但意識(shí)一次能注意到其中約40個(gè)，其中短期工作記憶能處理的只有4±1個(gè)。（大家可以查看一下左圖的視頻，https://www.bilibili.com/video/av94974825/ 感受一下意識(shí)的局限性）

正是由于現(xiàn)代信息數(shù)據(jù)的大爆炸，多數(shù)產(chǎn)品日益臃腫的結(jié)構(gòu)，以及人類有限的處理能力，所以呈現(xiàn)什么信息，以什么形式呈現(xiàn)的信息架構(gòu)設(shè)計(jì)就非常重要。

▲圖6不同信息架構(gòu)的示意

作為設(shè)計(jì)師，我們有必要根據(jù)用戶的行為和特征，結(jié)合信息環(huán)境，選擇合適的信息，并以適合的方式進(jìn)行組織和呈現(xiàn)，以便讓用戶獲取并理解信息更容易，完成信息的組織和傳達(dá)作用。

三、How | 如何進(jìn)行信息架構(gòu)設(shè)計(jì)？

在本章節(jié)，我們先了解一下構(gòu)建信息架構(gòu)的3種方式，然后學(xué)習(xí)信息架構(gòu)的4種常見類型，再學(xué)習(xí)一下信息架構(gòu)的設(shè)計(jì)邏輯流程，最后給大家舉一個(gè)非常小的設(shè)計(jì)案例幫助大家理解。

1. 信息架構(gòu)的構(gòu)建方式

信息架構(gòu)有3種構(gòu)建方式：自上而下，自下而上和綜合運(yùn)用。

▲圖7信息架構(gòu)的構(gòu)建方式

1）自上而下的構(gòu)建方式

自上而下的構(gòu)建方式是由戰(zhàn)略層驅(qū)動(dòng)的，根據(jù)產(chǎn)品目標(biāo)與用戶需求直接進(jìn)行結(jié)構(gòu)設(shè)計(jì)，進(jìn)行新產(chǎn)品規(guī)劃或者產(chǎn)品重新定義的時(shí)候會(huì)用到。

▲圖8自上而下的構(gòu)建方式

自上而下的構(gòu)建方式，會(huì)先從最廣泛的，最有可能滿足目標(biāo)的內(nèi)容及功能開始分類，再依據(jù)邏輯細(xì)分次級(jí)分類。（MVP的設(shè)計(jì)思路）所有分類都是空槽，最后將內(nèi)容和功能按順序填入。它有一個(gè)明顯的缺點(diǎn)是：可能導(dǎo)致現(xiàn)有重要內(nèi)容被忽略。

2）自下而上的構(gòu)建方式

自下而上的構(gòu)建方式是由范圍層驅(qū)動(dòng)的，根據(jù)對(duì)現(xiàn)有的內(nèi)容和功能需求的分析進(jìn)行設(shè)計(jì)，這是項(xiàng)目實(shí)踐中大家最常用的一種方式。

▲圖9自下而上的構(gòu)建方式

在具體項(xiàng)目實(shí)踐中，產(chǎn)品或設(shè)計(jì)師根據(jù)對(duì)現(xiàn)有內(nèi)容和功能需求的分析，將它們分別歸屬到較高一級(jí)的類別，從而逐漸構(gòu)建出能反映我們的產(chǎn)品目標(biāo)和用戶需求的結(jié)構(gòu)。（常用卡片分類法輔助）它也有一個(gè)缺點(diǎn)：可能導(dǎo)致不能靈活兼容未來內(nèi)容變動(dòng)或增加。

3）綜合運(yùn)用的構(gòu)建方式

正因?yàn)樽陨隙潞妥韵露隙加衅涿黠@的缺點(diǎn)，所以理想的信息架構(gòu)的構(gòu)建方式都是綜合運(yùn)用的，同時(shí)從戰(zhàn)略層和范圍層進(jìn)行驅(qū)動(dòng)，以構(gòu)建一個(gè)適應(yīng)性強(qiáng)的系統(tǒng)。

▲圖10綜合運(yùn)用的構(gòu)建方式

一個(gè)適應(yīng)性強(qiáng)的信息架構(gòu)系統(tǒng)，能把新內(nèi)容作為現(xiàn)有結(jié)構(gòu)的一部分容納進(jìn)來（如圖左側(cè)），也可以把新內(nèi)容當(dāng)成一個(gè)完整的部分加入（如圖右側(cè)）。

信息架構(gòu)的基本單位是節(jié)點(diǎn)，節(jié)點(diǎn)可對(duì)應(yīng)任意信息要素或信息要素的組合，小到一個(gè)字段/控件，大到一個(gè)界面/功能都是可以的，不同場(chǎng)景下，節(jié)點(diǎn)的顆粒度不相同。

這些節(jié)點(diǎn)的排列方式有4種常見的類型，也就是我們所說的信息架構(gòu)類型。大家在具體設(shè)計(jì)的時(shí)候，可以參考使用。

2. 信息架構(gòu)類型

常見的信息架構(gòu)類型有4種，層級(jí)結(jié)構(gòu)、矩陣結(jié)構(gòu)、自然結(jié)構(gòu)和線性結(jié)構(gòu)：

▲圖11信息架構(gòu)類型

1）層級(jí)結(jié)構(gòu)

又叫樹狀結(jié)構(gòu)或中心輻射結(jié)構(gòu)。

▲圖12層級(jí)結(jié)構(gòu)

層級(jí)結(jié)構(gòu)的節(jié)點(diǎn)與其他相關(guān)節(jié)點(diǎn)之間存在父子關(guān)系。每一個(gè)節(jié)點(diǎn)都有父節(jié)點(diǎn)（不一定有子節(jié)點(diǎn)），最頂層的父節(jié)點(diǎn)被稱之為根節(jié)點(diǎn)。

層級(jí)結(jié)構(gòu)的優(yōu)點(diǎn)是：結(jié)構(gòu)清晰，關(guān)系明確，有一定的冗余度和擴(kuò)充性。缺點(diǎn)是：改變父級(jí)結(jié)構(gòu)，必然會(huì)影響其所有子級(jí);層級(jí)結(jié)構(gòu)的適用場(chǎng)景非常廣泛，可以說是互聯(lián)網(wǎng)產(chǎn)品最通用的一種結(jié)構(gòu)，它既可以用于主產(chǎn)品，也可用于子模塊。

▲圖13層級(jí)結(jié)構(gòu)的案例

比如美圖秀秀的底部Tab形式，以及首頁的宮格形式，設(shè)置的列表形式、官網(wǎng)分類的導(dǎo)航欄形式，都屬于層級(jí)結(jié)構(gòu)的運(yùn)用。

2）矩陣結(jié)構(gòu)

矩陣結(jié)構(gòu)允許用戶沿著兩/多個(gè)維度在節(jié)點(diǎn)之間移動(dòng)，最終都可以幫助用戶找到想要的信息。

▲圖14矩陣結(jié)構(gòu)

矩陣結(jié)構(gòu)的優(yōu)點(diǎn)是：支持從多維度觸達(dá)同一內(nèi)容，也可以從同一內(nèi)容了解多維信息，信息觸達(dá)快捷，豐富。缺點(diǎn)是內(nèi)容信息較為復(fù)雜，學(xué)習(xí)成本較高。矩陣結(jié)構(gòu)適用于高頻功能/信息，需全局考慮。

▲圖15矩陣結(jié)構(gòu)的全局示意

比如微信核心的對(duì)話功能，是社交的核心，需要能夠多維度觸達(dá)，所以微信設(shè)計(jì)了最近記錄、通訊錄、朋友圈頭像等多個(gè)入口觸達(dá)。

▲圖16矩陣結(jié)構(gòu)的局部示意

比如點(diǎn)評(píng)的美食列表，不同用戶對(duì)美食的核心訴求有差異，所以點(diǎn)評(píng)提供了多種篩選和排序方式，方便用戶快速找到符合要求的美食，也可以根據(jù)某一個(gè)美食關(guān)聯(lián)查找到整個(gè)類別的美食。

3）自然結(jié)構(gòu)

自然結(jié)構(gòu)不遵循任何一致的模式。節(jié)點(diǎn)被逐一連接起來，節(jié)點(diǎn)與節(jié)點(diǎn)之間有聯(lián)系，但沒有分類。

▲圖17自然結(jié)構(gòu)

自然結(jié)構(gòu)的優(yōu)點(diǎn)是：自然流暢，接近現(xiàn)實(shí)認(rèn)知。缺點(diǎn)是：隨機(jī)性，用戶不可控，再次查找困難。常用于子模塊，探索一系列關(guān)系不明確或一直在演變的內(nèi)容。

▲圖18自然結(jié)構(gòu)案例示意

比如各產(chǎn)品的推薦模塊，推薦內(nèi)容之間并無明確的歸屬或分類關(guān)系。

4）線性結(jié)構(gòu)

在線性結(jié)構(gòu)中，用戶不能進(jìn)行跳轉(zhuǎn)，只能一步一步按順序?yàn)g覽對(duì)應(yīng)的信息 。

▲圖19線性結(jié)構(gòu)

線下的傳統(tǒng)媒體：書、文章、影視都是線性結(jié)構(gòu)。它的優(yōu)點(diǎn)是：簡(jiǎn)單易懂，操作簡(jiǎn)單單。缺點(diǎn)是：拓展性有限，用戶控制感較差。常用于小的節(jié)點(diǎn)，比如新功能引導(dǎo)、H5活動(dòng)等。

▲圖20線性結(jié)構(gòu)案例示意

除了H5活動(dòng)和新手引導(dǎo)，很多教育類產(chǎn)品為了保證學(xué)習(xí)難度的遞增性，通常也會(huì)采用線性結(jié)構(gòu)。

3. 信息架構(gòu)的梳理邏輯與呈現(xiàn)

有了前面的構(gòu)建方式和信息架構(gòu)類型作為指導(dǎo)思想，結(jié)合我們的設(shè)計(jì)分析，可以幫助我們梳理出特定結(jié)構(gòu)的信息架構(gòu)和任務(wù)流程，并以受眾易理解的方式進(jìn)行呈現(xiàn)。

▲圖21梳理信息架構(gòu)的過程

在梳理過程中，我們以業(yè)務(wù)側(cè)在范圍層提供的信息范圍為基礎(chǔ)，通過競(jìng)品分析（了解競(jìng)品的組織系統(tǒng)、標(biāo)簽系統(tǒng)、導(dǎo)航系統(tǒng)、搜索系統(tǒng)規(guī)則），結(jié)合本品現(xiàn)有信息架構(gòu)的數(shù)據(jù)表現(xiàn)（了解我們用戶在我們產(chǎn)品中的行為偏好），再配合以用戶調(diào)研（通過用戶問卷或者卡片分類，了解用戶對(duì)信息歸類組織的心智模型）最后利用邏輯推理，可以整理出適合我們產(chǎn)品的信息架構(gòu)和任務(wù)流程。

所以真實(shí)的項(xiàng)目中做信息架構(gòu)，絕不僅僅是將產(chǎn)品提供的功能、內(nèi)容進(jìn)行簡(jiǎn)單的歸類分組，既要自上而下的考慮其拓展性，篩選/補(bǔ)充重要的節(jié)點(diǎn)納入信息架構(gòu)。還要考慮其命名（標(biāo)簽系統(tǒng)）用戶能否很容易的認(rèn)知理解。

然后再是將所有信息按照某個(gè)或某幾個(gè)特定的維度進(jìn)行分類組織（組織系統(tǒng)），最后再考慮呈現(xiàn)，以何種形式表達(dá)給大家，讓大家更容易理解。

嚴(yán)格來講，并沒有標(biāo)準(zhǔn)的信息架構(gòu)表達(dá)模式，在《信息架構(gòu)——超越Web設(shè)計(jì)》一書中，羅列了多種信息架構(gòu)的表達(dá)方式，只要能夠向受眾傳達(dá)清楚，什么表達(dá)形式都是可以的。

▲圖22信息架構(gòu)的表達(dá)方式

在互聯(lián)網(wǎng)項(xiàng)目中，大家用得比較多的形式包括：信息架構(gòu)圖和邏輯流程圖。

▲圖23信息架構(gòu)常見的表達(dá)形式

和交互設(shè)計(jì)原型一樣，重點(diǎn)不是這張圖的形式（這種圖在技術(shù)層面上誰都能畫），而是這張圖背后的（組織系統(tǒng)、標(biāo)簽系統(tǒng)、導(dǎo)航系統(tǒng)、搜索系統(tǒng)）。

1）組織系統(tǒng)：選擇合適的維度及結(jié)構(gòu)

組織系統(tǒng)：以什么維度來歸類組織這些信息，我以曾經(jīng)做Material Design的組件分享為例，官網(wǎng)提供的組件如下圖所示：

▲圖23MD的組件

我在組織過程中，將其信息架構(gòu)歸納為3大類8小類：

▲圖23MD的組件

但歸類方式肯定不止這一種形式，大家在學(xué)習(xí)的時(shí)候，可以按照自己的組織系統(tǒng)進(jìn)行歸類整理。

以新聞呈現(xiàn)為例，可以按照時(shí)間維度歸類，可以按照主題維度進(jìn)行歸類、可以按照媒體方的維度進(jìn)行歸類，可以按照表現(xiàn)層視頻、圖文、文字的形式進(jìn)行歸類，到底按照什么維度進(jìn)行單一歸類還是進(jìn)行矩陣歸類，這就是你的組織系統(tǒng)要解決的問題。

2）標(biāo)簽系統(tǒng)：選擇合適的語言及圖像

標(biāo)簽系統(tǒng)，通俗來講就是要我們對(duì)當(dāng)前整個(gè)系統(tǒng)信息節(jié)點(diǎn)的命名，從而讓信息的呈現(xiàn)更容易識(shí)別，包括文本標(biāo)簽和圖片標(biāo)簽。

比如我歸類的欄、控件和視圖，用戶是否也習(xí)慣這樣的分類方式，我選擇的圖標(biāo)是否能準(zhǔn)確地表達(dá)文本標(biāo)簽的涵義。

3）導(dǎo)航系統(tǒng)：選擇合適的導(dǎo)航結(jié)構(gòu)

導(dǎo)航系統(tǒng)的內(nèi)容比較多，我們將在下一堂課單獨(dú)講解

4）搜索系統(tǒng)：是否選擇搜索

搜索系統(tǒng)是我們平日最常用的查找信息的功能，它能夠幫助我們快速進(jìn)行信息的檢索。雖然搜索功能非常重要，但并不是每個(gè)系統(tǒng)每個(gè)頁面都需要搜索。我們決策是否添加搜索需要考慮三點(diǎn)：

▲圖24搜索系統(tǒng)的考慮因素

1. 內(nèi)容豐富度：產(chǎn)品所承載的內(nèi)容豐富度/復(fù)雜度低，內(nèi)容少（搜索可能經(jīng)常得不到結(jié)果）往往不需要提供搜索。
2. 內(nèi)容性質(zhì)：產(chǎn)品提供的內(nèi)容如果是偏興趣探索，瀏覽型的也可以不需要搜索；
3. 搜索場(chǎng)景：如果搜索場(chǎng)景很簡(jiǎn)單，考慮是否只用篩選或分類就能夠解決問題；反之如果搜索內(nèi)容很復(fù)雜，我們還可以搜索結(jié)合篩選來更好地查找信息。

上述 3 點(diǎn)決定了我們是否需要考慮搜索功能。而關(guān)于搜索的具體設(shè)計(jì)，也是一個(gè)龐大的課題，我們先不做進(jìn)一步的闡述。

信息架構(gòu)圖是一個(gè)中間產(chǎn)物，他的呈現(xiàn)形式是相對(duì)簡(jiǎn)單的，但這個(gè)形式背后的思考（組織系統(tǒng)、標(biāo)簽系統(tǒng)、導(dǎo)航系統(tǒng)、搜索系統(tǒng)）是需要設(shè)計(jì)師深思熟慮的，設(shè)計(jì)師在做信息架構(gòu)時(shí)，務(wù)必要將信息（有哪些信息，如何命名）和架構(gòu)（如何分類組織，如何呈現(xiàn)）都考慮清楚，之后的框架層設(shè)計(jì)才能更清晰明確。

#專欄作家#

悅有所思，人人都是產(chǎn)品經(jīng)理專欄作家。10年體驗(yàn)設(shè)計(jì)經(jīng)驗(yàn)，崇尚理論指導(dǎo)實(shí)踐，實(shí)踐迭代理論，熱衷于學(xué)習(xí)、解構(gòu)、建構(gòu)、傳播交互設(shè)計(jì)、服務(wù)設(shè)計(jì)、行為設(shè)計(jì)等設(shè)計(jì)相關(guān)領(lǐng)域知識(shí)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議。