信息架構綜合指南

收聽本文的音頻版本

作為 UX 流程的標準部分，設計師在構建產品時創建信息架構。 定義用戶可以通過應用程序或網站採取的每條途徑和路徑，信息架構不僅僅是一個站點地圖，用於顯示哪個頁面引導到哪裡。

類似於建築建築師使用藍圖來建造房屋的每個部分，從物理結構到更複雜的內部工作（如電氣和管道），信息架構描述了網站或應用程序的層次結構、導航、功能和交互。 正如藍圖是建築師在建造建築物時使用的最有價值的文件一樣，信息架構也可以成為設計師武器庫中最強大的工具。

然而，開發一個功能並不像將功能列表放在一起並繪製出它們的工作原理那麼簡單——讓我們研究一下這個過程。

什麼是信息架構，為什麼它很重要？

信息架構 (IA) 就像藍圖一樣，是產品基礎架構、功能和層次結構的可視化表示。 詳細程度取決於設計人員，因此 IA 還可能包括導航、應用程序功能和行為、內容和流程。 IA的大小或形狀沒有設定限制； 儘管如此，它應該包含產品的一般結構，因此任何人（理論上）都應該能夠閱讀並理解產品的工作原理。

我們將經常使用藍圖參考，因為這兩個文檔的用途幾乎相同。 就像藍圖一樣，IA 為設計師（以及產品開發和工程團隊）提供了整個產品的鳥瞰圖。 擁有一份文檔以簡單易懂地表示應用程序或網站的工作方式對於開發新功能、更新現有功能以及了解現有產品的可能性至關重要。

有了可用的 IA，為新功能和實施做出關鍵決策、了解產品更改的時間表以及通過多個流程跟踪用戶行為變得非常容易。

讓我們深入了解一個基本視頻，了解如何構建 IA。

如何設計信息架​​構

作為 UX 流程的一部分，IA 設計遵循與流程圖非常相似的模式：添加形狀並以有組織的方式將它們與線條連接到單個文檔。 構建 IA 的挑戰在於從用戶的角度了解您的應用程序或網站實際上是如何工作的，以及如何將這些信息組織成可讀、易讀的格式。

實際構建 IA 有兩個主要要求：通過視覺層次結構（即特徵、功能和行為的層次結構）對其進行組織，以及創建用於顯示不同類型的特徵、交互和流的圖例。 對於標準流程圖，形狀遵循特定要求（矩形是流程，菱形是決策點等）； 但是，遵循該命名法不是必需的。

換句話說，構建 IA 的最重要因素是架構中各個組件的放置位置（分層），以及它們的標記和顯示方式。

理解和展示視覺層次

創建新信息架構最具挑戰性的方面幾乎總是分層構建它。 IA 必須“自上而下”構建是一種常見的誤解。 除非它是現有產品，否則幾乎總是更難做到，例如上面的視頻。

從頭開始構建 IA 時，除非您的網站或應用程序遵循標準格式，否則在頂層之後繪製任何內容都非常困難。 這就像要求機械師從上到下而不是零件來製造汽車。 每件作品都必須通過自己的研究、設計和開發時間提前構建。 IA 也是如此。

顯示視覺層次結構對 IA 來說是一項寶貴的資產，不僅因為它為讀者提供了更好的上下文，而且還概括了產品的關鍵區域。 如果您的應用程序最重要的功能是可以從主頁完成的叫車服務（例如 Uber 或 Lyft），那麼該頁面將擁有最多的接觸點和對產品最大的價值。 視覺層次結構也是如此。

站點地圖可以方便地理解層次結構，因為它們以數字方式組織頁面（例如 1.0 主頁、2.0 付款、2.1 添加付款方式等）。 或者考慮下圖中杜克大學圖書館網站的示例，其中頂部導航不僅位於頂部，而且突出顯示以在整個應用程序中可見。

形狀、顏色和其他視覺元素的層次結構

除了層次結構之外，上面的架構還做得很好：它通過一個簡單的圖例和一些關鍵短語根據需要唯一地顯示每個參與點。 圖例表示頁面和內容類型，它表示形狀顏色之間的變化。 這很重要，因為儘管 Duke 的網站看起來相當簡單，但 IA 只深入了三層。 每個黃色矩形表示一個應用程序，因此每個框中的進程不包含在本文檔中！

即使沒有這些可用的部分，結構也是如此，我們可以理解如何僅通過 IA 瀏覽網站。 當我們到達網站內的應用程序時，這種情況就停止了——它不必這樣做。

下面的 IA 是針對遊戲的。 使用四種形狀，沒有顏色和巧妙放置的文本片段，每個主要交互都可以在沒有原型的情況下理解，更重要的是，任何人都可以理解它。

這個模型並不完美，但它清晰地組織了應用程序層次結構，並描繪了用戶在任何給定點看到或所做的事情。

最佳信息架構工具

有很多軟件應用程序允許構建 IA，但很少有軟件應用程序足夠簡單和快速以使體驗愉快。 或者至少，易於管理。

上面視頻中使用的 Draw.io 完全免費供個人和專業使用，並自動插入 Google Drive。 它還與付費的 Confluence 和 JIRA 集成。 Draw.io 非常適合流程圖、創建用戶流程和信息架構，並且借助 Drive 功能，多人可以處理同一個文檔並實時查看更改。 還有一個免費的離線版本。

Lucidchart 是另一個很棒的工具，它提供了比 Draw.io 稍好的體驗，並具有額外的好處，例如預建模板、更多集成、移動應用程序（在 App Store 上被評為 2.5 星）和對企業的支持。

Omnigraffle 和 Visio 是長期的行業支柱，在構建和維護 IA 設計方面表現出色，儘管 Visio 僅在線（較舊的離線版本僅適用於 Windows），而 Omnigraffle 僅適用於 Mac，需要單獨購買 MacOS 和 iOS版本。 與主要競爭對手相比，OmniGraffle 的一個優勢在於它提供了 JavaScript 和 AppleScript 自動化，這對於大多數設計師來說可能是不必要的，但通常全職信息架構師會喜歡它。

上面列出的所有工具都是為了速度和易用性而設計的，特別是圍繞流程圖，它遵循與信息架構幾乎相同的原則。 Balsamiq、MindMeister、MindManager 或 XMind 等其他應用程序都提供類似風格的行為，但都是為其他主要目的而構建的，例如原型設計或思維導圖。

信息架構最佳實踐

雖然對於構成信息架構的內容幾乎沒有定義規則，但在完成該過程時，請考慮以下事項：

不要關注層次結構，關注結構

層次結構是可調的。 主頁將永遠是主頁，但它指向哪裡，用戶如何到達這些地方，以及兩者之間和之外的一切都是稍後確定的。

所有過程都應該是邏輯的

儘管 UX 流程中的 IA 是用於用戶交互的，但每一步都必須有意義。 註冊屏幕不應該導致設置，相機功能不應該跳轉到地圖視圖......列表還在繼續。

記住用戶體驗過程

一個常見的錯誤是只進行IA，沒有資源、研究或其他資產或工作。 這就像告訴作者寫一本沒有大綱的書，或者告訴一個程序員編寫一個沒有原型的應用程序。

你是製圖師

製圖師會考慮地圖的所有方面，從山脈到州界。 就像地圖製作者一樣，設計師決定 IA 設計的內容。 單個頁面、特定的用戶行為、決策點的上下文……等等。

最終，製圖師根據用戶需求決定地圖上的內容。 設計師也是如此，因此為最終用戶構建 IA，即產品開發和設計團隊。

信息架構不斷變化和發展

為了再次深入了解這一點，所有 IA 都是為改變而構建的。 產品不斷發展，設計改變，用戶適應，循環不斷，一遍又一遍。 不要太認真，要知道總會有改進的餘地。 不要追求完美； 構建一個簡單、適應性強的 IA。

我的信息架構已經完成……現在呢？

任何設計工作都永遠不會真正完成，這是一個普遍的概念，信息架構當然就是這種情況。 它們會隨著我們的產品而增長、縮小和變化。 與建築物的藍圖不同，IA 將始終基於從用戶需求到新功能或產品大修的任何內容而發展。 大部分結構可能保持不變並提供版本之間的一致性，因此用戶不會感到困惑。

這是一件好事。 知道 IA 是一個流動的文檔——它可能每週，有時甚至是每天都發生變化——是維護你的應用程序或網站的整體結構的有效方法，而無需接觸代碼或創建新原型。 整個產品開發團隊對 IA了解得越多，每個人就會越快知道什麼是可能的，什麼是不可能的，以及任何所謂的“簡單工作”實際上有多嚴重。

這給我們帶來了信息架構的真正美：沒有預定義的起點。 而傳統的 UX 設計過程要求 IA 是在完成足夠的用戶流之後構建的； 憑藉大量的用戶和競爭性研究，它也可以是第一件事……或最後一件事。 原型製作過程通常會提供有關某些行為或動作應該如何發生的信息，這些信息很難從合乎邏輯或缺乏想像力的 IA 中想像。

作為一種不斷發展的實踐，IA 設計既是一門藝術，也是一門技能，這也是大公司擁有信息架構師職位的部分原因。 這些設計師是大型系統的守門人，他們對產品隨時間的增長有深刻的理解，他們幫助推動產品、設計和工程團隊在多年的時間裡做出正確的決策。 這種組織規模並不適合所有設計師，但每個設計師都可以構建一個簡單易懂的信息架構。

• • •

信息架構推薦閱讀

面向 Web 及其他領域的 IA

如何理解任何混亂：每個人的信息架構

信息架構基礎

信息架構和用戶體驗設計之間的區別

• • •

進一步閱讀 Toptal 設計博客：

• 電子商務用戶體驗——最佳實踐概述（附信息圖）
• 以人為本的設計在產品設計中的重要性
• 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
• 移動界面的啟發式原則
• 預期設計：如何創造神奇的用戶體驗