2023年交互深耕-B端設(shè)計(jì)師要懂的信息架構(gòu)

交互深耕-B端設(shè)計(jì)師要懂的信息架構(gòu)信息架構(gòu)這篇是本人在現(xiàn)階段覺(jué)得較難學(xué)習(xí)與闡述的學(xué)問(wèn)點(diǎn)，網(wǎng)上關(guān)于信息架構(gòu)的學(xué)問(wèn)內(nèi)容也是參差不齊。在學(xué)習(xí)與探究的過(guò)程中查閱了許多資料，反復(fù)修改多次，盡量用直白的語(yǔ)言結(jié)合實(shí)例來(lái)闡述信息架構(gòu)。名目如下：

大家可以依據(jù)上述名目來(lái)進(jìn)行選擇性閱讀，當(dāng)然全文閱讀也是極好的～

一、信息架構(gòu)基本認(rèn)知

1.前言

這篇文章的起源，來(lái)源于最近看到的話題“B端設(shè)計(jì)師會(huì)被組件庫(kù)取代嗎？”。從表面上看，在組件庫(kù)越來(lái)越完善的時(shí)代，許多頁(yè)面設(shè)計(jì)依靠組件庫(kù)就能夠快速搭建。

那么在這種狀況下，B端設(shè)計(jì)師存在的意義和價(jià)值究竟體現(xiàn)在哪里呢？其實(shí)B端設(shè)計(jì)的重點(diǎn)并不在頁(yè)面的視覺(jué)上，視覺(jué)只是作為設(shè)計(jì)師最終輸出成果的一小部分。個(gè)人認(rèn)為B端設(shè)計(jì)師工作重心體現(xiàn)在做「正確的設(shè)計(jì)」，比如以下幾個(gè)方面：

這個(gè)設(shè)計(jì)能否完成對(duì)應(yīng)的商業(yè)目標(biāo)和產(chǎn)品目標(biāo)；我們的信息呈現(xiàn)是否合理以及能否解決當(dāng)前需求；用戶能否在頁(yè)面上快速找到想要的信息。而想要弄清晰并解決上述這些問(wèn)題，在眾多的話題闡述之下，我發(fā)覺(jué)其論述本質(zhì)上都逃離不了「信息架構(gòu)」這個(gè)概念。因此我認(rèn)為設(shè)計(jì)師都需要對(duì)這個(gè)概念有充分的認(rèn)知，這能夠關(guān)心我們做出正確且精彩的設(shè)計(jì)。

2.信息架構(gòu)概念

關(guān)于信息架構(gòu)的概念，在百科上面的定義大部分都比較晦澀難懂，比如百科的解釋：

信任大部分人都很難明白其中描述的意思。在這里換種思路，將信息架構(gòu)拆分為信息與架構(gòu)去理解。

信息指的是內(nèi)容的載體，常見的文字、圖像等都是信息；架構(gòu)的含義則形容對(duì)應(yīng)的組織和結(jié)構(gòu)。那么信息架構(gòu)就是將信息通過(guò)肯定的形式組織起來(lái)，然后呈現(xiàn)出來(lái)。其本質(zhì)就是討論信息的表達(dá)與傳遞。

通俗點(diǎn)講，信息架構(gòu)就是讓用戶可以更簡(jiǎn)單的理解我們的產(chǎn)品，讓用戶在使用我們的產(chǎn)品時(shí)可以更順當(dāng)、更自然。因此信息架構(gòu)沒(méi)有一個(gè)詳細(xì)的呈現(xiàn)形式，它更多的是體現(xiàn)在產(chǎn)品設(shè)計(jì)的各方面。詳細(xì)主要表現(xiàn)為組織系統(tǒng)、標(biāo)簽系統(tǒng)、導(dǎo)航系統(tǒng)和搜尋系統(tǒng)。

二、為什么需要信息架構(gòu)

為什么需要信息架構(gòu)？我們都知道B端產(chǎn)品設(shè)計(jì)的核心是「降本提效」，在設(shè)計(jì)這一側(cè)的可以將其理解為降低認(rèn)知成本，提升使用效率。

降低認(rèn)知成本需要我們更好的表達(dá)信息，讓用戶能看明白我們的產(chǎn)品能夠做什么，如何用；提升使用效率需要提升信息的傳遞效率，讓用戶能夠很簡(jiǎn)單的找到需要的功能；

而信息架構(gòu)從本質(zhì)上來(lái)講也正是討論信息的表達(dá)和傳遞。因此我們需要通過(guò)它來(lái)關(guān)心我們更好的完成B端產(chǎn)品設(shè)計(jì)。假如沒(méi)有信息架構(gòu)來(lái)作底層支撐，那么我們?cè)陧?yè)面上看到的可能就只有功能的堆疊，讓產(chǎn)品陷入難以上手或者不知道怎么用的尷尬境地。

一個(gè)強(qiáng)大信息架構(gòu)是產(chǎn)品質(zhì)量的保證，是作為設(shè)計(jì)支撐點(diǎn)的骨架，它會(huì)削減可用性問(wèn)題，提升整體導(dǎo)航性，制造對(duì)用戶友好的體驗(yàn)。比如舉一個(gè)工具層面的例子：

PS的工具欄堆疊在界面各個(gè)部分，而Figma的工具欄則集中在右側(cè)且只消失當(dāng)前需要的功能。很明顯Figma在信息架構(gòu)中的信息組織部分做得更為友好，PS則會(huì)顯得遜色一些。這也是我們?cè)趯W(xué)習(xí)PS的時(shí)候會(huì)顯得比較吃力的緣由之一。

可以說(shuō)良好的信息架構(gòu)是高效用戶體驗(yàn)的基礎(chǔ)。視覺(jué)元素，功能，交互和導(dǎo)航都是在信息架構(gòu)的基礎(chǔ)上構(gòu)建的。因此想要做出體驗(yàn)好且合理的頁(yè)面設(shè)計(jì)，我們就需要參加到信息架構(gòu)這個(gè)過(guò)程中來(lái)，和產(chǎn)品一起完成對(duì)應(yīng)架構(gòu)的梳理。而不是只完成從原型到頁(yè)面這個(gè)部分。

三、怎樣設(shè)計(jì)合理的信息架構(gòu)

假如想要搭建一個(gè)好的建筑，我們需要知道其建筑的目的，是根據(jù)什么樣的結(jié)構(gòu)搭建，內(nèi)部有哪些系統(tǒng)，以及最終呈現(xiàn)的模樣。

那么信息架構(gòu)也同理，我們首先需要知道信息是為了什么目標(biāo)服務(wù)，然后我們通過(guò)怎樣的結(jié)構(gòu)來(lái)組織這些信息，以及過(guò)程中會(huì)用到的信息元素，最終如何呈現(xiàn)它們。這都是我們?cè)诖罱ㄐ畔⒓軜?gòu)中需要進(jìn)行的必要步驟。

假如某些環(huán)節(jié)沒(méi)有做好或者沒(méi)有了解透徹，那么在輸出信息架構(gòu)時(shí)往往會(huì)消失方向或者策略上的問(wèn)題。接下來(lái)我們看看這些步驟是如何詳細(xì)呈現(xiàn)的。

1.信息獵?。合壤斫鈽I(yè)務(wù)，再談架構(gòu)

B端行業(yè)對(duì)于業(yè)務(wù)理解的要求是比較高的，只有在理解業(yè)務(wù)的基礎(chǔ)上，將業(yè)務(wù)需求轉(zhuǎn)化為對(duì)應(yīng)的設(shè)計(jì)目標(biāo)，我們才能夠輸出合理的信息架構(gòu)方案。

個(gè)人認(rèn)為理解業(yè)務(wù)的基礎(chǔ)，就是能夠用一句話講清晰當(dāng)前設(shè)計(jì)的產(chǎn)品。這句話可以描述為：誰(shuí)在什么地方想要完成什么目標(biāo)。比如「用戶想要不出門就能夠吃到東西」，這就是外賣軟件供應(yīng)的產(chǎn)品服務(wù)。

雖然看上去這句話很簡(jiǎn)潔，但其中包括了三個(gè)要素：用戶、場(chǎng)景和目標(biāo)。因此我們?cè)诜治龊褪崂順I(yè)務(wù)的過(guò)程中首先要弄清晰的就是這三個(gè)要素。

（1）用戶：分清購(gòu)買者與使用者

用戶永久是排在第一位的，也是我們首先需要弄清晰的。在B端設(shè)計(jì)中，本質(zhì)上可以分為兩類角色：客戶和用戶。比如我們常用的釘釘或企業(yè)微信，購(gòu)買客戶是企業(yè)，實(shí)際用戶是員工。

對(duì)于企業(yè)：「我想要有一款軟件可以更好的管理員工」

對(duì)于員工：「我想要這款軟件能夠更好地提高工作效率」

客戶打算了我們產(chǎn)品的購(gòu)買（部分狀況下也兼顧使用），而用戶則打算了后續(xù)產(chǎn)品的復(fù)購(gòu)率。因此在業(yè)務(wù)理解中，我們需要弄清晰當(dāng)前產(chǎn)品所處的服務(wù)階段，比如初期為了打開市場(chǎng)確定更傾向于客戶，而中后期為了提高產(chǎn)品的使用體驗(yàn)又會(huì)偏向于用戶。

因此我們首先需要弄清晰的就是當(dāng)前產(chǎn)品是為哪些「目標(biāo)用戶」服務(wù)，這也就打算了我們?cè)谠O(shè)計(jì)信息架構(gòu)時(shí)對(duì)應(yīng)的不同側(cè)重點(diǎn)。

（2）場(chǎng)景：需求源于場(chǎng)景

場(chǎng)景是指需求產(chǎn)生的某種條件，這個(gè)條件包括但不限于環(huán)境、時(shí)間、地點(diǎn)、空間等，只有上述條件滿意，這個(gè)需求才能成立。這里可以把場(chǎng)景理解為產(chǎn)生該問(wèn)題的緣由。

比如當(dāng)用戶提出「她需要一件衣服」，那么我們就需要弄清晰用戶為什么需要添加衣服，是她感冒了自身覺(jué)得冷還是由于外界環(huán)境冷。這兩種場(chǎng)景涉及到的解決方案是完全不一樣的。

在平日的工作中我們可以通過(guò)以下兩種方式來(lái)更好的了解業(yè)務(wù)場(chǎng)景：

通過(guò)業(yè)務(wù)方文檔進(jìn)行業(yè)務(wù)背景的初步理解。業(yè)務(wù)文檔中一般都會(huì)包括需求背景，我們可以通過(guò)文檔進(jìn)行初步了解。

通過(guò)業(yè)務(wù)溝通進(jìn)一步加深業(yè)務(wù)背景的理解。由于許多B端業(yè)務(wù)離設(shè)計(jì)師本身的生活比較遠(yuǎn)。

因此對(duì)于需求背景中不理解或者比較模糊的部分，我們可以通過(guò)與業(yè)務(wù)方或產(chǎn)品多次溝通來(lái)挖掘最底層的背景。

究竟需求背景是理解業(yè)務(wù)的重要步驟，我們只有知道需求產(chǎn)生的緣由，才能夠針對(duì)性的給出解決方案。

（3）目標(biāo)：業(yè)務(wù)目標(biāo)和設(shè)計(jì)目標(biāo)

目標(biāo)打算了我們的產(chǎn)品最終的方向。我們首先接觸到的一般都是業(yè)務(wù)目標(biāo)，而我們要做的就是將業(yè)務(wù)目標(biāo)轉(zhuǎn)化為我們此次的設(shè)計(jì)目標(biāo)。

①業(yè)務(wù)目標(biāo)

業(yè)務(wù)目標(biāo)就是此次業(yè)務(wù)想要解決的實(shí)際問(wèn)題，它通常是一個(gè)宏觀上的描述。比如打車軟件的業(yè)務(wù)目標(biāo)簡(jiǎn)潔概括來(lái)講就是讓用戶能夠更快速地打到車，削減等待焦慮。我們一般通過(guò)文檔或者溝通來(lái)了解該目標(biāo)。

②設(shè)計(jì)目標(biāo)

設(shè)計(jì)目標(biāo)是我們基于業(yè)務(wù)目標(biāo)而給出的設(shè)計(jì)策略，是一種更詳細(xì)的實(shí)現(xiàn)方式。比如我們要讓用戶快速的打到車，那么這個(gè)時(shí)候我們的設(shè)計(jì)目標(biāo)就是通過(guò)將用戶位置和司機(jī)位置進(jìn)行快速匹配，并通過(guò)超時(shí)補(bǔ)貼紅包的方案來(lái)降低用戶焦慮。從而實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。

而這一過(guò)程涉及到的信息點(diǎn)就有：司機(jī)位置、乘客位置、等車時(shí)間、補(bǔ)貼金額等元素，并需要思索它們之間的關(guān)系和呈現(xiàn)方式。

可以發(fā)覺(jué)從業(yè)務(wù)目標(biāo)轉(zhuǎn)化到設(shè)計(jì)目標(biāo)這個(gè)過(guò)程，實(shí)際上就是在確定功能和信息點(diǎn)的過(guò)程。這樣才能讓我們更好地設(shè)計(jì)信息架構(gòu)。

2.信息架構(gòu)核心：信息組織

從前文可以看出我們會(huì)在整體設(shè)計(jì)過(guò)程中消失許多的信息元素。假如不經(jīng)過(guò)對(duì)應(yīng)的組織和處理，直接堆疊在一起，那么信息含義會(huì)比較亂且難以調(diào)用。比如下方：

而右側(cè)圖片信息的組織過(guò)程可以理解為通過(guò)將零散的數(shù)據(jù)信息進(jìn)行分類，再以某種結(jié)構(gòu)化的形式將它們重新組合排布的過(guò)程，直白一點(diǎn)就是先分類，再結(jié)構(gòu)化呈現(xiàn)。我用一張圖來(lái)表明這個(gè)過(guò)程：

那么這個(gè)過(guò)程中「信息組織」和「結(jié)構(gòu)呈現(xiàn)」究竟應(yīng)當(dāng)怎么做，也就是接下來(lái)要講的組織方式和結(jié)構(gòu)類型。

（1）組織方式：模糊分類和精確分類

組織方式可以分為精確分類和模糊分類。精確分類就是我們會(huì)利用物體本身物理屬性來(lái)進(jìn)行分類，比如位置、字母表、時(shí)間、類別、層級(jí)等方式進(jìn)行組織。一些工具類應(yīng)用例如滴答清單內(nèi)容信息都是根據(jù)時(shí)間來(lái)進(jìn)行組織的：

而模糊分類則是根據(jù)更為主觀的規(guī)律對(duì)信息進(jìn)行分類,如主題、任務(wù)、用戶、隱喻等來(lái)進(jìn)行歸類，比如我們常用的APP商城是根據(jù)不同的主題類別來(lái)進(jìn)行區(qū)分的。

但在許多時(shí)候，產(chǎn)品傾向于將兩種組織方式結(jié)合起來(lái)形成復(fù)合型組織方式，從而能夠使我們的整體組織形式更符合用戶的使用習(xí)慣。比如藍(lán)湖的信息組織，其中既包含了模糊分類（按使用類型等分類），也包含了精確分類（按上傳文件時(shí)間等）。

其實(shí)在大部分B端產(chǎn)品中，大都根據(jù)模糊分類來(lái)進(jìn)行處理，比如根據(jù)任務(wù)、流程等方式。而精確分類更多用于在頁(yè)面內(nèi)的局部信息模塊，比如創(chuàng)建時(shí)間和文件大小等。

歸根結(jié)底，我們分類方式的選擇需要結(jié)合我們前面提到的用戶、場(chǎng)景和目標(biāo)，這樣才能讓我們的分類更具勸說(shuō)力。

（2）組織結(jié)構(gòu)：選擇合適的結(jié)構(gòu)類型

當(dāng)信息根據(jù)分類維度組織后，我們接下來(lái)就是把整體信息進(jìn)行結(jié)構(gòu)化，這樣才可以將信息整體連接起來(lái)并呈現(xiàn)出來(lái)。一般分為以下四種組織方式：

①層級(jí)結(jié)構(gòu)（最重要的結(jié)構(gòu)）

這是信息架構(gòu)中最為常見的結(jié)構(gòu)，也是比較符合用戶認(rèn)知的結(jié)構(gòu)。有時(shí)也稱為「樹狀結(jié)構(gòu)」。以子父節(jié)點(diǎn)的形式一層一層延展。

層級(jí)結(jié)構(gòu)的優(yōu)勢(shì)就在于可以承載簡(jiǎn)單的多層級(jí)內(nèi)容，通過(guò)層級(jí)遞進(jìn)的方式將簡(jiǎn)單的多層級(jí)拆解得更簡(jiǎn)潔。

但我們需要把控好內(nèi)容的廣度和深度，廣度指的是在層級(jí)結(jié)構(gòu)中每一層的數(shù)目，最好掌握在7個(gè)以內(nèi)。

假如廣度太寬意味著每個(gè)頁(yè)面會(huì)給用戶展現(xiàn)太多的信息，增加查找內(nèi)容的負(fù)擔(dān)。深度為縱向結(jié)構(gòu)，建議一般3層，最多不超過(guò)5層。過(guò)深的層級(jí)會(huì)讓用戶點(diǎn)擊許多次，且不簡(jiǎn)單被用戶發(fā)覺(jué)。比如飛書的基本信息架構(gòu)也是主要以層級(jí)結(jié)構(gòu)來(lái)進(jìn)行的。

②矩陣結(jié)構(gòu)（多維度結(jié)構(gòu)）

矩陣結(jié)構(gòu)是各個(gè)節(jié)點(diǎn)都相互連接的一種信息架構(gòu)方式，通俗來(lái)講就是用戶既可以通過(guò)多個(gè)維度去觸達(dá)同一信息，也可以從單個(gè)維度連接多種信息。

這種結(jié)構(gòu)其實(shí)就更類似于我們?cè)谧鱿嚓P(guān)功能時(shí)：比如當(dāng)你進(jìn)入電影全屏?xí)r想要退出時(shí)，既可以通過(guò)點(diǎn)擊按鈕退出，還可以通過(guò)鍵盤的Esc返回到，通過(guò)多點(diǎn)觸達(dá)同一操作。

又比如我們的聯(lián)系人功能，我們既可以通過(guò)輸入數(shù)字撥打電話，也可以查找聯(lián)系人進(jìn)行撥打，還可以查詢電話記錄進(jìn)行回?fù)堋?/p>

矩陣結(jié)構(gòu)最重要的意義在于給用戶供應(yīng)多種路徑，使用戶能夠在不同路徑中查找各自想要的東西。

③自然結(jié)構(gòu)（隨機(jī)性）

自然結(jié)構(gòu)不遵循任何全都的模式，節(jié)點(diǎn)都是被逐一連接起來(lái)的。

自然結(jié)構(gòu)一般都具有隨機(jī)性和不確定性。這種更傾向于泛消遣化的C端應(yīng)用。比如我們常見視頻網(wǎng)站的在推舉流都是應(yīng)用的自然結(jié)構(gòu)。比如打開B站等視頻平臺(tái)，你很難猜到剛進(jìn)入看到的是什么。

但一般自然結(jié)構(gòu)不會(huì)單獨(dú)存在，比如B站在自然結(jié)構(gòu)中也綁定了層級(jí)結(jié)構(gòu)來(lái)進(jìn)行層級(jí)上的劃分。

④線性結(jié)構(gòu)（單一性）

線性結(jié)構(gòu)是特別單一的一個(gè)結(jié)構(gòu)，整體是一層一層向下遞進(jìn)。比較強(qiáng)調(diào)先后挨次的一種結(jié)構(gòu)。

這種結(jié)構(gòu)通常用于我們常見的軟件安裝程序等，也可以用于部分功能結(jié)構(gòu)，比如網(wǎng)站的視頻發(fā)布，一般都是經(jīng)過(guò)上傳-編輯-發(fā)布這三個(gè)步驟來(lái)依次進(jìn)行。

大家可以發(fā)覺(jué)在進(jìn)行信息架構(gòu)時(shí)，我們?cè)谠S多狀況下可能會(huì)運(yùn)用多種組織結(jié)構(gòu)方式，我們需要依據(jù)對(duì)應(yīng)的用戶決策場(chǎng)景來(lái)考慮讓最適合的幾種方式相結(jié)合。但最終目的都是為了讓用戶能夠更快速的獵取信息。

（3）留意事項(xiàng)：關(guān)注用戶心智模型

在信息的組織過(guò)程中，我們需要留意用戶的心智模型。比如當(dāng)我們看到紅點(diǎn)就知道有新信息通知，看到下拉箭頭就知道可以綻開。這是互聯(lián)網(wǎng)產(chǎn)品在無(wú)形中給用戶建立的底層習(xí)慣認(rèn)知。

用戶目前對(duì)于普遍產(chǎn)品的一些基礎(chǔ)布局、功能名稱和交互規(guī)律都形成了肯定的習(xí)慣，這都屬于用戶的心智模型的內(nèi)容。

因此我們?cè)诮M織信息時(shí)盡可能不要去打破用戶常見的心智模型，否則必定會(huì)導(dǎo)致用戶的不習(xí)慣。我們常見的「掃一掃」功能，微信、支付寶和會(huì)隱蔽在「+」號(hào)里面。而微博和抖音卻分別放置在了「我的」和「搜尋」里面。

這樣會(huì)導(dǎo)致用戶難以發(fā)覺(jué)該功能。由于用戶接觸新的信息時(shí)，會(huì)以最初接觸的局部信息為依據(jù)綻開并形成初步認(rèn)知，而用戶認(rèn)知中的信息組織規(guī)律和實(shí)際信息的吻合度越高，他在進(jìn)一步查看或查找信息的過(guò)程中體驗(yàn)會(huì)更順暢。

反之，若一開頭形成的認(rèn)知與實(shí)際信息的差異過(guò)大，在后期的信息搜尋過(guò)程中則簡(jiǎn)單遇到困難。而這個(gè)吻合程度其實(shí)就是用戶心智模型。

雖然建議在肯定程度上遵循用戶心智，但并不是說(shuō)肯定遵循。對(duì)于用戶不熟知的場(chǎng)景或者某些專業(yè)術(shù)語(yǔ)，我們需要通過(guò)敏捷有效的提示（比如標(biāo)記解釋等）來(lái)引導(dǎo)用戶就可以了。比如我們剛才提出的抖音掃一掃，它的應(yīng)用場(chǎng)景其實(shí)是用于抖音官網(wǎng)后臺(tái)登錄，且在后臺(tái)登錄時(shí)已經(jīng)給出了對(duì)應(yīng)提示，那么這樣的設(shè)計(jì)也是合理的。

3.信息架構(gòu)支撐：標(biāo)簽、導(dǎo)航和搜尋

經(jīng)過(guò)上面的信息組織，其實(shí)我們已經(jīng)能夠歸納出一個(gè)大體的信息架構(gòu)框架。但在信息組織之外，我們還需要關(guān)注以下三點(diǎn)：標(biāo)簽、導(dǎo)航和搜尋。這對(duì)于信息架構(gòu)的完整性也有特別重要的意義。

（1）標(biāo)簽系統(tǒng)：讓信息識(shí)別更通用

標(biāo)簽系統(tǒng)，通俗來(lái)講就是要我們對(duì)當(dāng)前整個(gè)系統(tǒng)信息節(jié)點(diǎn)的命名，從而讓信息的呈現(xiàn)更簡(jiǎn)單識(shí)別。拿個(gè)最簡(jiǎn)潔的例子來(lái)進(jìn)行說(shuō)明：

可以看到左側(cè)和右側(cè)關(guān)于衛(wèi)生間的信息標(biāo)示，可能左邊你能一眼區(qū)分，右邊可能就需要反應(yīng)半天才能猜出究竟代表什么含義了。

這其實(shí)就是關(guān)于我們的信息命名是否能夠被大多數(shù)用戶所接受的場(chǎng)景，也就是我們標(biāo)簽作用所起的作用。標(biāo)簽可以分為圖片和文字標(biāo)簽，都需要考慮用戶對(duì)該信息命名的認(rèn)知程度，也就是前面提到的心智模型。那么如何能夠更好的去定義標(biāo)簽名稱呢，這里需要留意2個(gè)方面：

①優(yōu)先選用被行業(yè)廣泛接受的詞或圖標(biāo)

在進(jìn)行標(biāo)簽定義的時(shí)候，盡量選擇已經(jīng)被用戶所熟知的詞語(yǔ)，比如「工作臺(tái)」「通訊錄」等已經(jīng)被運(yùn)用得特別嫻熟，對(duì)于類似功能就直接以該形式命名，比如我們的設(shè)計(jì)軟件中，許多圖標(biāo)和功能名稱都是通用的：

這樣做能夠很大程度削減用戶的學(xué)習(xí)成本。因此在B端設(shè)計(jì)中我們也需要留意到我們所在的行業(yè)，哪些名詞已經(jīng)達(dá)成了共識(shí)，就無(wú)需再造新名詞。

②不確定的詞語(yǔ)可以參考競(jìng)品或調(diào)研來(lái)決策

當(dāng)某類功能或場(chǎng)景的標(biāo)簽難以確定時(shí)，我們就可以嘗試去找一下競(jìng)品是否有類似功能，或者找該行業(yè)的領(lǐng)頭羊（比如談天工具的巨頭微信），那么在進(jìn)行標(biāo)簽定義的時(shí)候，可以參考它的命名體系。由于它已經(jīng)替我們教育了一部分用戶，會(huì)間接降低學(xué)習(xí)成本。

假如某些標(biāo)簽在上述過(guò)程中還是無(wú)法確定，那么我們結(jié)合自己閱歷或者與詢問(wèn)業(yè)務(wù)相關(guān)人員來(lái)進(jìn)行爭(zhēng)論，在必要時(shí)候可以在標(biāo)簽旁邊添加解釋來(lái)進(jìn)一步說(shuō)明。

（2）導(dǎo)航系統(tǒng)：讓用戶不迷路

導(dǎo)航系統(tǒng)其實(shí)應(yīng)當(dāng)是大家比較熟知的一個(gè)系統(tǒng)了。就像使用導(dǎo)航系統(tǒng)來(lái)規(guī)劃行程一樣，導(dǎo)航系統(tǒng)都會(huì)存在于每個(gè)網(wǎng)站中。比如我們常見的側(cè)邊導(dǎo)航、頂部導(dǎo)航等。

由于網(wǎng)上關(guān)于導(dǎo)航系統(tǒng)已經(jīng)有許多資料的講解了，在這里闡述下四類導(dǎo)航的含義：

全局導(dǎo)航：位于頁(yè)面最上層的導(dǎo)航，用戶幾乎在頁(yè)面的每個(gè)地方都可以觀察，是最高層級(jí)的導(dǎo)航系統(tǒng)；

局部導(dǎo)航：位于最高導(dǎo)航的下級(jí)子類導(dǎo)航，子類導(dǎo)航并不是必需的導(dǎo)航，依據(jù)場(chǎng)景進(jìn)行取舍；

情景式導(dǎo)航：通過(guò)點(diǎn)擊文字鏈接進(jìn)行跳轉(zhuǎn)的導(dǎo)航，比如在個(gè)人資料里面植入其它網(wǎng)站的鏈接地址；

幫助導(dǎo)航：這里包括網(wǎng)站地圖，網(wǎng)站索引，網(wǎng)站指南等幫助類型的導(dǎo)航。

幫助導(dǎo)航的網(wǎng)站指南包括新手引導(dǎo)和演示教程等?，F(xiàn)階段更奇妙的功能引導(dǎo)，是當(dāng)用戶在進(jìn)行某些功能的操作時(shí)準(zhǔn)時(shí)進(jìn)行提示，這樣不僅達(dá)到了為用戶引導(dǎo)的效果，還削減了一連串的新手引導(dǎo)對(duì)于用戶的打攪。比如figma在進(jìn)行組件更新后，只有當(dāng)你調(diào)用組件功能時(shí)，才會(huì)準(zhǔn)時(shí)進(jìn)行提示。

（3）搜尋系統(tǒng)：讓用戶輕松找信息

搜尋，是我們平日最常用的查找信息的功能，它能夠關(guān)心我們快速進(jìn)行信息的檢索。雖然搜尋功能特別重要，但并不是每個(gè)系統(tǒng)每個(gè)頁(yè)面都需要搜尋。我們決策是否添加搜尋時(shí)需要考慮下列三點(diǎn)：

內(nèi)容簡(jiǎn)單度：當(dāng)前頁(yè)面承載的內(nèi)容簡(jiǎn)單度假如較少，對(duì)于簡(jiǎn)潔內(nèi)容頁(yè)面往往不需要搜尋；

內(nèi)容性質(zhì)：當(dāng)前頁(yè)面的性質(zhì)是偏向于用戶掃瞄還是查找，依據(jù)用戶行為來(lái)打算是否需要搜尋；

搜尋場(chǎng)景：假如搜尋場(chǎng)景很簡(jiǎn)潔，考慮是否只用篩選或分類就能夠解決問(wèn)題；反之假如搜尋內(nèi)容很簡(jiǎn)單，我們還可以搜尋結(jié)合篩選來(lái)更好的查找信息。

上述3點(diǎn)打算了我們是否需要考慮搜尋功能。而關(guān)于搜尋的其他細(xì)節(jié)點(diǎn)，比如搜尋規(guī)章和搜尋結(jié)果等，在這里不做進(jìn)一步的闡述。在這篇文章中更重要的是弄清晰我們何時(shí)需要搜尋功能。

4.信息架構(gòu)表達(dá)：視覺(jué)化你的架構(gòu)

我們通過(guò)上述方法已經(jīng)知道如何梳理信息架構(gòu)了，那么我們應(yīng)當(dāng)如何呈現(xiàn)它呢。這部分其實(shí)也是許多資料中比較模糊的點(diǎn)。

在學(xué)習(xí)的過(guò)程中，發(fā)覺(jué)部分資料認(rèn)為信息架構(gòu)就是單純的指思維導(dǎo)圖，但實(shí)際上信息架構(gòu)并不能單純只用思維導(dǎo)圖就能夠完全表示。

由于信息架構(gòu)包含了許多部分的內(nèi)容。只能說(shuō)思維導(dǎo)圖可以是信息架構(gòu)的一種表現(xiàn)形式，其可以關(guān)心我們?cè)谒妓麟A段梳理整體產(chǎn)品的信息構(gòu)成。

這里拋出一個(gè)很有意思的觀點(diǎn)，那就是「功能結(jié)構(gòu)圖」和「信息架構(gòu)圖」究竟什么關(guān)系，這里用兩張圖示例：

可以看到，功能結(jié)構(gòu)圖更多體現(xiàn)的形式是功能闡述，一般形式為名詞+動(dòng)詞，比如頭像設(shè)置；而信息架構(gòu)圖重點(diǎn)呈現(xiàn)的應(yīng)當(dāng)都為信息元素，一般為名詞，比如頭像圖片。

但在大多數(shù)時(shí)候我們看到的產(chǎn)品架構(gòu)圖，其實(shí)更偏向于功能結(jié)構(gòu)圖和信息架構(gòu)圖的結(jié)合。由于在許多時(shí)候闡述信息構(gòu)成時(shí)需要依靠功能進(jìn)行幫助說(shuō)明。

因此這篇文章敘述的信息架構(gòu)更偏向于基于產(chǎn)品的整體架構(gòu)。其實(shí)信息架構(gòu)對(duì)于呈現(xiàn)形式并沒(méi)有特殊的限制，只要能夠關(guān)心你清楚表達(dá)產(chǎn)品整體結(jié)構(gòu)就行。

《信息架構(gòu)：超越web設(shè)計(jì)》第4版中其實(shí)也并沒(méi)有對(duì)表現(xiàn)形式這一塊進(jìn)行嚴(yán)苛的定義，其用「顯示信息元素間的關(guān)系——站點(diǎn)地圖」的說(shuō)法概括了信息架構(gòu)的呈現(xiàn)形式，其表達(dá)如下：

可以看到其表達(dá)形式包括思維導(dǎo)圖和流程圖等形式：思維導(dǎo)圖的優(yōu)勢(shì)是能夠總覽全局信息，查看信息的深度和廣度，而流程圖的優(yōu)勢(shì)則更能夠表達(dá)整體的規(guī)律關(guān)系。

因此信息架構(gòu)的呈現(xiàn)需要依據(jù)你的產(chǎn)品場(chǎng)景選擇合適的視覺(jué)框架表達(dá)。不必讓形式限制了我們的發(fā)揮，而是應(yīng)當(dāng)形式追隨于我們的架構(gòu)表達(dá)。

其只是一個(gè)信息梳理結(jié)構(gòu)的說(shuō)明結(jié)果（類似于中間態(tài)），我們需要借助它來(lái)更好的闡述思路與溝通想法。

5.信息架構(gòu)之后：讓信息具像化

在輸出信息架構(gòu)之后，其實(shí)這里想聊一聊頁(yè)面的呈現(xiàn)。由于當(dāng)梳理好大的框架后，剩余的頁(yè)面細(xì)節(jié)其實(shí)都需要通過(guò)原型圖來(lái)進(jìn)行體現(xiàn)。這個(gè)過(guò)程是從框架到頁(yè)面的階段，其實(shí)對(duì)于設(shè)計(jì)師來(lái)說(shuō)也是很重要的部分。在這里依據(jù)自己的理解列出了以下幾方面的留意點(diǎn)：

（1）頁(yè)面能夠讓用戶看懂

這其實(shí)就是涉及到我們的信息組織和標(biāo)簽系統(tǒng)。假如當(dāng)我們的某個(gè)頁(yè)面不能讓用戶第一時(shí)間獵取到該頁(yè)面表達(dá)的信息，反思一下是在哪個(gè)方面做得不好。是標(biāo)簽系統(tǒng)含義模糊呢，還是信息的組織分類方式不對(duì)。從頁(yè)面呈現(xiàn)倒推信息架構(gòu)。

綜合來(lái)說(shuō)就是設(shè)計(jì)時(shí)的排列要考慮用戶的心智模型（比如網(wǎng)頁(yè)的常規(guī)排版和通用名詞定義等），對(duì)于某些難以理解的地方賜予用戶關(guān)心和解釋。雖然B端產(chǎn)品想要完全避開學(xué)習(xí)成本是不行能的，但我們可以盡量削減其學(xué)習(xí)成本。

（2）考慮用戶的視覺(jué)動(dòng)線

當(dāng)我們?cè)谶M(jìn)行信息排列時(shí)，這時(shí)需要思索的就是用戶的視覺(jué)動(dòng)線，也就是我們常說(shuō)的視覺(jué)掃瞄「F模型」和「Z模型」。對(duì)于不同的信息流來(lái)說(shuō)，采納不同的動(dòng)線模型能夠讓用戶更好地查找信息。

F模型和Z模型的使用區(qū)分其實(shí)就是在使用場(chǎng)景上，對(duì)于內(nèi)容頁(yè)面來(lái)說(shuō)F模型會(huì)更為合適（比如文章或者搜尋結(jié)果），適合文本類的內(nèi)容。但對(duì)于非文本的頁(yè)面，則更適合用Z模型，Z型模式的設(shè)計(jì)跟蹤了人眼掃描頁(yè)面時(shí)的路線——從左到右，從上到下，能夠更好引導(dǎo)用戶的視線。

（3）掌控好適度的信息層級(jí)

B端由于在視覺(jué)的發(fā)揮空間不多，那么相對(duì)來(lái)說(shuō)保持良好的信息層級(jí)能夠讓整體的體驗(yàn)變得更為良好。

不管是原型圖還是視覺(jué)，整體的視覺(jué)層級(jí)要體現(xiàn)得更為清楚。按理說(shuō)最好的視覺(jué)層級(jí)掌握在三級(jí)左右。假如發(fā)覺(jué)視覺(jué)層級(jí)過(guò)多，需要考慮是不是由于