ui-ux-pro-max

UI/UX Pro Max

概述

一套全面的 UI/UX 设计智能系统，将视觉设计专业知识与严谨的工程实践相结合。此技能提供有明确倾向且可用于生产环境的指导，涵盖风格选择、调色板、字体排印、UX 启发式原则、数据可视化和多技术栈实现。每项建议都经过严格的优先级体系筛选，确保绝不为了美观而牺牲无障碍性和性能。

阶段 1：需求收集

1. 确定产品类型和目标受众
2. 确定平台（Web、移动端、桌面端）
3. 评估现有品牌指南或设计系统
4. 定义无障碍性要求
5. 设定性能预算

停止——在提出设计建议前，先与用户确认需求。

优先级体系（不可更改顺序）

请勿跳过或调整这些优先级。无障碍性始终优先。

1. 无障碍性——最低满足 WCAG 2.1 AA，最好达到 AAA
   • 对比度：普通文本为 4.5:1，大号文本为 3:1
   • 键盘导航：所有交互元素均可聚焦，且焦点环清晰可见
   • 为所有非文本控件添加 ARIA 标签
   • 为动态内容提供屏幕阅读器播报
   • 减少动态效果：遵循 prefers-reduced-motion
2. 触控目标——最小为 44x44px（Apple HIG / WCAG 2.5.5）
   • 目标之间的间距：至少 8px
   • 可通过内边距扩大可点击区域，使其超出视觉边界
3. 性能
   • 图片：使用 WebP，并以 AVIF 作为回退格式；对首屏以下的图片进行延迟加载
   • CLS < 0.1，LCP < 2.5s，FID < 100ms
   • 字体加载：使用 font-display: swap，预加载关键字体
   • Bundle：对路由进行代码拆分，移除未使用组件
4. 风格——仅在满足 1-3 后应用
5. 布局——最后处理构图和间距

阶段 2：风格选择

停止——在开始实现前，先说明风格建议及其理由。

风格选择决策表

场景	推荐风格	原因
SaaS 仪表盘	极简主义、瑞士风格、Material 3	简洁、聚焦数据、专业
作品集	粗野主义、极繁主义、玻璃拟态	富有表现力、令人印象深刻
电子商务	简洁风格、Material 3、瑞士风格	建立信任、清晰明了、促进转化
移动应用	Material 3、新拟态、极简主义	原生体验、便于拇指操作
落地页	玻璃拟态、新粗野主义、日式侘寂风	视觉冲击力强、突出主视觉
企业/B2B	瑞士设计、极简主义	权威感、信息密度高
创意机构	极繁主义、粗野主义、赛博朋克	独特、展示作品集
健康/养生	日式侘寂风、极简主义	平和、值得信赖
金融	瑞士风格、Material 3	稳健、专业
儿童/家庭	黏土拟态、极繁主义	活泼、有吸引力

风格参考（主要类别）

玻璃与透明效果：

• 玻璃拟态：backdrop-filter: blur(10px)、半透明背景、细微边框
• 磨砂玻璃：更强的模糊效果（20px+）、更低的不透明度，适用于繁杂背景
• 亚克力（Fluent Design）：噪点纹理叠加 + 模糊效果

极简与简洁：

• 极简主义：最大限度留白、单一强调色、元素数量有限
• 瑞士设计：基于网格布局、Helvetica/Grotesk 字体、不对称平衡
• 日式侘寂风：暖色中性色调、有机形状、隐藏复杂性

大胆与表现力：

• 粗野主义：裸露结构、系统字体、硬朗边框、不使用圆角
• 新粗野主义：粗野主义 + 明亮强调色 + 投影
• 极繁主义：分层纹理、混用字体、信息密集

深度与立体感：

• 新拟态：在同色背景上使用柔和的内阴影和外阴影
• Material Design 3：高度层级令牌、色调表面、动态颜色
• 黏土拟态：膨胀的 3D 外观、柔和色彩、内阴影

暗色与氛围感：

• 暗色模式：适用于 OLED 的设计（#000 背景）、柔和的主色调、降低亮度
• 赛博朋克：深色背景上的霓虹色、故障效果、等宽字体点缀
• 黑色电影风格：高对比度、灰度配色搭配单一强调色

阶段 3：颜色与排版

停止——在构建组件之前，先提交配色方案和字体搭配供审批。

配色方案选择规则

配色类别	产品类型	特征
SaaS/B2B（24 种配色方案）	仪表板、管理工具	专业的蓝色、青绿色、石板色
电子商务（20 种配色方案）	商店、市场平台	温暖、营造信任感的琥珀色、绿色
健康/养生（18 种配色方案）	健康应用、冥想应用	舒缓的绿色、柔和的蓝色、薰衣草色
金融（15 种配色方案）	银行、交易	深蓝色、金色、稳重的中性色
创意（22 种配色方案）	作品集、代理机构	鲜明、高饱和度、出人意料的组合
社交（16 种配色方案）	社群、社交应用	鲜艳、活力十足、适合渐变
教育（14 种配色方案）	学习、课程	亲和、易接受、适度饱和
企业（12 种配色方案）	企业工具	柔和、权威、高对比度
儿童/家庭（10 种配色方案）	儿童应用	明亮的原色、圆润、活泼
奢华（10 种配色方案）	高端品牌	黑色、金色、极简、大量留白

颜色令牌规则

• 主要色：品牌识别色，用于 CTA 和关键操作
• 次要色：互补色，用于次要操作和点缀
• 中性色：用于文本、边框、背景的灰度色阶（至少 9 种色阶）
• 语义色：成功（#22C55E）、警告（#F59E0B）、错误（#EF4444）、信息（#3B82F6）
• 始终定义为语义令牌：--color-action-primary，而不是 --color-blue-500

暗色模式配色规则

规则	实现方式
不要反转颜色	重新映射为适合暗色模式的颜色
降低 10-20% 的饱和度	防止暗色背景造成眼睛疲劳
海拔 = 更亮的表面	不采用类似浅色模式的阴影方式
文本层级	#E2E8F0（主要）、#94A3B8（次要）、#64748B（第三级）

字体搭配（前 10 名）

搭配	最适用于
Inter + Source Serif 4	SaaS、仪表板
Geist + Geist Mono	开发者工具、技术类产品
DM Sans + DM Serif Display	营销、编辑出版
Plus Jakarta Sans + Lora	现代专业风格
Outfit + Newsreader	创意代理机构
Manrope + Bitter	企业应用
Space Grotesk + Space Mono	科技初创公司
Satoshi + Erode	高端/奢华
General Sans + Gambetta	编辑出版
Cabinet Grotesk + Zodiak	大胆的品牌形象

排版比例（默认）

--text-xs: 0.75rem / 1rem
--text-sm: 0.875rem / 1.25rem
--text-base: 1rem / 1.5rem
--text-lg: 1.125rem / 1.75rem
--text-xl: 1.25rem / 1.75rem
--text-2xl: 1.5rem / 2rem
--text-3xl: 1.875rem / 2.25rem
--text-4xl: 2.25rem / 2.5rem

阶段 4：应用 UX 指南

导航规则

1. 主导航：最多 7 个项目（米勒定律）
2. 始终标明当前位置（面包屑或激活状态）
3. 返回按钮必须始终符合预期地工作
4. 内容密集型应用的每个页面都应提供搜索功能

表单规则

5. 标签置于输入框上方，绝不能只使用占位符
6. 在输入框失去焦点时进行行内验证，而不是在每次按键时验证
7. 错误消息：具体、可操作，并紧邻对应字段
8. 页面加载时自动聚焦第一个字段
9. 表单有效之前禁用提交按钮（并说明原因）
10. 多步骤表单应显示进度指示器

反馈规则

11. 对任何超过 300ms 的操作显示加载状态
12. 加载内容时优先使用骨架屏，而不是旋转指示器
13. Toast 通知：成功消息自动消失（3 秒），错误消息持续显示
14. 点击反馈：响应时间为 80-150ms
15. 对低风险操作使用乐观 UI

内容布局规则

16. 文本密集型页面采用 F 型布局
17. 落地页采用 Z 型布局
18. 首屏展示：价值主张 + 主要 CTA
19. 每个视口只设置一个主要 CTA

移动端规则

20. 主要操作使用底部导航（拇指操作区）
21. 信息流内容支持下拉刷新
22. 滑动手势应提供视觉提示

阶段 5：实施

图表类型选择决策表

数据关系	图表类型
比较	条形图、分组条形图、棒棒糖图、点图
随时间变化的趋势	折线图、面积图、迷你图、阶梯图
部分与整体	饼图（最多 5 个扇区）、环形图、矩形树图、堆叠条形图
分布	直方图、箱线图、小提琴图、密度图
相关性	散点图、气泡图、热力图
流程／过程	桑基图、漏斗图、瀑布图
地理	分级统计地图、点位地图、变形地图
层级结构	旭日图、冰柱图

支持的技术栈

技术栈	关键模式
React	JSX 组件、钩子、CSS Modules／Tailwind
Next.js	App Router、Server Components、图片优化
Vue	Composition API、<script setup>、Pinia
Svelte	响应式声明、过渡效果、SvelteKit
SwiftUI	声明式视图、ViewModifiers、@State/@Binding
React Native	Flexbox、Platform.select、SafeAreaView
Flutter	Widgets、Material/Cupertino、MediaQuery
Tailwind CSS	实用优先、谨慎使用 @apply、通过配置设置设计令牌
shadcn/ui	Radix 原语、Tailwind 变体、cn() 工具函数
HTML/CSS	语义化 HTML5、CSS Grid/Flexbox、自定义属性

设计令牌架构

master.tokens.json    -> Primitive values (colors, spacing, fonts)
semantic.tokens.json  -> Mapped meanings (action-primary, surface-elevated)
component.tokens.json -> Component-specific (button-padding, card-radius)
overrides/
  brand-a.tokens.json -> Brand-specific overrides
  dark.tokens.json    -> Dark mode overrides

• 主令牌是只读默认值
• 运行时以浅合并方式应用覆盖项
• 组件令牌只能引用语义令牌
• 组件中绝不引用原始令牌

快速优化清单

• 不要用表情符号作为图标——使用 Lucide React 或 Heroicons
• 点击反馈延迟：80-150ms
• 使用语义化颜色令牌（而非原始十六进制值）
• 采用 8dp 间距节奏（4、8、12、16、24、32、48、64）
• 深色模式使用 prefers-color-scheme 媒体查询
• 动画使用 prefers-reduced-motion
• 键盘专用焦点使用 :focus-visible，而非 :focus
• 设置图片宽高比以防止 CLS
• 为首屏可见文本预加载字体
• 为首屏以下的图片设置 loading="lazy"

反模式／常见错误

反模式	错误原因	替代做法
用 opacity 显示禁用文本	可读性会大幅下降	使用独立的禁用状态颜色令牌
只使用固定像素断点	忽略组件上下文	为组件使用容器查询
在桌面端使用汉堡菜单	隐藏主导航	在桌面端显示导航栏
用轮播展示关键内容	大多数用户只能看到第一张幻灯片	使用静态布局或手风琴组件
无限滚动但不在 URL 中持久化状态	无法分享或返回原位置	在 URL 中持久化滚动位置
模态框中再套模态框	令人困惑且严重影响无障碍性	重新设计，避免嵌套模态框
媒体自动播放	令人厌烦且违反无障碍规范	要求用户交互后再播放
只用颜色区分内容	色盲用户无法辨识	添加形状、图案或文本标签
只用占位符作为标签	输入后标签会消失，影响无障碍性	在输入框上方显示可见标签
在组件中使用原始十六进制值	无法进行主题化	使用语义化设计令牌

集成点

技能	集成方式
ui-design-system	令牌架构与组件库
canvas-design	数据可视化与图表
mobile-design	移动端专用设计模式
ux-researcher-designer	用户研究为设计决策提供依据
artifacts-builder	独立原型与演示
senior-frontend	UI 组件实现
accessibility	WCAG 合规性验证

技能类型

FLEXIBLE —— 遵循优先级层级（无障碍性 > 触控 > 性能 > 风格 > 布局）。风格建议会根据上下文调整。强烈建议遵守无障碍性和性能规则，不应降低其优先级。