如何理解并應用信息架構?這篇文章帶你系統了解!

3 評論 9947 瀏覽 47 收藏 36 分鐘

合理的信息架構可以更清楚地反映出產品的核心價值,也能提升用戶對產品的認知、助推用戶的操作進行。那么,信息架構由哪些部分構成,信息架構又可以如何恰如其分地應用于產品交互設計中?本篇文章里,作者對信息架構設計做了詳細解讀,一起來看。

前言

第一次認識「信息架構」,還是剛入行的時候。當時做B端產品,經常會研究產品的信息架構,利用思維導圖工具輸出一份關于功能的結構圖。

信息架構上篇:如何理解產品的信息架構

當時信息架構主要應用在兩個方面:

1)競品分析

信息架構基本是競品分析的必備環節。主要是將競品產品功能(側重導航系統),采用腦圖的形式羅列出來(顆粒度有時粗有時細),勾畫出產品的功能體系,展示出信息組織結構。根據前輩的經驗,將架構大致會分為「寬而淺」和「窄而深」兩種形式進行一通分析,得出一個比較主觀的結論。

2)界面設計層面

在實際的設計應用時,信息架構更偏向于導航菜單的組織結構。設計師需要將產品功能清單進行結構化梳理,曾經嘗試過卡片分類法等,搭建起整個產品的導航菜單結構,并對菜單命名做出一定的優化建議。

總體來說,對信息架構的理解還是比較淺薄的。今天我們來系統地了解下信息架構的知識。

信息架構上篇:如何理解產品的信息架構

一、信息架構的定義

信息架構(information architecture,縮寫為IA)是指對某一特定內容里的信息進行統籌、規劃、設計、安排等一系列有機處理的想法。

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

——百度百科

定義都是概括性極強的,讀起來會比較晦澀難懂。但是我們可以從中獲得一些關鍵信息。

1. 對于產品

信息架構是產品信息的組織、歸類方式。需要能夠真實地反映出產品的核心價值、展現出主線功能、特色功能,提升用戶對產品的認知。

2. 對于用戶

信息架構要方便用戶理解,并能夠幫助用戶順利地找到對應的功能完成操作。在信息架構設計時,要充分考慮用戶的理解能力、操作習慣、目標內容使用頻率等因素,符合用戶認知從而提升用戶體驗。

二、信息架構與交互設計

在用戶體驗5要素中,信息架構歸屬于結構層,主要是面向信息型產品。功能型產品的結構層主要指的是交互設計。

交互設計和信息架構都強調?個重點:確定各個將要呈現給?戶的元素的“模式(patterns)”和“順序(sequences)”。交互設計關注于將影響?戶執?和完成任務的元素。信息架構則關注如何將信息表達給?戶的元素。

——《用戶體驗要素:以用戶為中心的產品設計》

信息架構上篇:如何理解產品的信息架構

兩種產品類型為什么會有交互設計和信息架構的區分呢?說一下我個人理解。

1. 信息型產品

信息型產品就是我們常見的各類網站,例如門戶網站、品牌官網、知乎、今日頭條、或者騰訊視頻等內容類產品。這些產品主要是為用戶提供各類信息,任務類操作比較少。

網站最終的任務是給予用戶足夠可用、有效的信息,確保用戶在產品中不會迷失或者無法找相應的信息入口,所以結構層的主要任務是構建符合用戶認知的信息架構,便于在框架層以此架構為基礎完成界面、導航設計。

2. 功能型產品

功能型產品更多的是中后臺管理系統,目的是幫助特定的用戶完成各種任務,包含了各種流程。在產品中用戶會有大量的操作,功能之間可能互為前置條件或者相互協同。

例如用戶在商品加購之前,需要完成登錄?;蛘吖芾韱T在增加用戶之前,需要提前設定系統用戶角色。所以對于功能型產品,除了確定信息架構,還要明確好功能之間的交互邏輯關系。

我認為在結構層中,交互設計和信息架構并不是絕對割裂的,功能型產品同樣需要制定信息架構,只不過信息架構相對固定,需要遵從用戶的業務場景、工作流程等,設計師不能根據自己的理解隨意更改。

另外隨著業務場景和功能的發展迭代,有些產品已經不能通過簡單信息型產品或者功能型產品進行劃分。例如電商網站,既要提供商品信息供用戶選購,還要提供購物車、下單、支付、物流、售后等一系列的環節,每個環節之間都是環環相扣。因此,在結構層需要信息架構和交互設計并重。

三、信息架構的構建方式

信息架構最核心的是確定產品信息的組織形式,我們可以采用以下兩種?式來建?分類體系:「自上而下」或「自下而上」。

信息架構上篇:如何理解產品的信息架構

1. 自上而下

這種分類方法從“戰略層”(產品目標)出發去考慮內容分類。即根據產品目標與用戶需求直接進行結?構設計。最先從最廣泛的、可能滿足決策目標的內容與功能開始進行分類,然后在按邏輯細分出次級分類,這樣的“主要分類”和“次級分類”就構成了“一個個空槽”,將想要的內容和功能按順序一一填入即可。

信息架構上篇:如何理解產品的信息架構

我理解這樣的方式是從產品視角出發,根據功能清單,結合用戶場景,逐級建立起信息分類形成產品的信息架構,最后將功能/內容放入到信息架構中。

這種方法比較適合B端產品,產品功能和用戶業務場景比較明確,并且是緊密結合在一起的。比如財務報銷需要包括提單、審批、支付、消息、記錄等等環節。信息架構也要按照這些場景和流程進行歸類,便于用戶理解和找尋。

此外對于C端產品,某些用戶需求和場景并是不特別明確,需要產品主動構建信息架構引導用戶需求,此時也需要自上而下建立信息架構。例如電商產品中引入短視頻,首頁的訂閱方式等,短視頻產品中的同城、興趣等功能。這些是基于用戶洞察,產品自上而下推進信息結構的優化升級。

2. 自下而上

這種分類方法是根據對“內容和功能需求的分析”?來的。先從已有的資料(或者當?站發布后將存在的資料)開始,我們把這些資料統統放到最低級別的分類中,然后再將它們分別歸屬到較??級的類別,從?逐漸構建出能反映我們的產品?標和?戶需求的結構。

信息架構上篇:如何理解產品的信息架構

當產品已經擁有了內容,但是并不明確如何進行歸類,才符合用戶的認知和需求。這是就可以采用自下而上的方法倒推,建立信息架構。對于信息量不大的產品,可以做幾版方案,找些用戶進行測試就可以得出結論。對于信息量會比較大的產品,可以采用卡片分類法,讓用戶參與其中,為信息架構設計提供參考依據。

我個人認為,在實際的應用中自上而下的創建方式居多,這種方式從產品和用戶兩個維度出發,可以搭建出比較平衡的一套信息架構。

信息架構下篇:產品信息架構知識體系進階

四、信息架構的構成

在《信息架構——超越Web設計》一書中,將信息架構定義為:

——共享信息環境的結構化設計;——數字、物理和跨渠道生態系統中的組織、標簽、搜索和導航系統的合成;

——創建信息產品和體驗的藝術及科學,以提供可用性、可尋性和可理解性;

——一種新興的實踐性科學群體,目的是把設計和建筑學的原理理導?入數字領域中。

《信息架構——超越Web設計》

這就意味著信息架構不僅僅是我們看到的導航菜單,只不過由于導航菜單是信息架構的直觀表現形式,所以常常被理解為“信息架構就是導航菜單”。

信息架構包含了4大系統:組織系統、標簽系統、導航系統、搜索系統。

信息架構下篇:產品信息架構知識體系進階

1. 組織系統

組織系統是信息架構的根基,決定了信息架構的基礎邏輯,可以拆解為組織方案與組織結構兩個模塊。

1)組織方案

組織方案就是產品信息的分類邏輯,需要根據用戶、場景和業務邏輯進行組織和定義,在產品中信息的歸屬有不同維度和標準,大致可分為精確信息和模糊信息2類。

有些信息可以按照精確的維度進行劃分。例如首字母、時間、行政區、組織結構、文件類型等。精準的信息組織方式可以保證將信息分成定義明確且互斥的區域,容易設計與維護。

信息架構下篇:產品信息架構知識體系進階

但是一些信息缺少明確的劃分標準,屬于模糊信息。例如網站欄目的劃分、電影的分類等,更多的是按照業務和用戶認知習慣確定組織形式。

常見的模糊組織方案主要有以下幾種方式:

① 主題組織方案

當我們無法按照精確分類時,可以按照用戶場景、業務邏輯歸納為符合用戶認知的主題(頻道),搭建信息架構的基礎分類。例如品牌官網的信息歸類方式。

信息架構下篇:產品信息架構知識體系進階

② 任務導向方案

任務導向的組織方案通常用在對操作要求較高的工具型產品中,信息架構的基礎分類是各種功能的集合。例如WPS工具欄就是按照任務導向分類的。

信息架構下篇:產品信息架構知識體系進階

③ 特定受眾方案

特定受眾的組織方案即根據不同類型的訪問者呈現不同類型的信息。以受眾為導向的信息組織方案會把網站切分成更小、以受眾為主的小型網站,可以在網頁上呈現特定用戶感興趣的內容,避免網頁的雜亂。

例如Boss 直聘中用戶可以擁有“牛人”和“Boss”兩種角色身份,信息內容、組織形式有著明顯的差別。

信息架構下篇:產品信息架構知識體系進階

另外隨著老齡化人口比重越來越大,無障礙設計成為了產品設計的重要組成部分。無障礙設計并不僅僅是將字體變大,在產品內容、信息結構上也會有一定的優化調整,內容更加精簡、聚焦于產品核心功能。

信息架構下篇:產品信息架構知識體系進階

總的來說,特定受眾方案應用還是比較少的。有的C端產品會根據用戶角色劃分為多個產品,例如滴滴出行有乘客端和司機端兩款產品。

而在B端產品中,角色劃分通常比較多,并且不同的角色間有著比較強的業務關聯。因此用戶會共用一個產品,通過角色權限區分不同的信息架構。

④ 混合方案

在一款產品中,單一的分類模式很難滿足所有場景的需要,信息架構應該根據實際情況,靈活地采用多種方式混合分類。

信息架構下篇:產品信息架構知識體系進階

2)組織結構

組織結構指的信息架構內在的邏輯結構,分為以下四種組織方式:

信息架構下篇:產品信息架構知識體系進階

① 層級結構

在層級結構中,節點與其他相關節點之間存在父級/子級的關系。子節點代表著更狹義的概念,從屬于代表著更廣義類別的父節點。不是每個節點都有子節點,但是每個節點都有一個父節點,一直往上直到整個結構的父節點。

信息架構下篇:產品信息架構知識體系進階

層級結構是信息架構中最常見的形式,信息多級逐層展開。因此具有很強的拓展性和包容性,可以承載復雜的信息量。并且節點之間是相互獨立的,內容的歸屬比較明確,構建的單個信息空間也比較清晰簡潔。

層級結構會存在廣度和深度的問題。在信息總量一定的情況下,可以分為「寬而淺」和「窄而深」2種不同的形式

「寬而淺」的結構意味著父節點越多,子節點層級就會變少。「窄而深」的結構意味著父節點比較少,子節點的層級就會變多。

信息架構下篇:產品信息架構知識體系進階

信息架構增加廣度,意味著信息的入口增多,用戶不太容易辨別目標點的歸屬,就會增加尋找和記憶成本。最上層的信息入口,我們一般會遵循7±2 原則,Web端產品控制在7個以內,移動端產品控制在5個以內。

子節點層級一般為3層,最多不超過5層。過深的層級會造成信息難以查找,同時用戶到達目標點的路徑會變長,操作成本也會相應的增加。

② 矩陣結構

矩陣結構允許用戶在節點與節點之間沿著兩個或更多的“維度”移動。由于每一個用戶的需求都可以和矩陣中的一個“軸”聯系在一起,因此矩陣結構通常能幫助那些“帶著不同需求而來”的用戶,使他們能在相同內容中尋找各自想要的東西。

信息架構下篇:產品信息架構知識體系進階

矩陣式結構是一種多維度結構,可以用戶在相同的內容中按照個人需求找尋自己所需的信息,最典型的就是產品首頁信息。作為產品內容聚合、分發的頁面,可以滿足用戶的不同需求。目前不少C端產品都采用的是「主題+推薦」的模式,通過算法實現產品內容與用戶需求的高度匹配。

B端首頁則是依靠「角色+場景」構建起產品的矩陣結構,實現功能的快捷直達,以及重要信息的清晰展示。

信息架構下篇:產品信息架構知識體系進階

另外矩陣式結構還體現在鏈路關系上,沒有層級和中心的概念,更加強調信息之間的互聯互通。通過這種連接關系甚至可以將跨領域、跨層級的信息關聯起來。

比較典型的就是電商App,通過商品詳情頁可以到達店鋪、到達同類推薦產品、到達客服、到達購物車、到達活動頁面,甚至是搭配商品等等。這種結構具有很強的自由度和靈活性,既可以避免用戶行為進入「死胡同」,又可以通過多重的信息連接,豐富產品的運營場景,帶給用戶更多的可能。

當然這種結構的前提是信息必須是關系緊密的功能場景,否則信息會出現錯亂,并增加用戶的認知負擔。

③ 自然結構

自然結構不會遵循任何一致的模式。節點是逐一被連接起來的,同時這種結構沒有太強烈的分類概念。自然結構對于探索一系列關系不明確或一直在演變的主題是很合適的。但是自然結構沒有給用戶提供一個清晰的指示,從而讓用戶能感覺他們在結構中的哪個部分。

信息架構下篇:產品信息架構知識體系進階

自然結構具有隨機性和不確定性,隨著算法的提升,這種結構應用越來越廣泛。最常見的就是各種推薦信息流,電商平臺、音視頻、資訊平臺等產品都主打推薦頻道,透過投喂的方式,吸引沒有明確需求的用戶,給他們更多的選擇。

不過自然結構的隨機性意味著用戶無法建立固定的信息架構認知,所以自然結構不會單獨存在,只是對信息架構的補充。另外在B端產品中,用戶通常具有明確的任務和目標,所以自然結構并不適用于B端產品。

④ 線性結構

線性結構來自于你最熟悉的線下媒體。連貫的語言流程是最基本的信息結構類型,而且處理它的裝置早已被深深地植入我們的大腦中了。書、文章、音像和錄像全部都被設計成一種線性的體驗。

信息架構下篇:產品信息架構知識體系進階

線性結構是比較單一的信息結構,信息有先后順序要求,逐層向下遞進,并且沒有交叉。這種組織形式決定了線形結構主要用在簡單產品或者產品信息構架的末端場景中。

例如在微信讀書中,打開書籍后用戶只能一頁頁翻看,不會與其他書籍有交叉關聯。在OA,電子郵箱等產品中,每一個流程,每一封郵件都是線性的、相互獨立的,信息之間不會增加不必要的關聯。

2. 標簽系統

標簽系統指的是整個產品信息節點的命名體系,靜態展示了產品信息架構的具體內容,包含文字和圖片(圖標)2種信息。標簽系統需要符合用戶的認知習慣,減少用戶的學習成本。在日常設計工作中,標簽系統需要注意以下3個方面:

1)標簽內容的準確性

標簽定義時,需要準確地表達信息的內容項。舉兩個例子:

在C端領域為了提高用戶的點擊率,經常會遇到一些信息融合累加的設計形式。例如宣傳用語是“立享300元福利”,用戶點開一看,或許只是10張優惠券。這種設計利用了用戶“貪便宜”的心理,已經成為了行業約定俗成的表達形式,倒也可以接受。

不過之前有個營銷彈窗的案例,用戶點擊后跳轉到活動頁面,然后逐個領券。彈窗中按鈕有兩種方案,A方案是“開心收下”,B方案是“立即領取”。

信息架構下篇:產品信息架構知識體系進階

雖然后臺有歷史數據顯示,“開心收下”的文案用戶點擊率比較高,并不意味著這個文案可以用在所有場景下?!伴_心收下”意味著完成領取并入賬,“立即領取”則是需要繼續操作才能完成領取,兩者適用于不同的場景。

標簽系統首先要考慮表達的準確性,要符合用戶的心智模型以及所代表的行為模式。

2)優先選用行業通用的術語或圖標

尼爾森十大可用性原則中要求「貼近用戶真實環境」。在標簽定義的時候,盡量使用目標用戶的語言。尤其在B端產品中,不少名詞對設計師而言比較陌生。但是對專業領域的用戶,這些都是日常工作術語,早已達成了共識。如果做出改變,反而會增加用戶認知成本。

所以設計師要克服自己的認知缺陷。一方面要了解業務、通過用戶調研,建立更符合用戶認知的標簽系統,另一方面也可以參考競品來學習和應用信息標簽。

為了保證新、老用戶的快速了解系統,最大程度地降低學習成本,可以在標簽旁邊添加注釋進一步說明。例如英文縮寫術語、容易引起歧義的指標、不易理解的標簽等等。

對于圖標,有些是各個產品通用的形式,用戶很容理解。例如「設置」、「刪除」、「幫助」等。還有相當大一部分圖標很難準確表達出內在信息,就需要增加文字信息,輔助信息表達。

3)標簽信息簡潔高效

標簽系統既要完整表達信息,也要注意信息的簡潔高效。

例如下圖中菜單命名,大量重復的信息增加了信息識別的難度,并且名稱字數沒有控制導致內容截斷,也會增加用戶的操作成本。

信息架構下篇:產品信息架構知識體系進階

3. 導航系統

導航系統是信息架構的動態交互邏輯。一方面能夠告訴用戶當前所處于的位置,頁面信息的層級歸屬,讓用戶不會在產品中迷失方向。另一方面導航系統實現了信息的動態聯接,用戶可以依靠導航系統在不同的層級結構中「閃轉騰挪」,高效操作。

導航系統分為4大類:全局導航、局部導航、情景式導航、輔助導航。

信息架構下篇:產品信息架構知識體系進階

1)全局導航

全局導航是面向整個產品的導航形式,通常位于系統的整體框架中,實現在所有頁面中可見、可操作。所以全局導航也只是對產品的核心、關鍵功能和部分即時功能開放。

例如信息框架中的一、二級的信息,或者消息、用戶管理這類即時、強管理的內容。

2)局部導航

局部導航是全局導航的補充,對于復雜的產品,局部導航非常有必要,避免全局導航變得臃腫復雜,有利于信息逐級有序地展開。

3)情景式導航

情景式導航又稱為上下文導航,指的是根據當前場景或者內容產生的信息鏈接關系。例如文章內的超鏈接,或者是標題信息等,點擊可以跳轉新的網頁、下載文件或指定某個對象等。情景導航中可以承載產品外部的內容鏈接,不必完全是本產品中的內容。

4)輔助導航

輔助導航包括網站地圖,網站索引,網站指南等輔助類型的導航。

4. 搜索系統

搜索系統解決的是大容量、高密度信息的定位問題。大到全產品范圍內的搜索,小到當前列表搜索,基本成了產品中的必備功能。即使有些產品中搜索功能,用戶的使用頻率不高,也是需要配備的,方便用戶的不時之需。

「搜索」系統對外呈現或許是一個帶著圖標的輸入框,甚至只是一個圖標。但是操作則是一個多種狀態的融合的交互過程,包括了輸入前、輸入中、搜索結果展示等內容。系統比較復雜,大家可以去找一些專門的文章學習,也可以看一下我之前的文章《關于搜索設計中3個原則,你知道嗎?》。

5. 小結

以上就是信息架構的4大組成系統。信息架構的最終目標是為了讓用戶能夠更快速地獲取信息。在實際應用過程中,可以根據產品類型,用戶群體做出內容取舍。

值得注意的是,信息架構最重要的標準,不是“整個過程一共需要多少步驟”,而是“用戶是否認為每一個步驟都是合理的”,以及“當前的步驟是否自然地延續了上一個步驟中的任務”。

五、信息架構的影響因素

信息架構是為產品和用戶服務的。因此信息架構的影響因素主要是來自于這兩個方面。

1. 產品視角

1)產品目標及定位

同類型產品的目標、定位、用戶群體并不是完全相同的,在各自的細分領域形成了各自的差異化優勢。這些都會直接和間接地影響產品的信息架構。

例如國內3大電商平臺的主導航基本一致,但也不是完全相同,大家可以體會和思考下其中的差別。

信息架構下篇:產品信息架構知識體系進階

2)產品類型

上面不少案例提及了B端和C端產品,由于產品類型、適配終端、產品目標等方面的影響,信息架構有著比較明顯的差異。同樣都是C端產品,購物類產品重搜索與推薦,金融證券類產品則是重功能導向,界面看似一致的,但是信息架構中組織系統、搜索系統背后的邏輯也存在較大差異。

3)產品復雜度

簡單產品的信息架構也會比較簡單,或許線性的組織結構就可以搭建起核心業務的信息架構,例如QQ郵箱。

復雜產品的信息架構會運用多種組織結構方式,相關的標簽系統、導航系統、搜索系統都會加強。例如云類產品的標簽系統,既要考慮整體的一致性,又要明確各個產品間的差別。搜索功能也不僅限于產品功能,還會拓展到活動優惠、幫助文檔等內容,讓用戶搜索得更徹底。

信息架構下篇:產品信息架構知識體系進階

2. 用戶視角

1)用戶需求

產品不能一味的只考慮自己的產品目標,還要考慮用戶的接受程度。就好比舞臺上高雅的古典歌劇,只顧展示自己的專業能力,而底下觀眾根本聽不懂唱的內容,必然無法引起觀眾興趣。

如果不重視用戶需求,產品設計時,只顧著各種高級能力輸出、各種復雜的產品流程,但是從沒有考慮用戶是否需要這樣的產品,帶來的結果就是信息架構的無序擴張、內容龐雜、過程混亂,最終成為產品體系的「自嗨」。

2)用戶認知能力

不同的用戶之間認知能力有很大的差別,信息架構需要面向目標客戶群體完成信息架構。

例如之前做過門店后臺管理系統改版設計,通過前期調研發現,店員們年齡偏大、學歷不高,老版本的信息架構雖然足夠的大而全,但是核心功能并不凸顯,用戶操作流程也被拉長。因此在改版設計時,信息架構做了精簡,優先聚焦打造用戶核心任務,減少信息的復雜度。

六、信息架構的設計原則

將信息架構抽離出來,其實包括了組織體系、展示形式和操作體驗3個環節。相應的也會有3個設計原則。

1. 延展性

產品是不斷成長迭代的,信息架構需要具有兼容性和彈性,可以適應多個層級的擴展或精簡,保證一定迭代周期內的架構穩定。頻繁變動的信息架構必然會帶來產品的研發成本提高,并且增加用戶的學習成本。

2. 易學性

信息架構需要有一套準確的分類標準,能夠指導后續架構的優化迭代,也可以便于用戶理解和學習。細分下來包含了邏輯性和一致性兩個方面。邏輯性則體現在信息之間的關聯關系,實現用戶鏈路的準確、高效。一致性體現在分類方式、分類結構等方面,便于用戶認知。

3. 易用性

上文提到過,信息架構的的廣度和深度在一定程度上決定了操作體驗。設計時要做好信息架構的平衡性,避免只是從業務角度出發,出現十幾個一級導航菜單并存的局面。

七、寫在最后

信息架構是個復雜的系統,并不是設計師個人的工作,也不應該從零開始構建。而是在產品功能架構或者產品規格清單基礎上,從用戶需求和場景出發,梳理出來的符合用戶體驗邏輯的產品骨架。

信息架構直接決定了后續產品設計的組織脈絡,因此準確有效的信息架構是產品戰略落地過程中重要的一環。設計師需要擁有相關的知識和能力,才能在設計工作中產出合理的設計方案。

信息架構內容很多,文章是筆者個人的觀點,難免存在不足之處,歡迎大家交流指正。

專欄作家

子牧先生。公眾號:子牧UXD(HelloDesign),人人都是產品經理專欄作家。產品體驗設計師。8年互聯網行業經驗,擅長體驗設計思維、設計方法論、交互設計研究。

本文原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 文章長的不想看了

    來自北京 回復
    1. 確實有點長了~,可以先收藏,有時間了慢慢看??

      來自江蘇 回復