昨天的響應式設計解決的是「同一批內容在不同尺寸的螢幕上怎麼擺」,但它有個沉默的前提:內容本身已經被組織好了。把版面從桌面優雅地縮成手機,前提是你知道漢堡選單裡該放哪幾個項目、哪個藏在第二層、哪個根本不該存在。這件事就是資訊架構(Information Architecture, IA)——它不管像素怎麼流動,只管內容怎麼分類、怎麼命名、怎麼讓人找得到。響應式決定「東西擺在畫面的哪裡」,IA 決定「東西擺在結構的哪裡」;版面適應得再漂亮,如果使用者根本猜不到某個功能被歸在哪個分類底下,那再流暢的斷點也救不了他。今天我們從版面往上走一層,談內容的骨架。
📖 學
IA 是什麼:看不見卻決定成敗的骨架
資訊架構這個領域的奠基之作,是 Louis Rosenfeld 與 Peter Morville 的《Information Architecture for the World Wide Web》(俗稱「北極熊書」)。他們給的定義很簡練:IA 是「共享資訊環境裡的結構設計」——把內容組織、標記、分類,讓人能理解、能找到自己要的東西。關鍵在於它是看不見的。使用者不會讚嘆「這個網站的資訊架構真好」,他們只會在找不到東西時罵一句「這什麼爛網站」,然後離開。好的 IA 隱形地運作:你想找退貨政策,直覺往「客戶服務」點下去,它就在那裡——這份「理所當然」正是幕後有人把結構想清楚的結果。IA 做壞了才會被注意到,而那時已經太遲。
IA 的四個系統:組織、標籤、導覽、搜尋
北極熊書把 IA 拆成四個彼此交織的系統,這是理解 IA 最實用的框架。**組織系統(organization)**決定內容如何分群、用什麼邏輯歸類——是按主題、按任務、按受眾,還是按字母序?**標籤系統(labeling)**決定每個分類、每個連結叫什麼名字——「關於我們」還是「公司簡介」?「我的帳戶」還是「個人中心」?一個字選錯,整個分類就失去意義。**導覽系統(navigation)**決定使用者如何在結構裡移動——選單、麵包屑、頁尾連結,都是移動的路徑。**搜尋系統(search)**決定使用者如何直接跳到目標——搜尋框、篩選、結果排序。這四者不是各自獨立的:標籤取得不好,再清楚的組織架構也讀不懂;導覽做得再順,底層的組織邏輯混亂一樣是繞圈子。把一個 IA 問題拆進這四格,通常就能定位到底是哪一環壞了。
組織架構的三種形態:階層、矩陣、序列
內容組織起來,結構上大致有三種形態。最常見的是階層式(hierarchy),也就是樹狀結構:大分類底下分中分類,再分小分類,像檔案夾一層層展開。人腦天生擅長理解階層(生物分類、公司組織圖都是),所以它是絕大多數網站的骨幹。第二種是矩陣式(matrix):同一批內容可以從多個維度切入,例如一個商品同時能按「品牌」「價格」「顏色」三種方式篩選——這就是電商篩選器背後的結構,讓不同心智模型的人各走各的路。第三種是序列式(sequence):內容被排成一條必經的線性路徑,一步接一步,例如結帳流程、新手教學、報稅精靈。這三種不是互斥的,一個成熟的網站往往同時用上:主結構是階層,商品列表用矩陣篩選,結帳走序列。選錯形態的代價很實在——把該線性引導的付款流程做成讓人自由亂逛的階層,轉換率就會漏在半路。
用卡片分類挖出使用者的心智模型
IA 最大的陷阱,是設計師照著「公司內部組織圖」或「自己的邏輯」來分類,而不是照使用者腦中的邏輯。保險公司把內容按「壽險部/產險部/投資部」分,但使用者腦裡想的是「我出車禍了該點哪裡」——這兩套分類法可能完全對不上。要挖出使用者真正的心智模型(mental model),經典方法是卡片分類(card sorting):把每則內容寫在一張卡片上,請一群真實使用者按他們覺得合理的方式分堆、命名。開放式卡片分類讓使用者自訂分類名稱(適合從零建構 IA),封閉式則給定分類請他們歸位(適合驗證既有結構)。它的價值在於強迫你面對一個事實——內容該怎麼分,答案不在你腦裡,在使用者腦裡。NN/g 特別提醒一個細節:別讓卡片分類淪為「字面比對」,使用者常只是把用字相同的卡片湊一堆,你要設計卡片內容去逼他們真正依語意而非表面詞彙來分。
用樹狀測試驗證「找不找得到」
卡片分類幫你「建」出一個 IA,但建好不等於好用。驗證的方法是樹狀測試(tree testing)——把你的分類結構抽成一份純文字的目錄大綱(拿掉所有視覺設計、顏色、圖示),然後給使用者一個任務:「你想退換一件買錯尺寸的衣服,你會點哪裡?」看他們在這棵光禿禿的樹上一層層點下去,最後停在哪。因為剝除了視覺線索,樹狀測試測的是結構本身的可尋性(findability),而不是漂亮的按鈕救場的能力。NN/g 把這對方法的分工講得很清楚:卡片分類是用來「產生」IA 的點子,樹狀測試是用來「評估」IA 的選項。一個發散、一個收斂,前後搭配才完整。而且樹狀測試快又便宜,可以在還沒動任何視覺設計、只有一份大綱時就反覆迭代,把結構的錯抓在最省成本的階段。
導覽模式:全域、區域、情境三層
導覽系統在實作上通常分三層,理解這三層能幫你把選單設計講清楚。**全域導覽(global navigation)**在每一頁都在,是網站最高層的分類——通常就是頂部那條主選單,讓使用者不管走到多深都能回到主幹。**區域導覽(local navigation)**是在某個區塊內部的次級選單,例如進到「產品」大類後,側邊出現該類底下的子項。**情境導覽(contextual navigation)**則是嵌在內容裡、依當下脈絡出現的連結,例如文章底下的「相關文章」、商品頁的「常一起購買」。這三層對應使用者不同的移動需求:全域是「我要跳到別的大區」,區域是「我在這區裡繼續逛」,情境是「順著眼前的內容往相關的走」。此外還有兩個好用的輔助元件:**麵包屑(breadcrumbs)**告訴使用者「你在階層的哪一層、怎麼回上一層」,尤其對深層階層的網站是廉價又有效的定位工具;**大型選單(mega menu)**則用一個展開的面板一次攤開大量子分類,適合品項繁多的電商或內容站,但前提是分類本身要組織得夠好,否則只是把混亂一次全倒給使用者看。
搜尋 vs 瀏覽,與行動選單的爭議
使用者找東西有兩種基本策略:**瀏覽(browse)**是沿著你設計的分類一層層點進去,**搜尋(search)是直接打字跳到目標。兩者服務不同的人與情境:目標明確、知道自己要什麼(「我要買 iPhone 保護殼」)的人偏好搜尋;還在探索、不確定有什麼可選(「有什麼週末活動」)的人偏好瀏覽。好的 IA 兩者都要照顧,而不是賭使用者只用其中一種——內容量一大,光靠瀏覽會累死人,搜尋就成了必要出口。最後談一個至今沒有定論的爭議:行動裝置的漢堡選單(hamburger menu)。它把整個導覽藏進一個三條線的圖示裡,省下寶貴的螢幕空間,但代價是「眼不見為淨」——藏起來的東西使用者想不到要去點,選單的探索性與被使用率都會下降。多次研究顯示,把重要項目藏進漢堡選單會降低被發現的機率。因此現在行動端更常見的折衷,是把最高頻的三到五個項目放進底部的分頁列(tab bar)**常駐露出,其餘次要項目才收進漢堡。這個爭議的本質,又回到 IA 的核心命題:看得見永遠比藏起來更容易被找到,而 IA 的全部工作,說到底就是讓對的東西在對的時刻被看見。
🧠 記
- IA 是「共享資訊環境的結構設計」(Rosenfeld & Morville「北極熊書」),做好時隱形,做壞時才被罵——好 IA 讓「找到東西」變得理所當然。
- IA 四系統:組織(怎麼分類)、標籤(叫什麼名字)、導覽(怎麼移動)、搜尋(怎麼直達);拆進這四格通常能定位問題出在哪一環。
- 組織架構三形態:階層(樹狀,人腦最熟)、矩陣(多維度切入,電商篩選器)、序列(線性必經路徑,結帳流程);成熟網站三者並用。
- 卡片分類用來「產生」IA、挖使用者的心智模型(開放式建構、封閉式驗證);樹狀測試用來「評估」IA、測純結構的可尋性——一發散一收斂。
- 導覽三層:全域(每頁都在的主選單)、區域(區塊內次級選單)、情境(嵌在內容裡的相關連結);麵包屑幫定位、mega menu 攤大量子類。
- 分類要照使用者的心智模型,不是照公司組織圖或設計師的邏輯——答案不在你腦裡,在使用者腦裡。
- 搜尋服務目標明確的人、瀏覽服務還在探索的人,兩者都要顧;漢堡選單省空間但降低被發現率,重要項目該常駐露出(如底部 tab bar)。
✍️ 實踐
挑一個你熟悉、但結構有點亂的網站或 App(自家產品、常用的工具、甚至一個政府網站),花十五分鐘做一次微型樹狀測試。第一步(約 5 分鐘):不看網站,純粹把它的主選單與各層子分類用純文字抄成一份縮排大綱,只留文字、拿掉所有圖示和顏色——這一步本身就會逼你看清結構的深度與分岔。第二步(約 5 分鐘):寫下三個真實使用者會有的任務,用使用者的口吻而非官方術語,例如「我要取消訂閱不想再被扣款」「我想改綁定的信用卡」「我要查上個月的帳單」。第三步(約 5 分鐘):拿著這份純文字大綱,對每個任務問自己「一個第一次來的人,會直覺點進哪個分類?」在你猜的路徑上做記號,並標出任何一個「我自己都要猶豫兩秒」或「這其實藏在第三層」的地方。做完你會得到一張清單:哪些任務的路徑順到不用想,哪些卡在標籤取得不清、或藏得太深。那些卡住的點,就是你的 IA 最該動手修的地方——而你只用了一份大綱、零行程式碼就找到了它們。
🔗 延伸學習
- Information Architecture: Study Guide — NN/g:NN/g 的 IA 主題總覽,把「什麼是 IA、怎麼做 IA 研究、怎麼設計導覽」的相關文章與影片串成一份學習地圖,適合當入口。
- Card Sorting vs. Tree Testing — NN/g:清楚說明這兩個方法的分工——卡片分類「產生」IA、樹狀測試「評估」IA,一發散一收斂。
- Card Sorting: Uncover Users’ Mental Models — NN/g:卡片分類的定義、開放式與封閉式的差別,以及如何用它挖出使用者真正的分類邏輯。
- Tree Testing: Fast, Iterative Evaluation of Menu Labels and Categories — NN/g:樹狀測試的操作方法,說明為何剝除視覺後更能測出結構本身的可尋性。
💬 問 AI
我想深入理解資訊架構(IA)與導覽設計,請依序幫我:
1. 用 Rosenfeld & Morville 的 IA 四系統(組織、標籤、導覽、搜尋)
當框架,各舉一個「做好」與「做壞」的真實網站例子對照。
2. 解釋組織架構的三種形態(階層/矩陣/序列),並說明什麼樣的
內容或任務分別最適合哪一種,為什麼選錯的代價很大。
3. 帶我走一遍卡片分類與樹狀測試的完整流程:各自在什麼階段用、
開放式 vs 封閉式怎麼選、樣本要多少人、結果怎麼解讀。
4. 針對行動裝置導覽,分析漢堡選單 vs 底部分頁列(tab bar)的
取捨,並給我一套「什麼項目該常駐露出、什麼可以收起來」的判準。
5. 最後給我一份「IA 健檢清單」,讓我能對任何一個既有網站
快速找出組織、標籤、導覽、搜尋四方面最常見的問題。