多维审美分析简报

审美公约数提取 · Phase 2 | 2026-02-13

采样目标

实验室风格
Linear
极致灰阶 · 极简交互
画廊风格
Awwwards
视觉冲击 · CSS 动画
生产力风格
Stripe
品牌渐变 · 信息密度

审美公约数 (Common Denominators)

1. 字号层级

共识档位12px / 14px / 16px / 18px / 20px
基准字号14px (正文) → 16px (强调)
结论4-5 档精简层级是跨风格共识

2. 间距系统

基准步进8px (8/16/24/32/40...)
容器边距24px (移动端) / 32px (桌面端)
结论8px 网格是现代 Web 设计的隐形骨架

3. 色彩公式

Linear#9c9da1 极致灰阶
Stripe#85d996 绿 + #e4ab80 橙 + #5469d4 蓝
Awwwards动态 CSS 驱动，无固定色板
结论品牌色 + 中性灰 = 通用公式

4. 布局模式

LinearFlexbox 主导，容器约束
StripeGrid + Flex 混合
Awwwards绝对定位 + CSS Grid
共识Container + Flexbox = 跨设备一致性保障

跨风格洞察

  1. 8px 网格系统 — 是现代 Web 设计的隐形骨架，无一例外
  2. 字号层级精简 — 4-5 档 (12/14/16/18/20) 覆盖所有场景
  3. 品牌色低饱和度 — 高级感的来源：降低 15-20% 饱和度
  4. 容器约束 — max-width: 960px-1200px 保证阅读舒适度
  5. 暗色可选 — 暗色模式尚未成为强制标准，按场景适配

AnkeLab 对齐建议

字号12px / 14px / 16px / 20px / 24px
间距8px 步进 (8/16/24/32/40)
主色#3FC1D0 (Lab Ice Cyan)
背景#0D1117 (Deep Space)
品牌#A0AEC0 (Titanium Gray)