2022-9-9 ui設計分享達人
良好的用戶體驗需要所有信息都符合邏輯且觸手可及。以下是一份完整的信息架構指南，它可以避免你的用戶迷失在錯綜復雜的網(wǎng)站信息中。
當我們使用任何網(wǎng)站或移動應用時，都會面對向我們提供所需信息的界面。這是大家都習以為常的，大多數(shù)用戶甚至沒有注意到網(wǎng)站的所有內(nèi)容都經(jīng)過精心組織。
內(nèi)容的組織和劃分被稱為信息架構，它是用戶體驗設計的一個重要部分。如果內(nèi)容沒有經(jīng)過適當整理，大多數(shù)用戶在瀏覽網(wǎng)站或app時容易迷失方向，使得產(chǎn)品的真實價值被掩蓋。畢竟，即使再棒的功能也需要用戶去發(fā)現(xiàn)。
為確保你的內(nèi)容結構合理并能以最佳方式呈現(xiàn)給用戶，好好看看我們?yōu)槟銣蕚涞倪@份信息架構指南吧。
1、什么是信息架構？
信息架構可能難以定義。
部分原因是，內(nèi)容寫作等其他學科可被縮小到特定職業(yè)，比如作家，而信息架構的范疇卻涵蓋了多項職業(yè)。的確，參與產(chǎn)品開發(fā)的每個人都會多少用到信息架構。
大多數(shù)網(wǎng)站和app都要將內(nèi)容分成多個部分讓用戶快速理解，同時要被合理組織以便用戶發(fā)現(xiàn)產(chǎn)品的所有功能。當這項工作進行的非常順利時，用戶永遠不會停下來思考網(wǎng)站如何為他們組織信息。
Google Drive或Medium等網(wǎng)站就是這樣，設計者必須仔細考慮如何向用戶呈現(xiàn)信息。否則，功能就會有被淹沒在隨意布局的按鈕和鏈接中的風險，用戶既難以關注也不會喜歡。
在其他案例中，你可以看到信息架構的作用極其顯著，同時也很難做好。
2、信息架構與UX相同嗎？
不相同。
兩者之間有很強的聯(lián)系，盡管UX涉及大量的信息架構工作，但兩者并不完全相同。
用戶體驗涉及范圍更廣，包括了信息架構不會觸及的幾個方面，例如要確保界面令人愉快、響應用戶的某些心理需求。相比之下，信息架構則更側重用戶目標和為此付出的認知力。
以下是這兩個概念的緊密聯(lián)系：沒有良好的信息架構，就沒有合理有效的用戶體驗。它是界面開發(fā)的基礎，為我們所知所愛的用戶體驗設計其他方面打開大門。
然而在此，我們應該做一個小小的區(qū)分。
信息架構是建立用戶體驗的堅實基礎，但并不代表整個項目工作。
一旦你知道如何為用戶建立良好的信息架構，你需要為用戶體驗添加閃光點并進行其他工作，例如融合信息架構的交互設計，這樣才能創(chuàng)造讓人驚嘆的用戶體驗。
3、一個巧妙的信息架構類比
信息架構使你的產(chǎn)品可用，這在電子游戲中更為明顯。
電子游戲擁有自己規(guī)則和歷史，是一個全新的世界。這意味著如果用戶希望在游戲中進行下去，就需要向他們呈現(xiàn)關于這個世界的大量信息。
但你會注意到，所有這些信息不是一次性呈現(xiàn)的，而是隨著游戲進展，一點一點呈現(xiàn)。
首先，你會看到場景設置介紹，通常講述主角和一點背景故事。在此出發(fā)，新信息將以易于消化的形式呈現(xiàn)，從而使玩家可以慢慢探索這個世界。
在達到特定等級或完成特定動作時，那些小的對話框、內(nèi)容框向用戶提供的新信息，都是游戲中最好的信息架構。但是我們?nèi)绾螞Q定從開始該告訴用戶什么內(nèi)容呢？我們?nèi)绾翁峁┻m量信息滿足用戶的好奇心，而非過量信息使用戶感到疑惑？
圖 1 刺客信條：奧德賽。摘自福布斯
4、信息架構的元素
正如大部分設計的輔件，信息架構有很多組件幫助你將這些結構應用于產(chǎn)品。
這些組件是由信息架構先驅羅森菲爾德和莫維爾在他們的開創(chuàng)性著作《Web信息架構》中建立的，如果你想深入了解信息架構，推薦閱讀這本書。這些組件組成的系統(tǒng)，用不同方式組織內(nèi)容、讓內(nèi)容被用戶發(fā)現(xiàn)。
4.1 組織系統(tǒng)/結構
組織結構讓你的內(nèi)容具有意義、易于理解，即標記不同信息之間的聯(lián)系并嘗試構建框架，幫助用戶了解產(chǎn)品所有信息之間的聯(lián)系。
構建框架后，由于所有的內(nèi)容分布都具有邏輯，用戶就更容易預見某些信息的位置，這也是可用性測試的一個經(jīng)典部分。在《Web信息架構》中，列出了信息架構的三種不同框架。
1）層級結構
也稱為樹形結構，這意味著使用滴漏效應，將廣泛的分類放在頂部，更具體、更小的子類別放在下方，讓用戶進行導航。這種視覺層級將相關信息呈階梯狀顯示，很好地傳達了不同信息的重要性。
2） 順序結構
這種形式的信息架構通過組織信息為用戶創(chuàng)建特定瀏覽路徑。用戶需一步步操作，并僅接收當前呈現(xiàn)給他們的信息。這樣可以避免給用戶提供太多選擇，從而避免因自由選擇而導致的沮喪和信息過量。
3）矩陣結構
這與順序結構有些相反。順序結構通過一系列指定步驟帶領用戶，而矩陣結構則讓用戶自行選擇他們喜歡的導航方式，允許用戶以鏈接和按鈕的形式訪問所有信息并讓他們決定訪問內(nèi)容。
可以說矩陣結構通過給用戶所有可能的方向和功能，讓用戶在使用產(chǎn)品時創(chuàng)造自己的使用路徑。
4.2 標簽系統(tǒng)
標簽系統(tǒng)是用單個詞匯傳達大量信息的一種方式。它可以幫助用戶通過概念來查找內(nèi)容，而不是瀏覽整個產(chǎn)品來尋找想要的信息，這也是為何使用標簽系統(tǒng)的原因。
想想一個普通的商業(yè)網(wǎng)站，當你尋找業(yè)務聯(lián)系方式時，可能想找一套不同的信息：電話號碼、郵箱地址、辦公地址……而所有這些信息，都可以在網(wǎng)站界面的同一個標簽下找到——聯(lián)系頁。
4.3 導航系統(tǒng)
從信息架構的角度，導航系統(tǒng)并不意味著設計好的界面，更多則是關于用戶如何在內(nèi)容和信息中移動。
重要的是要隨時記住，信息架構只是幫助用戶導航信息以達成目標的方法。
某種程度上，導航系統(tǒng)應與內(nèi)容相反。只要用戶覺得有用愉快，你會想要豐富、復雜的內(nèi)容；而你的導航系統(tǒng)則應該盡可能簡單明了，同時依然能讓用戶獲得任何想要的信息。這時，一個重要的概念就發(fā)揮了作用：元數(shù)據(jù)。
元數(shù)據(jù)是信息的信息，它在信息架構中起著重要作用。
可能聽起來過于技術，但元數(shù)據(jù)是導航系統(tǒng)中的關鍵組成部分。用戶在產(chǎn)品中進行導航，尋找特定的目標，但他們是否知道要尋找什么？是否知道所尋找東西的正確用語？
即使你的用戶知道產(chǎn)品中所有信息的名稱，僅僅以A-Z列表形式提供所有信息，并不能提供出色的用戶體驗，因此我們并不建議這樣做。出色的用戶體驗，需要對內(nèi)容進行匯總和分類，這樣才能讓導航系統(tǒng)成為帶領用戶前往任何位置的道路。
導航系統(tǒng)可以以列表和菜單的形式呈現(xiàn)出內(nèi)容的類別，但要警惕：不要將成千上萬的類別拋給用戶，這樣會導致信息超載。我們建議你創(chuàng)建不同的分類，然后按絕對重要性進行排序，放棄不重要的分類，因為它們只會使用戶暈頭轉向。
你可以通過閱讀Smashing Magazine上Karafilis發(fā)表的內(nèi)容找到更多關于創(chuàng)建好導航系統(tǒng)的信息。
圖 2 亞馬遜網(wǎng)站
4.4 搜索系統(tǒng)
如你所期望，當產(chǎn)品中包含大量數(shù)據(jù)時，搜索系統(tǒng)會派上用場。如同你的標簽系統(tǒng)，搜索系統(tǒng)有幾個不同的方面需要考慮，你可能不會立即想到。
以一個普通的電商零售網(wǎng)站舉例。
當你創(chuàng)建網(wǎng)站時，第一反應可能是創(chuàng)建一個可以查找所有信息的搜索欄，但你必須抵制這種沖動。邏輯使然，每當用戶使用搜索框時，他們只會查找一種類型的數(shù)據(jù)：商品。它們不是在開放時間或數(shù)據(jù)隱私政策之后，它們在搜索欄中的索引是隨機的。在這種情況下，產(chǎn)品是被當成搜索區(qū)對待，確保搜索欄僅向用戶顯示某種類型的內(nèi)容即可。
而你需要在搜索系統(tǒng)中考慮的另一個問題是，點擊搜索后信息要如何呈現(xiàn)？
5、信息架構的八原則
這八條基本原則可以作為任何想為產(chǎn)品賦予意義的UX設計師的行動指南。 最初由EightShape的創(chuàng)始人丹·布朗構想，這些原則將信息架構看成結構設計的實踐，以下是關于如何實踐的指南。
5.1 物體原則
這項原則關于你如何看待自己的內(nèi)容。布朗說，不要把內(nèi)容視為僵硬、無生命的東西。它像物體一樣，要嘗試將它當成擁有自己的生命周期、行為和特征的生命體對待。
這條原則之所以與信息架構相關，在于它可以讓你根據(jù)需要靈活處理內(nèi)容。如果你將內(nèi)容視為自身存在的個體，便可以更輕松地看到內(nèi)容與其他信息之間的可能關系、發(fā)現(xiàn)向用戶呈現(xiàn)此內(nèi)容的不同方式。
這個原則的特點之一在于它將內(nèi)容的生命周期嵌入到結構中，考慮到內(nèi)容從逐漸增長到穩(wěn)定的不同時代——這在內(nèi)容適時變化而更受歡迎后發(fā)生的格外頻繁。
布朗給我們提供了一個食譜網(wǎng)站的例子，食譜之間可以作為互補而互相關聯(lián)，或者在某些時節(jié)關聯(lián)性更強（比如感恩節(jié)時與火雞有關的食譜）。
5.2 選擇原則
布朗提到施瓦茨的心理學史詩級作品《選擇的悖論》 ，告訴我們?nèi)祟愑幸环N錯覺，即他們想要盡可能多的選擇。而大多數(shù)用戶體驗設計師都知道這并非真相，這也是施瓦茨和布朗所認同的。給用戶過多選擇的真相是：人們的可能選項越多，就需要付出越多的認知努力來做出選擇。這甚至能引發(fā)焦慮。
圖 3，Habitout漂亮的極簡主義首頁
布朗用企業(yè)內(nèi)部網(wǎng)站舉例，大公司習慣于展示大量信息，卻通常忽略了內(nèi)容的分類和信息架構。結果則是用戶浪費了大量時間來尋找他們實際想要的那一小部分數(shù)據(jù)，或干脆放棄使用網(wǎng)站。
聽起來不像你想要的產(chǎn)品是嗎？這正是信息架構所要避免的。
建議你縮短列表，尤其是在較高層級。這也是你在為內(nèi)容設計矩陣結構時，需要牢記的一點：用戶在停止輕松并開始積極努力的使用產(chǎn)品之前，只能在一定數(shù)量的選項中做出選擇。
5.3 漸進式信息披露原則
該原則講述人們只能以某種方式處理新信息的事實，意思是人們不能很好地處理預期之外以及不想要的信息——這個概念被稱為漸進式披露。
這意味著在信息架構中，你需要組織數(shù)據(jù)，以便人們不僅能夠以正常速率吸收信息，而且還可以在呈現(xiàn)之前預測更多信息。在用戶體驗設計中，這意味著，你放在任何類型的列表或表格中連接詳細內(nèi)容的入口信息，都需要好好考慮讓它們簡潔。
讓我們回到布朗的食譜網(wǎng)站案例。你不能指望在用戶瀏覽的所有頁面上顯示完整食譜，但是要如何在列出食譜時決定顯示什么呢？菜肴的類型是一個很好的指標，但它不能讓用戶清楚地了解在食譜中可以看到什么。你的設計應該選擇足夠的信息來幫助用戶決定是否要點擊某個食譜。
5.4 范例原則
這個原則是關于人類如何對事物進行分類的心理學。最終，我們能夠通過創(chuàng)建一個范例列表來對概念進行分類，這些范例可以幫助我們將不同概念組合在一起，無論此分類背后的標準是什么。
在將此應用到你的信息架構時，請考慮在應用程序或網(wǎng)站上顯示分類的方式。每個分類都需要一個包含該分類內(nèi)容的范例，你可以使用最大、最常用的子分類。這樣，子類別可以作為大多數(shù)用戶的快捷方式，并且可以幫助用戶理解每個頂級分類。
5.5 前門原則
布朗說，設計師認為用戶會通過首頁之外的頁面訪問網(wǎng)站是一種明智的看法。認為網(wǎng)站有多個可訪問的入口，可能會對PC網(wǎng)頁設計產(chǎn)生不小的影響，而對移動app設計的影響則較小。布朗對此提出信息架構的兩個主要建議：
一、永遠告訴用戶他們在哪里。
你的網(wǎng)站擁有很多頁面，訪問者可以訪問其中的任何頁面。因此，在用戶可以看到的地方顯示站點地圖非常重要。因此，如果你剛從Google鏈接打開一個博客網(wǎng)頁，應該能看到博客文章的類別和其他類似內(nèi)容。讓新用戶在大框架中理解邏輯非常重要，而不是像在廣袤湖泊中填充少量內(nèi)容，以隨機的方式呈現(xiàn)。
二、首頁不應該包括網(wǎng)站的所有內(nèi)容。
過長的首頁與好的首頁區(qū)別很簡單：好的首頁應該讓用戶清楚地了解你的目的、以及整個網(wǎng)站上可以找到的東西，而不應該嘗試向用戶顯示所有可能、詳細的信息。在信息架構方面，首頁不應該成為通往網(wǎng)站所有角落的快捷方式，而應該展示網(wǎng)站內(nèi)容的概況。
5.6 多重分類原則
即使在一小群相似人群中，你仍然會發(fā)現(xiàn)人們有不同的信息尋找方式。有些人會輸入正在尋找的主題泛稱（例如沙灘裝），其他人則會自然地輸入他們想要的具體類型（例如比基尼）。
這對設計和信息架構很重要，你需要在搜索系統(tǒng)中考慮到這一點。但也需要小心對待，因為它總是伴隨如下事實的出現(xiàn)：呈現(xiàn)給用戶尋找信息的方式越多，他們越可能變得分心或不堪重負。
5.7 聚焦導航原則
布朗聲明，導航不應該只是簡單的包含網(wǎng)站中的所有內(nèi)容。許多設計團隊在網(wǎng)站上隨意添加導航菜單，使得菜單本身看起來缺乏邏輯。然而信息架構本就是用戶體驗中邏輯的體現(xiàn)。
相反，布朗建議你為菜單制定策略，在可能的情況下為不同類型的信息提供不同菜單。例如，一個用于博客主題的菜單和一個市場營銷的菜單（列出公司提供的服務）。
這能改善網(wǎng)站的可用性，即便刪除了直接進入聯(lián)系頁的按鈕。請記住，信息架構是按照正確類別給事物分類，讓用戶確切知道他們在哪以及在何處找到所需信息，而不是將每條信息連接到主頁。
5.8 增長原則
對于這項規(guī)則，任何需要處理內(nèi)容的人都應該牢記：產(chǎn)品中的內(nèi)容量可能會隨時間的推移而增長。這是相當合乎邏輯的，在互聯(lián)網(wǎng)上放置內(nèi)容變得越來越便宜?？偟膩碚f，電子內(nèi)容每年呈指數(shù)級增長，你的內(nèi)容應該遵循相同的節(jié)奏。
但是，在設計中反應出內(nèi)容增長并不容易。之所以如此困難，是因為即使你知道會有更多的內(nèi)容，也不可能知道會有多少內(nèi)容。如何為尚不存在的內(nèi)容設計信息架構是件困難的事。同樣，產(chǎn)品也可以在不同方向上增長。是要增加新類別還是現(xiàn)有類別的新內(nèi)容也會難以判斷。
遺憾的是，布朗發(fā)現(xiàn)當內(nèi)容增長時，并沒有簡單的建議或明確的方法來避免麻煩。我們所能做的最好方式就是設計能夠接受新形式內(nèi)容的頁面，為將來可能的內(nèi)容擴展做好準備。換句話說，即使你現(xiàn)在不使用視頻內(nèi)容，也要創(chuàng)建接受視頻的頁面。信息架構的結構應該具備的另一個技巧是，如果你需要在將來添加新的子類別，則應使頂級類別盡可能寬泛。
6、結論
如果你希望用戶足夠了解你的產(chǎn)品并能愉悅使用，那么信息架構至關重要。你所希望創(chuàng)建的結構，不僅要讓用戶理解、更要能進行預測，這樣他們才不會兜著圈子尋找信息，輕松地便能掌握產(chǎn)品的使用方法。
請記住，好的信息架構和好的用戶體驗設計是相輔相成的：即向讀者提供博客文章，或幫助新玩家在游戲世界中快速適應。請注意細節(jié)，不要用超出用戶處理能力的信息轟炸他們。
使用你的產(chǎn)品應該感覺自然，而不是像跑馬拉松一樣疲憊或像在房間里四處搜尋兩天沒見的手機充電器一樣迷茫。利用一切機會在用戶測試中檢驗你的信息架構，確保人們不會對信息呈現(xiàn)的方式感到困惑沮喪。
當擁有大量信息時，很難以好的方式呈現(xiàn)所有信息，但我們總能找到呈現(xiàn)與理解信息的方法，你應該用正確的計劃將這項工作反映到設計工作中，所以不要慌！
只需放輕松并回歸一切的根源：每個時間點用戶的目標是什么？如何以最簡單的方式幫助用戶實現(xiàn)目標？這才是信息架構中最重要的問題。
作者：Z9084488
來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司