大家好，我是Clippp。今天為大家分享的是「信息架構(gòu)」。良好的用戶體驗要求產(chǎn)品所有的信息都符合邏輯并且觸手可及。如果信息沒有合理的分類，用戶在瀏覽APP或網(wǎng)站時會感到很混亂，這樣的話產(chǎn)品的價值會大打折扣。

這就好比做了一個特別酷的功能，但用戶卻找不到入口，更別提怎么用了，那這個功能再牛也沒有意義。

1.三種框架結(jié)構(gòu)

在開始設(shè)計信息架構(gòu)前，需要對產(chǎn)品有一個明確的組織系統(tǒng)，用框架來幫助用戶理解產(chǎn)品之間的聯(lián)系。常見的框架結(jié)構(gòu)類型有三種：

樹狀結(jié)構(gòu)

樹狀結(jié)構(gòu)是使用很廣泛的視覺層次結(jié)構(gòu)，以階梯的形式呈現(xiàn)信息，能夠很好地傳達(dá)出不同信息的重要性。

順序結(jié)構(gòu)

這種形式的信息架構(gòu)為用戶創(chuàng)建特定路徑，意味著用戶必須遵循提供的步驟，并且只接受當(dāng)時呈現(xiàn)給他們的信息。

這種結(jié)構(gòu)能避免給用戶提供太多的選擇，防止出現(xiàn)類似“選擇困難癥”的情況。

矩陣結(jié)構(gòu)

順序結(jié)構(gòu)是引導(dǎo)用戶操作一系列指定好的步驟，而矩陣結(jié)構(gòu)允許用戶選擇他們喜歡的導(dǎo)航方式。這意味著一個功能可能包含更多入口，連接多條路徑，和其他模塊有更多關(guān)聯(lián)性。

2.信息架構(gòu)的八個原則

關(guān)聯(lián)原則

產(chǎn)品中任何一個模塊都不是獨立存在的，在信息架構(gòu)中就要考慮怎么將關(guān)聯(lián)的信息串聯(lián)起來，靈活地處理內(nèi)容。

▲?在電商產(chǎn)品中經(jīng)常能看到這樣的設(shè)計，在商品詳細(xì)頁的后面添加“猜你喜歡”模塊，引導(dǎo)用戶查看更多相似的款式，這樣的結(jié)構(gòu)會讓從觀看到購買的整個流程更成熟。

選擇原則

給用戶的選擇越多，實際做出決定需要付出的認(rèn)知能力就越強(qiáng)，甚至?xí)馃o法抉擇的焦慮心理。

▲?左側(cè)的列表顯示了大量的信息，但缺少對內(nèi)容或信息架構(gòu)的分類。結(jié)果就是用戶為了尋找或使用一個小功能而花費(fèi)了大量的時間，得不償失。

這里建議盡可能精簡列表的層級結(jié)構(gòu)，突出最重要的內(nèi)容。當(dāng)我們想做類似的列表時，先考慮一下是否需要對信息進(jìn)行分類，能有效提升產(chǎn)品的合理構(gòu)建。

披露原則

在使用產(chǎn)品時，我們會詳細(xì)地預(yù)想各種使用場景，包括如何使用、操作失敗如何提示等等，盡量涵蓋更多用戶的需求。這樣做的目的是讓用戶與產(chǎn)品交互時，保證產(chǎn)品呈現(xiàn)的內(nèi)容或反饋在用戶的預(yù)料之內(nèi)。

▲?通過漸進(jìn)式披露，讓內(nèi)容遞進(jìn)式呈現(xiàn)，滿足用戶不同的使用需求，比如用戶想看商品的詳細(xì)內(nèi)容，則會一步步點擊操作來獲取。

通過在信息架構(gòu)中漸進(jìn)式地呈現(xiàn)信息，用戶不僅能合理地接受內(nèi)容，還可以在內(nèi)容呈現(xiàn)之前預(yù)測接下來的內(nèi)容或操作，讓用戶有所準(zhǔn)備。

示范原則

一圖勝千言，有的時候光靠文字描述可能不足以將內(nèi)容描述清楚，導(dǎo)致用戶也不好理解，而恰當(dāng)?shù)膱D片示例能很好地輔助文字表達(dá)，讓內(nèi)容的分類更有據(jù)可依。

▲?在Adidas官網(wǎng)頂部導(dǎo)航欄的架構(gòu)中，在每個分類下面都提供了圖片示例，這樣的設(shè)計更能讓用戶清晰地明白產(chǎn)品類目。同時這個圖片也相當(dāng)于是子類別的入口，點擊圖片能快速查看一個大分類。

定位原則

讓用戶明確當(dāng)前位置。無論網(wǎng)站還是APP都包含了很多頁面，用戶之所以能夠在頁面之間來回穿梭，實際上是得益于清晰的信息架構(gòu)。尤其是在使用一個復(fù)雜的新產(chǎn)品時，讓新用戶快速了解產(chǎn)品架構(gòu)的的邏輯非常重要。

▲?在網(wǎng)頁設(shè)計中，面包屑導(dǎo)航清楚地告知用戶當(dāng)前的操作、所處層級和位置，同時為返回上一級或主頁提供了選擇路徑，也避免了在網(wǎng)站首頁將內(nèi)容全部展示出來的情況。

多重分類

對于信息的查找方式，不同的人可能會有不用的操作方法。例如，我們想在網(wǎng)上每個東西，既可以在產(chǎn)品的首頁推薦中購買，也可以在搜索框內(nèi)搜索購買，還可以用拍照識圖功能識別購買。

所以在設(shè)計產(chǎn)品的信息架構(gòu)時，要考慮這種多條路徑選擇的情況，提供更多的路徑代表用戶有更大的可能性來探索和使用產(chǎn)品。

聚焦導(dǎo)航

信息架構(gòu)是關(guān)乎用戶體驗的邏輯。隨著新功能越來越多，一種簡單粗暴的方式就是在首頁隨意堆砌新的導(dǎo)航菜單，這樣會讓整個導(dǎo)航欄看起來很臃腫，缺乏邏輯性。

▲?在可能的情況下，將頁面分區(qū)域為不同類型的信息提供差異性的導(dǎo)航設(shè)計。例如Facebook頂部導(dǎo)航欄展示了添加朋友、對話、消息等導(dǎo)航菜單模塊，左側(cè)導(dǎo)航欄則展示常用功能分類，將兩塊內(nèi)容清晰做出劃分。

信息架構(gòu)的目的是根據(jù)合理的方法將內(nèi)容分類，保證用戶準(zhǔn)確地知道自己在哪里以及在哪里找到所需的信息。

增長原則

產(chǎn)品的體量會隨著時間的推移不斷增長，新的分類也會越來越多。面對這樣的情況，上面提到的聚焦導(dǎo)航是一種方法，另外還要對增長有清晰的認(rèn)知和預(yù)見性。

尤其是在初創(chuàng)公司工作的小伙伴，新產(chǎn)品可能隔一段時間就會更新越來越多的功能，這就要求我們在考慮信息架構(gòu)時，不能只盯著當(dāng)下，而是將目光放長遠(yuǎn)，考慮未來如果有新內(nèi)容增加要怎么合理擴(kuò)展，相當(dāng)于為產(chǎn)品提前做一個規(guī)劃。

▲?通過上下兩圖的架構(gòu)對比，為我們提供了參考思路。當(dāng)產(chǎn)品內(nèi)容不太多時，可能簡單的二級分類就能解決，但是當(dāng)產(chǎn)品容量變大時，就要考慮如何合理地使用多層級的分類來容納更多的內(nèi)容。

最后

信息架構(gòu)對用戶充分了解產(chǎn)品至關(guān)重要。如果在設(shè)計中出現(xiàn)疑問，記得回到出發(fā)點：用戶在當(dāng)下節(jié)點的目標(biāo)是什么？如何以最簡單的方式幫助用戶實現(xiàn)目標(biāo)？?

慢慢來比較快，希望對你有所幫助～