信息架構入門指南

來自專欄 UIcircle

作者：Hindy

原文地址：uicircle.club/a/196

轉載無限歡迎，但請註明「作者」和「原文地址」。感謝您對作者版權的尊重。

前言

本文是 UI 設計進階系列的第 6-1 篇，系列目錄：uicircle.club/a/128。

調研部分講完後，我們就該將這些洞見真正應用到產品設計中去了。我們先從最基礎的，但是最容易被設計師們忽略的信息架構開始講。

什麼是信息架構？

信息架構屬於「用戶體驗要素」中的結構層。它研究的是人們如何認知信息的過程，對於產品而言，信息架構關注的就是呈現給用戶的信息是否合理並且具有意義。

一個好的信息架構可以幫助人們更好地了解他們周圍的環境並找到他們想要的東西（不管現實世界或網上）。而無論我們正在完成怎樣的工作，創建信息架構時我們經常會問：

• 用戶瀏覽我們服務的過程是怎樣的？
• 怎樣幫助用戶分類他們的信息？
• 這些信息怎樣呈現給用戶？
• 這些信息有沒有幫到用戶，並驅使他們做出決定？

結構化內容

在以內容為主的網站上，信息架構主要的工作是組織分類和導航的結構，讓用戶可以更高效、有效地瀏覽網站內容。信息架構要求創建分類體系，我們可以使用兩種方式來建立：「從上到下」和「從下到上」。

上圖「從上到下」的信息架構方法是由戰略層驅動。從產品主要願景，一步一步細分到每個功能特性。

「從下到上」的信息架構方法則是根據對內容和功能需求的分析而來的。先從已有（或確定將有的）資料開始，把這些資料統統放到最低級別的分類中，然後再將它們分別歸屬到較高一級的類別，從而逐漸構建出能反應我們的產品目標和用戶需求的結構。

但這兩種方法都有一定局限，「從上到下」可能導致內容的細節被忽略，「從下到上」可能由於過於精確地反映現有內容而導致不能靈活地容納未來內容的變動或增加。因此在這兩種方法間找到平衡至關重要。

做交互設計需要精進的一個點，就是解決複雜信息架構。其過程和結果，會直接影響交互設計師的設計執行力和設計影響力。

另外，有些設計師喜歡計算「完成任務所需要的步驟」，或是計算「用戶到達某一地點的點擊數」，將這個作為評估網站結構質量的方法。然而最重要的其實並非「步驟數量」，而是「用戶是否感覺每一步都是合理的」。因為毫無疑問地，人們會更喜歡清晰的七步，而不是令人困惑的、被刻意壓縮的三步。

相關交付物

做信息架構工作前需要非常清楚地了解產品定位。並且為了了解用戶，還需要大量參考前期調研的結果，並了解用戶認知中是如何給各種內容進行分類的。這裡可能會用到卡片分類（Card Sorting）等方法。

在進行這些研究之後，我們才開始分析數據，然後輸出具體的交付物。

產品結構圖

在一個項目中，信息架構確定了信息如何被展現及獲取，然後最直觀地呈現在產品結構圖中。

舉個例子，我們希望把「常見問題」與「幫助」頁面聯繫起來，那麼這兩個頁面也許可以一起放到「幫助」模塊下。但是，我們可能發現用戶希望「常見問題」屬於「產品」這個模塊。在這種情況下，我們就需要作出抉擇，平衡各方利益，還需要考慮其他可行方案，以盡量同時實現不同目標。比如把「常見問題」和「幫助」都放在「產品」部分。最終，正是這些選擇與決定，創造了整個產品的結構。

而由於我們很難絕對地劃分出產品的功能與信息，因此一張結構圖上很可能會同時包含功能與信息。

線框圖

設計師可以利用線框圖思考信息的結構、表現不同界面之間的聯繫、確定網站的實際運作邏輯。我們可以在早期就畫出關鍵頁面的草圖，用來演示用戶如何與信息進行交互。

分類和元數據

一個分類是指一系列組合在一起的事物。大多數信息架構會給產品選擇一個或多個合適的分類方案。然後他們可能使用元數據給內容打上各類「標籤」，這樣用戶可以搜索基於假設分類的內容。

元數據（metadata）又稱中繼數據，是描述數據的數據。它主要是描述數據屬性的信息，用來支持如歷史數據、資源查找、文件記錄等功能。

比如一個買衣服的網站可以考慮多種分類方式，根據織物類型、根據商品類型、根據顏色類型等。於是我們就可以這樣標記一件衣服，棉或尼龍，也可以標記為襯衫或上衣，還有紅色或黑色。而這「織物類型」、「商品類型」、「顏色類型」就是這件衣服的元數據了。

好的元數據比全文搜索引擎更能提供可靠的搜索結果，幫助用戶更快速地找到信息。但元數據不是說越多越好，而是具有一定前瞻性地儘可能詳細。比如目前市面上的網站沒人關注「織物類型」這個分類，但假如它變得有潛力，我們則可以快速運用已有的內容創作出符合用戶需求的新功能或新專題。

推薦工具

Omnigraffle：www.omnigroup.com/omnigraffle/

Omnigraffle 是 Omnigroup 的圖表和線框套件。如果你是專業的交互設計師，這款產品是絕對首推的。

Axure：www.axure.com

與 Omnigraffle 類似，Axure 既是線框圖繪製工具，也是圖表繪製工具。可以說 Axure 是在同類產品中，最為經典的一款罷。

Mindnode：mindnode.com

Mindnode 是另一種繪圖軟體，最重要的是組織你的想法、信息，並且設計簡潔、多端可用。

ProcessOn：www.processon.com

ProcessOn 是國內的一款免費在線作圖工具，支持實時協作。我最喜歡的是用它來繪製一些簡單的流程圖。

免費獲取完整 PPT，請關注公眾號 uicircle，回復「信息架構」即可。

UI 設計進階系列目錄：uicircle.club/a/128。

如果你想提升設計能力，亦或充實自己的周末，歡迎加入我們的會員社區??

→點這報名

參考閱讀

• Complete Beginner』s Guide to Information Architecture：www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/
• Information Architecture Institute：www.iainstitute.org
• Card Sorting：www.usability.gov/how-to-and-tools/methods/card-sorting.html
• 《用戶體驗要素》：book.douban.com/subject/6523997/

推薦閱讀：