頁面標題系統
目的
頁面標題系統提供一套方法論，用於設計個別頁面頂層的結構區域（與全域網站標題不同）。它確保使用者能立即識別所在位置（Wayfinding）、了解當前檢視畫面的狀態或中繼資料，並存取完成任務所需的主要操作，不必在選單中四處尋找。
使用案例
- 設計複雜儀表板檢視畫面的標題（例如「專案詳細資料」）。
- 為長篇文章或文件頁面安排引言結構。
- 組織設定或個人檔案頁面，其中脈絡與儲存操作至關重要。
- 在 SaaS 應用程式或大型內容網站中標準化標題模式。
- 在統一的佈局中管理麵包屑、標題與狀態指示器。
何時不應使用
- 全域網站導航： 請使用
site-navigation-system處理整個網站共用的主要標題。 - 簡單的登陸頁面： 此類頁面的「英雄」區塊（參見
hero-section-optimization）即作為頁面標題。 - 啟動畫面 / 彈出視窗： 內容為暫時性或極簡時，請使用
overlay-and-dialog-system處理彈出視窗標題。
輸入
- 頁面標題與層級： 頁面的主要名稱（H1）及其在網站結構中的位置。
- Wayfinding 需求： 使用者是否需要麵包屑或「返回」按鈕？
- 中繼資料與狀態： 關鍵詳細資訊，例如「最後更新時間」、「草稿/已發布」或擁有者資訊。
- 操作優先級： 此頁面上的主要任務為何？（例如編輯、分享、建立）
- 品牌/系統代碼： 間距、字體與色彩代碼。
輸出
- 標題結構規格： 區域的定義（Wayfinding、標題、中繼資料、操作）。
- 佈局藍圖： 對齊（靠左 vs. 置中）與間距的規則。
- 響應式策略： 標題如何從桌面端適應到行動端。
- 互動規格： 固定標題與操作按鈕優先級的行為。
工作流程
1. 定義導覽路徑（Wayfinding）
決定使用者如何到達此頁面以及如何返回：
- 麵包屑： 用於深度層級（例如
首頁 > 專案 > 設計）。 - 返回按鈕： 用於線性任務或返回特定列表檢視時。
- 父層連結： 使用簡單的「<- 返回 [父層]」處理兩層深度。
2. 建立內容核心（標題與中繼資料）
將 visual-hierarchy-system 應用於標題的中央區域：
- H1 標題： 最顯眼的文字元素。
- 脈絡中繼資料： 次要資訊（例如標籤、時間戳記、狀態徽章）放置在標題附近。
- 縮圖/頭像： 如果頁面代表特定實體（例如使用者個人檔案或產品）。
3. 組織頁面級操作
將操作劃分為優先級層級：
- 主要操作： 一個「Level 1」按鈕（通常是高對比度的填滿按鈕）。
- 次要操作： 「Level 2」按鈕（外框或幽靈樣式），處理較不頻繁的任務。
- 第三級操作： 溢位選單（...）處理罕見的管理任務。
4. 選擇空間模式
- 標準靠左對齊（SaaS/儀表板）： 麵包屑/標題在左側，操作在右側。最適合生產力。
- 置中（內容/文章）： 所有元素置中。最適合可讀性與敘事。
- 分割佈局： 標題與操作之間以空白分隔，以強調間隔。
5. 定義固定與捲動行為
- 固定標題： 如果捲動時需要頻繁存取操作（例如「儲存」），則保持頁面標題可見。
- 收合標題： 當使用者向下捲動時，縮小標題高度或隱藏麵包屑，以最大化內容空間。
決策規則
- 麵包屑規則： 如果網站深度超過兩層，頁面標題中必須使用麵包屑。
- 「一個 H1」規則： 頁面標題必須包含該頁面唯一的 H1 標籤。
- 操作對齊： 在桌面上，將主要操作對齊到右上角。在行動裝置上，如果標題變得太擁擠，考慮使用固定底部列來放置主要操作。
- 狀態可見性： 關鍵狀態（例如「付款逾期」）必須使用徽章或圖示緊鄰標題放置。
約束條件
- 無障礙性： 標題必須使用
<h1>。麵包屑必須使用<nav>搭配aria-label="Breadcrumb"。 - 對比度： 狀態徽章與操作必須符合 WCAG AA 對比度要求。操作按鈕必須符合 WCAG 2.2 SC 2.5.8 目標大小（最小值 24x24px，行動裝置固定列建議 44x44px）。
- 響應式： 標題必須優雅地處理長標題（截斷 vs. 換行）。
常見失敗模式
- 操作過載： 在標題中放置過多按鈕，混淆主要任務。
- 缺少 Wayfinding： 在深層頁面中忘記放置麵包屑，讓使用者感到「迷失」。
- 標題擠壓： 在行動裝置上沒有為長標題留出足夠空間，導致它們與操作重疊。
- 重複的網站標題： 使頁面標題看起來過於類似全域網站標題，造成視覺混淆。
驗證準則
- 標題包含一個與導覽標籤相符的清晰 H1。
- Wayfinding（麵包屑/返回）適合網站深度。
- 主要操作在視覺上與次要操作有所區別。
- 在行動裝置檢視畫面上，佈局保持可用且可讀。
- 使用語意式 HTML（麵包屑用
<nav>，標題用<h1>）。 - 狀態指示器（如有）具有高對比度且易於發現。