指標與統計系統 是做什麼的？
目的
指標與統計系統提供了一套方法論，用於以即時可理解且上下文相關的方式視覺化量化數據。它超越了單純「顯示數字」的範疇，透過建立數值層級、趨勢視覺化和語意著色的規則，確保使用者無需深入分析就能掌握某個數值的意義（例如「42% 是好是壞？」）。
使用案例
- SaaS 儀表板： 展示關鍵績效指標（KPI），如 MRR、流失率或活躍用戶。
- 行銷社會證明： 呈現「數字會說話」區塊（例如「10k+ 客戶」、「99.9% 正常運行時間」）。
- 健康與監控： 視覺化系統效能、錯誤率或資源使用情況。
- 個人分析： 在健身、理財或生產力應用程式中顯示目標進度。
- 電子商務： 顯示評論數量、庫存水準或「過去 24 小時內銷售的商品數」。
何時不該使用
- 原始資料集： 如果使用者需要排序、篩選或比較 10 行以上的多屬性數據，請使用
data-table-ui-system。 - 複雜關係： 如果主要目標是顯示變數隨時間的關係，請使用完整的圖表/繪圖庫（本原子系統未涵蓋）。
- 敘事內容： 嵌入在句子中的數字應遵循標準排版；本系統專為「顯示型」指標設計。
- 低價值元資料： 少量計數（如通知提示）應使用
badge-and-tag-system。
輸入
- 數值： 要顯示的主要數字或百分比。
- 標籤： 對該數值所代表內容的簡潔描述。
- 上下文/趨勢： 比較數據（例如，與上個月相比、與目標相比）。
- 單位/格式： 貨幣符號、百分比或單位（例如「ms」、「GB」）。
- 層級優先順序： 這是「主要 KPI」還是「輔助統計」？
輸出
- 統計卡片規格： 容器內數值、標籤和趨勢的空間排列方式。
- 字體大小比例： 為「顯示用」數字與標籤定義的字體大小。
- 趨勢邏輯： 上升、下降和中立狀態的視覺規則（顏色 + 圖示）。
- 響應式策略： 指標網格在行動裝置上如何折疊或縮放。
工作流程
1. 分類指標類型
決定所需的視覺「重量」：
- 第 1 級：英雄指標。 大、居中，通常無邊框。用於登陸頁面上的頂層社會證明。
- 第 2 級：KPI 卡片。 包含在卡片內，通常呈網格狀。用於儀表板摘要。
- 第 3 級：行內統計。 小、高密度顯示。用於標題列或側邊欄。
2. 建立數值層級
套用「顯示排版」規則：
- 數值： 必須是最大的元素（通常為正文字體的 200–400%）。
- 標籤： 放置於數值的正上方或正下方。使用較淡的顏色或較小的粗細，確保其不會與數值競爭。
- 單位： 符號（%、$）應比數字略小，以防止它們「打斷」眼睛對數值的專注。
3. 提供趨勢與比較上下文
沒有上下文的數字通常毫無意義。添加一個「比較層」：
- 趨勢指示器： 使用箭頭（↑/↓）搭配百分比或數值變化。
- 時間範圍標籤： 始終指定比較期間（例如「與過去 30 天相比」）。
- 語意著色： 將顏色應用於趨勢，而不是數值本身。
- 正向趨勢： 綠色（通常）。
- 負向趨勢： 紅色（通常）。
- 中立： 灰色。
4. 應用空間節奏（網格）
指標很少單獨顯示。使用 responsive-grid-system 對其進行分組：
- 網格佈局： 桌面上 3 或 4 欄；行動裝置上 1 或 2 欄。
- 內部間距： 確保數值周圍有足夠的留白（
--space-l或--space-xl），使其「突出」。
5. 為載入與空狀態設計
- 骨架屏： 在資料擷取期間，使用
skeleton-state-system顯示數值和趨勢的骨架。 - 零值狀態： 如果指標為 0，請決定將其顯示為「0」還是破折號（—）。
決策規則
- 「好/壞」規則： 除非該指標本身具有正負面意義（例如「溫度」不應因為上升就顯示為綠色），否則切勿使用綠色/紅色來表示趨勢。對非價值性變化使用中立色（灰色/藍色）。
- 四捨五入邏輯： 對於行銷統計，四捨五入到最接近的「K」或「M」以利快速掃視（例如「12.4K」 vs 「12,432」）。對於儀表板，則使用任務所需的精確度。
- 圖示使用： 僅在圖示有助於區分不同類別的指標時才使用（例如「用戶」圖示 vs 「營收」圖示）。不要為了裝飾而使用圖示。
- 標籤放置： 頂部對齊的標籤更適合掃視相似指標的網格；底部對齊的標籤更適合「英雄」統計，其中數字是主要吸引力。
限制條件
- 無障礙性： 使用
aria-label提供完整的上下文（例如「營收：12,000 美元，較上月成長 5%」）。確保趨勢指示器的顏色對比度符合 WCAG AA 標準（4.5:1）。 - 響應式設計： 指標值絕不能溢出其容器。對非常大的數字使用流體排版（CSS
clamp()）或「縮小以適應」邏輯。 - 一致性： 同一組中的所有指標必須使用相同的四捨五入、對齊方式和趨勢樣式。
常見失敗模式
- 「裸數字」： 顯示數值時沒有標籤或上下文，讓使用者猜測其含義。
- 過度依賴顏色： 僅使用紅/綠來指示趨勢而沒有圖示（↑/↓），導致色盲使用者無法辨識。
- 層級錯置： 使標籤比數值更大或更粗體，減慢了「掃視和理解」的過程。
- 指標擁擠： 在單一行中放置過多指標，導致數字混在一起。
- 過度精確： 在行銷登陸頁面上顯示 4 位小數，造成不必要的認知負擔。
驗證標準
- 每個指標都有清晰可見的標籤。
- 數值使用獨特的「顯示用」排版尺寸（大於正文字體）。
- 趨勢（上升/下降）同時透過顏色和圖示/符號來指示。
- 明確陳述比較上下文（例如時間範圍）。
- 僅對具有價值性的變化使用語意顏色（綠色/紅色）。
- 網格佈局在行動裝置上保持可讀性（無溢出）。
- 無障礙性：透過 ARIA 為螢幕閱讀器提供完整的上下文。