设计规范生成器
专业的设计规范模板与配色方案，助您打造一致的视觉体验
🎨精选配色方案
现代科技蓝
适合科技公司、SaaS产品，传递专业与信任
温暖餐饮风
适合餐饮、食品包装，营造温馨食欲感
极简黑白灰
适合高端品牌、奢侈品，彰显简约优雅
活力渐变紫
适合创意行业、年轻品牌，充满活力与创新
自然生态绿
适合环保、健康、有机产品，传递自然理念
📋设计规范最佳实践
📝字体规范
字体层级系统
建立清晰的字体层级：H1 (32-48px) > H2 (24-32px) > H3 (18-24px) > Body (14-16px) > Caption (12-14px)
中文字体选择
推荐：思源黑体、苹方、微软雅黑。避免使用宋体作为屏幕显示字体。英文搭配推荐使用 Inter、Roboto 或 system-ui
行高与字间距
正文行高建议 1.5-1.8 倍，标题行高 1.2-1.4 倍。中文不需要额外字间距，英文可适当增加 letter-spacing
🎨色彩规范
60-30-10 原则
主色占 60%，辅助色占 30%，强调色占 10%。保持色彩平衡，避免过于花哨
对比度要求
文字与背景对比度至少 4.5:1（WCAG AA 标准）。可使用 WebAIM Contrast Checker 工具检测
色彩语义化
红色=危险/错误，绿色=成功/安全，黄色=警告/注意，蓝色=信息/链接。保持一致性
📐间距系统
8px 网格系统
所有间距使用 8px 的倍数：8px、16px、24px、32px、48px、64px。保持视觉节奏统一
留白的重要性
适当的留白能提升可读性和高级感。不要害怕空白，它是设计的一部分
组件内边距
按钮：垂直 12-16px，水平 24-32px。卡片：内边距 16-24px。保持一致的呼吸感
📱布局规范
响应式断点
移动端 <768px，平板 768-1024px，桌面 >1024px。采用移动优先的设计策略
栅格系统
使用 12 列栅格系统。移动端单列，平板 2-3 列，桌面 3-4 列。最大宽度建议 1200-1440px
内容安全区
两侧保留适当边距：移动端 16px，平板 24px，桌面 32-48px。确保内容不被裁剪
✨交互设计
反馈机制
所有可点击元素必须有 hover、active、focus 状态。加载时显示 loading 状态，操作后给予成功/失败反馈
动画时长
微交互：150-250ms。页面过渡：300-500ms。避免超过 1 秒的动画，以免让用户等待
一致性原则
相同功能的按钮样式一致，相同的操作位置一致。降低用户学习成本
💡快速设计检查清单
💡 提示：点击配色方案中的颜色块可快速复制色值
这些规范基于 Material Design、Apple HIG 和行业最佳实践整理