時間軸活動系統
目的
時間軸活動系統提供了一種設計時間順序事件、歷史紀錄或路線圖的方法論。它確保使用者能夠追蹤進度、理解時間關聯性，並有效率地掃視歷史數據。此系統在資訊密度與空間節奏之間取得平衡，確保「何時」與「何事」的敘事在所有檢視區域中清晰可見。
使用案例
- 為 SaaS 儀表板設計活動動態（例如：專案歷史）。
- 建構產品路線圖或版本發布說明。
- 組織公司歷史或「關於我們」的重要里程碑。
- 為電商實作訂單追蹤或出貨歷史。
- 管理多階段流程視覺化（例如：申請狀態）。
不建議使用時機
- 線性步驟進度： 若需要使用者即時完成簡單的步驟序列，請使用
step-progress-system。 - 純表格數據： 若主要目標是依多個欄位進行排序與篩選（例如：完整的財務稽核日誌），請使用
data-table-ui-system。 - 全域導航： 若為全站結構，請使用
site-navigation-system。 - 簡單部落格動態： 若標準卡片在網格或列表中已足夠，且無需視覺「線索」或時間標記。
輸入
- 事件清單： 事件、時間戳記與相關元資料的列表。
- 時間解析度： 使用者關心的是秒、天還是年？
- 事件類型： 事件的分類（例如：資訊、成功、警告、錯誤，或里程碑 vs. 次要動作）。
- 空間限制： 時間軸將位於側邊欄、全頁檢視還是狹窄的卡片中？
- 品牌標記： 顏色、字體尺度與間距標記。
輸出
- 時間軸結構規格： 「時間線」（垂直/水平線）、「節點」（標記）與「內容區塊」的定義。
- 分組策略： 事件分組的規則（例如：「今天」、「昨天」、「2023 年 10 月」）。
- 狀態與狀態矩陣： 不同事件類型與互動狀態的視覺處理方式。
- 響應式設計藍圖： 時間軸如何從置中或交替佈局適應為單欄行動版檢視。
工作流程
1. 定義時間線與方向
確定時間的方向：
- 垂直（標準）： 最適合內容長度多變的長歷史。
- 水平： 最適合高層次的路線圖或短流程，且水平空間充足。
建立「時間線」（連接事件的線條），並確保其具備一致的視覺權重與顏色（通常為中性且柔和的色調）。
2. 建立事件節點與標記
設計每個事件的視覺錨點：
- 簡單節點： 用於次要動作的小點或圓圈。
- 圖示節點： 圓圈內放置圖示以指示事件類型（例如：勾選圖示代表「已完成」）。
- 日期標記： 浮動在節點旁邊或上方的標籤。
3. 應用空間節奏與分組
透過時間段對事件進行分組，避免視覺雜亂：
- 相對分組： 「剛剛」、「2 小時前」。
- 絕對分組： 「星期一，10 月 23 日」、「2023 年 9 月」。
使用 fluid-spacing-system 維持事件之間的垂直間距一致。高優先級的里程碑應比次要活動項目擁有更多的空白區域。
4. 組織內容區塊
對每個節點旁的內容應用 visual-hierarchy-system：
- 標題： 核心動作或事件名稱。
- 元資料： 時間戳記、執行者（使用者頭像/名稱）與類別。
- 主體/描述： 可選的詳細資訊或展開的內容。
- 動作： 上下文相關的按鈕（例如：「檢視詳細資訊」、「復原」）。
5. 規劃響應式適應
- 交替佈局（Z 字模式）： 在桌機上，事件在時間線左右交替排列。在行動裝置上，摺疊為單欄（時間線在左，內容在右）。
- 單側佈局： 為行動裝置標準化為「時間線在左，內容在右」，以最大化可讀性。
決策規則
- 「時間線」規則： 除非有時間上的邏輯斷層或「載入更多」的操作，否則時間線不應中斷。
- 分組門檻： 如果同一天內有超過 5 個事件，將它們分組在單一日期標題下，以減少重複文字。
- 「節點」層級： 對「里程碑」使用較大節點或品牌顏色，對「活動」使用較小且中性的節點。
- 時間戳記位置： 對於垂直時間軸，將時間戳記放置在時間線左側（桌機）或標題正下方（行動裝置），以利於快速掃視。
限制條件
- 無障礙性： 時間軸必須能以列表形式導覽（
<ul>或<ol>）。包含圖示的節點必須具備aria-label或為螢幕閱讀器提供的隱藏文字。將時間戳記包裹在<time datetime="...">元素中，使「2 小時前」這類相對標籤仍保持機器可讀性。對於即時更新的活動動態，在aria-live="polite"區域（而非整個列表）內新增條目，讓螢幕閱讀器使用者在不失去位置的情況下聽到新事件。 - 響應性： 時間軸絕不能超出檢視區域。水平時間軸必須在行動裝置上切換為垂直或使用水平捲動。
- 視覺對比： 時間線與節點必須與背景達到 3:1 的對比度。
常見失敗模式
- 時間線中斷： 垂直線條任意地開始與結束，導致難以跟隨順序。
- 資訊過載： 在每個事件中包含過多的主體文字，使時間軸變成一片文字牆。
- 對齊不一致： 在相同時間軸內混用置中與靠左對齊的文字，卻沒有明確的邏輯。
- 行動裝置擁擠： 在行動裝置上試圖維持交替（左/右）佈局，導致文字欄位過小。
驗證標準
- 事件遵循清晰且一致的時間順序（遞增或遞減）。
- 視覺標記（節點）與連接的時間線具備一致的樣式。
- 已使用時間分組（例如：「今天」）來降低認知負擔。
- 已定義並實作響應式行為（例如：摺疊為單欄）。
- 無障礙性：時間軸以語意化列表標記，且時間戳記使用
<time datetime="...">。 - 即時動態透過限定的
aria-live="polite"區域宣佈新條目，且不干擾螢幕閱讀器焦點。 - 主要的里程碑在視覺上與次要活動有別。