資訊架構錯了，再好的設計都救不了

資訊架構（Information Architecture, IA）是指：你的網站有哪些頁面、這些頁面如何組織、用戶如何在其中導航。

一個常見的場景：設計師做了美麗的首頁，但訪客找不到服務頁面，因為它藏在三層選單的第三層；或是網站有 20 個頁面，但 15 個都是訪客不在乎的，重要的聯絡頁面卻很難找到。

這些是 IA 的問題，不是視覺設計的問題。

好的 IA 讓訪客「不需要思考就知道要怎麼走」；差的 IA 讓訪客在每個轉折點都感到困惑。

第一步：清楚你的用戶旅程

在設計網站結構之前，先問：你的目標用戶是誰，他來到你的網站想做什麼？

常見的用戶旅程（以品牌接案工作室為例）：

旅程 A：評估型用戶

→ 首頁 → 了解服務 → 看作品集 → 確認定價 → 聯絡

旅程 B：搜尋驅動用戶

→ 從 Google 進入某篇文章 → 看到文章品質，想了解是誰寫的 → 關於我們 → 服務 → 聯絡

旅程 C：已知品牌用戶（回訪）

→ 直接進首頁或聯絡頁 → 填表單

這幾個旅程告訴你：服務、作品集和聯絡這三個頁面是最重要的——它們必須在導覽列第一層，且容易找到。

第二步：建立頁面清單

列出你網站所有需要的頁面，分成幾個層次：

第一層（最重要，出現在主導覽）：

  • 首頁（Home）
  • 服務（Services）
  • 作品集（Portfolio）
  • 關於（About）
  • 聯絡（Contact）

第二層（支援頁面，可能在導覽的下拉選單或頁尾）：

  • 定價（Pricing）
  • FAQ
  • 部落格（Blog）
  • 各服務的個別說明頁（如需要）

SEO 支援頁面（讓搜尋引擎更好抓取，人不一定直接訪問）：

  • 個別文章頁面
  • 標籤 / 分類頁面

法律 / 政策頁面（放在頁尾）：

  • 隱私政策
  • 使用條款

第三步：思考 URL 結構

URL 結構是 IA 的一部分，影響 SEO 和用戶理解：

好的 URL 結構示例：

  • yoursite.com/services/ ← 服務總覽
  • yoursite.com/services/brand-design/ ← 品牌設計服務
  • yoursite.com/portfolio/ ← 作品集
  • yoursite.com/blog/ ← 部落格列表
  • yoursite.com/blog/your-slug/ ← 單篇文章

規則：

  • 越深的頁面 URL 越長，反映它在 IA 中的層次
  • 重要頁面（服務、作品集）應該在第一層
  • 不要使用無意義的 ID 數字（/page?id=1234），用描述性 slug

第四步：導覽設計原則

導覽列只放最重要的 5–6 個連結

超過 6 個選項讓用戶產生選擇困難。如果你有更多頁面，用下拉選單或頁尾連結承接。

每個選項都應該讓用戶清楚知道點了會到哪裡

「了解更多」是弱的導覽文字；「服務項目」「案例作品」清楚得多。

一致性：導覽在每個頁面都一樣

用戶不應該到了某個頁面，發現導覽列少了兩個選項——一致的導覽建立安全感。

用麵包屑（Breadcrumb）幫助深層頁面的導航

在部落格文章、服務說明頁等深層頁面的頂部加入麵包屑：

首頁 > 部落格 > 文章標題

這讓用戶隨時知道自己「在哪裡」，並能快速跳回上一層。

工具推薦

繪製 IA 的工具：

  • Miro（線上協作白板，有流程圖功能）
  • FigJam（Figma 的協作白板）
  • draw.io（免費，功能完整）
  • 紙和筆（最快的方式）

測試 IA 的方法：

  • 卡片排序（Card Sorting）： 讓 5–10 個目標用戶把內容分類，看他們的分類方式是否和你的設計一致
  • 樹狀測試（Tree Testing）： 給用戶一個只有文字的導航結構，看他們能否找到目標頁面

在正式設計前做一次 IA 測試，比做完了發現問題再改省 10 倍時間和成本。