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