如何進行信息架構設計?
編輯導語:結合信息架構設計,我們在進行產品規劃、產品設計時便可以擁有相對更加清晰的思路,后續用戶在體驗產品時,也可以更加清楚地獲得信息,擁有更加完美的用戶體驗。不過,你了解如何進行信息架構設計嗎?本文作者做了解讀,一起來看看吧。
從用戶體驗設計的5個層次來看,結構層和框架層是交互設計師設計的核心范疇:
▲圖1 用戶體驗設計各角色分工
框架層呈現的是每一個界面中文本、圖片、按鈕、控件等元素的具體內容、位置及關系,包含界面布局、導航設計和信息設計。而結構層則決定了每個界面應該有哪些文本、圖片、按鈕和控件元素,以及這些元素在交互前后的邏輯對應的關系。如果說框架是面,那么結構則是包含面+面與面串聯的關系網絡。
對于交互設計師而言,信息架構設計是每個交互設計師都必須要掌握的基本功,那到底什么是信息架構設計?為什么要進行信息架構設計,以及如何進行信息架構設計呢?下面我們一一來看。
一、What | 什么是信息架構?
1. 信息架構的起源
信息架構(information architecture),簡稱 IA。
1976年,瑞查德·索·烏曼在擔任美國建筑師協會會長時創造了“信息架構”術語,用來應對當代社會信息的不斷增長和爆炸。她的妻子說道:“他所有的訓練,作為一個建筑師,作為一個制圖者,作為一個平面設計師,作為一個企業家,作為一個出版商,還有作為一個作家,本質上都是想要讓信息變得清晰易懂。”
“信息架構”是一種使問題變清晰的方式。
2. 信息架構的定義
IA 的主體對象是信息,由信息架構師來加以設計結構、決定組織方式以及歸類,好讓使用者與用戶容易尋找與管理的一項藝術與科學。
對于信息架構,不同的組織有不同的定義:
▲圖2《信息架構》書中的定義
在《信息架構——超越Web設計》一書中,對信息架構的定義如下:
- 共享信息環境的結構化設計;
- 數字、物理和跨渠道生態系統中的組織、標簽、搜索和導航系統的合成;
- 創建信息產品和體驗的藝術及科學,以提供可用性、可尋性和可理解性;
- ?一種新興的實踐性科學群體,目的是把設計和建筑學的原理理導?入數字領域中。
我認同上面的定義,不過對于設計師來講,這個定義比較復雜難記,所以我結合自身經驗,給出了自己對信息架構的理解:
▲圖3悅姐對信息架構的理解
信息架構=信息+架構。
信息包括各種文本、圖片、影音等元素;架構則對應這些元素的選擇、分類、導航和檢索。
通俗點說,信息架構就是通過合理的組織和表達各種信息元素,讓用戶獲取并理解信息更容易。為信息與用戶認知之間搭建?座暢通的橋梁。
二、Why | 為什么要進行信息架構設計?
1. 信息大爆炸
過去60年,人類社會的數據發生了爆炸式增長。
▲圖4信息大爆炸的速度
2008年人類大約創造了近10億張DVD能存儲的數據,這等同于過去5000年的人類創造數據的總和。
- 12年,調研機構預測信息每隔18月會翻一倍
- 20年,調研機構預測信息每隔73天會翻一倍
- ……
經歷了Web2.0的UGC時代,短視頻爆發,數據正在以爆炸式的速度增長。
回到到產品,不同的業務部門/產品經理有不同的KPI,大家都擠破頭顱想在產品上占有一席之地,畢竟有入口才有流量,否則整個業務/產品/功能可能都無法被用戶感知,那他們的指標也就無法達成。
2. 人類的生理局限
在信息爆炸的年代,人類進化的速度卻是緩慢的,我們現在的大腦跟250萬年前的原始人并沒有太大區別。
▲圖5人類的生理局限
我們的大腦每秒鐘要接收約4000萬次的感官信息輸入,但意識一次能注意到其中約40個,其中短期工作記憶能處理的只有4±1個。(大家可以查看一下左圖的視頻,https://www.bilibili.com/video/av94974825/ 感受一下意識的局限性)
正是由于現代信息數據的大爆炸,多數產品日益臃腫的結構,以及人類有限的處理能力,所以呈現什么信息,以什么形式呈現的信息架構設計就非常重要。
▲圖6不同信息架構的示意
作為設計師,我們有必要根據用戶的行為和特征,結合信息環境,選擇合適的信息,并以適合的方式進行組織和呈現,以便讓用戶獲取并理解信息更容易,完成信息的組織和傳達作用。
三、How | 如何進行信息架構設計?
在本章節,我們先了解一下構建信息架構的3種方式,然后學習信息架構的4種常見類型,再學習一下信息架構的設計邏輯流程,最后給大家舉一個非常小的設計案例幫助大家理解。
1. 信息架構的構建方式
信息架構有3種構建方式:自上而下,自下而上和綜合運用。
▲圖7信息架構的構建方式
1)自上而下的構建方式
自上而下的構建方式是由戰略層驅動的,根據產品目標與用戶需求直接進行結構設計,進行新產品規劃或者產品重新定義的時候會用到。
▲圖8自上而下的構建方式
自上而下的構建方式,會先從最廣泛的,最有可能滿足目標的內容及功能開始分類,再依據邏輯細分次級分類。(MVP的設計思路)所有分類都是空槽,最后將內容和功能按順序填入。它有一個明顯的缺點是:可能導致現有重要內容被忽略。
2)自下而上的構建方式
自下而上的構建方式是由范圍層驅動的,根據對現有的內容和功能需求的分析進行設計,這是項目實踐中大家最常用的一種方式。
▲圖9自下而上的構建方式
在具體項目實踐中,產品或設計師根據對現有內容和功能需求的分析,將它們分別歸屬到較高一級的類別,從而逐漸構建出能反映我們的產品目標和用戶需求的結構。(常用卡片分類法輔助)它也有一個缺點:可能導致不能靈活兼容未來內容變動或增加。
3)綜合運用的構建方式
正因為自上而下和自下而上都有其明顯的缺點,所以理想的信息架構的構建方式都是綜合運用的,同時從戰略層和范圍層進行驅動,以構建一個適應性強的系統。
▲圖10綜合運用的構建方式
一個適應性強的信息架構系統,能把新內容作為現有結構的一部分容納進來(如圖左側),也可以把新內容當成一個完整的部分加入(如圖右側)。
信息架構的基本單位是節點,節點可對應任意信息要素或信息要素的組合,小到一個字段/控件,大到一個界面/功能都是可以的,不同場景下,節點的顆粒度不相同。
這些節點的排列方式有4種常見的類型,也就是我們所說的信息架構類型。大家在具體設計的時候,可以參考使用。
2. 信息架構類型
常見的信息架構類型有4種,層級結構、矩陣結構、自然結構和線性結構:
▲圖11信息架構類型
1)層級結構
又叫樹狀結構或中心輻射結構。
▲圖12層級結構
層級結構的節點與其他相關節點之間存在父子關系。每一個節點都有父節點(不一定有子節點),最頂層的父節點被稱之為根節點。
層級結構的優點是:結構清晰,關系明確,有一定的冗余度和擴充性。缺點是:改變父級結構,必然會影響其所有子級;層級結構的適用場景非常廣泛,可以說是互聯網產品最通用的一種結構,它既可以用于主產品,也可用于子模塊。
▲圖13層級結構的案例
比如美圖秀秀的底部Tab形式,以及首頁的宮格形式,設置的列表形式、官網分類的導航欄形式,都屬于層級結構的運用。
2)矩陣結構
矩陣結構允許用戶沿著兩/多個維度在節點之間移動,最終都可以幫助用戶找到想要的信息。
▲圖14矩陣結構
矩陣結構的優點是:支持從多維度觸達同一內容,也可以從同一內容了解多維信息,信息觸達快捷,豐富。缺點是內容信息較為復雜,學習成本較高。矩陣結構適用于高頻功能/信息,需全局考慮。
▲圖15矩陣結構的全局示意
比如微信核心的對話功能,是社交的核心,需要能夠多維度觸達,所以微信設計了最近記錄、通訊錄、朋友圈頭像等多個入口觸達。
▲圖16矩陣結構的局部示意
比如點評的美食列表,不同用戶對美食的核心訴求有差異,所以點評提供了多種篩選和排序方式,方便用戶快速找到符合要求的美食,也可以根據某一個美食關聯查找到整個類別的美食。
3)自然結構
自然結構不遵循任何一致的模式。節點被逐一連接起來,節點與節點之間有聯系,但沒有分類。
▲圖17自然結構
自然結構的優點是:自然流暢,接近現實認知。缺點是:隨機性,用戶不可控,再次查找困難。常用于子模塊,探索一系列關系不明確或一直在演變的內容。
▲圖18自然結構案例示意
比如各產品的推薦模塊,推薦內容之間并無明確的歸屬或分類關系。
4)線性結構
在線性結構中,用戶不能進行跳轉,只能一步一步按順序瀏覽對應的信息 。
▲圖19線性結構
線下的傳統媒體:書、文章、影視都是線性結構。它的優點是:簡單易懂,操作簡單單。缺點是:拓展性有限,用戶控制感較差。常用于小的節點,比如新功能引導、H5活動等。
▲圖20線性結構案例示意
除了H5活動和新手引導,很多教育類產品為了保證學習難度的遞增性,通常也會采用線性結構。
3. 信息架構的梳理邏輯與呈現
有了前面的構建方式和信息架構類型作為指導思想,結合我們的設計分析,可以幫助我們梳理出特定結構的信息架構和任務流程,并以受眾易理解的方式進行呈現。
▲圖21梳理信息架構的過程
在梳理過程中,我們以業務側在范圍層提供的信息范圍為基礎,通過競品分析(了解競品的組織系統、標簽系統、導航系統、搜索系統規則),結合本品現有信息架構的數據表現(了解我們用戶在我們產品中的行為偏好),再配合以用戶調研(通過用戶問卷或者卡片分類,了解用戶對信息歸類組織的心智模型)最后利用邏輯推理,可以整理出適合我們產品的信息架構和任務流程。
所以真實的項目中做信息架構,絕不僅僅是將產品提供的功能、內容進行簡單的歸類分組,既要自上而下的考慮其拓展性,篩選/補充重要的節點納入信息架構。還要考慮其命名(標簽系統)用戶能否很容易的認知理解。
然后再是將所有信息按照某個或某幾個特定的維度進行分類組織(組織系統),最后再考慮呈現,以何種形式表達給大家,讓大家更容易理解。
嚴格來講,并沒有標準的信息架構表達模式,在《信息架構——超越Web設計》一書中,羅列了多種信息架構的表達方式,只要能夠向受眾傳達清楚,什么表達形式都是可以的。
▲圖22信息架構的表達方式
在互聯網項目中,大家用得比較多的形式包括:信息架構圖和邏輯流程圖。
▲圖23信息架構常見的表達形式
和交互設計原型一樣,重點不是這張圖的形式(這種圖在技術層面上誰都能畫),而是這張圖背后的(組織系統、標簽系統、導航系統、搜索系統)。
1)組織系統:選擇合適的維度及結構
組織系統:以什么維度來歸類組織這些信息,我以曾經做Material Design的組件分享為例,官網提供的組件如下圖所示:
▲圖23MD的組件
我在組織過程中,將其信息架構歸納為3大類8小類:
▲圖23MD的組件
但歸類方式肯定不止這一種形式,大家在學習的時候,可以按照自己的組織系統進行歸類整理。
以新聞呈現為例,可以按照時間維度歸類,可以按照主題維度進行歸類、可以按照媒體方的維度進行歸類,可以按照表現層視頻、圖文、文字的形式進行歸類,到底按照什么維度進行單一歸類還是進行矩陣歸類,這就是你的組織系統要解決的問題。
2)標簽系統:選擇合適的語言及圖像
標簽系統,通俗來講就是要我們對當前整個系統信息節點的命名,從而讓信息的呈現更容易識別,包括文本標簽和圖片標簽。
比如我歸類的欄、控件和視圖,用戶是否也習慣這樣的分類方式,我選擇的圖標是否能準確地表達文本標簽的涵義。
3)導航系統:選擇合適的導航結構
導航系統的內容比較多,我們將在下一堂課單獨講解
4)搜索系統:是否選擇搜索
搜索系統是我們平日最常用的查找信息的功能,它能夠幫助我們快速進行信息的檢索。雖然搜索功能非常重要,但并不是每個系統每個頁面都需要搜索。我們決策是否添加搜索需要考慮三點:
▲圖24搜索系統的考慮因素
- 內容豐富度:產品所承載的內容豐富度/復雜度低,內容少(搜索可能經常得不到結果)往往不需要提供搜索。
- 內容性質:產品提供的內容如果是偏興趣探索,瀏覽型的也可以不需要搜索;
- 搜索場景:如果搜索場景很簡單,考慮是否只用篩選或分類就能夠解決問題;反之如果搜索內容很復雜,我們還可以搜索結合篩選來更好地查找信息。
上述 3 點決定了我們是否需要考慮搜索功能。而關于搜索的具體設計,也是一個龐大的課題,我們先不做進一步的闡述。
信息架構圖是一個中間產物,他的呈現形式是相對簡單的,但這個形式背后的思考(組織系統、標簽系統、導航系統、搜索系統)是需要設計師深思熟慮的,設計師在做信息架構時,務必要將信息(有哪些信息,如何命名)和架構(如何分類組織,如何呈現)都考慮清楚,之后的框架層設計才能更清晰明確。
#專欄作家#
悅有所思,人人都是產品經理專欄作家。10年體驗設計經驗,崇尚理論指導實踐,實踐迭代理論,熱衷于學習、解構、建構、傳播交互設計、服務設計、行為設計等設計相關領域知識。
本文原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議。
贊
作者把信息架構設計講的很透徹,不過也需要設計師深思熟慮背后的設計理念
作者對信息架構設計的含義及如何實操的方法分享,非常淺顯易懂,很專業。