feat(docs): add comprehensive design system and AI password manager architecture
- 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
This commit is contained in:
richarjiang
352
docs/figma-design-system-rules.md
Normal file
352
docs/figma-design-system-rules.md
Normal file
@@ -0,0 +1,352 @@
|
||||
# AI密码管理器 - Figma设计系统规范
|
||||
|
||||
## 项目概述
|
||||
|
||||
基于React Native Expo的AI驱动密码管理器，需要体现安全性、智能化和未来感的设计理念。
|
||||
|
||||
## 设计系统结构
|
||||
|
||||
### 1. Token定义
|
||||
|
||||
#### 颜色系统
|
||||
```typescript
|
||||
// 主色调 - AI科技感蓝紫渐变
|
||||
Primary: {
|
||||
50: '#f0f9ff',
|
||||
100: '#e0f2fe',
|
||||
200: '#bae6fd',
|
||||
300: '#7dd3fc',
|
||||
400: '#38bdf8',
|
||||
500: '#0ea5e9', // 主色
|
||||
600: '#0284c7',
|
||||
700: '#0369a1',
|
||||
800: '#075985',
|
||||
900: '#0c4a6e',
|
||||
}
|
||||
|
||||
// AI渐变色
|
||||
AI_Gradient: {
|
||||
primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
secondary: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
||||
accent: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
||||
}
|
||||
|
||||
// 安全状态色
|
||||
Security: {
|
||||
high: '#10b981', // 绿色 - 安全
|
||||
medium: '#f59e0b', // 橙色 - 警告
|
||||
low: '#ef4444', // 红色 - 危险
|
||||
critical: '#dc2626', // 深红 - 严重
|
||||
}
|
||||
|
||||
// 功能色
|
||||
Functional: {
|
||||
success: '#10b981',
|
||||
warning: '#f59e0b',
|
||||
error: '#ef4444',
|
||||
info: '#3b82f6',
|
||||
}
|
||||
|
||||
// 中性色
|
||||
Gray: {
|
||||
50: '#f9fafb',
|
||||
100: '#f3f4f6',
|
||||
200: '#e5e7eb',
|
||||
300: '#d1d5db',
|
||||
400: '#9ca3af',
|
||||
500: '#6b7280',
|
||||
600: '#4b5563',
|
||||
700: '#374151',
|
||||
800: '#1f2937',
|
||||
900: '#111827',
|
||||
}
|
||||
|
||||
// 暗色模式
|
||||
Dark: {
|
||||
background: {
|
||||
primary: '#000000',
|
||||
secondary: '#1c1c1e',
|
||||
tertiary: '#2c2c2e',
|
||||
},
|
||||
text: {
|
||||
primary: '#ffffff',
|
||||
secondary: '#ebebf5',
|
||||
tertiary: '#ebebf599',
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 字体系统
|
||||
```typescript
|
||||
Typography: {
|
||||
// 字体族
|
||||
fontFamily: {
|
||||
primary: 'SF Pro Display', // iOS系统字体
|
||||
secondary: 'SF Pro Text',
|
||||
mono: 'SF Mono',
|
||||
},
|
||||
|
||||
// 字体大小
|
||||
fontSize: {
|
||||
xs: 12,
|
||||
sm: 14,
|
||||
base: 16,
|
||||
lg: 18,
|
||||
xl: 20,
|
||||
'2xl': 24,
|
||||
'3xl': 30,
|
||||
'4xl': 36,
|
||||
},
|
||||
|
||||
// 字重
|
||||
fontWeight: {
|
||||
light: '300',
|
||||
normal: '400',
|
||||
medium: '500',
|
||||
semibold: '600',
|
||||
bold: '700',
|
||||
heavy: '800',
|
||||
},
|
||||
|
||||
// 行高
|
||||
lineHeight: {
|
||||
tight: 1.25,
|
||||
normal: 1.5,
|
||||
relaxed: 1.75,
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 间距系统
|
||||
```typescript
|
||||
Spacing: {
|
||||
xs: 4,
|
||||
sm: 8,
|
||||
md: 16,
|
||||
lg: 24,
|
||||
xl: 32,
|
||||
'2xl': 48,
|
||||
'3xl': 64,
|
||||
'4xl': 80,
|
||||
'5xl': 96,
|
||||
}
|
||||
```
|
||||
|
||||
#### 圆角系统
|
||||
```typescript
|
||||
BorderRadius: {
|
||||
none: 0,
|
||||
sm: 4,
|
||||
md: 8,
|
||||
lg: 12,
|
||||
xl: 16,
|
||||
'2xl': 24,
|
||||
full: 9999,
|
||||
}
|
||||
```
|
||||
|
||||
#### 阴影系统
|
||||
```typescript
|
||||
Shadow: {
|
||||
sm: {
|
||||
shadowOffset: { width: 0, height: 1 },
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 2,
|
||||
elevation: 1,
|
||||
},
|
||||
md: {
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 6,
|
||||
elevation: 3,
|
||||
},
|
||||
lg: {
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 0.15,
|
||||
shadowRadius: 15,
|
||||
elevation: 6,
|
||||
},
|
||||
xl: {
|
||||
shadowOffset: { width: 0, height: 20 },
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 25,
|
||||
elevation: 10,
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 组件库架构
|
||||
|
||||
#### 基础组件
|
||||
- **Button**: 主要按钮、次要按钮、文本按钮、图标按钮
|
||||
- **Input**: 文本输入、密码输入、搜索输入
|
||||
- **Card**: 基础卡片、密码条目卡片、安全状态卡片
|
||||
- **Badge**: 状态徽章、标签徽章、AI徽章
|
||||
- **Avatar**: 用户头像、网站图标
|
||||
- **Progress**: 进度条、圆形进度、安全评分
|
||||
|
||||
#### 复合组件
|
||||
- **PasswordStrengthIndicator**: 密码强度指示器
|
||||
- **SecurityScoreCard**: 安全评分卡片
|
||||
- **PasswordEntryCard**: 密码条目卡片
|
||||
- **AIAssistantCard**: AI助手卡片
|
||||
- **SearchBar**: 智能搜索栏
|
||||
- **BiometricPrompt**: 生物识别提示
|
||||
|
||||
#### 布局组件
|
||||
- **Screen**: 页面容器
|
||||
- **Section**: 区块容器
|
||||
- **List**: 列表容器
|
||||
- **Grid**: 网格容器
|
||||
|
||||
### 3. 图标系统
|
||||
|
||||
#### 图标库
|
||||
- **系统图标**: SF Symbols (iOS), Material Icons (Android)
|
||||
- **自定义图标**: 安全相关、AI相关、密码管理相关
|
||||
- **网站图标**: Favicon获取和显示
|
||||
|
||||
#### 图标规范
|
||||
- **尺寸**: 16px, 20px, 24px, 32px, 48px, 64px
|
||||
- **样式**: 线性、填充、双色调
|
||||
- **颜色**: 继承文本颜色或指定颜色
|
||||
|
||||
### 4. 动画系统
|
||||
|
||||
#### 过渡动画
|
||||
```typescript
|
||||
Transitions: {
|
||||
// 页面转场
|
||||
screen: {
|
||||
duration: 300,
|
||||
easing: 'ease-out',
|
||||
},
|
||||
// 组件状态变化
|
||||
component: {
|
||||
duration: 200,
|
||||
easing: 'ease-in-out',
|
||||
},
|
||||
// 微交互
|
||||
micro: {
|
||||
duration: 150,
|
||||
easing: 'ease-out',
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### AI特效动画
|
||||
- **脉冲效果**: AI处理时的呼吸灯效果
|
||||
- **渐变流动**: AI功能的渐变色流动
|
||||
- **粒子效果**: 安全扫描的粒子动画
|
||||
- **发光效果**: 重要AI功能的发光边框
|
||||
|
||||
### 5. 响应式设计
|
||||
|
||||
#### 断点系统
|
||||
```typescript
|
||||
Breakpoints: {
|
||||
// iPhone SE (3rd gen)
|
||||
small: { width: 375, height: 667 },
|
||||
// iPhone 14
|
||||
medium: { width: 390, height: 844 },
|
||||
// iPhone 14 Pro Max
|
||||
large: { width: 430, height: 932 },
|
||||
// iPad
|
||||
tablet: { width: 768, height: 1024 },
|
||||
}
|
||||
```
|
||||
|
||||
#### 适配策略
|
||||
- **小屏**: 单列布局，紧凑间距
|
||||
- **中屏**: 标准布局，正常间距
|
||||
- **大屏**: 利用额外空间显示更多信息
|
||||
- **横屏**: 双列或分栏布局
|
||||
|
||||
### 6. 无障碍设计
|
||||
|
||||
#### 可访问性标准
|
||||
- **对比度**: 符合WCAG AA标准 (4.5:1)
|
||||
- **字体大小**: 支持动态字体调整
|
||||
- **触摸目标**: 最小44x44pt
|
||||
- **屏幕阅读器**: 完整的VoiceOver支持
|
||||
|
||||
#### 语义化标记
|
||||
- **角色定义**: button, link, heading, list等
|
||||
- **状态描述**: selected, disabled, expanded等
|
||||
- **标签关联**: label与input的关联
|
||||
|
||||
### 7. 设计原则
|
||||
|
||||
#### AI元素设计
|
||||
1. **渐变运用**: AI功能使用蓝紫科技渐变
|
||||
2. **发光效果**: 重要AI功能添加微妙发光
|
||||
3. **动画反馈**: AI处理时显示智能动画
|
||||
4. **智能徽章**: AI增强功能显示"AI"标识
|
||||
|
||||
#### 安全视觉语言
|
||||
1. **颜色编码**: 绿色=安全，橙色=警告，红色=危险
|
||||
2. **图标系统**: 统一的安全状态图标
|
||||
3. **进度指示**: 密码强度的视觉化表示
|
||||
4. **状态反馈**: 即时的视觉状态反馈
|
||||
|
||||
#### 交互设计
|
||||
1. **手势操作**: 左右滑动的快捷操作
|
||||
2. **触觉反馈**: 重要操作的震动反馈
|
||||
3. **状态动画**: 流畅的状态转换动画
|
||||
4. **加载状态**: 优雅的加载和骨架屏
|
||||
|
||||
### 8. Figma组织结构
|
||||
|
||||
#### 文件结构
|
||||
```
|
||||
AI密码管理器设计系统/
|
||||
├── 🎨 Design Tokens
|
||||
│ ├── Colors
|
||||
│ ├── Typography
|
||||
│ ├── Spacing
|
||||
│ └── Effects
|
||||
├── 🧩 Components
|
||||
│ ├── Atoms
|
||||
│ ├── Molecules
|
||||
│ └── Organisms
|
||||
├── 📱 Screens
|
||||
│ ├── Authentication
|
||||
│ ├── Dashboard
|
||||
│ ├── Vault
|
||||
│ ├── AI Assistant
|
||||
│ ├── Search
|
||||
│ └── Settings
|
||||
├── 🔄 Prototypes
|
||||
│ ├── User Flows
|
||||
│ └── Interactions
|
||||
└── 📚 Documentation
|
||||
├── Style Guide
|
||||
└── Component Specs
|
||||
```
|
||||
|
||||
#### 命名规范
|
||||
- **页面**: `Screen/功能名称`
|
||||
- **组件**: `Component/组件类型/组件名称`
|
||||
- **状态**: `组件名称/状态名称`
|
||||
- **变体**: `尺寸-状态-主题`
|
||||
|
||||
### 9. 开发交接规范
|
||||
|
||||
#### 设计标注
|
||||
- **间距**: 使用8px网格系统
|
||||
- **字体**: 指定字重和行高
|
||||
- **颜色**: 使用设计令牌名称
|
||||
- **动画**: 指定时长和缓动函数
|
||||
|
||||
#### 资源导出
|
||||
- **图标**: SVG格式，多尺寸
|
||||
- **图片**: PNG/WebP，@1x/@2x/@3x
|
||||
- **动画**: Lottie JSON格式
|
||||
|
||||
#### 组件文档
|
||||
- **用法说明**: 何时使用该组件
|
||||
- **属性列表**: 所有可配置属性
|
||||
- **状态变化**: 不同状态的视觉表现
|
||||
- **交互行为**: 用户交互的反馈
|
||||
|
||||
这个设计系统将确保AI密码管理器在视觉和交互上保持一致性，同时体现出安全、智能、未来感的品牌特质。
|
||||
Reference in New Issue
Block a user