方式1
https://www.aura.build/ 在当前网站找寻你想要的风格与效果，下载下来，让claude 的front-design技能帮你模仿实现
UI UX Max Pro
github官网： https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
官网：https://ui-ux-pro-max-skill.nextlevelbuilder.io/
使用方式
npm install -g uipro-cli 进入你的项目目录，执行 uipro init --ai claude 这样会在你当前项目加载 设计技能
提示词可在官网进行复制:
Design a professional sales CRM landing page with feature-rich showcase, pipeline visualization preview, integration logos, customer success stories, and free trial CTA. Use trust colors.
效果图：
# UI/UX Pro Max 设计参考手册
> 完整的设计风格、配色方案、字体搭配、图表类型、落地页模式和技术栈指南
---
## 目录
1. [设计风格 (58种)](#设计风格)
2. [配色方案 (96种)](#配色方案)
3. [字体搭配 (57种)](#字体搭配)
4. [图表类型 (25种)](#图表类型)
5. [落地页模式 (30种)](#落地页模式)
6. [产品类型与推荐 (96种)](#产品类型与推荐)
7. [支持的技术栈 (8种)](#支持的技术栈)
---
## 设计风格
### 1. 经典风格
| 风格 | 关键词 | 主色调 | 适用场景 | 性能 | 可访问性 |
|------|--------|--------|----------|------|----------|
| **极简主义 & 瑞士风格** | Clean, simple, spacious, functional, white space | 黑白灰 + 单一强调色 | 企业应用、仪表盘、文档站点、SaaS | ⚡ 优秀 | ✓ WCAG AAA |
| **扁平设计** | 2D, minimalist, bold colors, no shadows | 鲜艳纯色 (4-6色) | Web应用、移动应用、跨平台 | ⚡ 优秀 | ✓ WCAG AAA |
| **新拟态 (Neumorphism)** | Soft UI, embossed, debossed, convex, concave | 柔和粉彩 | 健康/冥想应用、健身追踪器 | ⚡ 良好 | ⚠ 对比度低 |
| **玻璃拟态 (Glassmorphism)** | Frosted glass, transparent, blurred | 半透明白色 + 霓虹色 | 现代SaaS、金融仪表盘、模态框 | ⚠ 良好 | ⚠ 需确保4.5:1对比度 |
### 2. 现代风格
| 风格 | 关键词 | 主色调 | 适用场景 | 复杂度 |
|------|--------|--------|----------|--------|
| **暗色模式 (OLED)** | Dark theme, deep black, midnight blue | 纯黑 + 霓虹强调 | 夜间应用、编程平台、OLED设备 | 低 |
| **Soft UI 进化版** | Evolved soft UI, better contrast | 改进对比度的粉彩色 | 现代企业应用、SaaS平台 | 中等 |
| **Aurora UI** | Vibrant gradients, Northern Lights | 渐变光谱 | 现代SaaS、创意机构、品牌推广 | 中等 |
| **Claymorphism** | Soft 3D, chunky, playful, toy-like | 粉彩色 | 教育应用、儿童应用、SaaS平台 | 中等 |
### 3. 前卫风格
| 风格 | 关键词 | 主色调 | 适用场景 | 时代 |
|------|--------|--------|----------|------|
| **野兽派 (Brutalism)** | Raw, unpolished, stark, high contrast | 红蓝黄黑白 | 设计作品集、艺术项目、另类品牌 | 1950s |
| **新野兽派 (Neubrutalism)** | Bold borders, black outlines, flat colors | #FFEB3B, #FF5252, #2196F3 | Gen Z品牌、初创公司、创意机构 | 2020s |
| **复古未来主义** | Vintage sci-fi, 80s, neon glow | 霓虹蓝+热粉+深黑 | 游戏、娱乐、音乐平台 | 1980s |
| **赛博朋克 UI** | Neon, dark mode, terminal, glitch | 矩阵绿+洋红+青色 | 游戏平台、加密应用、科幻界面 | 2020s |
| **孟菲斯设计** | 80s, geometric, playful, shapes | 几何粉彩色 | 创意机构、音乐网站、青年品牌 | 1980s |
### 4. 3D 与沉浸式
| 风格 | 关键词 | 主色调 | 适用场景 | 性能 |
|------|--------|--------|----------|------|
| **3D & 超写实主义** | Depth, realistic textures, 3D models | 深蓝+森林绿+勃艮第红 | 游戏、产品展示、建筑可视化 | ❌ 差 |
| **液体玻璃** | Flowing glass, morphing, iridescent | 虹彩渐变 | 高端SaaS、奢侈电商 | ⚠ 中等-差 |
| **空间 UI (VisionOS)** | Glass, depth, spatial, translucent | 磨砂玻璃 (15-30%不透明度) | 空间计算应用、VR/AR | ⚠ 中等 |
### 5. 动态风格
| 风格 | 关键词 | 适用场景 | 动画级别 |
|------|--------|----------|----------|
| **动态驱动** | Animation-heavy, microinteractions | 作品集、故事平台、娱乐应用 | 高 |
| **微交互** | Small animations, gesture-based | 移动应用、生产力工具 | 中等 |
| **视差叙事** | Scroll-driven, narrative, layered | 品牌故事、产品发布、年度报告 | 高 |
| **动态排版** | Motion text, animated type | 英雄区块、营销网站、视频平台 | 高 |
### 6. 专题风格
| 风格 | 关键词 | 主色调 | 适用场景 |
|------|--------|--------|----------|
| **有机仿生** | Nature, organic shapes, green | 森林绿+大地棕+天空蓝 | 福祉应用、可持续品牌、健康应用 |
| **AI 原生 UI** | Chatbot, conversational, AI Purple | 中性色 + #6366F1 | AI产品、聊天机器人、语音助手 |
| **电子墨水/纸张** | Paper-like, matte, high contrast | 米白+墨黑 | 阅读应用、数字报纸、极简日记 |
| **Y2K 美学** | Neon pink, chrome, metallic | 热粉+青色+银色 | 时尚品牌、音乐平台、Gen Z品牌 |
| **像素艺术** | Retro, 8-bit, blocky | NES调色板 | 独立游戏、复古工具、创意作品集 |
### 7. 落地页风格
| 风格 | 关键词 | 主色调 | 转化率 |
|------|--------|--------|--------|
| **英雄中心设计** | Large hero, compelling headline | 品牌主色 | ✓ 很高 |
| **转化优化** | Form-focused, single CTA | 高对比度 | ✓ 很高 |
| **功能丰富展示** | Multiple feature sections | 品牌主色+明亮辅助色 | ✓ 高 |
| **社交证明聚焦** | Testimonials prominent | 信任蓝+成功绿 | ✓ 高 |
| **信任与权威** | Certificates, expert credentials | 专业蓝灰色 | ✓ 高 |
### 8. 仪表盘风格
| 风格 | 关键词 | 主色调 | 适用场景 |
|------|--------|--------|----------|
| **数据密集仪表盘** | Multiple charts, data tables | 中性主色+数据色 | 商业智能、财务分析 |
| **高管仪表盘** | High-level KPIs, minimal detail | 品牌色+专业调色板 | C-suite仪表盘 |
| **实时监控** | Live data updates, alerts | 警告红+正常绿+更新蓝 | 系统监控、DevOps |
| **下钻分析** | Hierarchical data exploration | 品牌主色+面包屑色 | 销售分析、产品分析 |
| **金融仪表盘** | Revenue, profit/loss | 利润绿+损失红+信任蓝 | 财务报告、投资追踪 |
### 9. 其他风格
| 风格 | 描述 |
|------|------|
| **Bento Box Grid** | Apple风格模块化卡片，网格布局 |
| **零界面** | 最小可见UI，语音优先，AI驱动 |
| **包容性设计** | 无障碍友好，色盲友好，WCAG AAA |
| **夸张极简主义** | 超大排版，高对比度，大量留白 |
| **瑞士现代主义 2.0** | 网格系统，数学间距，清晰层次 |
---
## 配色方案
### 按行业分类
#### SaaS / 科技
| 产品类型 | 主色 | 辅色 | CTA | 背景 | 文字 | 边框 |
|----------|------|------|-----|------|------|------|
| **SaaS (通用)** | #2563EB | #3B82F6 | #F97316 | #F8FAFC | #1E293B | #E2E8F0 |
| **Micro SaaS** | #2563EB | #3B82F6 | #F97316 | #F8FAFC | #1E293B | #E2E8F0 |
| **AI/聊天机器人** | #7C3AED | #A78BFA | #06B6D4 | #FAF5FF | #1E1B4B | #DDD6FE |
| **NFT/Web3** | #3B82F6 | #60A5FA | #F97316 | #0F172A | #F8FAFC | #334155 |
#### 金融 / Fintech
| 产品类型 | 主色 | 辅色 | CTA | 背景 | 文字 | 边框 |
|----------|------|------|-----|------|------|------|
| **Fintech/Crypto** | #F59E0B | #FBBF24 | #8B5CF6 | #0F172A | #F8FAFC | #334155 |
| **银行/传统金融** | #0F766E | #14B8A6 | #0369A1 | #F0FDFA | #134E4A | #99F6E4 |
| **保险平台** | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 |
#### 电商 / 零售
| 产品类型 | 主色 | 辅色 | CTA | 背景 | 文字 | 边框 |
|----------|------|------|-----|------|------|------|
| **电商 (通用)** | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 |
| **电商 (奢华)** | #1C1917 | #44403C | #CA8A04 | #FAFAF9 | #0C0A09 | #D6D3D1 |
| **市场平台 (P2P)** | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 |
#### 健康 / 福祉
| 产品类型 | 主色 | 辅色 | CTA | 背景 | 文字 | 边框 |
|----------|------|------|-----|------|------|------|
| **医疗应用** | #0891B2 | #22D3EE | #059669 | #ECFEFF | #164E63 | #A5F3FC |
| **心理健康** | #3B82F6 | #60A5FA | #F97316 | #F8FAFC | #1E293B | #E2E8F0 |
| **美容/SPA** | #10B981 | #34D399 | #8B5CF6 | #ECFDF5 | #064E3B | #A7F3D0 |
#### 企业 / B2B
| 产品类型 | 主色 | 辅色 | CTA | 背景 | 文字 | 边框 |
|----------|------|------|-----|------|------|------|
| **B2B 服务** | #0F172A | #334155 | #0369A1 | #F8FAFC | #020617 | #E2E8F0 |
| **法律服务** | #1E3A8A | #1E40AF | #B45309 | #F8FAFC | #0F172A | #CBD5E1 |
| **咨询公司** | #0F172A | #334155 | #0369A1 | #F8FAFC | #020617 | #E2E8F0 |
#### 创意 / 娱乐
| 产品类型 | 主色 | 辅色 | CTA | 背景 | 文字 | 边框 |
|----------|------|------|-----|------|------|------|
| **创意机构** | #EC4899 | #F472B6 | #06B6D4 | #FDF2F8 | #831843 | #FBCFE8 |
| **游戏** | #7C3AED | #A78BFA | #F43F5E | #0F0F23 | #E2E8F0 | #4C1D95 |
| **音乐流媒体** | #3B82F6 | #60A5FA | #F97316 | #121212 | #F8FAFC | #1E293B |
#### 教育 / 学习
| 产品类型 | 主色 | 辅色 | CTA | 背景 | 文字 | 边框 |
|----------|------|------|-----|------|------|------|
| **教育应用** | #4F46E5 | #818CF8 | #F97316 | #EEF2FF | #1E1B4B | #C7D2FE |
| **在线课程** | #0D9488 | #2DD4BF | #EA580C | #F0FDFA | #134E4A | #5EEAD4 |
#### 特殊行业
| 产品类型 | 主色 | 辅色 | CTA | 背景 | 文字 | 边框 |
|----------|------|------|-----|------|------|------|
| **网络安全** | #00FF41 | #0D0D0D | #00FF41 | #000000 | #E0E0E0 | #1F1F1F |
| **空间科技** | #FFFFFF | #94A3B8 | #3B82F6 | #0B0B10 | #F8FAFC | #1E293B |
| **量子计算** | #00FFFF | #7B61FF | #FF00FF | #050510 | #E0E0FF | #333344 |
| **气候科技** | #2E8B57 | #87CEEB | #FFD700 | #F0FFF4 | #1A3320 | #C6E6C6 |
### 按色彩情绪分类
#### 信任色系
- **海军蓝**: #1E3A8A, #0F172A, #1E40AF
- **专业灰**: #334155, #475569, #64748B
- **深蓝**: #0369A1, #0284C7, #075985
#### 活力色系
- **霓虹绿**: #39FF14, #22C55E, #10B981
- **电光紫**: #BF00FF, #8B5CF6, #7C3AED
- **热粉色**: #FF1493, #EC4899, #F43F5E
#### 温暖色系
- **橙色**: #F97316, #EA580C, #FF6B35
- **金色**: #FFD700, #CA8A04, #D4AF37
- **暖棕**: #8B4513, #A0522D, #6F4E37
#### 冷静色系
- **青色**: #06B6D4, #0891B2, #0E7490
- **薄荷绿**: #90EE90, #34D399, #2DD4BF
- **天空蓝**: #87CEEB, #7DD3FC, #38BDF8
#### 奢华色系
- **纯黑**: #000000, #0A0A0A, #171717
- **纯白**: #FFFFFF, #FAFAFA, #F5F5F5
- **金属**: #C0C0C0, #D4AF37, #B8860B
---
## 字体搭配
### Sans + Sans 搭配
| 名称 | 标题字体 | 正文字体 | 风格 | 最佳用途 |
|------|----------|----------|------|----------|
| **现代专业** | Poppins | Open Sans | 现代、专业、友好 | SaaS、企业网站、商业应用 |
| **极简瑞士** | Inter | Inter | 极简、干净、功能性 | 仪表盘、管理面板、文档 |
| **科技创业** | Space Grotesk | DM Sans | 科技、创新、大胆 | 科技公司、初创公司、SaaS |
| **友好 SaaS** | Plus Jakarta Sans | Plus Jakarta Sans | 友好、现代、SaaS | SaaS产品、Web应用、仪表盘 |
| **几何现代** | Outfit | Work Sans | 几何、现代、平衡 | 通用、作品集、机构 |
| **商务信任** | Lexend | Source Sans 3 | 企业、可信、可访问 | 企业、政府、医疗、金融 |
| **金融信任** | IBM Plex Sans | IBM Plex Sans | 金融、可信、专业 | 银行、金融、保险、投资 |
| **电商清洁** | Rubik | Nunito Sans | 电商、清洁、购物 | 电商、在线商店、产品页面 |
| **运动健身** | Barlow Condensed | Barlow | 运动、健身、能量 | 体育、健身、运动品牌 |
### Serif + Sans 搭配
| 名称 | 标题字体 | 正文字体 | 风格 | 最佳用途 |
|------|----------|----------|------|----------|
| **经典优雅** | Playfair Display | Inter | 优雅、奢华、精致 | 奢侈品牌、时尚、SPA、美容 |
| **编辑经典** | Cormorant Garamond | Libre Baskerville | 编辑、经典、文学 | 出版、博客、新闻站点 |
| **奢华衬线** | Cormorant | Montserrat | 奢华、高端、时尚 | 时尚品牌、奢侈电商 |
| ** wellness 静谧** | Lora | Raleway | 静谧、健康、自然 | 健康应用、SPA、冥想、瑜伽 |
| **新闻编辑** | Newsreader | Roboto | 新闻、编辑、可信 | 新闻站点、博客、杂志 |
| **法律专业** | EB Garamond | Lato | 法律、专业、传统 | 律师事务所、法律服务、合同 |
| **房产奢华** | Cinzel | Josefin Sans | 房产、奢华、精致 | 房地产、奢华房产、建筑 |
| **杂志风格** | Libre Bodoni | Public Sans | 杂志、编辑、精致 | 杂志、在线出版物 |
| **学术研究** | Crimson Pro | Atkinson Hyperlegible | 学术、研究、易读 | 大学、研究论文、学术期刊 |
### Display + Sans 搭配
| 名称 | 标题字体 | 正文字体 | 风格 | 最佳用途 |
|------|----------|----------|------|----------|
| **大胆声明** | Bebas Neue | Source Sans 3 | 大胆、冲击力、戏剧性 | 营销站点、作品集、机构 |
| **俏皮创意** | Fredoka | Nunito | 俏皮、友好、有趣 | 儿童应用、教育、游戏 |
| **复古怀旧** | Abril Fatface | Merriweather | 复古、怀旧、戏剧性 | 复古品牌、酿酒厂、餐厅 |
| **时尚前卫** | Syne | Manrope | 时尚、前卫、创意 | 时尚品牌、创意机构、画廊 |
| **加密/Web3** | Orbitron | Exo 2 | 加密、Web3、未来主义 | 加密平台、NFT、区块链 |
| **游戏大胆** | Russo One | Chakra Petch | 游戏、大胆、竞技 | 游戏、电竞、动作游戏 |
| **独立手工** | Amatic SC | Cabin | 独立、手工、有机 | 手工艺品牌、独立产品 |
### Mono + Sans 搭配
| 名称 | 等宽字体 | 无衬线字体 | 风格 | 最佳用途 |
|------|----------|------------|------|----------|
| **开发者 Mono** | JetBrains Mono | IBM Plex Sans | 代码、开发者、技术 | 开发者工具、文档、代码编辑器 |
| **仪表盘数据** | Fira Code | Fira Sans | 仪表盘、数据、代码 | 仪表盘、分析、数据可视化 |
| **野兽派原始** | Space Mono | Space Mono | 野兽派、原始、等宽 | 野兽派设计、开发者作品集 |
| **科技/HUD** | Share Tech Mono | Fira Code | 科技、HUD、等宽 | 科幻界面、开发者工具、网络安全 |
### 特殊字体搭配
| 名称 | 描述 | 用途 |
|------|------|------|
| **韩语现代** | Noto Sans KR + Noto Sans KR | 韩语站点、K-beauty、K-pop |
| **日语优雅** | Noto Serif JP + Noto Sans JP | 日语站点、日本餐厅、文化站点 |
| **中文简体** | Noto Sans SC + Noto Sans SC | 简体中文站点、大陆市场 |
| **中文繁体** | Noto Serif TC + Noto Sans TC | 繁体中文站点、台湾/香港市场 |
| **阿拉伯优雅** | Noto Naskh Arabic + Noto Sans Arabic | 阿拉伯站点、中东市场 |
| **泰语现代** | Noto Sans Thai + Noto Sans Thai | 泰语站点、东南亚旅游 |
| **希伯来现代** | Noto Sans Hebrew + Noto Sans Hebrew | 希伯来语站点、以色列市场 |
### Google Fonts 导入示例
```css
/* 现代专业 */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
/* 极简瑞士 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* 经典优雅 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
/* 开发者 Mono */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
```
### Tailwind 配置示例
```javascript
// 现代专业
fontFamily: {
heading: ['Poppins', 'sans-serif'],
body: ['Open Sans', 'sans-serif']
}
// 极简瑞士
fontFamily: {
sans: ['Inter', 'sans-serif']
}
// 经典优雅
fontFamily: {
serif: ['Playfair Display', 'serif'],
sans: ['Inter', 'sans-serif']
}
// 开发者 Mono
fontFamily: {
mono: ['JetBrains Mono', 'monospace'],
sans: ['IBM Plex Sans', 'sans-serif']
}
```
---
## 图表类型
### 1. 基础图表
| 类型 | 最佳用途 | 颜色指导 | 交互级别 | 性能 |
|------|----------|----------|----------|------|
| **折线图** | 趋势随时间变化 | 主色 #0080FF | 悬停 + 缩放 | ⚡ 优秀 |
| **柱状图** | 类别比较 | 每个柱子不同颜色 | 悬停 + 排序 | ⚡ 优秀 |
| **饼图/环形图** | 部分与整体 | 5-6种对比色 | 悬停 + 下钻 | ⚡ 良好 |
| **散点图/气泡图** | 相关性/分布 | 渐变蓝-红，不透明度0.6-0.8 | 悬停 + 笔刷 | ⚠ 中等 |
### 2. 高级图表
| 类型 | 最佳用途 | 颜色指导 | 性能 | 可访问性 |
|------|----------|----------|------|----------|
| **热力图** | 热度/强度 | 冷(蓝)到热(红)渐变 | ⚡ 优秀 | ⚠ 需覆盖图案 |
| **地理数据** | 地图/位置 | 区域单色渐变或分类色 | ⚠ 中等 | ⚠ 需数据表替代 |
| **漏斗/流程图** | 流程/转化 | 阶段渐变色 | ⚡ 良好 | ✓ 阶段标签清晰 |
| **仪表图** | 性能 vs 目标 | 红→黄→绿渐变 | ⚡ 良好 | ✓ 添加数值标签 |
### 3. 专业图表
| 类型 | 最佳用途 | 颜色指导 | 性能 | 可访问性 |
|------|----------|----------|------|----------|
| **瀑布图** | 累积变化 | 增加绿，减少红 | ⚡ 良好 | ✓ 方向颜色清晰 |
| **雷达图** | 多变量比较 | 单色20%填充 | ⚡ 良好 | ⚠ 限制5-8轴 |
| **K线图** | 股票/交易 | 看涨青绿，看跌赤红 | ⚡ 良好 | ⚠ 需OHLC数据表 |
| **桑基图** | 流/流程数据 | 渐变从源到目标 | ⚠ 中等 | ⚠ 需流表替代 |
### 4. 特殊图表
| 类型 | 最佳用途 | 性能 | 可访问性 |
|------|----------|------|----------|
| **网络图** | 关系/连接数据 | ❌ 差 (500+节点) | ❌ 很差 |
| **3D 散点/曲面** | 3D 空间数据 | ❌ 差 (需WebGL) | ❌ 很差 |
| **实况流图表** | 实时数据流 | ⚡ 优化 (canvas/webgl) | ⚠ 闪烁元素 |
| **词云** | 情感/情绪 | ⚡ 良好 | ⚠ 词云对屏幕阅读器差 |
### 图表库推荐
| 图表类型 | 推荐库 |
|----------|--------|
| 基础图表 | Chart.js, Recharts, ApexCharts |
| 复杂图表 | D3.js, Plotly, Highcharts |
| 地理地图 | D3.js, Mapbox, Leaflet |
| 金融图表 | Lightweight Charts, ApexCharts |
| 网络图 | D3.js (d3-force), Vis.js, Cytoscape.js |
| 3D 图表 | Three.js, Deck.gl, Plotly 3D |
---
## 落地页模式
### 1. 经典模式
| 模式 | 节区顺序 | 主 CTA 位置 | 颜色策略 |
|------|----------|-------------|----------|
| **英雄 + 功能 + CTA** | 1.英雄 2.价值主张 3.关键功能 4.CTA 5.页脚 | 英雄(固定) + 底部 | 英雄:品牌主色，功能:卡片#FAFAFA，CTA:对比色 |
| **英雄 + 评价 + CTA** | 1.英雄 2.问题陈述 3.解决方案概述 4.评价轮播 5.CTA | 英雄(固定) + 评价后 | 英雄:品牌色，评价:浅灰#F5F5F5，CTA:鲜艳 |
### 2. 功能展示模式
| 模式 | 特点 | 最佳用途 |
|------|------|----------|
| **产品演示 + 功能** | 视频中心 + 功能细分 | SaaS、工具产品、生产力软件 |
| **功能丰富展示** | 多功能区域 + 网格布局 | 企业 SaaS、软件工具落地页 |
| **交互式产品演示** | 嵌入式产品模型/视频 + 交互元素 | SaaS 平台、工具/软件产品 |
### 3. 转化优化模式
| 模式 | 特点 | 最佳用途 |
|------|------|----------|
| **转化优化** | 表单聚焦 + 单一 CTA | 电商产品页、免费试用注册 |
| **潜在客户获取 + 表单** | 潜在客户预览 + 最小字段表单 | 邮件列表、电子书下载 |
| **比较表 + CTA** | 产品 vs 竞争者对比表 | 差异化产品、竞争优势展示 |
### 4. 信任建立模式
| 模式 | 特点 | 最佳用途 |
|------|------|----------|
| **信任与权威** | 证书/徽章 + 专家凭证 + 案例研究 | 医疗/金融落地页、企业软件 |
| **社交证明聚焦** | 评价突出 + 客户 logo + 案例研究 | B2B SaaS、专业服务 |
| **评价/评分聚焦** | 聚合评分 + 评分细分 + 个人评价 | 电商转化页、产品评价 |
### 5. 特殊场景模式
| 模式 | 特点 | 最佳用途 |
|------|------|----------|
| **定价页 + CTA** | 价格比较卡片 + 功能比较表 | SaaS 定价页、订阅服务 |
| **等候名单/即将推出** | 倒计时 + 产品预告 + 邮件捕获 | 产品发布、早期访问 |
| **应用商店风格** | 设备模型 + 截图画轮播 + 评分 | 移动应用落地页 |
| **活动/会议落地页** | 日期/地点/倒计时 + 演讲者 + 议程 | 会议、聚会、活动注册 |
### 6. 故事驱动模式
| 模式 | 特点 | 最佳用途 |
|------|------|----------|
| **前后对比转变** | 问题状态 → 转变滑块 → 结果 CTA | 健身/美容/教育产品 |
| **叙事性滚动** | 章节 1(问题) → 章节 2(旅程) → 章节 3(解决方案) | 品牌故事、使命驱动产品 |
| **水平滚动旅程** | 垂直介绍 → 水平旅程 → 细节揭示 | 沉浸式产品发现 |
### 7. 其他模式
| 模式 | 描述 |
|------|------|
| **极简单栏** | 极简文字 + 大量留白 + 单一 CTA |
| **漏斗(3步转化)** | 问题 → 解决方案 → 行动，逐步引导 |
| **视频优先英雄** | 视频背景 + 关键功能叠加 + CTA |
| **AI 个性化落地** | 根据用户数据动态内容 |
| **Bento 网格展示** | Apple 风格模块化卡片布局 |
| **互动 3D 配置器** | 3D 产品配置 + 实时渲染 |
---
## 产品类型与推荐
### SaaS / 软件产品
| 产品类型 | 主风格 | 辅助风格 | 落地页模式 | 仪表盘风格 | 配色重点 |
|----------|--------|----------|------------|------------|----------|
| **SaaS (通用)** | 玻璃拟态 + 扁平 | Soft UI 进化、极简主义 | 英雄 + 功能 + CTA | 数据密集 + 实时监控 | 信任蓝 + 对比色 |
| **Micro SaaS** | 扁平 + 鲜艳块状 | 动态驱动、微交互 | 极简直接 + 演示 | 高管仪表盘 | 鲜艳主色 + 留白 |
| **生产力工具** | 扁平 + 微交互 | 极简主义、Soft UI 进化 | 交互式产品演示 | 下钻分析 | 清晰层次 + 功能色 |
| **设计系统/组件库** | 极简主义 + 可访问性 | 扁平、零界面 | 功能丰富展示 | N/A | 清晰层次 + 代码结构 |
### 电商 / 零售
| 产品类型 | 主风格 | 辅助风格 | 落地页模式 | 仪表盘风格 | 配色重点 |
|----------|--------|----------|------------|------------|----------|
| **电商 (通用)** | 鲜艳块状 | Aurora UI、动态驱动 | 功能丰富展示 | 销售智能仪表盘 | 品牌主色 + 成功绿 |
| **电商 (奢华)** | 液体玻璃 + 玻璃拟态 | 3D 超写实、Aurora UI | 功能丰富展示 | 销售智能仪表盘 | 奢华色 + 最小强调 |
### B2B / 企业
| 产品类型 | 主风格 | 辅助风格 | 落地页模式 | 仪表盘风格 | 配色重点 |
|----------|--------|----------|------------|------------|----------|
| **B2B 服务** | 信任与权威 + 极简 | 功能丰富、转化优化 | 功能丰富展示 | 销售智能仪表盘 | 专业蓝 + 中性灰 |
| **企业网关** | 极简主义 + 玻璃拟态 | 动态驱动、扁平 | N/A - 以解决方案为主 | N/A | 企业蓝 + 高对比度 |
### 金融 / Fintech
| 产品类型 | 主风格 | 辅助风格 | 落地页模式 | 仪表盘风格 | 配色重点 |
|----------|--------|----------|------------|------------|----------|
| **Fintech/Crypto** | 玻璃拟态 + 暗色模式 | 复古未来主义、动态驱动 | 转化优化 | 实时监控 + 预测 | 深科技色 + 信任 + 鲜艳强调 |
| **银行/传统金融** | 极简主义 + 可访问性 | 信任与权威、暗色模式 | 信任与权威 + 功能丰富 | 金融仪表盘 | 深蓝 + 信任蓝 + 金色强调 |
### 健康 / 医疗
| 产品类型 | 主风格 | 辅助风格 | 落地页模式 | 仪表盘风格 | 配色重点 |
|----------|--------|----------|------------|------------|----------|
| **医疗应用** | 新拟态 + 可访问性 | Soft UI 进化、Claymorphism | 社交证明聚焦 | 用户行为分析 | 静谧蓝 + 健康绿 + 信任 |
| **心理健康** | 新拟态 + 可访问性 | Claymorphism、Soft UI 进化 | 社交证明聚焦 | 健康分析 | 柔和粉彩 + 信任色 |
### 创意 / 娱乐
| 产品类型 | 主风格 | 辅助风格 | 落地页模式 | 仪表盘风格 | 配色重点 |
|----------|--------|----------|------------|------------|----------|
| **创意机构** | 野兽派 + 动态驱动 | 复古未来主义、叙事驱动 | 叙事驱动 | N/A - 作品集聚焦 | 大胆主色 + 艺术自由 |
| **游戏** | 3D 超写实 + 复古未来主义 | 动态驱动、鲜艳块状 | 功能丰富展示 | N/A - 游戏聚焦 | 鲜艳 + 霓虹 + 沉浸色 |
### 教育 / 学习
| 产品类型 | 主风格 | 辅助风格 | 落地页模式 | 仪表盘风格 | 配色重点 |
|----------|--------|----------|------------|------------|----------|
| **教育应用** | Claymorphism + 微交互 | 鲜艳块状、扁平 | 叙事驱动 | 用户行为分析 | 俏皮色 + 清晰层次 |
| **在线课程** | Claymorphism + 鲜艳块状 | 动态驱动、扁平 | 功能丰富 + 社交证明 | 教育仪表盘 | 鲜艳学习色 + 进度绿 |
### 特殊行业
| 产品类型 | 主风格 | 辅助风格 | 落地页模式 | 仪表盘风格 | 配色重点 |
|----------|--------|----------|------------|------------|----------|
| **网络安全平台** | 赛博朋克 UI + 暗色模式 | Neubrutalism、极简直接 | 信任与权威 + 实时 | 实时监控 + 热力图 | 矩阵绿 + 深黑 + 终端感 |
| **开发者工具/IDE** | 暗色模式 (OLED) + 极简主义 | 扁平、Bento Box Grid | 极简直接 + 文档 | 实时监控 + 终端 | 暗色语法主题色 + 蓝色焦点 |
| **空间科技/航天** | 全息/HUD + 暗色模式 | 玻璃拟态、3D 超写实 | 沉浸体验 + 英雄 | 实时监控 + 3D | 深空黑 + 星白 + 金属 |
| **量子计算界面** | 全息/HUD + 暗色模式 | 玻璃拟态、空间 UI | 沉浸/交互体验 | 3D 空间数据 + 实时 | 量子蓝 + 深黑 + 干涉图案 |
| **可持续能源/气候科技** | 有机仿生 + 电子墨水 | 数据密集、瑞士现代主义 | 交互演示 + 数据 | 能源/公用事业仪表盘 | 地球绿 + 天空蓝 + 太阳黄 |
---
## 支持的技术栈
### 1. HTML + Tailwind CSS
**特点**: 原子化 CSS、响应式优先、零运行时
**适用场景**:
- 静态网站
- 落地页
- 快速原型
- Jekyll/Hugo 静态站点
**关键特性**:
- 响应式内联工具类
- 深色模式支持
- 无障碍优先
- 高度可定制
**兼容性**: ⭐⭐⭐⭐⭐
### 2. React
**特点**: 组件化、虚拟 DOM、丰富生态系统
**适用场景**:
- SPA 应用
- 复杂交互
- 大型应用
- 企业级应用
**关键库**:
- UI: Material-UI, Chakra UI, Ant Design
- 状态: Redux, Zustand, Jotai
- 路由: React Router
- 表单: React Hook Form, Formik
**兼容性**: ⭐⭐⭐⭐⭐
### 3. Next.js
**特点**: React 框架、SSR/SSG、文件路由
**适用场景**:
- SEO 关键应用
- 电商网站
- 内容站点
- SaaS 平台
**关键特性**:
- 服务端渲染
- 静态生成
- API 路由
- 图片优化
**兼容性**: ⭐⭐⭐⭐⭐
### 4. Vue
**特点**: 渐进式、易学习、Composition API
**适用场景**:
- 中小型应用
- 渐进式增强
- 单页应用
**关键库**:
- 状态: Pinia
- 路由: Vue Router
- UI: Element Plus, Vuetify, Naive UI
**兼容性**: ⭐⭐⭐⭐⭐
### 5. Svelte
**特点**: 编译时框架、无虚拟 DOM、轻量级
**适用场景**:
- 性能关键应用
- 小型应用
- 交互式组件
**关键库**:
- 状态: Svelte Stores
- 路由: SvelteKit
- UI: Skeleton UI, Carbon Components Svelte
**兼容性**: ⭐⭐⭐⭐
### 6. SwiftUI
**特点**: Apple 原生、声明式、跨平台
**适用场景**:
- iOS/macOS 应用
- 跨平台 Apple 应用
**关键特性**:
- 声明式语法
- 数据绑定
- 预览支持
- 原生性能
**兼容性**: ⭐⭐⭐⭐⭐ (Apple 生态)
### 7. React Native
**特点**: 跨平台移动、原生组件、热重载
**适用场景**:
- iOS/Android 应用
- 跨平台移动应用
**关键库**:
- 导航: React Navigation
- UI: React Native Paper, NativeBase
- 状态: Redux, Zustand
**兼容性**: ⭐⭐⭐⭐ (移动端)
### 8. Flutter
**特点**: Dart 语言、_widget 树、高性能渲染
**适用场景**:
- 跨平台应用
- 高性能需求
- 自定义 UI
**关键特性**:
- 热重载
- 原生编译
- 丰富组件
- Material/Cupertino 风格
**兼容性**: ⭐⭐⭐⭐ (移动端)
---
- THE END -
最后修改：2026年1月6日
非特殊说明，本博所有文章均为博主原创。
如若转载，请注明出处：https://www.puxiaoshuai.top/?p=194
