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密码管理器界面。每个界面都体现了安全性、智能化和用户友好的设计理念。