產(chǎn)品經(jīng)理和交互設計師的日常工作中經(jīng)常接觸到信息架構(gòu)圖，本文從產(chǎn)品設計的層面，梳理介紹信息架構(gòu)圖的定義、發(fā)揮的作用與價值、與產(chǎn)品功能結(jié)構(gòu)圖和產(chǎn)品結(jié)構(gòu)圖之間的區(qū)別，以及繪制信息架構(gòu)圖需要注意的事項。

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

信息架構(gòu)的核心是探討用戶對信息的認知過程，對于產(chǎn)品設計而言，信息架構(gòu)關注的是“呈現(xiàn)給用戶合理且有價值的信息”。

清晰明確的信息架構(gòu)圖，能夠在界面層面清楚的表達產(chǎn)品的功能模塊和整體的邏輯路徑，有利于產(chǎn)品設計者從宏觀角度審視：不同業(yè)務模塊如何落實到界面結(jié)構(gòu)，以及不同功能模塊之間的關聯(lián)性。

二、信息架構(gòu)圖、產(chǎn)品功能結(jié)構(gòu)圖、產(chǎn)品結(jié)構(gòu)圖三者的區(qū)別與聯(lián)系

這里大家需要搞清楚”信息架構(gòu)圖”與“產(chǎn)品功能結(jié)構(gòu)圖”、“產(chǎn)品結(jié)構(gòu)圖”之間的區(qū)別與聯(lián)系：參見下圖示意。

我們可以根據(jù)《用戶體驗要素》中對產(chǎn)品設計整個過程的分層，理解三者之間的關聯(lián)性。

產(chǎn)品功能結(jié)構(gòu)圖的重點是梳理產(chǎn)品的功能邏輯與功能模塊。

這個階段各功能模塊及其子功能之間，可能沒有體現(xiàn)必然的關聯(lián)性，這部分有待處理的任務就會交給信息架構(gòu)圖完成，產(chǎn)品經(jīng)理在構(gòu)思需求時經(jīng)常需要繪制功能結(jié)構(gòu)圖。

信息架構(gòu)圖的重點是梳理具體頁面及頁面的字段信息。

具體到界面時，頁面之間的關聯(lián)需要清晰的呈現(xiàn)出來，這個階段也是為繪制原型、信息排版布局打基礎。交互設計師在一些項目中輸出交互稿之前，需要提前繪制信息架構(gòu)圖。

產(chǎn)品結(jié)構(gòu)圖囊括了產(chǎn)品的功能與信息，同時也可以在圖中示意功能之間的邏輯跳轉(zhuǎn)關系。

可以簡單用一個公式表達：產(chǎn)品結(jié)構(gòu)圖=產(chǎn)品功能結(jié)構(gòu)圖+產(chǎn)品信息架構(gòu)圖。

三、信息架構(gòu)圖的作用與價值

1. 產(chǎn)品設計人員為什么使用信息架構(gòu)圖

• 競品分析時需要通過繪制信息架構(gòu)圖快速了解競品的功能模塊和界面設計結(jié)構(gòu)。
• 從0到1打造一款產(chǎn)品時，明確的信息架構(gòu)脈絡是必要的前提條件。
• 接手某款產(chǎn)品的日常迭代工作時，首先應該清楚所做的業(yè)務和功能點在產(chǎn)品架構(gòu)中的位置及重要程度。

2. 信息架構(gòu)圖在產(chǎn)品設計中的價值

《用戶體驗要素》這本書中將產(chǎn)品設計的過程進行了分層，在不同層面有不同職能人員關注不同的產(chǎn)品架構(gòu)，參見下圖：

戰(zhàn)略層解決的是兩個最基本問題，以及他們之間的權(quán)衡關系：“產(chǎn)品目標是什么？用戶需求是什么？”

因此，戰(zhàn)略層關注產(chǎn)品最核心的“業(yè)務架構(gòu)”。

范圍層是將在戰(zhàn)略層確定的產(chǎn)品目標和用戶需求，轉(zhuǎn)變成產(chǎn)品應該提供給用戶怎樣的內(nèi)容和功能。所以，范圍層關注產(chǎn)品的“內(nèi)容與功能架構(gòu)”。

而結(jié)構(gòu)層是在需求和功能都明確的情況下，將這些分散的內(nèi)容與功能進行有效組織，最終形成一個合理且有價值的整體，這種形式反映在界面上的可視化表達便是“信息架構(gòu)圖”。

四、繪制信息架構(gòu)圖需要注意的事項

1. 按照總分結(jié)構(gòu)確定關鍵的一級節(jié)點

參見下圖，比如我們要繪制一款移動App的信息架構(gòu)圖，那么主體自然是這款應用，其中關鍵的一級節(jié)點是指這款應用最主要的信息模塊，關鍵節(jié)點是圍繞主體中心點拓展開的。

通常一級節(jié)點的個數(shù)不會太多，例如目前移動App的各個功能是圍繞底部導航tab的數(shù)量展開的，我們在繪制時可以將底部tab作為一級節(jié)點，其余功能及內(nèi)容囊括在這幾個一級節(jié)點中。

2. 先繪制單個一級節(jié)點模塊的信息架構(gòu)圖，之后再逐個完善

將上圖中一級節(jié)點“功能模塊1”的內(nèi)容繪制之后，再繼續(xù)繪制其余的信息模塊。

由于頁面中某個主功能可能包含多個子功能，順延至某個子功能也有可能包含多個子子功能，以此類推可能延伸的節(jié)點較多。因此我們此處需要注意：

• 依據(jù)我們的需求確定繪制的層級。比如下圖中信息模塊1繪制到了第4級節(jié)點。
• 一般繪制層級達到5級左右，基本涵蓋了產(chǎn)品信息架構(gòu)的主體界面。

3. 若某個頁面在不同的一級節(jié)點內(nèi)出現(xiàn)，建議明確標識

某個頁面或功能經(jīng)常在一個應用內(nèi)由不同的路徑觸達，比如電商應用中“商品詳情頁”就是許多不同路徑入口觸達的最終落地頁面。因此在繪制信息架構(gòu)圖時特別注意以下兩點：

• 該功能只需在某個信息模塊內(nèi)展開即可，當其他信息模塊也用到時，只填寫名稱無需再次展開。
• 不同的一級節(jié)點信息模塊內(nèi)，使用到相同的頁面時，建議明確標識，以便快速辨識。

總結(jié)

交互設計師在項目推進過程中扮演著承上啟下的作用，既要理解和分析上游的業(yè)務邏輯與功能點，同時也要在界面的信息呈現(xiàn)上結(jié)合用戶使用體驗，向下游輸出清晰明確的信息架構(gòu)圖，更需要兼顧界面的可擴展性。

#專欄作家#

Viksea，微信公眾號：Viksea的設計思考（ID：viksea-ux），人人都是產(chǎn)品經(jīng)理專欄作家。關注電商領域產(chǎn)品業(yè)務和用戶體驗，擅長邏輯分析。

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

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