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
20 KiB
20 KiB
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元素设计
- 渐变色运用：AI功能使用蓝紫渐变
- 发光效果：重要AI功能添加微妙发光
- 动画效果：AI处理时显示脉冲动画
- 智能徽章：AI增强功能显示"AI"标识
安全视觉语言
- 颜色编码：绿色=安全，橙色=警告，红色=危险
- 图标系统：统一的安全状态图标
- 进度指示：密码强度的视觉化表示
- 状态反馈：即时的视觉状态反馈
交互设计
- 手势操作：左右滑动的快捷操作
- 触觉反馈：重要操作的震动反馈
- 状态动画：流畅的状态转换动画
- 加载状态：优雅的加载和骨架屏
这些详细的界面设计规范将帮助您在Figma中创建出专业、一致且用户友好的AI密码管理器界面。