UI/UX 工程与现代产品设计系统
一份严格、机构级别的用户界面工程、UX架构、设计令牌、组件库和产品美学转型操作指南。
1. 核心操作原则
- 信息密度与呼吸感：高密度布局（Linear、Bloomberg、Stripe、TradingView）在每个视口像素内呈现最多信号，同时避免杂乱。这是通过精心设计的对比度、紧凑的排版比例、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）的即时搜索、活动过滤器计数芯片（Filters (3)）以及带有总数显示的分页控件（Showing 1–50 of 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{if } C_{\text{srgb}} \le 0.04045 \ \left(\frac{C_{\text{srgb}} + 0.055}{1.055}\right)^{2.4} & \text{if } C_{\text{srgb}} > 0.04045 \end{cases}$$
较亮颜色（$L_1$）与较暗颜色（$L_2$）之间的对比度比为： $$\text{Contrast Ratio} = \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 五种常见对比度陷阱及系统性修复
1. 深色模式分段选项卡融合
- 缺陷：在设置为
--tab-bg: #0F172A的容器内，活动选项卡设置为--card: #111827。对比度比为 1.02:1（2个单位的RGB差值）。选定的选项卡完全融入容器背景，导致用户无法确定当前选择。 - 修复：将活动选项卡背景提升到
--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）上使用石板色400（#94A3B8）作为默认次要/静音文本。对比度比为 2.57:1，严重违反WCAG SC 1.4.3（$\ge 4.5:1$）。 - 修复：将浅色模式下的次要文本加深至至少石板色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、...）
[原文已截断，翻译完成。]