別誤人子弟了！思維導圖不等于信息架構(gòu)！

信息架構(gòu)是我學習交互設(shè)計中最迷糊的知識點，通過網(wǎng)上搜索和同行交流我發(fā)現(xiàn)這也不是我一個人的困惑。更神奇的是很多在網(wǎng)上寫信息架構(gòu)的人，要么自己還不懂什么是真正的信息架構(gòu)要么就是根本不會表達，上來就給我畫一張思維導圖，稍微有點良心的作者還給你展示一下卡片分類，總之這些文章都是半斤八兩，僅僅把產(chǎn)品的導航菜單就當作信息架構(gòu)，真是誤人子弟。

數(shù)據(jù)結(jié)構(gòu)比導航重要

就按目前的行業(yè)發(fā)展來說導航設(shè)計直接抄襲都不會產(chǎn)生很大的體驗問題，倒是一些關(guān)鍵信息的結(jié)構(gòu)，是產(chǎn)品的成敗。

以網(wǎng)易云音樂舉例，用戶可以創(chuàng)建歌單，歌單內(nèi)有歌曲，歌曲和歌單都可以被用戶寫評論，同時歌曲有演唱者。用戶可以創(chuàng)建多個歌單，在不同的歌曲、歌單下寫評論，演唱者創(chuàng)作了很多歌曲。任意一個用戶訪問其中一個節(jié)點可以順藤摸瓜找到其他節(jié)點。這是一張網(wǎng)絡(luò)，遠不是一個樹形思維導圖可以表達的。正是這張網(wǎng)絡(luò)讓用戶在歌單和評論之間流連忘返互動頻頻，造就了網(wǎng)易云音樂作為年輕人音樂社區(qū)的成功，網(wǎng)易云音樂五個底部 Tabbar 導航是什么決定不了產(chǎn)品的成敗。

以上這些節(jié)點之間的關(guān)聯(lián)關(guān)系，一般在信息、計算機等理工專業(yè)的《數(shù)據(jù)庫設(shè)計》課程中有教授。這種理清各個概念之間的圖表稱為 E-R 圖（Entity Relationship Diagram，實體-聯(lián)系圖），這種圖表提供了表示實體類型、屬性和聯(lián)系的方法，用來描述現(xiàn)實世界的概念模型。

一個電商系統(tǒng)的 E-R 圖舉例

在實際工作中這個圖表一般由高級產(chǎn)品經(jīng)理或者后端程序員繪制，明明是設(shè)計信息架構(gòu)中非常重要的一環(huán)，很多初級產(chǎn)品經(jīng)理和設(shè)計師卻從未聽過，也未系統(tǒng)考慮過。

導航結(jié)構(gòu)和頁面信息結(jié)構(gòu)不一樣

我在指導初級設(shè)計師畫思維導圖時，經(jīng)常聽到的困惑是：信息架構(gòu)的思維導圖中每個節(jié)點的定義是什么？我到底該把導航上的文案還是界面上每個元素寫在節(jié)點里呢？

這時候我就不得不和他們解釋：擺放家具的時候不要考慮冰箱第二層放什么，在整理冰箱食物的時候也不要去想怎么擺放家具。 分兩張圖來畫不就得了。

我第一次看網(wǎng)上文章學信息架構(gòu)也很納悶這些作者是怎么能把導航結(jié)構(gòu)和頁面元素畫在一張思維導圖里的。說實在的，我至今也畫不出來。

信息架構(gòu)的組成部分

有一本名為《建筑設(shè)計的永恒之道》的書，意外地在互聯(lián)網(wǎng)行業(yè)也很有名，其中有一段非常經(jīng)典的話：

不想象事件發(fā)生的場所，就不能想象任何方式的事件；不想象自己睡在哪，我就不能想象睡眠。不能想象哪里發(fā)生了什么，就不可能想到那個地方。不想象床、性行為、睡眠，起床——我就不能想象起居室

人在現(xiàn)實生活中的活動必然發(fā)生在某個場所，相似的我們在虛擬世界里的活動也必然發(fā)生在屏幕的某個界面里。

現(xiàn)實世界和虛擬世界是有很多相似之處的。如果我們現(xiàn)實生活中場所的設(shè)計和擺放有問題，人也很難理解和活動。以一個廚房舉例，要設(shè)計廚房之前，我們先梳理在廚房內(nèi)進行的活動和接觸家具的順序。

再梳理之后，我們權(quán)衡之后為活動安排最方便的路線，就得到了廚房家具的擺放順序（注意我之前所說的，這時候別去考慮冰箱里哪幾層放什么食材的事情）。這在室內(nèi)設(shè)計中稱為動線設(shè)計，類比于互聯(lián)網(wǎng)則是導航設(shè)計。

不是所有的事情都適合在現(xiàn)實世界中做，要不然也不會出現(xiàn)互聯(lián)網(wǎng)公司估值比很多實業(yè)公司還高的事情。

如果我們建設(shè)一個如下圖所示的場所，現(xiàn)實世界如果要實現(xiàn)這些需求，不曉得要裝多少臺電梯才能讓觀眾在不同的作品之間方便瀏覽，不知道要每天發(fā)行多少套簡報才能讓觀眾知道有新作品發(fā)行。

而這些需求如果使用互聯(lián)網(wǎng)的超鏈接跳轉(zhuǎn)和關(guān)注推送機制，就方便高效得多。

以上這個現(xiàn)實世界和互聯(lián)網(wǎng)類比的例子，是為了引出信息架構(gòu)的知識框架，通過查閱信息架構(gòu)相關(guān)資料，如果我們用現(xiàn)實世界的超市類比互聯(lián)網(wǎng)產(chǎn)品中信息架構(gòu)的對應知識，信息架構(gòu)至少包含如下內(nèi)容：

• 超市的內(nèi)部路線和指示牌 —— App 的導航結(jié)構(gòu)
• 超市的布局結(jié)構(gòu)（包裹寄存處在前，收銀臺在后）—— App 的功能結(jié)構(gòu)層級
• 超市商品的分類方式（比如西紅柿屬于水果還是蔬菜？） —— App 內(nèi)的內(nèi)容分類方式
• 超市分類的名稱（叫生鮮區(qū)還是蔬菜水果區(qū)） —— App 內(nèi)各個功能的命名（標簽系統(tǒng)）
• 超市的商品貨架放置方式（上層是綠葉蔬菜下層是果實蔬菜） —— App 內(nèi)的界面布局
• 不知道路或者商品尋問超市導購員 —— App內(nèi)的搜索

這些知識點光拿出其中一個就要學習很久，更不可能用一張思維導圖就表達這些內(nèi)容，而且國內(nèi)并沒有哪個崗位能負責所有信息架構(gòu)方方面面的設(shè)計。往往設(shè)計師畫導航和界面布局，產(chǎn)品經(jīng)理和程序員規(guī)劃功能結(jié)構(gòu)和搜索系統(tǒng)，運營負責內(nèi)容分類方式。

推薦閱讀

為了論證思維導圖不等于信息架構(gòu)我閑扯了很多，遺憾是我也沒有精力和能力寫一套完整的信息架構(gòu)教材，幸運的是有其他大佬可以，接下來給大家推薦一些很不錯的信息架構(gòu)學習資料。

1. 米蘭理工大學信息架構(gòu)課程筆記

這是我的老鄉(xiāng)呆頭咸魚所作，她之前是淘寶交互設(shè)計師，在意大利米蘭理工大學讀服務(wù)設(shè)計研究生時寫了一些課程筆記，期間恰好就有信息架構(gòu)的課程。信息架構(gòu)本來是國外舶來的術(shù)語，自然國外的課程會更系統(tǒng)科學，課程筆記分為四章：

• 《信息架構(gòu)概述》，鏈接： https://mp.weixin.qq.com/s/pR0Q_uP1nlOggcDSGN0JNg
• 《信息架構(gòu) ontology（本體論）》，鏈接： https://mp.weixin.qq.com/s/dsbOidLgAMXJrdqi2a20QQ
• 《信息架構(gòu) taxonomy（分類學）》，鏈接： https://mp.weixin.qq.com/s/AUlMAQ-0ZXx-6ojNtmdc7w
• 《信息架構(gòu) choreography（編排）》，鏈接： https://mp.weixin.qq.com/s/3XcmBMrQX0CuW-P-EM_xqA

2. Hozin 的信息架構(gòu)系列文章

Hozin 是我認識的大佬，在互聯(lián)網(wǎng)行業(yè)從業(yè)超過 16 年，更難得是如此大佬仍然愿意和初學者交流，他應該是國內(nèi)發(fā)表信息架構(gòu)文章最多的人。

3. 《交互系統(tǒng)新概念設(shè)計》

豆瓣鏈接： https://book.douban.com/subject/27023063/

這本書中文譯名云里霧里，還以為新概念是什么英語教材。原著英文名是《Conceptual Design for Interactive Systems》，既然有 Conceptual Design 那肯定涉及到信息架構(gòu)，這本書非常系統(tǒng)而且有具體的實例操作如何從信息概念開始逐步設(shè)計出用戶能理解的界面。

我放一些網(wǎng)友拍的書籍截圖大家就知道這書絕對是干貨。

歡迎關(guān)注作者的微信公眾號：「龍爪槐守望者」