ai-password-manager/docs/figma-design-guide.md

# AI密码管理器 - Figma设计实施指南

## 🎯 设计目标
创建一个体现**安全性**、**智能化**和**未来感**的AI密码管理器界面，重点突出AI功能的无缝集成和直观的用户体验。

## 📐 Figma文件设置

### 1. 创建新文件
- 文件名：`AI密码管理器 - 设计系统`
- 画板尺寸：iPhone 14 (390 × 844px)
- 网格：8px基础网格系统

### 2. 页面结构
```
📄 Cover (封面页)
📄 Design System (设计系统)
📄 Components (组件库)
📄 Screens (界面设计)
📄 Prototypes (交互原型)
```

## 🎨 设计系统实施

### 第一步：创建颜色样式

#### 主色调系统
```
Primary/50: #f0f9ff
Primary/100: #e0f2fe
Primary/500: #0ea5e9 (主色)
Primary/600: #0284c7
Primary/900: #0c4a6e
```

#### AI渐变色
```
AI/Primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
AI/Secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)
AI/Accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)
```

#### 安全状态色
```
Security/High: #10b981 (安全-绿色)
Security/Medium: #f59e0b (警告-橙色)
Security/Low: #ef4444 (危险-红色)
Security/Critical: #dc2626 (严重-深红)
```

### 第二步：创建文字样式

#### 标题系统
```
H1/Bold: SF Pro Display, 32px, Bold, 32px行高
H2/Bold: SF Pro Display, 24px, Bold, 28px行高
H3/SemiBold: SF Pro Display, 20px, SemiBold, 24px行高
H4/Medium: SF Pro Display, 18px, Medium, 22px行高
```

#### 正文系统
```
Body/Large: SF Pro Text, 18px, Regular, 24px行高
Body/Medium: SF Pro Text, 16px, Regular, 22px行高
Body/Small: SF Pro Text, 14px, Regular, 20px行高
Caption: SF Pro Text, 12px, Regular, 16px行高
```

### 第三步：创建效果样式

#### 阴影系统
```
Shadow/SM: Y:1, Blur:2, Opacity:5%
Shadow/MD: Y:4, Blur:6, Opacity:10%
Shadow/LG: Y:10, Blur:15, Opacity:15%
Shadow/XL: Y:20, Blur:25, Opacity:25%
```

#### AI发光效果
```
AI/Glow: 外发光, 颜色:#667eea, 模糊:8px, 扩散:2px
Security/Glow: 外发光, 颜色:#10b981, 模糊:6px, 扩散:1px
```

## 📱 界面设计详细规范

### 1. 启动页面 (Splash Screen)

#### 设计要点
- **背景**：AI主渐变 (135度，#667eea到#764ba2)
- **Logo**：120×120px，白色，居中放置
- **标题**："AI密码管家"，H1样式，白色，Logo下方24px
- **加载器**：5个圆点，白色，流动动画效果

#### 具体实施步骤
1. 创建390×844px画板，命名"Splash Screen"
2. 添加渐变背景，使用AI/Primary渐变
3. 放置Logo图标（可用圆形+锁图标组合）
4. 添加标题文字，应用H1样式
5. 创建加载动画组件（5个圆点，透明度变化）

### 2. 认证页面 (Authentication)

#### 布局结构
```
┌─────────────────────────────────┐
│ Status Bar (44px)              │
├─────────────────────────────────┤
│ Safe Area Top (48px)           │
├─────────────────────────────────┤
│                                │
│ Logo (80×80px)                 │ ← 距顶部120px
│ 欢迎回来 (H1)                   │ ← Logo下方32px
│ 请验证您的身份 (Body/Medium)     │ ← 标题下方8px
│                                │
│ [生物识别区域]                   │ ← 中心区域
│ 指纹图标 (64×64px)              │
│ 使用生物识别 (Body/Large)        │
│                                │
│ ──── 或 ──── (分割线)           │
│                                │
│ [输入主密码] (Secondary Button)  │
│                                │
│ 忘记密码？(Text Button)          │
│                                │
├─────────────────────────────────┤
│ Safe Area Bottom (34px)        │
└─────────────────────────────────┘
```

#### 生物识别状态设计
- **等待状态**：指纹图标，Gray/400颜色
- **识别中**：指纹图标，AI渐变色 + 脉冲动画
- **成功状态**：✓图标，Security/High颜色
- **失败状态**：✗图标，Security/Low颜色

### 3. 主界面 (Dashboard)

#### 导航栏设计
```
高度：76px (44px状态栏 + 32px内容)
背景：模糊效果 + 半透明白色
左侧：🔒 + "AI密码管家" (H3样式)
右侧：通知图标 + 设置图标 (24×24px)
```

#### 搜索栏设计
```
高度：48px
背景：Gray/50，圆角24px
左侧：搜索图标 (20×20px)
占位符："搜索密码或说'银行相关的密码'"
右侧：AI机器人图标 (24×24px，AI渐变色)
```

#### 安全状态卡片
```
尺寸：358×100px (左右边距16px)
背景：白色，圆角12px，Shadow/MD
布局：左侧评分圆环 + 右侧问题列表

左侧评分区域：
- 圆形进度条：直径60px，线宽4px
- 评分数字：H2样式，居中
- 状态文字：Body/Small，Gray/500

右侧问题区域：
- ⚠️ 5个弱密码 (Security/Medium色)
- 🔄 3个过期密码 (Security/Medium色)  
- 🔐 建议2FA (Security/High色)
```

#### 快速操作按钮
```
布局：三个等宽按钮，间距12px
按钮尺寸：110×56px，圆角12px
样式：白色背景，Shadow/SM，图标+文字

按钮内容：
1. ➕ 添加密码
2. 📱 扫码登录
3. 🎲 生成密码
```

#### 密码条目卡片
```
尺寸：358×72px
背景：白色，圆角8px，Shadow/SM
布局：左侧图标 + 中间信息 + 右侧状态

左侧：网站图标 (32×32px，圆角6px)
中间：
- 网站名称 (Body/Large，Bold)
- 用户名 (Body/Small，Gray/500)
右侧：
- 密码强度指示器
- 标签徽章
- 收藏星标
```

### 4. 密码库页面 (Vault)

#### 筛选标签栏
```
高度：40px
背景：透明
标签样式：圆角20px，内边距12×8px
选中状态：Primary/500背景，白色文字
未选中：Gray/100背景，Gray/700文字

标签内容：[全部] [收藏] [分类] [标签]
```

#### 排序选择器
```
高度：32px
样式：Body/Small + 下拉箭头
默认：最近使用 ↓
选项：最近使用、字母排序、安全评分
```

#### 密码条目（展开版）
```
尺寸：358×96px
背景：白色，圆角8px，Shadow/SM

布局：
- 顶部：网站图标 + 网站全名
- 中部：用户名/账号
- 底部：安全信息行 + 标签行

安全信息行：
- 密码强度：🔒●●●●○ 强度：80/100
- 使用时间：3天前使用

标签行：
- 标签徽章：🏷️工作 🏷️开发
- 收藏星标：⭐
```

### 5. AI助手页面

#### 安全评分卡片（大版本）
```
尺寸：358×160px
背景：白色，圆角16px，Shadow/LG

中心圆形进度条：
- 直径：120px
- 线宽：8px
- 渐变色：根据评分显示不同颜色
- 中心数字：H1样式，48px
- 状态文字：H3样式，评分下方
```

#### 安全问题卡片
```
尺寸：358×64px
背景：白色，圆角12px，Shadow/SM
左边框：4px宽，根据严重程度显示颜色

布局：
- 左侧：问题图标 (24×24px)
- 中间：问题描述 (Body/Medium)
- 右侧：箭头图标 (16×16px)

颜色编码：
- 严重：Security/Low (红色边框)
- 警告：Security/Medium (橙色边框)
- 建议：Security/High (绿色边框)
```

#### AI建议卡片
```
尺寸：358×120px
背景：AI渐变背景
圆角：16px
文字：白色

布局：
- 顶部：🤖 + "基于您的使用习惯，我发现："
- 中部：建议列表（• 开头的要点）
- 底部：微妙的AI粒子动画效果
```

### 6. 搜索页面

#### 语音搜索按钮
```
尺寸：358×48px
背景：AI渐变
圆角：24px
内容：🎤 + "语音搜索"
文字：白色，Body/Large
```

#### 智能分类卡片
```
尺寸：358×56px
背景：白色，圆角12px，Shadow/SM

布局：
- 左侧：分类图标 (32×32px，圆形背景)
- 中间：分类名称 + 数量
- 右侧：预览文字 (Gray/400)

分类图标背景色：
- 🏦 银行金融：蓝色渐变
- 💼 工作相关：紫色渐变  
- 🛒 购物网站：橙色渐变
- 🎮 游戏娱乐：绿色渐变
```

### 7. 密码详情页面

#### 大图标区域
```
尺寸：80×80px
背景：Gray/100，圆角16px
图标：网站favicon或默认图标
位置：页面顶部居中，距导航栏32px
```

#### 信息字段
```
字段容器：358×48px，底部边框1px Gray/200

字段布局：
- 标签：Body/Small，Gray/500，顶部对齐
- 内容：Body/Medium，Gray/900，标签下方4px
- 操作按钮：右侧，24×24px图标

密码字段特殊处理：
- 默认显示：●●●●●●●●●●●●
- 显示按钮：👁️ 图标
- 复制按钮：📋 图标
```

#### AI建议区域
```
背景：AI渐变，圆角12px
内边距：16px
文字：白色

内容：
- 标题：💡 AI 建议 (Body/Large，Bold)
- 建议列表：• 开头的要点 (Body/Medium)
- 微妙的发光效果边框
```

#### 标签组
```
布局：横向排列，可换行
标签样式：
- 背景：Primary/100
- 文字：Primary/700
- 圆角：16px
- 内边距：8×12px
- 间距：8px
```

### 8. 设置页面

#### 用户信息卡片
```
尺寸：358×80px
背景：白色，圆角12px，Shadow/SM

布局：
- 左侧：用户头像 (48×48px，圆形)
- 中间：用户名 + 邮箱
- 右侧：编辑图标
```

#### 设置分组
```
分组标题：
- 样式：Body/Small，Gray/500，Bold
- 位置：距上一组24px，距设置项12px

设置项：
- 高度：48px
- 背景：白色
- 分割线：底部1px，Gray/100

设置项布局：
- 左侧：图标 (24×24px) + 标题
- 右侧：开关/值/箭头
```

#### 开关组件
```
尺寸：44×24px
轨道：圆角12px
滑块：20×20px圆形，2px边距

状态：
- 开启：Primary/500背景，白色滑块
- 关闭：Gray/300背景，白色滑块
- 动画：200ms缓动过渡
```

## 🎭 AI元素和未来感设计

### AI视觉元素
1. **渐变运用**：所有AI功能使用蓝紫科技渐变
2. **发光效果**：重要AI功能添加微妙外发光
3. **动画效果**：
   - 脉冲呼吸：AI处理时的呼吸灯效果
   - 渐变流动：AI卡片的渐变色流动
   - 粒子效果：安全扫描的微粒动画
4. **智能徽章**：AI增强功能显示渐变"AI"标识

### 未来感设计元素
1. **毛玻璃效果**：导航栏和浮层使用模糊背景
2. **微妙阴影**：营造层次感和深度
3. **圆角设计**：现代化的圆角处理
4. **渐变色彩**：科技感的渐变色运用
5. **动态反馈**：流畅的交互动画

### 安全视觉语言
1. **颜色编码**：一致的安全状态颜色系统
2. **图标系统**：统一的安全状态图标
3. **进度可视化**：密码强度的直观表示
4. **状态反馈**：即时的视觉状态变化

## 🔄 交互原型设计

### 页面转场动画
- **推入效果**：新页面从右侧滑入
- **时长**：300ms
- **缓动**：ease-out

### 组件交互
- **按钮点击**：轻微缩放 + 颜色变化
- **卡片点击**：轻微阴影增强
- **开关切换**：滑块平滑移动

### AI功能交互
- **语音搜索**：麦克风图标脉冲动画
- **AI分析**：进度条 + 粒子效果
- **智能建议**：卡片从下方滑入

这个设计指南将帮助您在Figma中创建出专业、一致且具有未来感的AI密码管理器界面。每个界面都体现了安全性、智能化和用户友好的设计理念。