b5d4724d06
- Add complete Figma design system with color, typography, and component specifications - Create detailed UI/UX design architecture for React Native implementation - Include AI-specific design elements with gradients, animations, and visual language - Add implementation guides for developers and step-by-step Figma instructions - Configure MCP server integration for Figma design workflow - Create SplashScreen component with AI gradient background and loading animations
7.4 KiB
7.4 KiB
AI密码管理器 - 设计系统详细规范
🎨 视觉设计原则
核心设计理念
- AI优先: 所有设计元素都体现智能化特征
- 安全感: 通过视觉传达信任和安全
- 未来感: 现代化、前瞻性的界面设计
- 简洁性: 复杂功能的简单化呈现
- 一致性: 统一的视觉语言和交互模式
🌈 颜色系统详细规范
主色调 (Primary Blue)
用途：主要品牌色、重要按钮、链接、选中状态
- Primary 50: #f0f9ff (浅色背景)
- Primary 100: #e0f2fe (悬停背景)
- Primary 200: #bae6fd (边框色)
- Primary 300: #7dd3fc (禁用状态)
- Primary 400: #38bdf8 (悬停状态)
- Primary 500: #0ea5e9 (默认主色)
- Primary 600: #0284c7 (按下状态)
- Primary 700: #0369a1 (深色主题)
- Primary 800: #075985 (强调色)
- Primary 900: #0c4a6e (最深色)
AI渐变色系
用途：AI功能标识、智能建议、未来感元素
- AI Gradient 1: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
- AI Gradient 2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
- AI Gradient 3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)
- AI Glow: #667eea with 20% opacity blur
安全状态色系
高安全级别 (绿色系)
- Success 50: #ecfdf5
- Success 100: #d1fae5
- Success 500: #10b981 (主要成功色)
- Success 600: #059669 (深色成功色)
- Success 900: #064e3b
中等安全级别 (橙色系)
- Warning 50: #fffbeb
- Warning 100: #fef3c7
- Warning 500: #f59e0b (主要警告色)
- Warning 600: #d97706 (深色警告色)
- Warning 900: #92400e
低安全级别 (红色系)
- Error 50: #fef2f2
- Error 100: #fee2e2
- Error 500: #ef4444 (主要错误色)
- Error 600: #dc2626 (深色错误色)
- Error 900: #7f1d1d
中性色系
用途：文本、背景、边框、图标
- Gray 25: #fcfcfd (最浅背景)
- Gray 50: #f9fafb (卡片背景)
- Gray 100: #f3f4f6 (分割线)
- Gray 200: #e5e7eb (边框)
- Gray 300: #d1d5db (禁用边框)
- Gray 400: #9ca3af (占位符文本)
- Gray 500: #6b7280 (次要文本)
- Gray 600: #4b5563 (标签文本)
- Gray 700: #374151 (正文文本)
- Gray 800: #1f2937 (标题文本)
- Gray 900: #111827 (主要文本)
暗色模式色系
背景色
- Dark BG Primary: #000000 (主背景)
- Dark BG Secondary: #1c1c1e (卡片背景)
- Dark BG Tertiary: #2c2c2e (输入框背景)
- Dark BG Quaternary: #3a3a3c (悬停背景)
文本色
- Dark Text Primary: #ffffff (主要文本)
- Dark Text Secondary: #ebebf5 (次要文本)
- Dark Text Tertiary: #ebebf599 (60% 透明度)
- Dark Text Quaternary: #ebebf54d (30% 透明度)
边框色
- Dark Border Primary: #38383a
- Dark Border Secondary: #48484a
📝 字体系统
字体族
主字体：SF Pro Display (iOS) / Roboto (Android)
代码字体：SF Mono / Roboto Mono
字体大小和行高
Display (展示用)
- Display XL: 48px / 56px (1.167) - 主要标题
- Display LG: 36px / 44px (1.222) - 页面标题
- Display MD: 30px / 38px (1.267) - 卡片标题
Heading (标题用)
- H1: 24px / 32px (1.333) - 页面主标题
- H2: 20px / 28px (1.4) - 区块标题
- H3: 18px / 24px (1.333) - 小节标题
Body (正文用)
- Body XL: 18px / 28px (1.556) - 重要正文
- Body LG: 16px / 24px (1.5) - 标准正文
- Body MD: 14px / 20px (1.429) - 次要正文
- Body SM: 12px / 16px (1.333) - 辅助文本
Label (标签用)
- Label XL: 16px / 20px (1.25) - 大标签
- Label LG: 14px / 18px (1.286) - 标准标签
- Label MD: 12px / 16px (1.333) - 小标签
- Label SM: 10px / 14px (1.4) - 微标签
字重系统
- Thin: 100 (装饰用)
- Light: 300 (次要信息)
- Regular: 400 (正文)
- Medium: 500 (强调)
- Semibold: 600 (小标题)
- Bold: 700 (重要标题)
- Heavy: 800 (特殊强调)
- Black: 900 (品牌标题)
📏 间距系统
基础间距单位
基础单位：4px (0.25rem)
间距级别：
- 0: 0px
- 1: 4px (0.25rem)
- 2: 8px (0.5rem)
- 3: 12px (0.75rem)
- 4: 16px (1rem) - 标准间距
- 5: 20px (1.25rem)
- 6: 24px (1.5rem)
- 8: 32px (2rem)
- 10: 40px (2.5rem)
- 12: 48px (3rem)
- 16: 64px (4rem)
- 20: 80px (5rem)
- 24: 96px (6rem)
组件内间距
按钮内边距：
- Small: 8px 12px
- Medium: 12px 16px
- Large: 16px 24px
卡片内边距：
- Small: 12px
- Medium: 16px
- Large: 24px
输入框内边距：
- Height: 48px
- Horizontal: 16px
- Vertical: 12px
🎭 阴影系统
卡片阴影
Card Shadow XS:
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
Card Shadow SM:
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
Card Shadow MD:
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
Card Shadow LG:
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
Card Shadow XL:
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
按钮阴影
Button Shadow:
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
Button Shadow Hover:
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
Button Shadow Active:
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
AI发光效果
AI Glow Subtle:
- box-shadow: 0 0 20px rgba(102, 126, 234, 0.15)
AI Glow Medium:
- box-shadow: 0 0 30px rgba(102, 126, 234, 0.25)
AI Glow Strong:
- box-shadow: 0 0 40px rgba(102, 126, 234, 0.35)
🔘 圆角系统
圆角级别
- None: 0px (直角)
- XS: 2px (微圆角)
- SM: 4px (小圆角)
- MD: 6px (中圆角)
- LG: 8px (大圆角)
- XL: 12px (特大圆角)
- 2XL: 16px (超大圆角)
- 3XL: 24px (巨大圆角)
- Full: 9999px (完全圆形)
组件圆角应用
按钮：8px (LG)
输入框：8px (LG)
卡片：12px (XL)
模态框：16px (2XL)
头像：9999px (Full)
标签：4px (SM)
🎯 图标系统
图标尺寸
- XS: 12px (微图标)
- SM: 16px (小图标)
- MD: 20px (标准图标)
- LG: 24px (大图标)
- XL: 32px (特大图标)
- 2XL: 48px (超大图标)
图标风格
- 线性图标：2px 线宽，圆角端点
- 填充图标：用于选中状态
- 双色图标：主色 + 灰色组合
- AI图标：渐变色处理
安全状态图标
- 高安全：🛡️ (盾牌) - 绿色
- 中等安全：⚠️ (警告) - 橙色
- 低安全：🚨 (警报) - 红色
- AI功能：🤖 (机器人) - 渐变色
- 生物识别：👆 (指纹) / 👁️ (面容)
📱 移动端适配
屏幕尺寸断点
- Small: 375px (iPhone SE)
- Medium: 390px (iPhone 14)
- Large: 430px (iPhone 14 Pro Max)
触摸目标尺寸
最小触摸目标：44px × 44px
推荐触摸目标：48px × 48px
舒适触摸目标：56px × 56px
安全区域
顶部安全区域：44px (状态栏)
底部安全区域：34px (Home Indicator)
侧边安全区域：16px (最小边距)
🌙 暗色模式适配
适配原则
1. 保持品牌色不变
2. 降低整体对比度
3. 使用真黑色背景
4. 适当调整阴影效果
5. 保持可读性标准
颜色映射
浅色模式 → 暗色模式
White (#ffffff) → Dark BG Primary (#000000)
Gray 50 (#f9fafb) → Dark BG Secondary (#1c1c1e)
Gray 100 (#f3f4f6) → Dark BG Tertiary (#2c2c2e)
Gray 900 (#111827) → Dark Text Primary (#ffffff)
Gray 500 (#6b7280) → Dark Text Secondary (#ebebf5)
这个详细的设计系统规范将确保整个AI密码管理器应用的视觉一致性和用户体验质量。请按照这些规范在Figma中创建您的设计系统。