UI／UX 工程與現代產品設計系統
一份嚴謹、具機構級標準的使用者介面工程、UX 架構、設計標記、元件庫與產品美學改造操作指南。
1. 核心操作原則
- 資訊密度與呼吸空間：高密度佈局（例如 Linear、Bloomberg、Stripe、TradingView）在每個 viewport 像素中呈現最大訊號，同時避免雜亂。這透過刻意對比、緊湊的字體比例、1px 的細緻邊框以及一致的間距網格（4px／8px）來實現。
- 高工藝設計準則：拒絕未經打磨的通用預設值：
- ❌ 不使用過度飽和的紫色／靛藍色漸層。
- ❌ 不使用難以閱讀的低對比度灰底灰字（白色背景上的
text-gray-400或黑色背景上的text-zinc-600）。 - ❌ 不使用 emoji 圖示取代清晰的向量 SVG（Lucide／Radix）。
- ❌ 不使用帶有巨大圓角（
rounded-3xl）且文字未對齊的大型空白浮動卡片。 - ❌ 不要缺少鍵盤焦點狀態或僅依賴滑鼠的互動。
- ✔️ 使用有目的的調色盤、細緻的 1px 邊框（
border-slate-800）、等寬表格數字（font-mono tabular-nums）、清晰的微標籤，以及可存取的對比度（$>4.5:1$）。
- 領域特定色彩語意：
- 在金融／量化應用程式中，色彩具有高風險的語意含義。
- 綠色（
#10B981／#22C55E）：正 Alpha、盈利能力、買入訊號、上漲趨勢。 - 紅色（
#EF4444／#F43F5E）：虧損、回撤、法務風險、賣出訊號、負現金流。 - 琥珀色／黃色（
#F59E0B）：謹慎、需要分流、中性狀態、警告標誌。 - 藍色／青色（
#3B82F6／#06B6D4）：資訊狀態、焦點環、主要操作按鈕、中性趨勢。 - 色盲無障礙：切勿僅依賴顏色來傳達資訊。請搭配方向字形（
▲、▼、—）、狀態徽章或工具提示。
- 可預測的感知效能：
- 零佈局位移（CLS < 0.1）：為懶加載的圖表和表格保留骨架空間。
- 樂觀回饋：按鈕點擊和篩選開關的即時作用中狀態（<50ms 回饋）。
- 使用骨架屏而非全頁轉圈動畫：在資料載入時保持頁面佈局和導航框架。
2. 設計標記架構
一個穩固的設計系統由三個明確的標記層級組成：
graph TD
Primitive["1. 原始標記<br>(原始值: slate-900, emerald-500, font-size-14, 8px)"]
Semantic["2. 語意標記<br>(意圖: surface-background, text-primary, border-subtle, status-success)"]
Component["3. 元件標記<br>(限定範圍: table-header-bg, badge-pill-padding, chart-grid-stroke)"]
Primitive --> Semantic --> Component
2.1 色彩標記矩陣（機構級深色與淺色主題）
| 語意標記 | 深色模式值 | 淺色模式值 | 用途 |
|---|---|---|---|
bg-app | #0B0F17 (深曜石黑) | #F8FAFC (石板色調) | 根視窗背景 |
bg-surface | #111827 (濃鋅/石板色) | #FFFFFF (純白) | 卡片、面板、模態對話框 |
bg-surface-hover | #1E293B (柔化藍灰) | #F1F5F9 (淺石板色) | 表格行懸停、選單項目懸停 |
border-subtle | #1E293B (1px 清晰邊框) | #E2E8F0 | 卡片邊框、表格分隔線 |
border-accent | #334155 | #CBD5E1 | 聚焦的輸入框、活頁標籤邊框 |
text-primary | #F8FAFC (高對比度，16:1) | #0F172A | 主要標題、表格資料值 |
text-secondary | #94A3B8 (石板色 400，7:1) | #475569 | 指標標籤、描述、時間戳 |
text-muted | #64748B (石板色 500，4.5:1) | #64748B | 頁尾、禁用狀態、快捷鍵提示 |
accent-primary | #2563EB (皇家藍) | #2563EB | 主要 CTA 按鈕、作用中選項按鈕 |
status-bullish | #10B981 (翡翠綠) | #059669 | 漲幅、買入信心、正 CAGR |
status-bearish | #EF4444 (玫瑰紅) | #DC2626 | 回撤、不合格、高負債 |
status-caution | #F59E0B (琥珀色) | #D97706 | 資料過時、需要審查、中等旗標 |
2.2 字體比例與數字格式化
/* 對金融終端與高密度表格至關重要 */
.tabular-numbers {
font-family: var(--font-mono), monospace;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
- 標題（顯示／標題）：半粗體／粗體 (600/700)，緊湊字距（
letter-spacing: -0.03em），行高 1.2。 - 內文與控制項：13px–14px（
text-sm），互動標籤使用中等 (500)，文字使用一般 (400)。 - 微型標籤與徽章：11px–12px（
text-xs），粗體／半粗體 (600/700)，大寫並搭配tracking-wider。 - 數字與指標：等寬表格字體（
JetBrains Mono、Roboto Mono或帶有tabular-nums的Inter），在表格中全部靠右對齊。
3. 高密度金融終端與表格 UX
資料表格是金融和分析工作流程的核心引擎。請遵守以下不可妥協的規則：
- 對齊規則：
- 文字、符號和公司名稱：靠左對齊。
- 數值指標（價格、P/E、ROCE、CAGR、分數、日期）：靠右對齊。
- 狀態徽章、可操作旗標、圖示：置中對齊。
- 固定欄位與多列表頭：
- 表頭行必須在垂直滾動時保持固定（
sticky top-0 bg-surface z-10）。 - 在水平滾動時，識別性欄位（公司名稱／代號）應固定，以便於行動裝置和超寬表格使用。
- 表頭行必須在垂直滾動時保持固定（
- 視覺結構：
- 行高：緊湊 (36px–40px) 或標準 (44px)，帶有微妙的斑馬紋或清晰的 1px 邊框（
border-b border-slate-800/60）。 - 即時行懸停高亮（
hover:bg-slate-800/40 cursor-pointer）。 - 直接內聯的徽章藥丸（
bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded text-xs font-semibold）。
- 行高：緊湊 (36px–40px) 或標準 (44px)，帶有微妙的斑馬紋或清晰的 1px 邊框（
- 互動控制項：
- 排序指示箭頭（
▲作用中升冪、▼作用中降冪、淡化⇅可排序）。 - 即時搜尋附清除按鈕（
X）、作用中篩選計數晶片（篩選 (3)），以及含總計數的分頁控制項（顯示第 1–50 項，共 1,060 項）。
- 排序指示箭頭（
4. 可用性與互動架構（尼爾森諾曼啟發式評估）
flowchart LR
A["辨識優於回憶<br>(麵包屑、固定表頭、已儲存篩選)"] --> B["使用者控制與自由<br>(快速清除、按 Esc 關閉、復原)"]
B --> C["系統狀態可視性<br>(樂觀 UI、載入骨架、時間戳)"]
C --> D["使用效率<br>(鍵盤快捷鍵、命令面板 Cmd+K)"]
- 系統狀態的可視性：
- 始終在金融資料上顯示「截至 [市場日期／時間]」，讓使用者知道市場是否正在交易或已收盤。
- 當請求耗時超過 100ms 時，顯示局部骨架而非空白畫面或阻擋式轉圈動畫。
- 使用者控制與自由：
- 當有任何非預設篩選條件啟用時，篩選列必須提供一鍵「重設所有篩選」按鈕。
- 模態框和抽屜必須能透過
Escape鍵和點擊背景來關閉。
- 一致性與元件階層：
- 主要操作：實心高對比填充（
bg-blue-600 hover:bg-blue-500 text-white）。每個視圖中僅限一個主要 CTA。 - 次要操作：帶邊框／微妙的填充（
bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700）。 - 幽靈操作：透明（
hover:bg-slate-800 text-slate-400 hover:text-slate-100）。 - 破壞性操作：紅色調警告（
bg-rose-600/10 hover:bg-rose-600/20 text-rose-400 border border-rose-500/30）。
- 主要操作：實心高對比填充（
- 無障礙設計 (WCAG 2.2 AA／AAA)：
- 文字與背景的對比度 $ ge 4.5:1$（一般內文），$ ge 3:1$（大字型與 UI 元件）。
- 所有互動元素必須有可見的
:focus-visible焦點環（ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-900）。 - 觸控裝置上的最小可點擊觸碰目標：$44 \times 44$px。
5. WCAG 2.2 AA／AAA 色彩對比度工程與驗證
對比度不是美學偏好；它是一項數學工程規格。低對比度會導致嚴重的認知疲勞、在強光或低亮度下可讀性失敗，以及無障礙合規性違規。
5.1 數學對比度規格
任何 sRGB 顏色的相對亮度 $L$ 使用 CIE 公式計算： $$L = 0.2126 R_s + 0.7152 G_s + 0.0722 B_s$$ 其中每個顏色通道 $C \in {R, G, B}$ 是從 8 位元 sRGB ($C_{\text{srgb}} = C_{8\text{bit}} / 255$) 線性化而得： $$C_s = \begin{cases} \frac{C_{\text{srgb}}}{12.92} & \text{如果 } C_{\text{srgb}} \le 0.04045 \ \left(\frac{C_{\text{srgb}} + 0.055}{1.055}\right)^{2.4} & \text{如果 } C_{\text{srgb}} > 0.04045 \end{cases}$$
較亮顏色 ($L_1$) 與較暗顏色 ($L_2$) 之間的對比度為： $$\text{對比度} = \frac{L_1 + 0.05}{L_2 + 0.05} : 1$$
5.2 嚴格合規門檻
| 元素類別 | WCAG 2.2 AA 最小值 | WCAG 2.2 AAA 目標 | 驗證標準 |
|---|---|---|---|
| 一般內文文字 (< 18pt／24px 一般, < 14pt／18.5px 粗體) | $\ge 4.5:1$ | $\ge 7.0:1$ | 主要資料、標籤、描述、表格列、按鈕標籤 |
| 大字型與標題 ($\ge 18\text{pt}$／$24\text{px}$，或 $\ge 14\text{pt}$ 粗體) | $\ge 3.0:1$ | $\ge 4.5:1$ | 顯示標題、區段標頭、突出的指標數字 |
| UI 元件與圖形物件 (WCAG 1.4.11) | $\ge 3.0:1$ | $\ge 4.5:1$ | 輸入框邊框、切換開關、分段標籤邊界、作用中晶片輪廓、焦點環 |
| 顏色的使用 (WCAG 1.4.1) | 需要非顏色指示器 | 需要雙重編碼 | 切勿僅透過顏色來傳達選取或狀態；請搭配勾選標記、圖示或文字粗細 |
5.3 5 個常見對比陷阱與系統性修正
1. 深色模式分段標籤混合
- 缺陷：作用中標籤設為
--card: #111827，位於容器背景--tab-bg: #0F172A內部。對比度為 1.02:1（RGB 差異 2 個單位）。選取的標籤完全融入容器背景，使用者無法判斷目前選取的是哪個。 - 修正：將作用中標籤背景提升至
--card-elevated: #1E293B，加入作用中 1px 語意邊框（1px solid var(--accent)／#10B981）、一個微弱的發光環（box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25)），並將作用中標籤的 SVG 圖示顏色調整為與之相符。
2. 淺色模式淡化文字對比失敗
- 缺陷：在白色（
#FFFFFF）或淺色紙張（#F8FAFC）上使用 Slate-400（#94A3B8）作為預設次要／淡化文字。對比度為 2.57:1，嚴重違反 WCAG SC 1.4.3 ($\ge 4.5:1$)。 - 修正：將淺色模式的次要文字加深至至少 Slate-500（
#64748B），這在#FFFFFF上可達到 4.77:1，在#F8FAFC上可達到 4.54:1。
3. 琥珀色／警告文字徽章失敗
- 缺陷：在純白背景上使用亮琥珀色（
#D97706／Amber-600）作為狀態藥丸。對比度為 3.22:1，未達 4.5:1 的文字門檻。 - 修正：在淺色模式下，將文字徽章加深至 Amber-700（
#B45309），達到 4.82:1，同時保留語意上的暖色調。
4. 深色模式輸入框與控制項邊界隱形 (WCAG 1.4.11)
- 缺陷：在深色石板表面（
#111827／#0B0F17）上使用微弱的 8%–12% 白色透明度邊框（rgba(255, 255, 255, 0.08)），對比度僅為 1.2:1–1.4:1，違反了 3:1 的非文字邊界要求。 - 修正：將深色模式輸入框邊框的預設值設為至少 18% 白色透明度（
rgba(255, 255, 255, 0.18)／#334155），懸停狀態設為 32%（rgba(255, 255, 255, 0.32)／#475569）。
5. Android Material 3 深色模式 FilterChip 陷阱
- 缺陷：在 Material 3 中，預設選取的
FilterChip使用secondaryContainer（#37474F）搭配深色表面（#14181E），僅產生 1.83:1 的對比度。如果沒有輪廓或字形，該晶片會同時違反 SC 1.4.11 和 SC 1.4.1。 - 修正：明確指定：
selectedBorderColor = MaterialTheme.colorScheme.primary（可達到 9.88:1 對比度）。selectedBorderWidth = 1.5.dp。leadingIcon = if (selected) { { Icon(Icons.Filled.Done, ...) } } else null，使選取狀態無論色彩感知如何都可見。
6. UI/UX 改造手冊（階段性執行）
當負責重新設計或現代化現有應用程式的 UI/UX 時，請遵循此 4 步驟執行策略：
步驟 1：設計系統基礎與標記提取
- 在 CSS/Tailwind 中確立調色盤、字體比例、間距變數和邊框圓角階層（
globals.css／tailwind.config.js）。 - 引入機構級深色模式標記和語意色彩類別。
步驟 2：元件基礎現代化
- 重構核心可重複使用的 UI 基礎元件：
Button：主要、次要、幽靈、破壞性，附載入轉圈動畫。Badge／Tag：用於狀態、層級和動能的語意彩色藥丸。Card／Panel：清晰的邊框、圓角（rounded-lg或rounded-xl）、微妙的背景。DataTable：表頭排序、靠右對齊數字、固定表頭、行懸停。Modal／Drawer：背景模糊、焦點陷阱、流暢的進入動畫。Tooltip：針對複雜指標（例如 EV/EBITDA、CANSLIM 分數）提供資訊性說明。
步驟 3：佈局與導覽全面翻新
- 使用清晰的作用中路線指示器、公司搜尋列、系統狀態指示器（例如市場交易時段日期、API 健康狀態）來現代化頂部導覽列／側邊欄。
- 消除佈局卡頓和路由切換時的頁面跳動。
步驟 4：高價值頁面現代化
- 改造關鍵的使用者面向視圖：
- 儀表板：執行摘要圖塊、市場脈動、漲幅最大／跌幅最大、狀態熱圖。
- 信心／篩選器：具備快速搜尋、可排序欄位、指標藥丸和快速詳細資訊抽屜的高密度表格。
- 公司工作區／詳細資料：互動式圖表，附時間範圍藥丸（1M、6M、1Y、5Y、MAX），以及可自訂的疊加層。
- 投資組合／觀察清單：摘要卡片，包含配置圓餅圖、風險指標以及按產業分類的表現。
7. 數據視覺化與圖表工程
金融儀表板需要專業級的圖表呈現：
- 圖表類型選擇：
- 折線圖／面積圖：隨時間變化的價格與回報。使用 2px 實線並避免過多的 gridline。
- K 線圖 (OHLC)：標準的金融價格結構。配置視覺化模式（
rising: green, falling: red）。 - 長條圖／柱狀圖：比較成交量、營收、部門表現。使用一致的語意顏色。
- 圓餅圖／環圖：僅限於構成比例（例如資產配置），且類別不超過 5 個。
- 散佈圖：因子分析、風險對比報酬。可縮放並支援工具提示。
- 圖表運作規則：
- 所有圖表都需要一個數據最小化按鈕，以及一個「放大至選取範圍」介面。
- 工具提示必須顯示精確值、日期／時間和單位。雙軸圖表需要明確標示哪個軸對應哪個數據系列。
- 圖例應可點擊，用於切換數據系列的顯示。
- 預設動畫：在超過 500 個數據點時，使用過渡動畫（持續時間 300ms、ease-out）並採用線性繪製，避免延遲。
8. 工程交付標準
- CLS 目標：$< 0.1$。
- 互動時間 (TTI)：$< 2.5$ 秒。
- 色彩對比度：每次建置時使用自動化工具（Puppeteer／Playwright + axe-core）進行驗證。
- 鍵盤導航：每個互動元素都必須可定位且可操作。
- 響應式：從 320px（行動裝置）到 2560px（超寬螢幕）的所有 viewport 寬度。以桌面體驗為主要設計重點，並優雅地向下相容。
使用此技能來開發符合業界標準的 UI，具備專業級美學、嚴謹的無障礙設計以及卓越的使用者體驗。