information-architecture

此技能定義產品或網站的結構骨架。它介於設計簡報與建置之間。請在設計簡報完成後、任務建立前執行此技能。

範例提示

• 「在我開始建置之前，先規劃這個 App 的 IA」
• 「規劃導覽與頁面結構」
• 「我需要為一個文件網站組織內容」
• 「定義入門體驗的使用者流程」

流程

1. 在 .design/*/DESIGN_BRIEF.md 尋找現有的設計簡報。如果有多個子資料夾，使用最近修改的那個，或詢問使用者正在處理哪個功能。如果沒有簡報，詢問使用者正在建置什麼以及為誰建置。

2. 探索現有程式碼庫，了解已存在的結構：

   • 路由：Next.js 的 app/ 或 pages/ 目錄、React Router 設定、Vue Router、SvelteKit 路由，或靜態 HTML 頁面檔案
   • 導覽元件：header、sidebar、navbar、breadcrumb、footer 元件
   • 佈局元件：根佈局、巢狀佈局、頁面包裝器、容器元件
   • 頁面目錄：頁面目前在檔案系統中的組織方式
   • URL 模式：現有的 slug、動態區段、查詢參數慣例
   • CMS 或資料層：內容模型、API 路由、資料擷取模式、MDX/內容目錄
   • 如果結構已存在，此技能會擴展並改善它。不要提出忽略已建置內容的新架構。

3. 與使用者訪談結構性決策。針對每個問題，提供你的建議答案。

   至少涵蓋：

   • 使用者需要找到或完成的主要事項有哪些？依頻率排序。
   • 可接受的導覽深度有幾層？
   • 哪些內容會隨著時間增長，哪些是固定的？
   • 是否有不同類型的使用者需要不同的進入點？
   • 使用者花費 80% 時間的頁面/檢視是哪一個？

4. 一旦達成共識，使用下方範本產出 IA 文件，並將其儲存為與設計簡報相同的 .design/<feature-slug>/ 子資料夾中的 INFORMATION_ARCHITECTURE.md。

IA 文件範本

# 資訊架構：[產品/網站名稱]

## 網站地圖

每個頁面或檢視的階層地圖。使用縮排顯示巢狀關係。包含每個頁面的 URL 模式。

- 首頁 `/`
  - 功能 A `/feature-a`
    - 子頁面 `/feature-a/detail`
  - 功能 B `/feature-b`
- 設定 `/settings`
  - 個人資料 `/settings/profile`

## 導覽模型

描述導覽系統：
- **主要導覽**：主導覽中顯示什麼？最多項目數。
- **次要導覽**：側邊欄、分頁或區段內的上下文連結。
- **工具導覽**：帳戶、設定、說明，以及主要內容階層之外的任何內容。
- **行動導覽**：導覽如何適應。漢堡選單、底部標籤或其他方式。

## 內容階層

針對每個主要頁面或檢視，定義內容優先順序：

### [頁面名稱]
1. [最高優先順序內容] -- 為什麼這項優先
2. [第二優先順序] -- 為什麼這項第二
3. [第三優先順序] -- 理由
4. [摺疊下方 / 次要]

## 使用者流程

產品中的關鍵路徑。每個流程是一系列步驟，並標註決策點。

### [流程名稱]（例如「新使用者入門」或「建立專案」）
1. 使用者到達 [頁面]
2. 使用者看到 [內容/提示]
3. 使用者採取動作：[動作]
   - 如果 [條件 A] -> [結果]
   - 如果 [條件 B] -> [結果]
4. 使用者到達 [目的地]

## 命名慣例

介面中使用的術語詞彙表。一致性很重要。選擇一個詞並在所有地方使用。

| 概念 | UI 中的標籤 | 備註 |
|---------|-------------|-------|
| [事物] | [我們如何稱呼它] | [為什麼用這個詞] |

## 元件重用地圖

哪些結構元件（佈局、容器、導覽元素）在頁面間共用。

| 元件 | 使用於 | 行為差異 |
|-----------|---------|---------------------|
| [佈局/元件] | [頁面] | [任何變化] |

## 內容成長計畫

網站的哪些區段會隨著時間累積內容，以及 IA 如何容納這種成長（分頁、篩選、搜尋、歸檔模式）。

## URL 策略

URL 建構規則：
- 模式：[例如 `/section/subsection/item-slug`]
- 動態區段：[哪些是參數化的]
- 查詢參數：[篩選、排序、分頁]