# 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密码管理器界面。