67 种 UI 风格
从极简主义到粗野主义，从毛玻璃到粘土形态，覆盖主流 UI 风格
📚 知识库概览
系统化整理的 UI/UX 设计原则，帮助快速做出专业级界面
161 种配色方案
按行业分类的专业配色，包含科技、金融、医疗、电商等 9 大行业
57 种字体组合
经典字体配对方案，包含现代专业、优雅高端、创意活力等类别
24 种设计模式
落地页布局模式，包含 Hero-Centric、Problem-Solution、Social Proof 等
完整检查清单
上线前必查项目，包含基础、无障碍、性能、响应式、SEO 五大类
行业避坑指南
金融、医疗、奢侈品、儿童教育、SaaS 五大行业避坑建议
🎨 67 种 UI 风格
按类别整理的 UI 风格，每种风格包含特点、适用场景、CSS 实现和避坑指南
现代极简风格
| 风格名称 | 特点 | 最佳适用 |
|---|---|---|
| Minimalism 极简主义 |
网格系统、大量留白、无衬线字体、有限配色 | 企业应用、仪表盘、文档网站 |
| Neumorphism 新拟物主义 |
软阴影、同色系、浮雕效果、柔和圆角 | 健康应用、音乐播放器、智能家居 |
| Glassmorphism 毛玻璃效果 |
背景模糊、半透明层、浮动卡片、微妙边框 | 现代 SaaS、金融仪表盘、macOS 风格 |
| Claymorphism 粘土形态 |
粘土质感、大圆角、内阴影 + 外阴影、柔和颜色 | 教育应用、儿童应用、SaaS onboarding |
大胆创意风格
| 风格名称 | 特点 | 最佳适用 |
|---|---|---|
| Brutalism 粗野主义 |
原始粗犷、高对比度、打破规则、系统字体 | 设计作品集、艺术项目、独立杂志 |
| 3D & Hyperrealism 3D 超写实 |
3D 元素、逼真渲染、深度透视、互动体验 | 游戏网站、产品展示、沉浸式体验 |
| Vibrant & Block-based 鲜艳色块 |
大胆鲜艳、块状布局、几何形状、高能量感 | 初创公司、创意机构、游戏平台 |
科技感风格
| 风格名称 | 特点 | 最佳适用 |
|---|---|---|
| Dark Mode (OLED) 深色模式 |
纯黑背景、省电、护眼、高对比度 | 夜间应用、编程工具、媒体消费 |
| Aurora UI 极光 UI |
渐变光晕、流动色彩、梦幻感、半透明层叠 | 现代 SaaS、创意机构、AI 产品 |
| AI-Native UI AI 原生界面 |
对话式界面、智能推荐、个性化、渐进式披露 | AI 产品、聊天机器人、智能助手 |
| Data-Driven Dashboard 数据驱动仪表盘 |
数据可视化优先、实时更新、可定制布局 | 分析工具、监控系统、金融交易 |
🌈 161 种配色方案
按行业分类的专业配色方案，每种包含主色、辅色、强调色
配色设计原则
60-30-10 法则
60% 主色（背景、大面积）
30% 辅色（卡片、次要元素）
10% 强调色（按钮、CTA、重要信息）
WCAG 对比度要求
| 等级 | 普通文本 | 大文本（18px+） | 图标/图形 |
|---|---|---|---|
| WCAG A | 4.5:1 | 3:1 | 3:1 |
| WCAG AA | 4.5:1 | 3:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 | 3:1 |
行业配色示例
科技/SaaS
主色：#3B82F6 (信任蓝)
辅色：#1E40AF (深蓝)
强调：#10B981 (成功绿)
背景：#F9FAFB (浅灰)
金融
主色：#1E3A8A (深蓝)
辅色：#374151 (炭灰)
强调：#F59E0B (金色)
背景：#F9FAFB (浅灰)
⚠️ 避坑：避免 AI 紫色/粉色渐变（不适合金融行业）
医疗健康
主色：#0EA7CC (医疗蓝)
辅色：#0891B2 (青蓝)
强调：#EF4444 (紧急红)
背景：#F0F9FF (浅蓝)
奢侈品
主色：#000000 (纯黑)
辅色：#FFFFFF (纯白)
强调：#D4AF37 (金色)
背景：#FFFEFA (米白)
🔤 57 种字体组合
经典字体配对方案，包含衬线体、无衬线体、等宽字体
字体分类
衬线体 (Serif)
特点：字母末端有装饰性笔画 | 情感：传统、优雅、权威、可信
经典字体：Georgia, Times New Roman, Playfair Display, Cormorant Garamond, Merriweather, Lora
无衬线体 (Sans-Serif)
特点：字母末端无装饰，简洁 | 情感：现代、干净、友好、科技
经典字体：Helvetica, Inter, Roboto, Open Sans, Montserrat, Poppins
等宽字体 (Monospace)
特点：每个字符宽度相同 | 情感：技术、代码、精确
经典字体：Courier New, Fira Code, JetBrains Mono, Space Mono, Roboto Mono
经典字体组合 Top 10
| # | 标题字体 | 正文字体 | 适用场景 |
|---|---|---|---|
| 01 | Inter | Inter | SaaS / 科技 / 通用 |
| 02 | Playfair Display | Source Sans Pro | 时尚 / 杂志 / 博客 |
| 03 | Cormorant Garamond | Montserrat | 奢侈品 / 美容 |
| 04 | Poppins | Open Sans | 初创 / 创意机构 |
| 05 | Roboto | Roboto | Android / 科技 / 通用 |
字号层级推荐
| 元素 | 桌面端 | 移动端 |
|---|---|---|
| H1 | 48-64px (3-4rem) | 32-40px (2-2.5rem) |
| H2 | 36-48px (2.25-3rem) | 24-32px (1.5-2rem) |
| H3 | 24-36px (1.5-2.25rem) | 20-24px (1.25-1.5rem) |
| 正文 | 16-18px (1-1.125rem) | 16px (1rem) |
| 辅助 | 14-16px (0.875-1rem) | 14px (0.875rem) |
📐 24 种设计模式
落地页布局模式，覆盖主流场景
Hero-Centric
英雄区主导，大标题 + 副标题 + 主 CTA+ 高质量视觉
Problem-Solution
问题 - 解决方案模式，先展示痛点再提供解决
Social Proof
社会证明模式，用户评价 +Logo 墙 + 案例研究
Pricing-Focused
定价主导模式，3 档定价表+ 锚定效应
✅ 完整检查清单
上线前必查项目，避免低级错误
基础检查
- 颜色使用一致 — 全站不超过 5 种主色
- 字体统一 — 不超过 3 种字体家族
- 间距规律 — 使用 8px 网格系统
- 无错别字 — 拼写检查
- 链接有效 — 所有链接可点击
- 表单可用 — 提交成功/失败有反馈
无障碍检查 (WCAG 2.1 AA)
- 文本对比度 ≥ 4.5:1 — 普通文本
- 大文本对比度 ≥ 3:1 — 18px 以上
- 焦点状态可见 — 键盘导航时
- 所有功能可键盘访问 — 无需鼠标
- 图片有 alt 文本 — 描述性文字
- 表单有 label — 关联标签
- 支持放大 200% — 不失真/不溢出
性能检查 (Core Web Vitals)
| 指标 | 目标 | 测量方法 |
|---|---|---|
| LCP (最大内容绘制) | < 2.5s | PageSpeed Insights |
| FID (首次输入延迟) | < 100ms | PageSpeed Insights |
| CLS (累积布局偏移) | < 0.1 | PageSpeed Insights |
响应式检查
- 手机小 (375px) — iPhone SE
- 手机大 (414px) — iPhone 14 Pro Max
- 平板 (768px) — iPad
- 桌面小 (1024px) — 小屏笔记本
- 桌面大 (1440px) — 标准桌面
- 桌面超大 (1920px) — 大屏显示器