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
373
docs/interface-designs.md
Normal file
373
docs/interface-designs.md
Normal file
@@ -0,0 +1,373 @@
|
||||
# AI密码管理器 - 界面设计详细规范
|
||||
|
||||
## 📱 核心界面设计
|
||||
|
||||
### 1. 启动页面 (Splash Screen)
|
||||
```
|
||||
画板尺寸：390 × 844px (iPhone 14)
|
||||
|
||||
布局结构：
|
||||
┌─────────────────────────────────┐
|
||||
│ │
|
||||
│ │
|
||||
│ [Logo] │ ← 居中，120×120px
|
||||
│ AI密码管家 │ ← H1, 24px, Bold
|
||||
│ │
|
||||
│ │
|
||||
│ ●●●○○ │ ← 加载指示器
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
│ │
|
||||
└─────────────────────────────────┘
|
||||
|
||||
设计要点：
|
||||
- 背景：Primary 500 渐变到 Primary 700
|
||||
- Logo：白色图标，带AI发光效果
|
||||
- 标题：白色文字，下方有微妙的发光
|
||||
- 加载器：白色圆点，流动动画
|
||||
```
|
||||
|
||||
### 2. 认证页面 (Authentication)
|
||||
```
|
||||
画板尺寸：390 × 844px
|
||||
|
||||
布局结构：
|
||||
┌─────────────────────────────────┐
|
||||
│ ← │ ← 返回按钮 (如果需要)
|
||||
│ │
|
||||
│ [Logo] │ ← 80×80px
|
||||
│ 欢迎回来 │ ← H1, 24px
|
||||
│ 请验证您的身份 │ ← Body MD, Gray 500
|
||||
│ │
|
||||
│ [指纹图标] │ ← 64×64px, AI渐变色
|
||||
│ 使用生物识别 │ ← Label LG, 16px
|
||||
│ │
|
||||
│ │
|
||||
│ ──────── 或 ──────── │ ← 分割线
|
||||
│ │
|
||||
│ [输入主密码按钮] │ ← Secondary Button
|
||||
│ │
|
||||
│ │
|
||||
│ 忘记密码？ │ ← Text Button
|
||||
│ │
|
||||
└─────────────────────────────────┘
|
||||
|
||||
生物识别状态：
|
||||
- 等待：指纹图标，灰色
|
||||
- 识别中：指纹图标，AI渐变 + 脉冲动画
|
||||
- 成功：✓ 图标，绿色
|
||||
- 失败：✗ 图标，红色 + 震动反馈
|
||||
```
|
||||
|
||||
### 3. 主界面 (Dashboard)
|
||||
```
|
||||
画板尺寸：390 × 844px
|
||||
|
||||
布局结构：
|
||||
┌─────────────────────────────────┐
|
||||
│ 🔒 AI密码管家 🔔 ⚙️ │ ← 导航栏，高度76px
|
||||
├─────────────────────────────────┤
|
||||
│ 🔍 搜索密码或说"银行相关的密码" 🤖 │ ← 搜索栏，高度48px
|
||||
├─────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │ ← 安全状态卡片
|
||||
│ │ 85 │ ⚠️ 5个弱密码 │ │ 高度100px
|
||||
│ │ /100 │ 🔄 3个过期密码 │ │ 圆角12px
|
||||
│ │ 良好 │ 🔐 建议2FA │ │ 阴影MD
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ [➕添加密码] [📱扫码] [🎲生成] │ ← 快速操作，高度56px
|
||||
│ │
|
||||
│ 最近使用 查看全部 │ ← 区块标题
|
||||
│ │
|
||||
│ ┌─ 🌐 GitHub ─────────────────┐ │ ← 密码条目卡片
|
||||
│ │ username@email.com │ │ 高度72px
|
||||
│ │ 🔒●●●●○ 🏷️工作 ⭐ │ │ 圆角8px
|
||||
│ └─────────────────────────────┘ │
|
||||
│ ┌─ 🏦 中国银行 ───────────────┐ │
|
||||
│ │ 1234****5678 │ │
|
||||
│ │ 🔒●●●●● 🏷️银行 │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ ┌─ 📧 Gmail ──────────────────┐ │
|
||||
│ │ user@gmail.com │ │
|
||||
│ │ 🔒●●○○○ ⚠️弱密码 │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
└─────────────────────────────────┘
|
||||
|
||||
关键元素：
|
||||
- 安全评分：大数字85，圆形进度条背景
|
||||
- 问题统计：图标+数字+描述，颜色编码
|
||||
- 快速操作：三个等宽按钮，图标+文字
|
||||
- 密码条目：网站图标+标题+用户名+安全指示+标签
|
||||
```
|
||||
|
||||
### 4. 密码库页面 (Vault)
|
||||
```
|
||||
画板尺寸：390 × 844px
|
||||
|
||||
布局结构：
|
||||
┌─────────────────────────────────┐
|
||||
│ ← 密码库 🔍 ⋯ │ ← 导航栏
|
||||
├─────────────────────────────────┤
|
||||
│ [全部] [收藏] [分类] [标签] │ ← 筛选标签，高度40px
|
||||
├─────────────────────────────────┤
|
||||
│ 排序：最近使用 ↓ │ ← 排序选择器
|
||||
├─────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─ 🌐 GitHub ─────────────────┐ │ ← 密码条目（展开版）
|
||||
│ │ GitHub Inc. │ │ 高度96px
|
||||
│ │ username@email.com │ │
|
||||
│ │ 🔒●●●●○ 强度：80/100 │ │
|
||||
│ │ 🏷️工作 🏷️开发 ⭐ 3天前使用 │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─ 🏦 中国银行 ───────────────┐ │
|
||||
│ │ 中国银行手机银行 │ │
|
||||
│ │ 1234****5678 │ │
|
||||
│ │ 🔒●●●●● 强度：95/100 │ │
|
||||
│ │ 🏷️银行 🏷️重要 1周前使用 │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─ 📧 Gmail ──────────────────┐ │
|
||||
│ │ Google Mail │ │
|
||||
│ │ user@gmail.com │ │
|
||||
│ │ 🔒●●○○○ ⚠️弱密码 强度：35 │ │
|
||||
│ │ 🏷️邮箱 2周前使用 │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────┘
|
||||
|
||||
交互设计：
|
||||
- 左滑：快速复制用户名
|
||||
- 右滑：快速复制密码
|
||||
- 长按：显示操作菜单
|
||||
- 点击：进入详情页
|
||||
```
|
||||
|
||||
### 5. 密码详情页面 (Password Detail)
|
||||
```
|
||||
画板尺寸：390 × 844px
|
||||
|
||||
布局结构：
|
||||
┌─────────────────────────────────┐
|
||||
│ ← GitHub ⋯ 编辑 │ ← 导航栏
|
||||
├─────────────────────────────────┤
|
||||
│ │
|
||||
│ 🌐 │ ← 大图标，80×80px
|
||||
│ │
|
||||
│ GitHub Inc. │ ← H2, 20px, Bold
|
||||
│ https://github.com │ ← Body SM, Gray 500
|
||||
│ │
|
||||
├─────────────────────────────────┤
|
||||
│ 用户名 │ ← Label MD
|
||||
│ username@email.com [复制] │ ← 可复制字段
|
||||
├─────────────────────────────────┤
|
||||
│ 密码 │
|
||||
│ ●●●●●●●●●●●● [显示] [复制] │ ← 密码字段
|
||||
├─────────────────────────────────┤
|
||||
│ 安全信息 │ ← 区块标题
|
||||
│ 🔒 强度：强 (80/100) │
|
||||
│ 📅 创建：2024-01-15 │
|
||||
│ 🕐 最后使用：3天前 │
|
||||
│ 🔄 上次更新：1个月前 │
|
||||
├─────────────────────────────────┤
|
||||
│ 💡 AI 建议 │ ← AI建议卡片
|
||||
│ ┌─────────────────────────────┐ │ 背景：AI渐变
|
||||
│ │ • 建议启用两步验证 │ │ 圆角12px
|
||||
│ │ • 密码已使用180天，建议更新 │ │ 文字：白色
|
||||
│ │ • 检测到数据泄露风险 │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
├─────────────────────────────────┤
|
||||
│ 标签 │
|
||||
│ [🏷️工作] [🏷️开发] [🏷️重要] │ ← 标签组
|
||||
├─────────────────────────────────┤
|
||||
│ 备注 │
|
||||
│ 公司开发账户，包含重要代码仓库 │ ← 备注文本
|
||||
│ │
|
||||
│ │
|
||||
│ [🔄 更新密码] [🗑️ 删除] │ ← 底部操作按钮
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 6. AI助手页面 (AI Assistant)
|
||||
```
|
||||
画板尺寸：390 × 844px
|
||||
|
||||
布局结构：
|
||||
┌─────────────────────────────────┐
|
||||
│ AI 安全助手 🤖 │ ← 导航栏，AI图标渐变
|
||||
├─────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │ ← 安全评分卡片
|
||||
│ │ │ │ 高度160px
|
||||
│ │ ●●●●●●●●○○ │ │ 圆形进度条
|
||||
│ │ 85 │ │ 中心大数字
|
||||
│ │ /100 │ │
|
||||
│ │ 良好 │ │ 状态文字
|
||||
│ │ │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ 🔍 安全问题分析 │ ← 区块标题
|
||||
│ │
|
||||
│ ┌─ ⚠️ 弱密码问题 ──────────────┐ │ ← 问题卡片
|
||||
│ │ 发现 5 个弱密码需要立即更新 │ │ 高度64px
|
||||
│ │ 点击查看详情 → │ │ 橙色左边框
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─ 🔄 过期密码 ────────────────┐ │
|
||||
│ │ 3 个密码超过90天未更新 │ │
|
||||
│ │ 建议定期更新 → │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─ 🔐 两步验证 ────────────────┐ │
|
||||
│ │ 2 个重要账户建议启用2FA │ │
|
||||
│ │ 提升安全等级 → │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ 💡 智能建议 │ ← AI建议区块
|
||||
│ │
|
||||
│ ┌─────────────────────────────┐ │ ← AI建议卡片
|
||||
│ │ 🤖 基于您的使用习惯，我发现： │ │ AI渐变背景
|
||||
│ │ │ │ 白色文字
|
||||
│ │ • 您经常使用银行类网站，建议 │ │
|
||||
│ │ 为金融账户设置更强密码 │ │
|
||||
│ │ │ │
|
||||
│ │ • 检测到工作相关密码较多， │ │
|
||||
│ │ 建议创建"工作"分类 │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ [🛠️ 一键修复] [📊 详细报告] │ ← 快速操作
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 7. 搜索页面 (Search)
|
||||
```
|
||||
画板尺寸：390 × 844px
|
||||
|
||||
布局结构：
|
||||
┌─────────────────────────────────┐
|
||||
│ 🔍 搜索密码... ✕ │ ← 搜索输入框
|
||||
│ 💬 试试说："银行相关的密码" │ ← 提示文字，AI色彩
|
||||
├─────────────────────────────────┤
|
||||
│ 🎤 语音搜索 │ ← 语音输入按钮
|
||||
├─────────────────────────────────┤
|
||||
│ 快速筛选 │ ← 区块标题
|
||||
│ [最近使用] [收藏] [弱密码] [过期] │ ← 快速筛选标签
|
||||
├─────────────────────────────────┤
|
||||
│ 智能分类 │ ← AI分类区块
|
||||
│ │
|
||||
│ ┌─ 🏦 银行金融 (8) ────────────┐ │ ← 分类卡片
|
||||
│ │ 中国银行、工商银行、支付宝... │ │ 显示数量
|
||||
│ └─────────────────────────────┘ │ 预览内容
|
||||
│ │
|
||||
│ ┌─ 💼 工作相关 (12) ───────────┐ │
|
||||
│ │ GitHub、Slack、Notion... │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─ 🛒 购物网站 (15) ───────────┐ │
|
||||
│ │ 淘宝、京东、亚马逊... │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ ┌─ 🎮 游戏娱乐 (6) ────────────┐ │
|
||||
│ │ Steam、网易、腾讯... │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ 搜索历史 │ ← 历史记录
|
||||
│ "工作邮箱" "银行密码" "社交媒体" │ ← 历史标签
|
||||
│ │
|
||||
└─────────────────────────────────┘
|
||||
|
||||
搜索结果页面：
|
||||
┌─────────────────────────────────┐
|
||||
│ ← "银行"的搜索结果 (3) │ ← 结果导航
|
||||
├─────────────────────────────────┤
|
||||
│ 🤖 AI理解：您在寻找银行相关账户 │ ← AI理解提示
|
||||
├─────────────────────────────────┤
|
||||
│ ┌─ 🏦 中国银行 ───────────────┐ │ ← 搜索结果
|
||||
│ │ 1234****5678 │ │ 高亮匹配词
|
||||
│ │ 🔒●●●●● 🏷️银行 1周前使用 │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ ┌─ 🏦 工商银行 ───────────────┐ │
|
||||
│ │ icbc_user │ │
|
||||
│ │ 🔒●●●○○ 🏷️银行 1月前使用 │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ ┌─ 💰 支付宝 ─────────────────┐ │
|
||||
│ │ 138****8888 │ │
|
||||
│ │ 🔒●●●●○ 🏷️支付 3天前使用 │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 8. 设置页面 (Settings)
|
||||
```
|
||||
画板尺寸：390 × 844px
|
||||
|
||||
布局结构：
|
||||
┌─────────────────────────────────┐
|
||||
│ ← 设置 │ ← 导航栏
|
||||
├─────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─ 👤 账户信息 ────────────────┐ │ ← 用户信息卡片
|
||||
│ │ [头像] 用户名 │ │ 高度80px
|
||||
│ │ user@email.com │ │
|
||||
│ └─────────────────────────────┘ │
|
||||
│ │
|
||||
│ 🔒 安全设置 │ ← 设置分组
|
||||
│ │
|
||||
│ 生物识别解锁 [开关] │ ← 设置项
|
||||
│ 自动锁定 [5分钟] │
|
||||
│ 查看密码需要验证 [开关] │
|
||||
│ 更改主密码 > │
|
||||
│ │
|
||||
│ 🤖 AI 功能 │ ← AI设置分组
|
||||
│ │
|
||||
│ 智能分类 [开关] │
|
||||
│ 安全分析 [开关] │
|
||||
│ 智能搜索 [开关] │
|
||||
│ 密码建议 [开关] │
|
||||
│ │
|
||||
│ 🔄 同步设置 │ ← 同步设置
|
||||
│ │
|
||||
│ iCloud 同步 [开关] │
|
||||
│ 自动备份 [开关] │
|
||||
│ 同步状态 [正常] │
|
||||
│ │
|
||||
│ ⚙️ 应用设置 │ ← 应用设置
|
||||
│ │
|
||||
│ 暗色模式 [自动] │
|
||||
│ 语言 [中文] │
|
||||
│ 通知 [开关] │
|
||||
│ │
|
||||
│ ℹ️ 关于 │ ← 关于信息
|
||||
│ │
|
||||
│ 版本信息 1.0.0 │
|
||||
│ 隐私政策 > │
|
||||
│ 用户协议 > │
|
||||
│ 联系我们 > │
|
||||
│ │
|
||||
│ [🚪 退出登录] │ ← 退出按钮
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 🎨 视觉设计要点
|
||||
|
||||
### AI元素设计
|
||||
1. **渐变色运用**：AI功能使用蓝紫渐变
|
||||
2. **发光效果**：重要AI功能添加微妙发光
|
||||
3. **动画效果**：AI处理时显示脉冲动画
|
||||
4. **智能徽章**：AI增强功能显示"AI"标识
|
||||
|
||||
### 安全视觉语言
|
||||
1. **颜色编码**：绿色=安全，橙色=警告，红色=危险
|
||||
2. **图标系统**：统一的安全状态图标
|
||||
3. **进度指示**：密码强度的视觉化表示
|
||||
4. **状态反馈**：即时的视觉状态反馈
|
||||
|
||||
### 交互设计
|
||||
1. **手势操作**：左右滑动的快捷操作
|
||||
2. **触觉反馈**：重要操作的震动反馈
|
||||
3. **状态动画**：流畅的状态转换动画
|
||||
4. **加载状态**：优雅的加载和骨架屏
|
||||
|
||||
这些详细的界面设计规范将帮助您在Figma中创建出专业、一致且用户友好的AI密码管理器界面。
|
||||
Reference in New Issue
Block a user