ui-ux-pro-max

# UI/UX Pro Max - 设计智能 Web 和移动应用的综合设计指南。包含 50 多种样式、97 种调色板、57 种字体搭配、99 条 UX 指南以及涵盖 9 种技术栈的 25 种图表类型。支持基于优先级的推荐搜索数据库。 ## 何时应用 在以下情况参考这些指南： - 设计新的 UI 组件或页面时 - 选择调色板和排版时 - 审查代码中的 UX 问题时 - 构建落地页或仪表盘时 - 实现无障碍要求时 ## 按优先级划分的规则类别 | 优先级 | 类别 | 影响 | 领域 | |----------|----------|--------|--------| | 1 | 无障碍 (Accessibility) | 关键 | `ux` | | 2 | 触摸与交互 | 关键 | `ux` | | 3 | 性能 | 高 | `ux` | | 4 | 布局与响应式 | 高 | `ux` | | 5 | 排版与颜色 | 中 | `typography`, `color` | | 6 | 动画 | 中 | `ux` | | 7 | 样式选择 | 中 | `style`, `product` | | 8 | 图表与数据 | 低 | `chart` | ## 快速参考 ### 1. 无障碍 (关键) - `color-contrast` - 普通文本对比度至少 4.5:1 - `focus-states` - 交互元素需有可见的焦点环 - `alt-text` - 为有意义的图像提供描述性 alt 文本 - `aria-labels` - 仅图标按钮需使用 aria-label - `keyboard-nav` - Tab 键顺序应与视觉顺序一致 - `form-labels` - 表单需使用 label 的 for 属性 ### 2. 触摸与交互 (关键) - `touch-target-size` - 触摸目标最小 44x44px - `hover-vs-tap` - 主要交互使用点击/轻触 - `loading-buttons` - 异步操作期间禁用按钮 - `error-feedback` - 在问题附近显示清晰的错误信息 - `cursor-pointer` - 为可点击元素添加 cursor-pointer ### 3. 性能 (高) - `image-optimization` - 使用 WebP, srcset, 懒加载 - `reduced-motion` - 检查 prefers-reduced-motion 设置 - `content-jumping` - 为异步内容预留空间 ### 4. 布局与响应式 (高) - `viewport-meta` - width=device-width initial-scale=1 - `readable-font-size` - 移动端正文最小 16px - `horizontal-scroll` - 确保内容适应视口宽度 - `z-index-management` - 定义 z-index 比例 (10, 20, 30, 50) ### 5. 排版与颜色 (中) - `line-height` - 正文行高使用 1.5-1.75 - `line-length` - 每行限制在 65-75 个字符 - `font-pairing` - 匹配标题/正文字体的个性 ### 6. 动画 (中) - `duration-timing` - 微交互使用 150-300ms