diff --git a/.kilocode/mcp.json b/.kilocode/mcp.json new file mode 100644 index 0000000..409fa0a --- /dev/null +++ b/.kilocode/mcp.json @@ -0,0 +1,15 @@ +{ + "mcpServers": { + "figma-dev-mode": { + "type": "sse", + "url": "http://127.0.0.1:3845/sse", + "alwaysAllow": [ + "get_image", + "create_design_system_rules", + "get_code", + "get_variable_defs", + "get_code_connect_map" + ] + } + } +} \ No newline at end of file diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..5102d0e --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,385 @@ +# AI密码管理器 - Figma设计系统集成规则 + +## 项目概述 + +这是一个基于React Native Expo的AI驱动密码管理器项目，需要与Figma设计系统无缝集成。 + +## 设计系统结构 + +### 1. Token定义 + +#### 颜色令牌 (Colors) +位置：[`constants/Colors.ts`](constants/Colors.ts) + +当前结构： +```typescript +export const Colors = { + light: { + text: '#11181C', + background: '#fff', + tint: '#0a7ea4', + icon: '#687076', + tabIconDefault: '#687076', + tabIconSelected: '#0a7ea4', + }, + dark: { + text: '#ECEDEE', + background: '#151718', + tint: '#fff', + icon: '#9BA1A6', + tabIconDefault: '#9BA1A6', + tabIconSelected: '#fff', + }, +}; +``` + +**需要扩展为AI密码管理器的完整颜色系统：** +```typescript +export const Colors = { + // 主色调 + primary: { + 50: '#f0f9ff', + 100: '#e0f2fe', + 500: '#0ea5e9', // 主色 + 600: '#0284c7', + 900: '#0c4a6e', + }, + // AI渐变色 + ai: { + primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', + secondary: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', + accent: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', + }, + // 安全状态色 + security: { + high: '#10b981', // 绿色 - 安全 + medium: '#f59e0b', // 橙色 - 警告 + low: '#ef4444', // 红色 - 危险 + critical: '#dc2626', // 深红 - 严重 + }, + // 功能色 + success: '#10b981', + warning: '#f59e0b', + error: '#ef4444', + info: '#3b82f6', + // 中性色 + gray: { + 50: '#f9fafb', + 100: '#f3f4f6', + 500: '#6b7280', + 900: '#111827', + }, + // 暗色模式 + dark: { + background: { + primary: '#000000', + secondary: '#1c1c1e', + tertiary: '#2c2c2e', + }, + text: { + primary: '#ffffff', + secondary: '#ebebf5', + tertiary: '#ebebf599', + } + } +}; +``` + +#### 字体令牌 (Typography) +需要在 `constants/` 目录下创建 `Typography.ts`： + +```typescript +export const Typography = { + fontFamily: { + primary: 'SF Pro Display', // iOS系统字体 + secondary: 'SF Pro Text', + mono: 'SF Mono', + }, + fontSize: { + xs: 12, + sm: 14, + base: 16, + lg: 18, + xl: 20, + '2xl': 24, + '3xl': 30, + '4xl': 36, + }, + fontWeight: { + light: '300', + normal: '400', + medium: '500', + semibold: '600', + bold: '700', + heavy: '800', + }, + lineHeight: { + tight: 1.25, + normal: 1.5, + relaxed: 1.75, + } +}; +``` + +#### 间距令牌 (Spacing) +需要创建 `constants/Spacing.ts`： + +```typescript +export const Spacing = { + xs: 4, + sm: 8, + md: 16, + lg: 24, + xl: 32, + '2xl': 48, + '3xl': 64, + '4xl': 80, + '5xl': 96, +}; +``` + +### 2. 组件库 + +#### 当前组件结构 +位置：[`components/`](components/) + +现有组件： +- [`ThemedText.tsx`](components/ThemedText.tsx) - 主题化文本组件 +- [`ThemedView.tsx`](components/ThemedView.tsx) - 主题化视图组件 +- [`ui/`](components/ui/) - UI基础组件 + +**需要扩展的AI密码管理器组件：** + +``` +components/ +├── ui/ # 基础UI组件 +│ ├── Button.tsx # 按钮组件 (Primary/Secondary/AI) +│ ├── Input.tsx # 输入框 (Text/Password/Search) +│ ├── Card.tsx # 卡片组件 +│ ├── Badge.tsx # 徽章组件 +│ ├── Progress.tsx # 进度组件 +│ ├── Switch.tsx # 开关组件 +│ └── Loading.tsx # 加载组件 +├── password/ # 密码相关组件 +│ ├── PasswordEntryCard.tsx +│ ├── PasswordStrengthIndicator.tsx +│ └── SecurityScoreCard.tsx +├── ai/ # AI功能组件 +│ ├── AIAssistantCard.tsx +│ ├── AIBadge.tsx +│ └── AISearchBar.tsx +└── navigation/ # 导航组件 + ├── TopNavigation.tsx + └── TabBar.tsx +``` + +#### 组件架构模式 +使用React Native + TypeScript + 主题化设计： + +```typescript +// 示例：Button组件 +interface ButtonProps { + variant: 'primary' | 'secondary' | 'ai'; + size: 'sm' | 'md' | 'lg'; + disabled?: boolean; + loading?: boolean; + onPress: () => void; + children: React.ReactNode; +} + +export const Button: React.FC = ({ + variant, + size, + disabled, + loading, + onPress, + children +}) => { + // 实现逻辑 +}; +``` + +### 3. 框架和库 + +#### UI框架 +- **React Native**: 0.79.5 +- **Expo**: SDK 53 +- **React**: 19.0.0 + +#### 样式库 +- **React Native StyleSheet**: 原生样式系统 +- **React Native Reanimated**: 3.17.4 (动画) +- **React Native Gesture Handler**: 2.24.0 (手势) + +#### 路由系统 +- **Expo Router**: 5.1.4 (基于文件系统的路由) + +### 4. 资源管理 + +#### 图片和图标 +位置：[`assets/`](assets/) + +当前结构： +``` +assets/ +├── images/ +│ ├── icon.png +│ ├── splash-icon.png +│ └── favicon.png +└── fonts/ + └── SpaceMono-Regular.ttf +``` + +**需要扩展为：** +``` +assets/ +├── images/ +│ ├── app-icons/ # 应用图标 +│ ├── website-icons/ # 网站图标 +│ └── illustrations/ # 插画素材 +├── icons/ +│ ├── security/ # 安全相关图标 +│ ├── ai/ # AI功能图标 +│ └── ui/ # 界面图标 +└── fonts/ # 字体文件 +``` + +#### 图标系统 +使用 **Expo Vector Icons** (@expo/vector-icons): + +```typescript +import { Ionicons, MaterialIcons } from '@expo/vector-icons'; + +// AI图标示例 + +// 安全图标示例 + +``` + +### 5. 样式方法 + +#### React Native StyleSheet +```typescript +import { StyleSheet } from 'react-native'; +import { Colors, Typography, Spacing } from '@/constants'; + +const styles = StyleSheet.create({ + container: { + backgroundColor: Colors.light.background, + padding: Spacing.md, + }, + title: { + fontSize: Typography.fontSize['2xl'], + fontWeight: Typography.fontWeight.bold, + color: Colors.light.text, + }, +}); +``` + +#### 主题化组件模式 +基于现有的 `useThemeColor` hook： + +```typescript +import { useThemeColor } from '@/hooks/useThemeColor'; + +export function ThemedButton({ lightColor, darkColor, ...props }) { + const backgroundColor = useThemeColor( + { light: lightColor, dark: darkColor }, + 'tint' + ); + + return ( + + ); +} +``` + +### 6. 项目结构 + +#### 当前结构 +``` +ai-password-manager/ +├── app/ # Expo Router页面 +│ ├── (tabs)/ # 标签页面 +│ └── _layout.tsx # 根布局 +├── components/ # 可复用组件 +├── constants/ # 常量和令牌 +├── hooks/ # 自定义Hooks +├── assets/ # 静态资源 +└── src/ # 源代码 (待扩展) +``` + +**建议的完整结构：** +``` +ai-password-manager/ +├── app/ # Expo Router页面 +│ ├── (auth)/ # 认证页面 +│ ├── (tabs)/ # 主要功能页面 +│ │ ├── index.tsx # Dashboard +│ │ ├── vault.tsx # 密码库 +│ │ ├── ai-assistant.tsx # AI助手 +│ │ └── settings.tsx # 设置 +│ └── modal/ # 模态页面 +├── src/ +│ ├── components/ # 组件库 +│ ├── services/ # 业务服务 +│ │ ├── api/ # API调用 +│ │ ├── crypto/ # 加密服务 +│ │ ├── biometric/ # 生物识别 +│ │ └── ai/ # AI功能 +│ ├── stores/ # 状态管理 +│ ├── utils/ # 工具函数 +│ ├── types/ # TypeScript类型 +│ └── hooks/ # 自定义Hooks +├── constants/ # 设计令牌 +├── assets/ # 静态资源 +└── docs/ # 设计文档 +``` + +## Figma集成规则 + +### 1. 设计令牌同步 +- Figma中的颜色样式 → `constants/Colors.ts` +- Figma中的文字样式 → `constants/Typography.ts` +- Figma中的效果样式 → `constants/Effects.ts` + +### 2. 组件映射 +- Figma组件 → React Native组件 +- 组件变体 → TypeScript接口属性 +- 组件状态 → 组件props + +### 3. 资源导出 +- 图标：SVG格式 → `assets/icons/` +- 图片：PNG @1x/@2x/@3x → `assets/images/` +- 字体：TTF/OTF → `assets/fonts/` + +### 4. 代码生成规则 +使用Figma MCP工具生成的代码应该： +- 使用设计令牌而非硬编码值 +- 遵循React Native最佳实践 +- 包含TypeScript类型定义 +- 支持主题切换 + +### 5. AI元素特殊处理 +- AI渐变：使用`react-native-linear-gradient` +- AI动画：使用`react-native-reanimated` +- AI发光效果：使用`shadowColor`和`elevation` + +## 开发工作流 + +### 1. 设计阶段 +1. 在Figma中创建设计 +2. 使用统一的设计令牌 +3. 创建组件变体和状态 + +### 2. 开发阶段 +1. 使用Figma MCP工具获取设计 +2. 生成React Native代码 +3. 集成到项目组件库 + +### 3. 测试阶段 +1. 在不同设备尺寸测试 +2. 验证暗色模式适配 +3. 检查无障碍功能 + +这个规则文档确保了Figma设计与React Native代码的完美集成，同时保持了AI密码管理器的设计一致性和技术可行性。 \ No newline at end of file diff --git a/docs/architecture.md b/docs/architecture.md new file mode 100644 index 0000000..71a29af --- /dev/null +++ b/docs/architecture.md @@ -0,0 +1,361 @@ +# AI 密码管理器 - 系统架构设计 + +## 项目概述 + +基于 React Native Expo 的 AI 驱动密码管理器，支持跨应用自动填充、生物识别认证、智能密码分析和自然语言搜索。 + +### 技术栈分析 +- **前端框架**: React Native 0.79.5 + Expo SDK 53 +- **路由**: Expo Router 5.1.4 (基于文件系统的路由) +- **状态管理**: 待定 (建议 Zustand + React Query) +- **UI 组件**: 自定义组件 + Expo 原生组件 +- **动画**: React Native Reanimated 3.17.4 +- **手势**: React Native Gesture Handler 2.24.0 + +## 整体系统架构 + +```mermaid +graph TB + subgraph "客户端层 (React Native)" + A[主应用] --> B[密码管理模块] + A --> C[AI 功能模块] + A --> D[自动填充模块] + A --> E[生物识别模块] + A --> F[同步模块] + end + + subgraph "扩展层 (iOS)" + G[AutoFill Extension] + H[Keyboard Extension] + I[Share Extension] + end + + subgraph "云端服务层" + J[API Gateway] + K[认证服务] + L[密码存储服务] + M[AI 分析服务] + N[同步服务] + end + + subgraph "AI 服务层" + O[网站分类 AI] + P[密码强度分析] + Q[安全评分引擎] + R[自然语言处理] + end + + subgraph "数据层" + S[加密数据库] + T[用户配置] + U[AI 模型存储] + end + + A --> G + A --> H + A --> I + B --> J + C --> M + F --> N + J --> K + J --> L + J --> M + M --> O + M --> P + M --> Q + M --> R + L --> S + K --> T + M --> U +``` + +## 核心模块设计 + +### 1. 前端架构 (React Native) + +#### 1.1 目录结构 +``` +src/ +├── app/ # Expo Router 页面 +│ ├── (auth)/ # 认证相关页面 +│ ├── (tabs)/ # 主要功能页面 +│ └── modal/ # 模态页面 +├── components/ # 可复用组件 +│ ├── ui/ # 基础 UI 组件 +│ ├── forms/ # 表单组件 +│ └── password/ # 密码相关组件 +├── services/ # 业务服务层 +│ ├── api/ # API 调用 +│ ├── crypto/ # 加密服务 +│ ├── biometric/ # 生物识别 +│ └── ai/ # AI 功能 +├── stores/ # 状态管理 +├── utils/ # 工具函数 +├── types/ # TypeScript 类型 +├── constants/ # 常量配置 +└── hooks/ # 自定义 Hooks +``` + +#### 1.2 状态管理架构 +```typescript +// 使用 Zustand 进行状态管理 +interface AppState { + // 用户状态 + user: UserState; + // 密码库状态 + vault: VaultState; + // AI 功能状态 + ai: AIState; + // 设置状态 + settings: SettingsState; +} +``` + +### 2. iOS 扩展架构 + +#### 2.1 AutoFill Password Extension +- **功能**: 在 Safari 和其他应用中提供密码自动填充 +- **实现**: iOS AutoFill Password Extension API +- **通信**: 通过 App Groups 与主应用共享数据 + +#### 2.2 Custom Keyboard Extension +- **功能**: 在任何应用中提供密码输入 +- **实现**: iOS Custom Keyboard Extension +- **安全**: 限制网络访问，本地处理 + +#### 2.3 Share Extension +- **功能**: 从其他应用快速保存密码 +- **实现**: iOS Share Extension +- **集成**: 与主应用密码库同步 + +### 3. 云端服务架构 + +#### 3.1 API Gateway +- **技术**: Node.js + Express / Fastify +- **功能**: + - 请求路由和负载均衡 + - 身份验证和授权 + - 请求限流和监控 + - API 版本管理 + +#### 3.2 微服务设计 +```mermaid +graph LR + A[API Gateway] --> B[用户服务] + A --> C[密码服务] + A --> D[AI 服务] + A --> E[同步服务] + A --> F[通知服务] + + B --> G[用户数据库] + C --> H[密码数据库] + D --> I[AI 模型存储] + E --> J[同步队列] +``` + +### 4. AI 服务架构 + +#### 4.1 自建 AI 服务栈 +```mermaid +graph TB + A[AI API Gateway] --> B[模型管理服务] + A --> C[推理服务] + A --> D[训练服务] + + B --> E[模型版本控制] + C --> F[GPU 推理集群] + D --> G[训练数据管道] + + subgraph "AI 模型" + H[网站分类模型] + I[密码强度模型] + J[NLP 搜索模型] + K[安全评分模型] + end + + C --> H + C --> I + C --> J + C --> K +``` + +#### 4.2 AI 功能模块 +1. **网站分类识别** + - 基于 URL 和页面内容的网站类型分类 + - 自动标签生成和分类建议 + +2. **密码强度分析** + - 实时密码强度评估 + - 个性化密码建议生成 + +3. **智能安全评分** + - 综合账户安全性评估 + - 风险预警和改进建议 + +4. **自然语言搜索** + - 语义化密码搜索 + - 智能查询理解和结果排序 + +## 数据模型设计 + +### 1. 核心数据结构 + +```typescript +// 密码条目 +interface PasswordEntry { + id: string; + title: string; + username: string; + password: string; // 加密存储 + url: string; + notes: string; + tags: string[]; + category: string; + createdAt: Date; + updatedAt: Date; + lastUsed: Date; + // AI 增强字段 + aiCategory?: string; + securityScore?: number; + riskLevel?: 'low' | 'medium' | 'high'; + suggestions?: string[]; +} + +// 用户配置 +interface UserSettings { + biometricEnabled: boolean; + autoFillEnabled: boolean; + syncEnabled: boolean; + aiFeatures: { + autoTagging: boolean; + securityAnalysis: boolean; + smartSearch: boolean; + }; + security: { + sessionTimeout: number; + requireBiometricForView: boolean; + autoLockDelay: number; + }; +} +``` + +### 2. 加密方案 + +#### 2.1 端到端加密架构 +```mermaid +graph LR + A[用户主密码] --> B[PBKDF2 派生] + B --> C[主加密密钥] + C --> D[数据加密] + + E[生物识别] --> F[设备密钥] + F --> G[本地密钥存储] + G --> C + + C --> H[AES-256-GCM] + H --> I[加密数据] +``` + +#### 2.2 密钥管理 +- **主密钥**: 用户主密码通过 PBKDF2 派生 +- **设备密钥**: 生物识别保护的本地密钥 +- **传输加密**: TLS 1.3 + 证书固定 +- **存储加密**: AES-256-GCM 对称加密 + +## 安全架构 + +### 1. 多层安全防护 + +```mermaid +graph TB + A[用户界面层] --> B[应用安全层] + B --> C[传输安全层] + C --> D[服务安全层] + D --> E[数据安全层] + + subgraph "安全措施" + F[生物识别认证] + G[应用锁定] + H[TLS 加密] + I[API 认证] + J[数据库加密] + end + + A -.-> F + B -.-> G + C -.-> H + D -.-> I + E -.-> J +``` + +### 2. 威胁防护 +- **中间人攻击**: 证书固定 + TLS 1.3 +- **数据泄露**: 端到端加密 + 零知识架构 +- **设备丢失**: 生物识别 + 远程擦除 +- **恶意软件**: 应用签名验证 + 运行时保护 + +## 性能优化 + +### 1. 前端性能 +- **懒加载**: 按需加载密码条目 +- **虚拟化**: 大列表虚拟滚动 +- **缓存策略**: 智能本地缓存 +- **预加载**: 预测性数据加载 + +### 2. 后端性能 +- **数据库优化**: 索引优化 + 查询缓存 +- **CDN 加速**: 静态资源分发 +- **负载均衡**: 多实例部署 +- **缓存层**: Redis 分布式缓存 + +## 部署架构 + +### 1. 云端部署 +```mermaid +graph TB + A[负载均衡器] --> B[API Gateway 集群] + B --> C[微服务集群] + C --> D[数据库集群] + + E[CDN] --> F[静态资源] + G[监控系统] --> H[日志聚合] + I[备份系统] --> J[灾难恢复] +``` + +### 2. 容器化部署 +- **容器编排**: Kubernetes +- **服务网格**: Istio +- **监控**: Prometheus + Grafana +- **日志**: ELK Stack + +## 开发工具链 + +### 1. 前端工具 +- **开发环境**: Expo Development Build +- **调试**: Flipper + React Native Debugger +- **测试**: Jest + Detox +- **代码质量**: ESLint + Prettier + TypeScript + +### 2. 后端工具 +- **API 文档**: OpenAPI/Swagger +- **测试**: Jest + Supertest +- **部署**: Docker + CI/CD +- **监控**: APM + 健康检查 + +## 合规性和隐私 + +### 1. 数据保护 +- **GDPR 合规**: 数据最小化 + 用户控制 +- **数据本地化**: 区域数据存储 +- **审计日志**: 完整操作记录 +- **数据删除**: 安全数据擦除 + +### 2. 安全认证 +- **SOC 2 Type II**: 安全控制审计 +- **ISO 27001**: 信息安全管理 +- **渗透测试**: 定期安全评估 +- **漏洞管理**: 持续安全监控 + +--- + +*此架构设计为 AI 密码管理器提供了完整的技术蓝图，确保安全性、可扩展性和用户体验的最佳平衡。* \ No newline at end of file diff --git a/docs/design-system-specs.md b/docs/design-system-specs.md new file mode 100644 index 0000000..1cc4f17 --- /dev/null +++ b/docs/design-system-specs.md @@ -0,0 +1,324 @@ +# AI密码管理器 - 设计系统详细规范 + +## 🎨 视觉设计原则 + +### 核心设计理念 +1. **AI优先**: 所有设计元素都体现智能化特征 +2. **安全感**: 通过视觉传达信任和安全 +3. **未来感**: 现代化、前瞻性的界面设计 +4. **简洁性**: 复杂功能的简单化呈现 +5. **一致性**: 统一的视觉语言和交互模式 + +## 🌈 颜色系统详细规范 + +### 主色调 (Primary Blue) +``` +用途：主要品牌色、重要按钮、链接、选中状态 +- Primary 50: #f0f9ff (浅色背景) +- Primary 100: #e0f2fe (悬停背景) +- Primary 200: #bae6fd (边框色) +- Primary 300: #7dd3fc (禁用状态) +- Primary 400: #38bdf8 (悬停状态) +- Primary 500: #0ea5e9 (默认主色) +- Primary 600: #0284c7 (按下状态) +- Primary 700: #0369a1 (深色主题) +- Primary 800: #075985 (强调色) +- Primary 900: #0c4a6e (最深色) +``` + +### AI渐变色系 +``` +用途：AI功能标识、智能建议、未来感元素 +- AI Gradient 1: linear-gradient(135deg, #667eea 0%, #764ba2 100%) +- AI Gradient 2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) +- AI Gradient 3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) +- AI Glow: #667eea with 20% opacity blur +``` + +### 安全状态色系 +``` +高安全级别 (绿色系) +- Success 50: #ecfdf5 +- Success 100: #d1fae5 +- Success 500: #10b981 (主要成功色) +- Success 600: #059669 (深色成功色) +- Success 900: #064e3b + +中等安全级别 (橙色系) +- Warning 50: #fffbeb +- Warning 100: #fef3c7 +- Warning 500: #f59e0b (主要警告色) +- Warning 600: #d97706 (深色警告色) +- Warning 900: #92400e + +低安全级别 (红色系) +- Error 50: #fef2f2 +- Error 100: #fee2e2 +- Error 500: #ef4444 (主要错误色) +- Error 600: #dc2626 (深色错误色) +- Error 900: #7f1d1d +``` + +### 中性色系 +``` +用途：文本、背景、边框、图标 +- Gray 25: #fcfcfd (最浅背景) +- Gray 50: #f9fafb (卡片背景) +- Gray 100: #f3f4f6 (分割线) +- Gray 200: #e5e7eb (边框) +- Gray 300: #d1d5db (禁用边框) +- Gray 400: #9ca3af (占位符文本) +- Gray 500: #6b7280 (次要文本) +- Gray 600: #4b5563 (标签文本) +- Gray 700: #374151 (正文文本) +- Gray 800: #1f2937 (标题文本) +- Gray 900: #111827 (主要文本) +``` + +### 暗色模式色系 +``` +背景色 +- Dark BG Primary: #000000 (主背景) +- Dark BG Secondary: #1c1c1e (卡片背景) +- Dark BG Tertiary: #2c2c2e (输入框背景) +- Dark BG Quaternary: #3a3a3c (悬停背景) + +文本色 +- Dark Text Primary: #ffffff (主要文本) +- Dark Text Secondary: #ebebf5 (次要文本) +- Dark Text Tertiary: #ebebf599 (60% 透明度) +- Dark Text Quaternary: #ebebf54d (30% 透明度) + +边框色 +- Dark Border Primary: #38383a +- Dark Border Secondary: #48484a +``` + +## 📝 字体系统 + +### 字体族 +``` +主字体：SF Pro Display (iOS) / Roboto (Android) +代码字体：SF Mono / Roboto Mono +``` + +### 字体大小和行高 +``` +Display (展示用) +- Display XL: 48px / 56px (1.167) - 主要标题 +- Display LG: 36px / 44px (1.222) - 页面标题 +- Display MD: 30px / 38px (1.267) - 卡片标题 + +Heading (标题用) +- H1: 24px / 32px (1.333) - 页面主标题 +- H2: 20px / 28px (1.4) - 区块标题 +- H3: 18px / 24px (1.333) - 小节标题 + +Body (正文用) +- Body XL: 18px / 28px (1.556) - 重要正文 +- Body LG: 16px / 24px (1.5) - 标准正文 +- Body MD: 14px / 20px (1.429) - 次要正文 +- Body SM: 12px / 16px (1.333) - 辅助文本 + +Label (标签用) +- Label XL: 16px / 20px (1.25) - 大标签 +- Label LG: 14px / 18px (1.286) - 标准标签 +- Label MD: 12px / 16px (1.333) - 小标签 +- Label SM: 10px / 14px (1.4) - 微标签 +``` + +### 字重系统 +``` +- Thin: 100 (装饰用) +- Light: 300 (次要信息) +- Regular: 400 (正文) +- Medium: 500 (强调) +- Semibold: 600 (小标题) +- Bold: 700 (重要标题) +- Heavy: 800 (特殊强调) +- Black: 900 (品牌标题) +``` + +## 📏 间距系统 + +### 基础间距单位 +``` +基础单位：4px (0.25rem) + +间距级别： +- 0: 0px +- 1: 4px (0.25rem) +- 2: 8px (0.5rem) +- 3: 12px (0.75rem) +- 4: 16px (1rem) - 标准间距 +- 5: 20px (1.25rem) +- 6: 24px (1.5rem) +- 8: 32px (2rem) +- 10: 40px (2.5rem) +- 12: 48px (3rem) +- 16: 64px (4rem) +- 20: 80px (5rem) +- 24: 96px (6rem) +``` + +### 组件内间距 +``` +按钮内边距： +- Small: 8px 12px +- Medium: 12px 16px +- Large: 16px 24px + +卡片内边距： +- Small: 12px +- Medium: 16px +- Large: 24px + +输入框内边距： +- Height: 48px +- Horizontal: 16px +- Vertical: 12px +``` + +## 🎭 阴影系统 + +### 卡片阴影 +``` +Card Shadow XS: +- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) + +Card Shadow SM: +- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) + +Card Shadow MD: +- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) + +Card Shadow LG: +- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) + +Card Shadow XL: +- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) +``` + +### 按钮阴影 +``` +Button Shadow: +- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) + +Button Shadow Hover: +- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) + +Button Shadow Active: +- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) +``` + +### AI发光效果 +``` +AI Glow Subtle: +- box-shadow: 0 0 20px rgba(102, 126, 234, 0.15) + +AI Glow Medium: +- box-shadow: 0 0 30px rgba(102, 126, 234, 0.25) + +AI Glow Strong: +- box-shadow: 0 0 40px rgba(102, 126, 234, 0.35) +``` + +## 🔘 圆角系统 + +### 圆角级别 +``` +- None: 0px (直角) +- XS: 2px (微圆角) +- SM: 4px (小圆角) +- MD: 6px (中圆角) +- LG: 8px (大圆角) +- XL: 12px (特大圆角) +- 2XL: 16px (超大圆角) +- 3XL: 24px (巨大圆角) +- Full: 9999px (完全圆形) +``` + +### 组件圆角应用 +``` +按钮：8px (LG) +输入框：8px (LG) +卡片：12px (XL) +模态框：16px (2XL) +头像：9999px (Full) +标签：4px (SM) +``` + +## 🎯 图标系统 + +### 图标尺寸 +``` +- XS: 12px (微图标) +- SM: 16px (小图标) +- MD: 20px (标准图标) +- LG: 24px (大图标) +- XL: 32px (特大图标) +- 2XL: 48px (超大图标) +``` + +### 图标风格 +``` +- 线性图标：2px 线宽，圆角端点 +- 填充图标：用于选中状态 +- 双色图标：主色 + 灰色组合 +- AI图标：渐变色处理 +``` + +### 安全状态图标 +``` +- 高安全：🛡️ (盾牌) - 绿色 +- 中等安全：⚠️ (警告) - 橙色 +- 低安全：🚨 (警报) - 红色 +- AI功能：🤖 (机器人) - 渐变色 +- 生物识别：👆 (指纹) / 👁️ (面容) +``` + +## 📱 移动端适配 + +### 屏幕尺寸断点 +``` +- Small: 375px (iPhone SE) +- Medium: 390px (iPhone 14) +- Large: 430px (iPhone 14 Pro Max) +``` + +### 触摸目标尺寸 +``` +最小触摸目标：44px × 44px +推荐触摸目标：48px × 48px +舒适触摸目标：56px × 56px +``` + +### 安全区域 +``` +顶部安全区域：44px (状态栏) +底部安全区域：34px (Home Indicator) +侧边安全区域：16px (最小边距) +``` + +## 🌙 暗色模式适配 + +### 适配原则 +``` +1. 保持品牌色不变 +2. 降低整体对比度 +3. 使用真黑色背景 +4. 适当调整阴影效果 +5. 保持可读性标准 +``` + +### 颜色映射 +``` +浅色模式 → 暗色模式 +White (#ffffff) → Dark BG Primary (#000000) +Gray 50 (#f9fafb) → Dark BG Secondary (#1c1c1e) +Gray 100 (#f3f4f6) → Dark BG Tertiary (#2c2c2e) +Gray 900 (#111827) → Dark Text Primary (#ffffff) +Gray 500 (#6b7280) → Dark Text Secondary (#ebebf5) +``` + +这个详细的设计系统规范将确保整个AI密码管理器应用的视觉一致性和用户体验质量。请按照这些规范在Figma中创建您的设计系统。 \ No newline at end of file diff --git a/docs/figma-ai-animations-spec.md b/docs/figma-ai-animations-spec.md new file mode 100644 index 0000000..3ded831 --- /dev/null +++ b/docs/figma-ai-animations-spec.md @@ -0,0 +1,513 @@ +# AI密码管理器 - AI元素与动画效果规范 + +## 🤖 AI视觉元素设计 + +### 1. AI渐变色系统 + +#### 主要AI渐变 +``` +AI/Primary: +- 角度：135度 +- 起始色：#667eea (蓝紫色) +- 结束色：#764ba2 (深紫色) +- 用途：主要AI功能、按钮、卡片背景 + +AI/Secondary: +- 角度：135度 +- 起始色：#f093fb (粉紫色) +- 结束色：#f5576c (珊瑚红) +- 用途：次要AI功能、强调元素 + +AI/Accent: +- 角度：135度 +- 起始色：#4facfe (天蓝色) +- 结束色：#00f2fe (青色) +- 用途：AI状态指示、进度条、特殊效果 +``` + +#### 渐变应用场景 +- **AI助手卡片背景**：使用AI/Primary渐变 +- **AI功能按钮**：使用AI/Primary渐变 + 发光效果 +- **智能搜索栏AI图标**：使用AI/Primary渐变 +- **AI建议徽章**：使用AI/Secondary渐变 +- **AI处理进度条**：使用AI/Accent渐变 + +### 2. AI发光效果系统 + +#### 基础发光效果 +``` +AI/Glow/Subtle (微妙发光): +- 类型：外发光 (Drop Shadow) +- 颜色：#667eea +- X偏移：0px +- Y偏移：0px +- 模糊：6px +- 扩散：1px +- 透明度：25% + +AI/Glow/Medium (中等发光): +- 类型：外发光 +- 颜色：#667eea +- X偏移：0px +- Y偏移：0px +- 模糊：12px +- 扩散：2px +- 透明度：35% + +AI/Glow/Strong (强发光): +- 类型：外发光 +- 颜色：#667eea +- X偏移：0px +- Y偏移：0px +- 模糊：20px +- 扩散：4px +- 透明度：45% +``` + +#### 发光应用规则 +- **AI按钮默认状态**：使用Subtle发光 +- **AI按钮悬停状态**：使用Medium发光 +- **AI功能激活状态**：使用Strong发光 +- **AI徽章**：使用Subtle发光 +- **AI处理中状态**：使用Medium发光 + 脉冲动画 + +### 3. AI图标系统 + +#### AI机器人图标 +``` +设计规范： +- 基础尺寸：24×24px +- 线条粗细：2px +- 圆角：2px +- 颜色：AI渐变填充或单色 + +图标元素： +- 头部：圆角矩形 +- 眼睛：两个小圆点 +- 嘴部：小横线 +- 身体：矩形 +- 天线：顶部两个小点 + +状态变化： +- 默认：静态AI渐变 +- 思考中：眼睛闪烁动画 +- 处理中：整体脉冲动画 +- 完成：短暂的发光效果 +``` + +#### AI徽章设计 +``` +尺寸：32×16px +背景：AI/Primary渐变 +圆角：8px +文字："AI" +字体：10px, Bold +颜色：白色 +效果：AI/Glow/Subtle + +变体： +- 小尺寸：24×12px，8px字体 +- 大尺寸：40×20px，12px字体 +- 圆形：16×16px圆形，"AI"居中 +``` + +### 4. 智能状态指示器 + +#### AI处理状态 +``` +等待状态： +- AI图标：静态，AI/Primary渐变 +- 文字："AI准备就绪" +- 颜色：Gray/500 + +思考状态： +- AI图标：缓慢脉冲动画 +- 文字："AI正在分析..." +- 颜色：AI/Primary +- 动画：1.5s循环，透明度60%-100% + +处理状态： +- AI图标：快速脉冲 + 旋转 +- 文字："AI正在处理..." +- 颜色：AI/Accent +- 动画：0.8s循环，多重效果 + +完成状态： +- AI图标：短暂强发光 +- 文字："AI分析完成" +- 颜色：Security/High +- 动画：一次性发光效果 +``` + +## 🎬 动画效果系统 + +### 1. 基础动画参数 + +#### 时长标准 +``` +微交互 (Micro): 150ms +- 按钮点击反馈 +- 开关切换 +- 小图标变化 + +快速 (Fast): 200ms +- 卡片悬停效果 +- 颜色变化 +- 小组件状态切换 + +标准 (Normal): 300ms +- 页面转场 +- 模态框出现/消失 +- 大组件状态变化 + +慢速 (Slow): 500ms +- 复杂动画 +- 多步骤动画 +- 强调性动画 +``` + +#### 缓动函数 +``` +Ease Out: 快速开始，缓慢结束 +- 用途：元素进入、按钮反馈 +- 贝塞尔：cubic-bezier(0.25, 0.46, 0.45, 0.94) + +Ease In: 缓慢开始，快速结束 +- 用途：元素退出、消失动画 +- 贝塞尔：cubic-bezier(0.55, 0.055, 0.675, 0.19) + +Ease In Out: 两端缓慢，中间快速 +- 用途：状态切换、循环动画 +- 贝塞尔：cubic-bezier(0.645, 0.045, 0.355, 1) + +AI Bounce: AI特有的弹性效果 +- 用途：AI功能激活、完成反馈 +- 贝塞尔：cubic-bezier(0.68, -0.55, 0.265, 1.55) +``` + +### 2. 页面转场动画 + +#### 推入转场 (Push Transition) +``` +动画类型：Smart Animate +时长：300ms +缓动：Ease Out + +效果： +- 新页面从右侧滑入 +- 当前页面向左滑出 +- 同时进行，无重叠 + +适用场景： +- 主要页面导航 +- 详情页面进入 +- 设置页面导航 +``` + +#### 模态转场 (Modal Transition) +``` +动画类型：Dissolve + Move In +时长：250ms +缓动：Ease Out + +效果： +- 背景遮罩淡入 (透明度0→40%) +- 模态框从底部滑入 +- 轻微的缩放效果 (95%→100%) + +适用场景： +- 底部抽屉 +- 确认对话框 +- 操作菜单 +``` + +### 3. AI特效动画 + +#### 脉冲呼吸动画 (AI Pulse) +``` +动画类型：Scale + Opacity +时长：1.5s +循环：无限 +缓动：Ease In Out + +关键帧： +0%: Scale 1.0, Opacity 1.0 +50%: Scale 1.05, Opacity 0.7 +100%: Scale 1.0, Opacity 1.0 + +应用场景： +- AI思考状态 +- 等待AI响应 +- AI功能激活提示 +``` + +#### 渐变流动动画 (Gradient Flow) +``` +动画类型：Background Position +时长：3s +循环：无限 +缓动：Linear + +效果： +- 渐变背景位置移动 +- 创造流动光效 +- 角度保持135度不变 + +实现方式： +- 创建更大的渐变背景 +- 通过遮罩控制可见区域 +- 背景位置循环移动 + +应用场景： +- AI卡片背景 +- AI按钮激活状态 +- AI处理进度指示 +``` + +#### 粒子扫描动画 (Particle Scan) +``` +动画类型：Position + Opacity + Scale +时长：2s +循环：无限 +缓动：Ease In Out + +粒子属性： +- 数量：8-12个 +- 尺寸：2-4px圆点 +- 颜色：AI/Accent渐变 +- 轨迹：弧形或直线 + +运动模式： +- 从左到右扫过 +- 透明度渐变 +- 轻微的缩放变化 + +应用场景： +- 安全扫描过程 +- AI分析进度 +- 数据处理状态 +``` + +### 4. 交互反馈动画 + +#### 按钮点击反馈 +``` +AI Button 点击： +1. 按下：Scale 0.98 (150ms, Ease Out) +2. 释放：Scale 1.0 + 发光增强 (200ms, AI Bounce) +3. 完成：发光恢复正常 (300ms, Ease Out) + +Primary Button 点击： +1. 按下：Scale 0.98 + 颜色加深 (150ms, Ease Out) +2. 释放：Scale 1.0 + 颜色恢复 (200ms, Ease Out) + +Secondary Button 点击： +1. 按下：背景色出现 (150ms, Ease Out) +2. 释放：背景色消失 (200ms, Ease Out) +``` + +#### 卡片交互反馈 +``` +悬停效果： +- 阴影：Shadow/MD → Shadow/LG (200ms, Ease Out) +- 位移：Y轴向上2px (200ms, Ease Out) + +点击效果： +- 缩放：Scale 0.98 (150ms, Ease Out) +- 阴影：Shadow/LG → Shadow/SM (150ms, Ease Out) + +AI卡片特殊效果： +- 悬停：发光效果增强 (200ms, Ease Out) +- 点击：短暂的渐变流动加速 +``` + +#### 开关切换动画 +``` +滑块移动： +- 距离：24px (开关宽度 - 滑块宽度) +- 时长：200ms +- 缓动：Ease In Out + +轨道颜色变化： +- 同步进行 +- Gray/300 ↔ Primary/500 +- 时长：200ms + +状态指示： +- 开启：轻微的发光效果 +- 关闭：发光消失 +``` + +### 5. 加载动画 + +#### 旋转加载器 (Spinner) +``` +基础版本： +- 圆环：2px线宽，Primary/500颜色 +- 旋转：360度，1s，Linear，无限循环 +- 尺寸：24×24px或32×32px + +AI版本： +- 圆环：AI/Primary渐变 +- 旋转：360度，1.2s，Ease In Out，无限循环 +- 发光：AI/Glow/Subtle +- 脉冲：配合旋转的透明度变化 +``` + +#### 骨架屏动画 (Skeleton) +``` +基础效果： +- 背景：Gray/200 +- 动画：从左到右的光泽扫过 +- 时长：1.5s，无限循环 + +光泽效果： +- 宽度：100px +- 颜色：白色渐变 (透明→50%→透明) +- 移动：从-100px到容器宽度+100px +- 缓动：Ease In Out +``` + +#### 进度条动画 +``` +线性进度： +- 宽度变化：0% → 目标百分比 +- 时长：根据进度值计算 (最长2s) +- 缓动：Ease Out + +AI进度条： +- 基础进度：AI/Accent渐变 +- 流动效果：渐变位置移动 +- 脉冲效果：轻微的高度变化 +``` + +### 6. 状态转换动画 + +#### 密码强度变化 +``` +圆点填充动画： +- 每个圆点依次填充 +- 间隔：100ms +- 颜色渐变：Gray/300 → 目标颜色 +- 缩放：轻微的放大效果 (1.0 → 1.1 → 1.0) + +强度提升特效： +- 新填充的圆点：短暂发光 +- 颜色变化：平滑过渡 +- 完成时：整体轻微脉冲 +``` + +#### 安全评分变化 +``` +圆形进度条： +- 进度弧度：平滑增长 +- 时长：1.5s +- 缓动：Ease Out + +数字计数： +- 从当前值到目标值 +- 时长：1s +- 缓动：Ease Out +- 数字跳动效果 + +评分提升庆祝： +- 完成时：短暂的发光效果 +- 粒子效果：小星星从中心散开 +- 颜色变化：根据新评分调整 +``` + +### 7. AI功能专用动画 + +#### 语音识别动画 +``` +麦克风图标： +- 基础：静态状态 +- 激活：脉冲动画 + 发光 +- 识别中：音波扩散效果 +- 完成：短暂的成功发光 + +音波效果： +- 3个同心圆 +- 依次扩散 +- 透明度：100% → 0% +- 时长：1s，无限循环 +``` + +#### AI分析动画 +``` +分析过程： +1. 数据收集：粒子向中心聚集 +2. 处理中：中心旋转 + 脉冲 +3. 结果生成：粒子向外扩散 +4. 完成：结果卡片滑入 + +时长分配： +- 收集：1s +- 处理：2-3s (根据实际处理时间) +- 生成：0.5s +- 完成：0.3s +``` + +#### 智能建议出现 +``` +建议卡片动画： +1. 从底部滑入 (300ms, Ease Out) +2. 轻微的弹性效果 (AI Bounce) +3. 发光效果渐现 (200ms) +4. 内容文字依次显示 (每行间隔100ms) + +特殊效果： +- 背景渐变流动 +- 边框发光脉冲 +- AI图标旋转 +``` + +## 🎯 动画实施指南 + +### Figma中的动画设置 + +#### Smart Animate设置 +``` +1. 创建组件的多个状态 +2. 确保图层命名一致 +3. 设置Prototype连接 +4. 选择Smart Animate +5. 调整时长和缓动 +``` + +#### 复杂动画实现 +``` +1. 使用多个中间帧 +2. 创建动画序列 +3. 利用延迟设置 +4. 组合多种动画类型 +``` + +### 开发实现建议 + +#### React Native Reanimated +```javascript +// AI脉冲动画示例 +const pulseAnimation = useSharedValue(1); + +useEffect(() => { + pulseAnimation.value = withRepeat( + withTiming(1.05, { duration: 750 }), + -1, + true + ); +}, []); + +const animatedStyle = useAnimatedStyle(() => ({ + transform: [{ scale: pulseAnimation.value }], + opacity: interpolate(pulseAnimation.value, [1, 1.05], [1, 0.7]) +})); +``` + +#### 性能优化 +- 使用原生动画驱动 +- 避免在主线程执行动画 +- 合理控制同时运行的动画数量 +- 使用shouldRasterizeIOS优化复杂动画 + +这个AI元素和动画规范确保了整个密码管理器界面具有一致的AI视觉语言和流畅的用户体验，同时体现了未来感和科技感。 \ No newline at end of file diff --git a/docs/figma-components-spec.md b/docs/figma-components-spec.md new file mode 100644 index 0000000..03453fb --- /dev/null +++ b/docs/figma-components-spec.md @@ -0,0 +1,443 @@ +# AI密码管理器 - Figma组件规范 + +## 🧩 核心组件库 + +### 1. 按钮组件 (Button) + +#### Primary Button +``` +尺寸：最小宽度120px，高度48px +背景：Primary/500 (#0ea5e9) +圆角：12px +文字：白色，Body/Large，SemiBold +内边距：16px水平，12px垂直 +阴影：Shadow/SM + +状态变体： +- Default: Primary/500背景 +- Hover: Primary/600背景 +- Pressed: Primary/700背景 + 轻微缩放(0.98) +- Disabled: Gray/300背景，Gray/500文字 +``` + +#### Secondary Button +``` +尺寸：最小宽度120px，高度48px +背景：透明 +边框：1px Primary/500 +圆角：12px +文字：Primary/500，Body/Large，SemiBold +内边距：16px水平，12px垂直 + +状态变体： +- Default: 透明背景，Primary/500边框和文字 +- Hover: Primary/50背景 +- Pressed: Primary/100背景 +- Disabled: Gray/300边框和文字 +``` + +#### AI Button (特殊渐变按钮) +``` +尺寸：最小宽度120px，高度48px +背景：AI渐变 (135deg, #667eea 0%, #764ba2 100%) +圆角：12px +文字：白色，Body/Large，SemiBold +内边距：16px水平，12px垂直 +特效：外发光 (#667eea, 模糊8px, 扩散2px) + +状态变体： +- Default: AI渐变 + 发光效果 +- Hover: 渐变加深 + 发光增强 +- Pressed: 缩放0.98 + 发光减弱 +``` + +#### Icon Button +``` +尺寸：44×44px (最小触摸目标) +背景：透明或Gray/100 +圆角：22px (圆形) 或 12px (圆角方形) +图标：24×24px，居中 +颜色：Gray/600 或 Primary/500 + +变体： +- Round: 圆形背景 +- Square: 圆角方形背景 +- Ghost: 无背景，仅图标 +``` + +### 2. 输入框组件 (Input) + +#### Text Input +``` +尺寸：宽度358px，高度48px +背景：白色 +边框：1px Gray/300，聚焦时Primary/500 +圆角：12px +内边距：16px水平，12px垂直 +文字：Body/Medium，Gray/900 +占位符：Body/Medium，Gray/400 + +状态变体： +- Default: Gray/300边框 +- Focus: Primary/500边框 + 外发光 +- Error: Security/Low边框 + 错误图标 +- Disabled: Gray/100背景，Gray/400文字 +``` + +#### Password Input +``` +基于Text Input，增加： +右侧图标区域：48×48px +显示/隐藏图标：👁️ / 👁️‍🗨️，24×24px +密码强度指示器：底部2px高度条，根据强度显示颜色 + +强度颜色： +- 很弱(0-20): Security/Low +- 弱(21-40): Security/Medium +- 中等(41-60): #f59e0b +- 强(61-80): Security/High +- 很强(81-100): #059669 +``` + +#### Search Input +``` +基于Text Input，增加： +左侧搜索图标：🔍，20×20px，距左边16px +右侧AI图标：🤖，24×24px，AI渐变色 +背景：Gray/50 (更浅的背景) +占位符："搜索密码或说'银行相关的密码'" +``` + +### 3. 卡片组件 (Card) + +#### Base Card +``` +背景：白色 +圆角：12px +阴影：Shadow/MD +内边距：16px +边框：无 (依靠阴影分层) + +变体： +- Default: 标准阴影 +- Hover: 阴影增强到Shadow/LG +- Pressed: 阴影减弱到Shadow/SM +``` + +#### Password Entry Card +``` +基于Base Card +尺寸：358×72px (紧凑版) 或 358×96px (展开版) + +布局结构： +┌─[32×32px图标]─[网站名称]────────[⭐收藏]─┐ +│ [用户名] │ +│ [强度指示器] [标签] [使用时间] │ +└─────────────────────────────────────┘ + +组件元素： +- 网站图标：32×32px，圆角6px +- 网站名称：Body/Large，Bold，Gray/900 +- 用户名：Body/Small，Gray/500 +- 强度指示器：5个圆点，根据强度显示颜色 +- 标签：小型徽章，圆角12px +- 收藏星标：⭐，16×16px，可切换状态 +- 使用时间：Caption，Gray/400 +``` + +#### Security Score Card +``` +基于Base Card +尺寸：358×100px (小版本) 或 358×160px (大版本) + +小版本布局： +┌─[评分圆环60px]─[问题列表]─┐ +│ │ +└────────────────────────┘ + +大版本布局： +┌─────────────────────────┐ +│ [评分圆环120px] │ +│ 居中显示 │ +└─────────────────────────┘ + +评分圆环： +- 外径：60px或120px +- 线宽：4px或8px +- 背景色：Gray/200 +- 进度色：根据评分显示渐变 +- 中心数字：H2或H1样式 +- 状态文字：Body/Small或H3样式 +``` + +#### AI Suggestion Card +``` +基于Base Card，特殊样式： +背景：AI渐变 (135deg, #667eea 0%, #764ba2 100%) +文字：全部白色 +圆角：16px (更大圆角) +外发光：AI/Glow效果 + +内容结构： +- 标题：💡 AI 建议，Body/Large，Bold +- 建议列表：• 开头的要点，Body/Medium +- 底部装饰：微妙的粒子动画效果 +``` + +### 4. 徽章组件 (Badge) + +#### Status Badge +``` +基础尺寸：自适应宽度，高度24px +圆角：12px +内边距：8px水平，4px垂直 +文字：Caption，Bold + +颜色变体： +- Success: Security/High背景，白色文字 +- Warning: Security/Medium背景，白色文字 +- Error: Security/Low背景，白色文字 +- Info: Primary/500背景，白色文字 +- Neutral: Gray/500背景，白色文字 +``` + +#### Tag Badge +``` +基础尺寸：自适应宽度，高度28px +圆角：14px +内边距：12px水平，6px垂直 +文字：Body/Small，Medium + +样式变体： +- Primary: Primary/100背景，Primary/700文字 +- Secondary: Gray/100背景，Gray/700文字 +- AI: AI渐变背景，白色文字 + AI图标 +``` + +#### AI Badge (特殊标识) +``` +尺寸：32×16px +背景：AI渐变 +圆角：8px +文字："AI"，10px，Bold，白色 +外发光：微妙的AI色发光 +用途：标识AI增强功能 +``` + +### 5. 进度组件 (Progress) + +#### Linear Progress +``` +容器：宽度100%，高度4px +背景：Gray/200 +圆角：2px +进度条：根据类型显示不同颜色，圆角2px + +颜色类型： +- Default: Primary/500 +- Success: Security/High +- Warning: Security/Medium +- Error: Security/Low +``` + +#### Circular Progress +``` +外径：60px或120px +线宽：4px或8px +背景圆环：Gray/200 +进度圆环：根据进度值显示颜色 + +进度颜色映射： +- 0-20%: Security/Low +- 21-40%: Security/Medium +- 41-60%: #f59e0b +- 61-80%: Security/High +- 81-100%: #059669 + +中心内容： +- 数值：H2或H1样式 +- 单位：Body/Small，Gray/500 +- 状态：Body/Small或H3样式 +``` + +#### Password Strength Indicator +``` +容器：宽度100px，高度16px +布局：5个圆点，间距4px +圆点：直径8px + +强度显示： +- 很弱(0-20): ●○○○○ Security/Low +- 弱(21-40): ●●○○○ Security/Medium +- 中等(41-60): ●●●○○ #f59e0b +- 强(61-80): ●●●●○ Security/High +- 很强(81-100): ●●●●● #059669 +``` + +### 6. 开关组件 (Switch) + +#### Toggle Switch +``` +轨道尺寸：44×24px +轨道圆角：12px +滑块尺寸：20×20px +滑块圆角：10px (圆形) +滑块边距：2px + +状态样式： +- 关闭: Gray/300轨道，白色滑块，左对齐 +- 开启: Primary/500轨道，白色滑块，右对齐 +- 禁用: Gray/200轨道，Gray/300滑块 + +动画： +- 过渡时长：200ms +- 缓动函数：ease-in-out +- 滑块移动 + 轨道颜色变化 +``` + +### 7. 导航组件 (Navigation) + +#### Top Navigation Bar +``` +尺寸：390×76px (44px状态栏 + 32px内容) +背景：模糊白色 (backdrop-filter: blur(20px)) +边框：底部1px Gray/100 + +布局： +- 左侧：返回按钮或Logo + 标题 +- 右侧：操作图标 (通知、设置、更多) +- 内边距：16px水平 + +标题样式：H3，Gray/900，SemiBold +图标尺寸：24×24px，Gray/600 +``` + +#### Tab Bar +``` +尺寸：390×83px (49px内容 + 34px安全区域) +背景：模糊白色 +边框：顶部1px Gray/100 + +标签项： +- 尺寸：每个约78px宽 +- 图标：24×24px +- 文字：Caption，居中 +- 间距：图标和文字4px + +状态： +- 未选中：Gray/400图标，Gray/500文字 +- 选中：Primary/500图标，Primary/500文字 +- 激活动画：图标轻微缩放 + 颜色过渡 +``` + +### 8. 模态组件 (Modal) + +#### Bottom Sheet +``` +背景：白色 +圆角：顶部16px +阴影：Shadow/XL +拖拽指示器：36×4px，Gray/300，圆角2px + +动画： +- 进入：从底部滑入，300ms ease-out +- 退出：向底部滑出，250ms ease-in +- 背景遮罩：黑色，透明度0.4 +``` + +#### Alert Dialog +``` +容器：最大宽度320px +背景：白色 +圆角：16px +阴影：Shadow/XL +内边距：24px + +布局： +- 标题：H3，Gray/900，居中 +- 内容：Body/Medium，Gray/600，居中 +- 按钮区：水平排列，间距12px + +按钮样式： +- 主要操作：Primary Button +- 次要操作：Secondary Button +``` + +### 9. 列表组件 (List) + +#### List Item +``` +尺寸：358×48px (标准) 或 358×64px (扩展) +背景：白色 +分割线：底部1px Gray/100 + +布局： +- 左侧：图标区域 (可选) +- 中间：标题 + 副标题 (可选) +- 右侧：值/开关/箭头 + +样式： +- 标题：Body/Medium，Gray/900 +- 副标题：Body/Small，Gray/500 +- 值：Body/Medium，Gray/600 +- 箭头：16×16px，Gray/400 +``` + +### 10. 加载组件 (Loading) + +#### Skeleton Screen +``` +基础形状：圆角矩形，Gray/200背景 +动画：从左到右的光泽扫过效果 +时长：1.5s，无限循环 + +常用尺寸： +- 文字行：宽度100%，高度16px +- 标题：宽度60%，高度24px +- 头像：48×48px圆形 +- 卡片：358×72px矩形 +``` + +#### Loading Spinner +``` +尺寸：24×24px (小) 或 32×32px (大) +样式：圆环，线宽2px或3px +颜色：Primary/500 +动画：360度旋转，1s线性无限循环 + +AI版本： +- 颜色：AI渐变 +- 外发光：微妙的AI色发光 +- 脉冲效果：配合旋转的透明度变化 +``` + +## 🎨 组件使用指南 + +### 组件命名规范 +``` +组件类型/变体/状态 +例如：Button/Primary/Default + Card/PasswordEntry/Hover + Badge/AI/Default +``` + +### 组件状态管理 +每个交互组件都应包含以下状态： +- Default (默认) +- Hover (悬停) - 仅Web端 +- Pressed (按下) +- Disabled (禁用) +- Loading (加载中) - 如适用 + +### 响应式适配 +- 小屏 (375px): 组件宽度减少16px +- 大屏 (430px): 组件宽度增加40px +- 间距保持8px网格对齐 + +### 无障碍支持 +- 最小触摸目标：44×44px +- 颜色对比度：符合WCAG AA标准 +- 状态指示：不仅依赖颜色，还有图标/文字 +- 语义标记：为屏幕阅读器提供适当标签 + +这个组件规范确保了整个AI密码管理器界面的一致性和可用性，同时体现了安全、智能、未来感的设计理念。 \ No newline at end of file diff --git a/docs/figma-design-guide.md b/docs/figma-design-guide.md new file mode 100644 index 0000000..38f399b --- /dev/null +++ b/docs/figma-design-guide.md @@ -0,0 +1,443 @@ +# 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密码管理器界面。每个界面都体现了安全性、智能化和用户友好的设计理念。 \ No newline at end of file diff --git a/docs/figma-design-summary.md b/docs/figma-design-summary.md new file mode 100644 index 0000000..bbec591 --- /dev/null +++ b/docs/figma-design-summary.md @@ -0,0 +1,212 @@ +# AI密码管理器 - Figma设计完整总结 + +## 🎯 项目概述 + +我已经为您的AI密码管理器创建了一套完整的Figma设计系统和界面设计规范。这个设计体现了**安全性**、**智能化**和**未来感**的核心理念，为用户提供直观、高效的密码管理体验。 + +## 📚 设计文档结构 + +### 1. 核心设计文档 +- **[`figma-design-system-rules.md`](figma-design-system-rules.md)** - 设计系统基础规范 +- **[`figma-design-guide.md`](figma-design-guide.md)** - 详细设计指南 +- **[`figma-components-spec.md`](figma-components-spec.md)** - 组件库规范 +- **[`figma-implementation-steps.md`](figma-implementation-steps.md)** - 实施步骤指南 +- **[`figma-ai-animations-spec.md`](figma-ai-animations-spec.md)** - AI元素和动画规范 + +### 2. 原始需求文档 +- **[`architecture.md`](architecture.md)** - 系统架构设计 +- **[`interface-designs.md`](interface-designs.md)** - 界面设计规范 +- **[`ui-ux-design.md`](ui-ux-design.md)** - UI/UX设计架构 + +## 🎨 设计系统亮点 + +### 颜色系统 +- **主色调**：科技蓝 (#0ea5e9) 体现专业和信任 +- **AI渐变**：蓝紫渐变 (#667eea → #764ba2) 突出AI功能 +- **安全状态色**：绿色(安全)、橙色(警告)、红色(危险)的直观编码 +- **暗色模式**：完整的暗色主题支持 + +### 字体系统 +- **主字体**：SF Pro Display/Text (iOS系统字体) +- **层级清晰**：H1-H4标题 + Body正文 + Caption说明 +- **可访问性**：符合WCAG AA标准的对比度 + +### AI视觉语言 +- **渐变运用**：所有AI功能使用统一的蓝紫渐变 +- **发光效果**：三级发光强度 (微妙/中等/强烈) +- **智能徽章**：AI标识的一致性应用 +- **动画反馈**：脉冲、流动、粒子等AI特效 + +## 📱 核心界面设计 + +### 1. 启动页面 (Splash Screen) +- **背景**：AI主渐变营造科技感 +- **Logo**：120×120px，白色，居中设计 +- **加载器**：5个圆点流动动画 + +### 2. 认证页面 (Authentication) +- **生物识别**：64×64px指纹图标，多状态设计 +- **状态反馈**：等待/识别中/成功/失败的视觉变化 +- **备选方案**：主密码输入的优雅降级 + +### 3. 主界面 (Dashboard) +- **安全评分**：大型圆形进度条，直观显示安全状态 +- **快速操作**：添加密码、扫码、生成密码的便捷入口 +- **智能搜索**：支持自然语言的AI搜索栏 +- **密码条目**：信息丰富的卡片式设计 + +### 4. 密码库 (Vault) +- **筛选系统**：全部/收藏/分类/标签的多维度筛选 +- **排序选项**：最近使用/字母/安全评分的灵活排序 +- **条目展示**：紧凑版(72px)和展开版(96px)两种模式 + +### 5. AI助手 (AI Assistant) +- **安全仪表板**：大型评分圆环(120×120px) +- **问题分析**：颜色编码的安全问题卡片 +- **智能建议**：AI渐变背景的建议卡片 +- **快速修复**：一键解决安全问题 + +### 6. 搜索功能 (Search) +- **语音搜索**：AI渐变按钮，支持自然语言 +- **智能分类**：AI自动分类的密码组织 +- **快速筛选**：常用筛选条件的快速访问 +- **搜索历史**：个性化的搜索记录 + +### 7. 密码详情 (Password Detail) +- **大图标**：80×80px网站图标展示 +- **信息字段**：清晰的标签-内容-操作布局 +- **AI建议**：个性化的安全改进建议 +- **标签系统**：灵活的分类标签管理 + +### 8. 设置页面 (Settings) +- **用户信息**：头像+基本信息的卡片设计 +- **分组设置**：安全/AI功能/同步/应用的逻辑分组 +- **开关控件**：44×24px的标准iOS开关 + +## 🧩 组件库系统 + +### 基础组件 (10类) +1. **Button** - 主要/次要/AI/图标按钮 +2. **Input** - 文本/密码/搜索输入框 +3. **Card** - 基础/密码条目/安全评分/AI建议卡片 +4. **Badge** - 状态/标签/AI徽章 +5. **Progress** - 线性/圆形/密码强度进度条 +6. **Switch** - iOS风格的开关控件 +7. **Navigation** - 顶部导航/标签栏 +8. **Modal** - 底部抽屉/警告对话框 +9. **List** - 列表项组件 +10. **Loading** - 骨架屏/加载器 + +### 组件特色 +- **状态完整**：Default/Hover/Pressed/Disabled四种状态 +- **响应式**：适配不同屏幕尺寸 +- **无障碍**：44×44px最小触摸目标 +- **AI增强**：特殊的AI版本组件 + +## 🎬 动画效果系统 + +### 动画分类 +- **页面转场**：300ms推入效果 +- **组件交互**：150-200ms微交互 +- **AI特效**：脉冲/渐变流动/粒子扫描 +- **状态反馈**：即时的视觉反馈 + +### AI专用动画 +- **脉冲呼吸**：1.5s循环，AI思考状态 +- **渐变流动**：3s循环，AI卡片背景 +- **粒子扫描**：2s循环，安全分析过程 +- **语音识别**：音波扩散效果 + +## 🚀 实施指南 + +### Figma文件结构 +``` +AI密码管理器设计系统/ +├── 🎨 Design System (颜色/字体/效果样式) +├── 🧩 Components (组件库) +├── 📱 Screens (界面设计) +├── 🔄 Prototypes (交互原型) +└── 📚 Documentation (设计文档) +``` + +### 开发交接 +- **设计标注**：完整的尺寸和间距标注 +- **资源导出**：SVG图标、多倍率图片 +- **代码生成**：React Native组件代码 +- **动画实现**：Reanimated动画参数 + +## ✨ 设计亮点 + +### 1. AI驱动的视觉语言 +- 统一的AI渐变色系统 +- 智能状态的视觉反馈 +- AI功能的特殊标识 +- 未来感的动画效果 + +### 2. 安全优先的设计理念 +- 直观的安全状态编码 +- 密码强度的可视化 +- 生物识别的友好界面 +- 安全问题的清晰提示 + +### 3. 用户体验优化 +- 自然语言搜索支持 +- 手势操作的便捷性 +- 信息层级的清晰性 +- 无障碍功能的完整支持 + +### 4. 技术实现友好 +- 基于React Native的组件设计 +- 性能优化的动画参数 +- 响应式的布局系统 +- 模块化的组件架构 + +## 📋 质量保证 + +### 设计一致性 +- ✅ 统一的设计令牌系统 +- ✅ 一致的组件状态设计 +- ✅ 规范的间距和圆角 +- ✅ 协调的颜色和字体 + +### 可用性标准 +- ✅ WCAG AA无障碍标准 +- ✅ 44×44px最小触摸目标 +- ✅ 高对比度的颜色搭配 +- ✅ 清晰的状态反馈 + +### 技术可行性 +- ✅ React Native兼容的设计 +- ✅ 性能友好的动画效果 +- ✅ 可扩展的组件架构 +- ✅ 完整的开发文档 + +## 🎯 下一步行动 + +### 立即可执行 +1. **在Figma中创建新文件**，按照实施步骤指南开始设计 +2. **建立设计系统**，创建颜色、字体、效果样式 +3. **构建组件库**，从基础组件开始逐步完善 +4. **设计核心界面**，优先完成主要用户流程 + +### 团队协作 +1. **设计评审**：与团队成员讨论设计方案 +2. **用户测试**：验证界面的可用性和易用性 +3. **开发对接**：确保设计的技术可实现性 +4. **迭代优化**：根据反馈持续改进设计 + +## 📞 技术支持 + +如果在实施过程中遇到任何问题，可以参考： +- 详细的组件规范文档 +- 完整的实施步骤指南 +- AI动画效果的具体参数 +- 开发友好的设计标注 + +这套设计系统将帮助您创建出专业、现代、具有未来感的AI密码管理器界面，为用户提供安全、智能、愉悦的使用体验。 + +--- + +*设计完成时间：2024年1月* +*设计师：AI Assistant* +*项目：AI密码管理器 Figma设计系统* \ No newline at end of file diff --git a/docs/figma-design-system-rules.md b/docs/figma-design-system-rules.md new file mode 100644 index 0000000..c3a036b --- /dev/null +++ b/docs/figma-design-system-rules.md @@ -0,0 +1,352 @@ +# AI密码管理器 - Figma设计系统规范 + +## 项目概述 + +基于React Native Expo的AI驱动密码管理器，需要体现安全性、智能化和未来感的设计理念。 + +## 设计系统结构 + +### 1. Token定义 + +#### 颜色系统 +```typescript +// 主色调 - AI科技感蓝紫渐变 +Primary: { + 50: '#f0f9ff', + 100: '#e0f2fe', + 200: '#bae6fd', + 300: '#7dd3fc', + 400: '#38bdf8', + 500: '#0ea5e9', // 主色 + 600: '#0284c7', + 700: '#0369a1', + 800: '#075985', + 900: '#0c4a6e', +} + +// AI渐变色 +AI_Gradient: { + primary: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', + secondary: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', + accent: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', +} + +// 安全状态色 +Security: { + high: '#10b981', // 绿色 - 安全 + medium: '#f59e0b', // 橙色 - 警告 + low: '#ef4444', // 红色 - 危险 + critical: '#dc2626', // 深红 - 严重 +} + +// 功能色 +Functional: { + success: '#10b981', + warning: '#f59e0b', + error: '#ef4444', + info: '#3b82f6', +} + +// 中性色 +Gray: { + 50: '#f9fafb', + 100: '#f3f4f6', + 200: '#e5e7eb', + 300: '#d1d5db', + 400: '#9ca3af', + 500: '#6b7280', + 600: '#4b5563', + 700: '#374151', + 800: '#1f2937', + 900: '#111827', +} + +// 暗色模式 +Dark: { + background: { + primary: '#000000', + secondary: '#1c1c1e', + tertiary: '#2c2c2e', + }, + text: { + primary: '#ffffff', + secondary: '#ebebf5', + tertiary: '#ebebf599', + } +} +``` + +#### 字体系统 +```typescript +Typography: { + // 字体族 + fontFamily: { + primary: 'SF Pro Display', // iOS系统字体 + secondary: 'SF Pro Text', + mono: 'SF Mono', + }, + + // 字体大小 + fontSize: { + xs: 12, + sm: 14, + base: 16, + lg: 18, + xl: 20, + '2xl': 24, + '3xl': 30, + '4xl': 36, + }, + + // 字重 + fontWeight: { + light: '300', + normal: '400', + medium: '500', + semibold: '600', + bold: '700', + heavy: '800', + }, + + // 行高 + lineHeight: { + tight: 1.25, + normal: 1.5, + relaxed: 1.75, + } +} +``` + +#### 间距系统 +```typescript +Spacing: { + xs: 4, + sm: 8, + md: 16, + lg: 24, + xl: 32, + '2xl': 48, + '3xl': 64, + '4xl': 80, + '5xl': 96, +} +``` + +#### 圆角系统 +```typescript +BorderRadius: { + none: 0, + sm: 4, + md: 8, + lg: 12, + xl: 16, + '2xl': 24, + full: 9999, +} +``` + +#### 阴影系统 +```typescript +Shadow: { + sm: { + shadowOffset: { width: 0, height: 1 }, + shadowOpacity: 0.05, + shadowRadius: 2, + elevation: 1, + }, + md: { + shadowOffset: { width: 0, height: 4 }, + shadowOpacity: 0.1, + shadowRadius: 6, + elevation: 3, + }, + lg: { + shadowOffset: { width: 0, height: 10 }, + shadowOpacity: 0.15, + shadowRadius: 15, + elevation: 6, + }, + xl: { + shadowOffset: { width: 0, height: 20 }, + shadowOpacity: 0.25, + shadowRadius: 25, + elevation: 10, + } +} +``` + +### 2. 组件库架构 + +#### 基础组件 +- **Button**: 主要按钮、次要按钮、文本按钮、图标按钮 +- **Input**: 文本输入、密码输入、搜索输入 +- **Card**: 基础卡片、密码条目卡片、安全状态卡片 +- **Badge**: 状态徽章、标签徽章、AI徽章 +- **Avatar**: 用户头像、网站图标 +- **Progress**: 进度条、圆形进度、安全评分 + +#### 复合组件 +- **PasswordStrengthIndicator**: 密码强度指示器 +- **SecurityScoreCard**: 安全评分卡片 +- **PasswordEntryCard**: 密码条目卡片 +- **AIAssistantCard**: AI助手卡片 +- **SearchBar**: 智能搜索栏 +- **BiometricPrompt**: 生物识别提示 + +#### 布局组件 +- **Screen**: 页面容器 +- **Section**: 区块容器 +- **List**: 列表容器 +- **Grid**: 网格容器 + +### 3. 图标系统 + +#### 图标库 +- **系统图标**: SF Symbols (iOS), Material Icons (Android) +- **自定义图标**: 安全相关、AI相关、密码管理相关 +- **网站图标**: Favicon获取和显示 + +#### 图标规范 +- **尺寸**: 16px, 20px, 24px, 32px, 48px, 64px +- **样式**: 线性、填充、双色调 +- **颜色**: 继承文本颜色或指定颜色 + +### 4. 动画系统 + +#### 过渡动画 +```typescript +Transitions: { + // 页面转场 + screen: { + duration: 300, + easing: 'ease-out', + }, + // 组件状态变化 + component: { + duration: 200, + easing: 'ease-in-out', + }, + // 微交互 + micro: { + duration: 150, + easing: 'ease-out', + } +} +``` + +#### AI特效动画 +- **脉冲效果**: AI处理时的呼吸灯效果 +- **渐变流动**: AI功能的渐变色流动 +- **粒子效果**: 安全扫描的粒子动画 +- **发光效果**: 重要AI功能的发光边框 + +### 5. 响应式设计 + +#### 断点系统 +```typescript +Breakpoints: { + // iPhone SE (3rd gen) + small: { width: 375, height: 667 }, + // iPhone 14 + medium: { width: 390, height: 844 }, + // iPhone 14 Pro Max + large: { width: 430, height: 932 }, + // iPad + tablet: { width: 768, height: 1024 }, +} +``` + +#### 适配策略 +- **小屏**: 单列布局，紧凑间距 +- **中屏**: 标准布局，正常间距 +- **大屏**: 利用额外空间显示更多信息 +- **横屏**: 双列或分栏布局 + +### 6. 无障碍设计 + +#### 可访问性标准 +- **对比度**: 符合WCAG AA标准 (4.5:1) +- **字体大小**: 支持动态字体调整 +- **触摸目标**: 最小44x44pt +- **屏幕阅读器**: 完整的VoiceOver支持 + +#### 语义化标记 +- **角色定义**: button, link, heading, list等 +- **状态描述**: selected, disabled, expanded等 +- **标签关联**: label与input的关联 + +### 7. 设计原则 + +#### AI元素设计 +1. **渐变运用**: AI功能使用蓝紫科技渐变 +2. **发光效果**: 重要AI功能添加微妙发光 +3. **动画反馈**: AI处理时显示智能动画 +4. **智能徽章**: AI增强功能显示"AI"标识 + +#### 安全视觉语言 +1. **颜色编码**: 绿色=安全，橙色=警告，红色=危险 +2. **图标系统**: 统一的安全状态图标 +3. **进度指示**: 密码强度的视觉化表示 +4. **状态反馈**: 即时的视觉状态反馈 + +#### 交互设计 +1. **手势操作**: 左右滑动的快捷操作 +2. **触觉反馈**: 重要操作的震动反馈 +3. **状态动画**: 流畅的状态转换动画 +4. **加载状态**: 优雅的加载和骨架屏 + +### 8. Figma组织结构 + +#### 文件结构 +``` +AI密码管理器设计系统/ +├── 🎨 Design Tokens +│ ├── Colors +│ ├── Typography +│ ├── Spacing +│ └── Effects +├── 🧩 Components +│ ├── Atoms +│ ├── Molecules +│ └── Organisms +├── 📱 Screens +│ ├── Authentication +│ ├── Dashboard +│ ├── Vault +│ ├── AI Assistant +│ ├── Search +│ └── Settings +├── 🔄 Prototypes +│ ├── User Flows +│ └── Interactions +└── 📚 Documentation + ├── Style Guide + └── Component Specs +``` + +#### 命名规范 +- **页面**: `Screen/功能名称` +- **组件**: `Component/组件类型/组件名称` +- **状态**: `组件名称/状态名称` +- **变体**: `尺寸-状态-主题` + +### 9. 开发交接规范 + +#### 设计标注 +- **间距**: 使用8px网格系统 +- **字体**: 指定字重和行高 +- **颜色**: 使用设计令牌名称 +- **动画**: 指定时长和缓动函数 + +#### 资源导出 +- **图标**: SVG格式，多尺寸 +- **图片**: PNG/WebP，@1x/@2x/@3x +- **动画**: Lottie JSON格式 + +#### 组件文档 +- **用法说明**: 何时使用该组件 +- **属性列表**: 所有可配置属性 +- **状态变化**: 不同状态的视觉表现 +- **交互行为**: 用户交互的反馈 + +这个设计系统将确保AI密码管理器在视觉和交互上保持一致性，同时体现出安全、智能、未来感的品牌特质。 \ No newline at end of file diff --git a/docs/figma-implementation-steps.md b/docs/figma-implementation-steps.md new file mode 100644 index 0000000..a87ba60 --- /dev/null +++ b/docs/figma-implementation-steps.md @@ -0,0 +1,478 @@ +# AI密码管理器 - Figma实施步骤指南 + +## 🚀 开始之前 + +### 准备工作 +1. **创建新的Figma文件** + - 文件名：`AI密码管理器 - 设计系统` + - 团队：选择合适的团队空间 + - 权限：设置为团队可编辑 + +2. **安装推荐插件** + - **Iconify**: 丰富的图标库 + - **Unsplash**: 高质量图片素材 + - **Content Reel**: 真实内容填充 + - **Auto Layout**: 自动布局优化 + - **Component Utilities**: 组件管理工具 + +## 📋 第一阶段：设计系统建立 + +### Step 1: 创建页面结构 +``` +1. 右键点击页面标签 → Rename → "🎨 Design System" +2. 点击 + 号添加新页面： + - "🧩 Components" + - "📱 Screens" + - "🔄 Prototypes" + - "📚 Documentation" +``` + +### Step 2: 建立颜色样式 +``` +在 Design System 页面： + +1. 创建颜色样式面板 + - 创建矩形 → 填充颜色 → 右侧面板点击样式图标 → Create Style + +2. 主色调系统： + Primary/50: #f0f9ff + Primary/100: #e0f2fe + Primary/500: #0ea5e9 (主色) + Primary/600: #0284c7 + Primary/900: #0c4a6e + +3. AI渐变色： + - 创建矩形 → 填充 → Linear gradient + - AI/Primary: 135°, #667eea → #764ba2 + - AI/Secondary: 135°, #f093fb → #f5576c + - AI/Accent: 135°, #4facfe → #00f2fe + +4. 安全状态色： + Security/High: #10b981 + Security/Medium: #f59e0b + Security/Low: #ef4444 + Security/Critical: #dc2626 + +5. 中性色系： + Gray/50 到 Gray/900 (9个层级) +``` + +### Step 3: 建立文字样式 +``` +1. 创建文本框 → 输入示例文字 → 设置字体属性 + +2. 标题系统： + 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行高 + +3. 正文系统： + 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行高 + +4. 每个样式创建后： + 选中文本 → 右侧面板 Text 区域 → 点击样式图标 → Create Style +``` + +### Step 4: 建立效果样式 +``` +1. 阴影系统： + - 创建矩形 → Effects → Drop Shadow + + Shadow/SM: Y:1, Blur:2, Color:#000000, Opacity:5% + Shadow/MD: Y:4, Blur:6, Color:#000000, Opacity:10% + Shadow/LG: Y:10, Blur:15, Color:#000000, Opacity:15% + Shadow/XL: Y:20, Blur:25, Color:#000000, Opacity:25% + +2. AI发光效果： + - Effects → Drop Shadow → 设置为外发光 + AI/Glow: Color:#667eea, Blur:8px, Spread:2px, Opacity:30% + +3. 保存效果样式： + 选中对象 → Effects → 点击样式图标 → Create Style +``` + +## 📱 第二阶段：核心组件创建 + +### Step 5: 创建按钮组件 +``` +在 Components 页面： + +1. Primary Button: + - 创建矩形 390×48px → 圆角12px + - 填充 Primary/500 → 应用 Shadow/SM + - 添加文本 "按钮文字" → 应用 Body/Large/SemiBold + - 文字颜色设为白色 + - 选中所有元素 → Cmd+Alt+K 创建组件 + - 命名：Button/Primary + +2. 创建变体： + - 选中组件 → 右侧面板 → Add Variant + - 创建 State 属性：Default, Hover, Pressed, Disabled + - 为每个状态设置不同的颜色和效果 + +3. Secondary Button: + - 复制 Primary Button → 修改样式 + - 背景改为透明 → 添加 1px Primary/500 边框 + - 文字颜色改为 Primary/500 + +4. AI Button: + - 复制 Primary Button → 背景改为 AI/Primary 渐变 + - 添加 AI/Glow 效果 +``` + +### Step 6: 创建输入框组件 +``` +1. Text Input: + - 创建矩形 358×48px → 圆角12px + - 填充白色 → 边框 1px Gray/300 + - 添加占位符文本 → 应用 Body/Medium + - 文字颜色 Gray/400 + - 设置内边距：左右16px + +2. Password Input: + - 复制 Text Input + - 右侧添加眼睛图标 24×24px + - 底部添加强度指示器 (2px高度条) + +3. Search Input: + - 复制 Text Input → 背景改为 Gray/50 + - 左侧添加搜索图标 20×20px + - 右侧添加 AI 机器人图标 24×24px + - 占位符："搜索密码或说'银行相关的密码'" +``` + +### Step 7: 创建卡片组件 +``` +1. Base Card: + - 创建矩形 358×100px → 圆角12px + - 填充白色 → 应用 Shadow/MD + - 创建组件 → 命名：Card/Base + +2. Password Entry Card: + - 基于 Base Card，尺寸改为 358×72px + - 添加布局元素： + * 左侧：网站图标占位 32×32px + * 中间：网站名称 + 用户名文本 + * 右侧：强度指示器 + 收藏星标 + - 使用 Auto Layout 进行布局 + +3. Security Score Card: + - 基于 Base Card，尺寸 358×100px + - 左侧：圆形进度条 60×60px + - 右侧：问题列表文本 + - 创建大版本：358×160px，居中显示120×120px进度圆环 + +4. AI Suggestion Card: + - 基于 Base Card → 圆角改为16px + - 背景改为 AI/Primary 渐变 + - 添加 AI/Glow 效果 + - 所有文字改为白色 +``` + +## 📱 第三阶段：界面设计 + +### Step 8: 启动页面设计 +``` +在 Screens 页面： + +1. 创建画板： + - 按 F 键 → 选择 iPhone 14 (390×844px) + - 命名：Splash Screen + +2. 背景设计： + - 创建矩形覆盖整个画板 + - 填充 AI/Primary 渐变 + +3. Logo 区域： + - 距离顶部约280px位置 + - 创建圆形 120×120px → 填充白色 + - 内部添加锁图标 64×64px + - 或使用 Iconify 插件搜索 "shield lock" 图标 + +4. 标题文字： + - Logo 下方24px位置 + - 文本："AI密码管家" + - 应用 H1/Bold 样式，颜色白色 + +5. 加载指示器： + - 标题下方48px位置 + - 5个圆点，直径8px，间距12px + - 颜色白色，透明度60% +``` + +### Step 9: 认证页面设计 +``` +1. 创建新画板：iPhone 14 → 命名：Authentication + +2. 状态栏： + - 高度44px → 填充透明 + - 添加时间、信号等状态元素 + +3. Logo 区域： + - 距离状态栏下方120px + - 圆形图标 80×80px + - 使用与启动页相同的设计，但尺寸缩小 + +4. 标题区域： + - Logo 下方32px + - "欢迎回来" - H1 样式 + - "请验证您的身份" - Body/Medium，Gray/500 + +5. 生物识别区域： + - 标题下方64px + - 指纹图标 64×64px，居中 + - 使用 Iconify 搜索 "fingerprint" 图标 + - 图标颜色：Gray/400 (等待状态) + - 下方文字："使用生物识别" - Body/Large + +6. 分割线： + - 生物识别区域下方48px + - 水平线 + "或" 文字 + +7. 主密码按钮： + - 使用 Button/Secondary 组件 + - 文字："输入主密码" + +8. 忘记密码链接： + - 底部安全区域上方 + - Text Button 样式 +``` + +### Step 10: 主界面设计 +``` +1. 创建新画板：iPhone 14 → 命名：Dashboard + +2. 导航栏： + - 高度76px (44px状态栏 + 32px内容) + - 背景：白色，透明度95%，模糊效果 + - 左侧：🔒 图标 + "AI密码管家" 文字 + - 右侧：通知图标 + 设置图标 + +3. 搜索栏： + - 导航栏下方16px + - 使用 Search Input 组件 + - 宽度358px，居中 + +4. 安全状态卡片： + - 搜索栏下方24px + - 使用 Security Score Card 组件 + - 左侧显示评分85/100 + - 右侧显示问题列表 + +5. 快速操作区域： + - 安全卡片下方24px + - 三个按钮水平排列，间距12px + - 按钮尺寸：110×56px + - 内容：图标 + 文字垂直排列 + +6. 最近使用区域： + - 快速操作下方32px + - 区域标题："最近使用" + "查看全部"链接 + - 下方放置3个 Password Entry Card + - 卡片间距12px +``` + +### Step 11: 密码库页面设计 +``` +1. 创建新画板：iPhone 14 → 命名：Vault + +2. 导航栏： + - 左侧：返回箭头 + "密码库" + - 右侧：搜索图标 + 更多图标 + +3. 筛选标签栏： + - 导航栏下方16px + - 四个标签：[全部] [收藏] [分类] [标签] + - 选中状态：Primary/500背景，白色文字 + - 未选中：Gray/100背景，Gray/700文字 + +4. 排序选择器： + - 标签栏下方16px + - "排序：最近使用 ↓" - Body/Small + +5. 密码列表： + - 排序器下方16px + - 使用 Password Entry Card (展开版96px高度) + - 显示更多信息：网站全名、安全评分、标签等 + - 卡片间距8px +``` + +### Step 12: AI助手页面设计 +``` +1. 创建新画板：iPhone 14 → 命名：AI Assistant + +2. 导航栏： + - 标题："AI 安全助手" + - 右侧：AI机器人图标 (渐变色) + +3. 安全评分区域： + - 使用 Security Score Card (大版本160px) + - 居中显示120×120px圆形进度条 + - 评分85，状态"良好" + +4. 安全问题区域： + - 标题："🔍 安全问题分析" + - 三个问题卡片： + * ⚠️ 弱密码问题 (橙色左边框) + * 🔄 过期密码 (橙色左边框) + * 🔐 两步验证 (绿色左边框) + +5. AI建议区域： + - 标题："💡 智能建议" + - 使用 AI Suggestion Card 组件 + - 渐变背景 + 发光效果 + +6. 快速操作： + - 底部两个按钮： + * "🛠️ 一键修复" - Primary Button + * "📊 详细报告" - Secondary Button +``` + +### Step 13: 搜索页面设计 +``` +1. 创建新画板：iPhone 14 → 命名：Search + +2. 搜索输入区域： + - 顶部：Search Input 组件 + - 下方提示："💬 试试说：'银行相关的密码'" + +3. 语音搜索按钮： + - 搜索框下方16px + - AI Button 样式，渐变背景 + - 🎤 图标 + "语音搜索" + +4. 快速筛选： + - 语音按钮下方24px + - 标题："快速筛选" + - 四个标签按钮水平排列 + +5. 智能分类： + - 筛选下方24px + - 标题："智能分类" + - 四个分类卡片： + * 🏦 银行金融 (8) + * 💼 工作相关 (12) + * 🛒 购物网站 (15) + * 🎮 游戏娱乐 (6) + +6. 搜索历史： + - 分类下方24px + - 标题："搜索历史" + - 历史标签："工作邮箱" "银行密码" "社交媒体" +``` + +## 🔄 第四阶段：交互原型 + +### Step 14: 创建页面连接 +``` +在 Prototypes 页面： + +1. 复制所有设计好的画板到此页面 + +2. 设置页面流程： + Splash Screen → Authentication → Dashboard + +3. 添加交互热区： + - 选择元素 → 右侧 Prototype 面板 + - Interaction: On Tap → Navigate to → 目标页面 + - Animation: Smart Animate, 300ms, Ease Out + +4. 主要交互流程： + - 生物识别按钮 → Dashboard + - 主密码按钮 → 密码输入页面 + - 搜索栏 → Search 页面 + - 密码卡片 → 密码详情页面 + - AI助手入口 → AI Assistant 页面 +``` + +### Step 15: 添加微交互 +``` +1. 按钮交互： + - 选中按钮 → Prototype 面板 + - While Pressing → 缩放到98% + - Animation: 150ms, Ease Out + +2. 卡片悬停效果： + - While Hovering → 阴影增强 + - Animation: 200ms, Ease In Out + +3. 开关切换： + - On Tap → 切换到另一个状态 + - Animation: 200ms, Ease In Out + +4. 加载状态： + - 创建加载动画组件 + - 使用 Smart Animate 实现旋转效果 +``` + +## 📚 第五阶段：文档和交付 + +### Step 16: 创建设计规范 +``` +在 Documentation 页面： + +1. 颜色规范： + - 展示所有颜色样式 + - 标注 HEX 值和使用场景 + +2. 字体规范： + - 展示所有文字样式 + - 标注字号、行高、字重 + +3. 组件规范： + - 每个组件的使用说明 + - 不同状态的展示 + - 尺寸和间距标注 + +4. 间距规范： + - 8px 网格系统说明 + - 常用间距值展示 +``` + +### Step 17: 开发者交接 +``` +1. 创建 Dev Mode 视图： + - 选择画板 → 右上角 Share → Dev Mode + - 添加标注和说明 + +2. 导出资源： + - 图标：SVG 格式 + - 图片：PNG @1x, @2x, @3x + - 颜色：CSS 变量格式 + +3. 组件代码： + - 使用 Figma to Code 插件 + - 生成 React Native 组件代码 +``` + +## ✅ 质量检查清单 + +### 设计一致性 +- [ ] 所有颜色都使用了设计系统中的样式 +- [ ] 所有文字都应用了正确的文字样式 +- [ ] 间距遵循8px网格系统 +- [ ] 圆角使用统一的规范值 + +### 可用性检查 +- [ ] 最小触摸目标44×44px +- [ ] 颜色对比度符合WCAG AA标准 +- [ ] 重要信息不仅依赖颜色区分 +- [ ] 所有交互元素都有明确的状态反馈 + +### 技术可行性 +- [ ] 所有设计都可以用React Native实现 +- [ ] 动画效果合理，不影响性能 +- [ ] 图标和图片资源已准备好导出 +- [ ] 组件结构便于开发实现 + +### AI和安全元素 +- [ ] AI功能都有明确的视觉标识 +- [ ] 安全状态使用一致的颜色编码 +- [ ] 密码强度指示器清晰易懂 +- [ ] 未来感设计元素恰当使用 + +这个详细的实施指南将帮助您在Figma中创建出专业、一致且具有未来感的AI密码管理器界面设计。 \ No newline at end of file diff --git a/docs/figma-quick-start-guide.md b/docs/figma-quick-start-guide.md new file mode 100644 index 0000000..c62f63e --- /dev/null +++ b/docs/figma-quick-start-guide.md @@ -0,0 +1,121 @@ +# Figma快速开始指南 - AI密码管理器设计 + +## 🚀 第一步：创建Figma文件和画板 + +### 1. 打开Figma并创建文件 +1. 在浏览器中访问 [figma.com](https://figma.com) +2. 点击右上角 **"New design file"** 按钮 +3. 文件会自动创建并打开 + +### 2. 重命名文件 +1. 点击左上角的 **"Untitled"** 文件名 +2. 输入：**"AI密码管理器设计系统"** +3. 按回车确认 + +### 3. 创建iPhone画板 +1. 按键盘 **F** 键（或点击左侧工具栏的Frame图标） +2. 在右侧面板中找到 **"Phone"** 分类 +3. 点击 **"iPhone 14"** (390 × 844px) +4. 画板会自动创建在画布中央 + +### 4. 重命名画板 +1. 确保画板被选中（边框显示蓝色） +2. 在右侧面板顶部，将名称改为：**"Splash Screen"** + +## 🎨 第二步：创建第一个设计元素 + +### 方法一：创建矩形（推荐） +1. 按键盘 **R** 键（或点击左侧工具栏的矩形图标） +2. 在画板内拖拽创建一个矩形 +3. 矩形会自动被选中（显示蓝色边框和控制点） + +### 方法二：创建文本 +1. 按键盘 **T** 键（或点击左侧工具栏的文本图标） +2. 在画板内点击任意位置 +3. 输入文字：**"AI密码管家"** +4. 按Esc键完成编辑，文本会被选中 + +### 方法三：创建圆形 +1. 按键盘 **O** 键（或点击左侧工具栏的椭圆图标） +2. 按住Shift键并拖拽，创建一个正圆 +3. 圆形会自动被选中 + +## ✅ 第三步：确认元素已选中 + +### 选中状态的标志： +- 元素周围有**蓝色边框** +- 四个角有**蓝色控制点** +- 右侧面板显示该元素的属性 +- 左侧图层面板中该元素名称被高亮 + +### 如果元素没有被选中： +1. 用鼠标**单击**该元素 +2. 或者在左侧图层面板中**点击**元素名称 + +## 🔧 第四步：验证MCP工具连接 + +当您完成上述步骤并确保有元素被选中后，我就可以使用Figma MCP工具来： + +1. **获取当前设计图像** - 查看您创建的元素 +2. **生成React Native代码** - 为设计元素生成对应的代码 +3. **分析设计变量** - 获取颜色、字体等设计属性 +4. **优化设计** - 根据AI密码管理器的需求调整设计 + +## 🎯 推荐的开始方式 + +### 创建启动页面背景： +1. 按 **R** 键创建矩形 +2. 调整大小覆盖整个画板 (390×844px) +3. 在右侧面板的Fill区域： + - 点击颜色方块 + - 选择 **Linear** 渐变 + - 设置渐变角度为 **135度** + - 第一个颜色：**#667eea** (蓝紫色) + - 第二个颜色：**#764ba2** (深紫色) + +### 添加Logo占位符： +1. 按 **O** 键创建圆形 +2. 设置尺寸为 **120×120px** +3. 填充白色 **#FFFFFF** +4. 居中放置在画板中 + +### 添加标题文字： +1. 按 **T** 键创建文本 +2. 输入：**"AI密码管家"** +3. 设置字体大小：**32px** +4. 设置颜色：**白色 #FFFFFF** +5. 居中对齐 + +## 🚨 常见问题解决 + +### 问题1：找不到iPhone 14画板 +- 按F键后，在右侧面板向下滚动找到"Phone"分类 +- 或者手动创建Frame，设置尺寸为390×844px + +### 问题2：元素创建后没有被选中 +- 用鼠标单击该元素 +- 或按V键切换到选择工具，然后点击元素 + +### 问题3：无法看到渐变选项 +- 确保元素被选中 +- 在右侧面板的Fill区域，点击颜色方块 +- 在弹出的颜色选择器中，点击顶部的渐变图标 + +### 问题4：MCP工具提示"Nothing is selected" +- 确保在Figma中有元素被选中（显示蓝色边框） +- 刷新浏览器页面重新选择元素 +- 确保Figma标签页是当前活跃的标签页 + +## 📞 准备就绪的信号 + +当您看到以下情况时，就可以告诉我"已经选中元素"： + +✅ Figma中有一个元素被选中（蓝色边框） +✅ 右侧面板显示该元素的属性 +✅ 左侧图层面板中元素名称被高亮 + +然后我就可以使用MCP工具来帮您开始设计AI密码管理器的界面了！ + +--- + +**提示**：如果您在任何步骤遇到困难，请告诉我具体在哪一步，我会提供更详细的指导。 \ No newline at end of file diff --git a/docs/frontend-architecture.md b/docs/frontend-architecture.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/interface-designs.md b/docs/interface-designs.md new file mode 100644 index 0000000..31c90aa --- /dev/null +++ b/docs/interface-designs.md @@ -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密码管理器界面。 \ No newline at end of file diff --git a/docs/ui-ux-design.md b/docs/ui-ux-design.md new file mode 100644 index 0000000..024b252 --- /dev/null +++ b/docs/ui-ux-design.md @@ -0,0 +1,483 @@ +# AI 密码管理器 - UI/UX 设计架构 + +## 设计理念 + +### 核心原则 +1. **安全优先**: 所有设计决策都以安全性为首要考虑 +2. **简洁直观**: 复杂功能的简单化呈现 +3. **智能辅助**: AI 功能无缝集成，提升用户体验 +4. **无障碍访问**: 支持各种辅助功能和可访问性标准 +5. **一致性**: 跨平台和功能模块的统一体验 + +## 用户体验流程设计 + +### 1. 首次使用流程 + +```mermaid +graph TD + A[应用启动] --> B{是否首次使用} + B -->|是| C[欢迎引导] + B -->|否| D[身份验证] + + C --> E[创建主密码] + E --> F[设置生物识别] + F --> G[导入现有密码] + G --> H[AI 功能介绍] + H --> I[完成设置] + + D --> J{认证方式} + J -->|生物识别| K[指纹/面容识别] + J -->|主密码| L[输入主密码] + K --> M[进入主界面] + L --> M + I --> M +``` + +### 2. 日常使用流程 + +```mermaid +graph TD + A[主界面] --> B[密码库] + A --> C[AI 助手] + A --> D[设置] + A --> E[搜索] + + B --> F[查看密码] + B --> G[添加密码] + B --> H[编辑密码] + + C --> I[安全评分] + C --> J[密码建议] + C --> K[智能分类] + + E --> L[自然语言搜索] + E --> M[筛选排序] + + F --> N[自动填充] + G --> O[AI 辅助填写] + H --> P[AI 优化建议] +``` + +### 3. 自动填充流程 + +```mermaid +graph TD + A[用户访问登录页面] --> B[系统检测登录表单] + B --> C{是否有匹配密码} + C -->|是| D[显示自动填充建议] + C -->|否| E[提示保存新密码] + + D --> F[用户选择密码] + F --> G[生物识别验证] + G --> H[自动填充表单] + + E --> I[用户输入密码] + I --> J[AI 分析网站类型] + J --> K[自动分类和标签] + K --> L[保存到密码库] +``` + +## 界面架构设计 + +### 1. 导航结构 + +``` +主界面 (Tab Navigation) +├── 密码库 (Vault) +│ ├── 全部密码 +│ ├── 收藏夹 +│ ├── 最近使用 +│ └── 分类浏览 +├── AI 助手 (AI Assistant) +│ ├── 安全仪表板 +│ ├── 密码健康检查 +│ ├── 智能建议 +│ └── 安全报告 +├── 搜索 (Search) +│ ├── 快速搜索 +│ ├── 高级筛选 +│ └── 智能搜索 +└── 设置 (Settings) + ├── 安全设置 + ├── 同步设置 + ├── AI 功能设置 + └── 应用设置 +``` + +### 2. 页面层级结构 + +```mermaid +graph TD + A[启动页] --> B[认证页] + B --> C[主界面] + + C --> D[密码库页面] + C --> E[AI 助手页面] + C --> F[搜索页面] + C --> G[设置页面] + + D --> H[密码详情页] + D --> I[添加密码页] + D --> J[编辑密码页] + + E --> K[安全仪表板] + E --> L[密码分析页] + + H --> M[密码查看模态] + I --> N[密码生成器] + J --> O[AI 建议模态] +``` + +## 核心界面设计 + +### 1. 主界面 (Dashboard) + +#### 布局结构 +``` +┌─────────────────────────────────┐ +│ 状态栏 + 导航栏 │ +├─────────────────────────────────┤ +│ 搜索栏 + AI 快捷入口 │ +├─────────────────────────────────┤ +│ 安全状态卡片 │ +│ ┌─────────┐ ┌─────────┐ │ +│ │安全评分 │ │弱密码数 │ │ +│ └─────────┘ └─────────┘ │ +├─────────────────────────────────┤ +│ 快速操作 │ +│ [添加密码] [扫描二维码] [生成密码] │ +├─────────────────────────────────┤ +│ 最近使用 / 收藏夹 │ +│ ┌─────────────────────────────┐ │ +│ │ 密码条目列表 │ │ +│ └─────────────────────────────┘ │ +└─────────────────────────────────┘ +``` + +#### 关键组件 +- **安全状态卡片**: 实时显示账户安全评分 +- **智能搜索栏**: 支持自然语言搜索 +- **快速操作按钮**: 常用功能的快速访问 +- **密码条目卡片**: 显示网站图标、标题、用户名 + +### 2. 密码库界面 + +#### 列表视图 +``` +┌─────────────────────────────────┐ +│ 筛选栏: [全部] [收藏] [分类] [标签] │ +├─────────────────────────────────┤ +│ 排序: [最近使用] [字母] [安全评分] │ +├─────────────────────────────────┤ +│ ┌─ 密码条目 ─────────────────────┐ │ +│ │ 🌐 [网站图标] 网站名称 │ │ +│ │ 用户名: user@example.com │ │ +│ │ 🔒 强度: ●●●●○ 🏷️ 工作 │ │ +│ │ ⏰ 3天前使用 │ │ +│ └─────────────────────────────┘ │ +│ ┌─ 密码条目 ─────────────────────┐ │ +│ │ 📱 [应用图标] 应用名称 │ │ +│ │ 用户名: username │ │ +│ │ 🔒 强度: ●●○○○ ⚠️ 弱密码 │ │ +│ │ ⏰ 1周前使用 │ │ +│ └─────────────────────────────┘ │ +└─────────────────────────────────┘ +``` + +#### 详情视图 +``` +┌─────────────────────────────────┐ +│ ← 返回 网站名称 ⋯ 更多 │ +├─────────────────────────────────┤ +│ 🌐 大图标 │ +│ │ +│ 网站名称 │ +│ https://example.com │ +├─────────────────────────────────┤ +│ 用户名 │ +│ user@example.com [复制] │ +├─────────────────────────────────┤ +│ 密码 │ +│ ●●●●●●●●●●●● [显示] [复制] │ +├─────────────────────────────────┤ +│ 安全信息 │ +│ 🔒 强度: 强 (85/100) │ +│ 📅 创建: 2024-01-15 │ +│ 🕐 最后使用: 3天前 │ +├─────────────────────────────────┤ +│ AI 建议 │ +│ 💡 建议启用两步验证 │ +│ 🔄 密码已使用180天，建议更新 │ +├─────────────────────────────────┤ +│ 标签 │ +│ [工作] [重要] [银行] │ +├─────────────────────────────────┤ +│ 备注 │ +│ 公司邮箱账户，重要！ │ +└─────────────────────────────────┘ +``` + +### 3. AI 助手界面 + +#### 安全仪表板 +``` +┌─────────────────────────────────┐ +│ AI 安全助手 │ +├─────────────────────────────────┤ +│ 总体安全评分 │ +│ ┌─────────────────────────────┐ │ +│ │ 85/100 │ │ +│ │ ●●●●●●●●○○ │ │ +│ │ 良好 │ │ +│ └─────────────────────────────┘ │ +├─────────────────────────────────┤ +│ 安全问题 │ +│ ⚠️ 5个弱密码需要更新 │ +│ 🔄 3个密码超过90天未更新 │ +│ 🔐 2个账户建议启用两步验证 │ +├─────────────────────────────────┤ +│ 智能建议 │ +│ 💡 检测到您经常使用银行网站， │ +│ 建议为金融账户设置更强密码 │ +├─────────────────────────────────┤ +│ 快速操作 │ +│ [修复弱密码] [更新旧密码] [安全检查] │ +└─────────────────────────────────┘ +``` + +### 4. 搜索界面 + +#### 智能搜索 +``` +┌─────────────────────────────────┐ +│ 🔍 搜索密码... │ +│ 💬 试试说："银行相关的密码" │ +├─────────────────────────────────┤ +│ 快速筛选 │ +│ [最近使用] [收藏] [弱密码] [过期] │ +├─────────────────────────────────┤ +│ 分类浏览 │ +│ 🏦 银行金融 (8) │ +│ 💼 工作相关 (12) │ +│ 🛒 购物网站 (15) │ +│ 🎮 游戏娱乐 (6) │ +│ 📧 邮箱通讯 (4) │ +├─────────────────────────────────┤ +│ 搜索历史 │ +│ "工作邮箱" │ +│ "银行密码" │ +│ "社交媒体" │ +└─────────────────────────────────┘ +``` + +## 组件设计系统 + +### 1. 设计令牌 (Design Tokens) + +#### 颜色系统 +```typescript +export const Colors = { + // 主色调 + primary: { + 50: '#f0f9ff', + 100: '#e0f2fe', + 500: '#0ea5e9', + 600: '#0284c7', + 900: '#0c4a6e', + }, + // 安全状态色 + security: { + high: '#10b981', // 绿色 - 安全 + medium: '#f59e0b', // 橙色 - 警告 + low: '#ef4444', // 红色 - 危险 + }, + // 功能色 + success: '#10b981', + warning: '#f59e0b', + error: '#ef4444', + info: '#3b82f6', + // 中性色 + gray: { + 50: '#f9fafb', + 100: '#f3f4f6', + 500: '#6b7280', + 900: '#111827', + }, +}; +``` + +#### 字体系统 +```typescript +export const Typography = { + // 字体大小 + fontSize: { + xs: 12, + sm: 14, + base: 16, + lg: 18, + xl: 20, + '2xl': 24, + '3xl': 30, + }, + // 字重 + fontWeight: { + normal: '400', + medium: '500', + semibold: '600', + bold: '700', + }, + // 行高 + lineHeight: { + tight: 1.25, + normal: 1.5, + relaxed: 1.75, + }, +}; +``` + +#### 间距系统 +```typescript +export const Spacing = { + xs: 4, + sm: 8, + md: 16, + lg: 24, + xl: 32, + '2xl': 48, + '3xl': 64, +}; +``` + +### 2. 核心组件 + +#### 密码强度指示器 +```typescript +interface PasswordStrengthProps { + strength: number; // 0-100 + showLabel?: boolean; + size?: 'sm' | 'md' | 'lg'; +} + +// 视觉表现： +// 0-20: ●○○○○ 很弱 (红色) +// 21-40: ●●○○○ 弱 (橙色) +// 41-60: ●●●○○ 中等 (黄色) +// 61-80: ●●●●○ 强 (浅绿) +// 81-100: ●●●●● 很强 (深绿) +``` + +#### 安全评分卡片 +```typescript +interface SecurityScoreCardProps { + score: number; + trend: 'up' | 'down' | 'stable'; + issues: SecurityIssue[]; + onViewDetails: () => void; +} +``` + +#### 密码条目卡片 +```typescript +interface PasswordEntryCardProps { + entry: PasswordEntry; + showPassword?: boolean; + onCopy: (field: 'username' | 'password') => void; + onEdit: () => void; + onDelete: () => void; +} +``` + +### 3. 交互设计 + +#### 手势操作 +- **左滑**: 快速复制用户名 +- **右滑**: 快速复制密码 +- **长按**: 显示操作菜单 +- **双击**: 快速查看密码 + +#### 动画效果 +- **页面转场**: 流畅的滑动动画 +- **状态变化**: 微妙的缓动效果 +- **加载状态**: 骨架屏 + 进度指示 +- **反馈动画**: 成功/错误状态的视觉反馈 + +## 响应式设计 + +### 1. 屏幕适配 + +#### iPhone 尺寸适配 +```typescript +const ScreenSizes = { + // iPhone SE (3rd gen) + small: { width: 375, height: 667 }, + // iPhone 14 + medium: { width: 390, height: 844 }, + // iPhone 14 Pro Max + large: { width: 430, height: 932 }, +}; +``` + +#### 布局适配策略 +- **小屏**: 单列布局，紧凑间距 +- **中屏**: 标准布局，正常间距 +- **大屏**: 利用额外空间显示更多信息 + +### 2. 横屏适配 +- **密码库**: 双列网格布局 +- **详情页**: 左右分栏布局 +- **搜索页**: 侧边栏筛选 + +## 无障碍设计 + +### 1. 可访问性支持 +- **VoiceOver**: 完整的屏幕阅读器支持 +- **动态字体**: 支持系统字体大小调整 +- **高对比度**: 适配高对比度模式 +- **减少动画**: 尊重用户的动画偏好 + +### 2. 键盘导航 +- **Tab 顺序**: 逻辑的焦点顺序 +- **快捷键**: 常用操作的键盘快捷键 +- **焦点指示**: 清晰的焦点状态 + +## 暗色模式设计 + +### 1. 颜色适配 +```typescript +export const DarkColors = { + background: { + primary: '#000000', + secondary: '#1c1c1e', + tertiary: '#2c2c2e', + }, + text: { + primary: '#ffffff', + secondary: '#ebebf5', + tertiary: '#ebebf599', + }, + // 保持品牌色和安全状态色不变 + primary: Colors.primary, + security: Colors.security, +}; +``` + +### 2. 对比度优化 +- 确保所有文本达到 WCAG AA 标准 +- 重要信息使用更高对比度 +- 适当调整阴影和边框 + +## 性能优化 + +### 1. 渲染优化 +- **虚拟列表**: 大量密码条目的高效渲染 +- **图片懒加载**: 网站图标的按需加载 +- **组件缓存**: 复用相同的组件实例 + +### 2. 动画优化 +- **原生动画**: 使用 React Native Reanimated +- **60fps**: 确保流畅的动画体验 +- **减少重绘**: 优化动画属性选择 + +--- + +*此 UI/UX 设计架构确保了密码管理器在提供强大功能的同时，保持简洁直观的用户体验，并充分利用 AI 功能提升用户的使用效率和安全性。* \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 6eeb75e..e1d2741 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "expo-font": "~13.3.2", "expo-haptics": "~14.1.4", "expo-image": "~2.4.0", + "expo-linear-gradient": "~14.1.5", "expo-linking": "~7.1.7", "expo-router": "~5.1.4", "expo-splash-screen": "~0.30.10", @@ -6213,6 +6214,17 @@ "react": "*" } }, + "node_modules/expo-linear-gradient": { + "version": "14.1.5", + "resolved": "https://mirrors.tencent.com/npm/expo-linear-gradient/-/expo-linear-gradient-14.1.5.tgz", + "integrity": "sha512-BSN3MkSGLZoHMduEnAgfhoj3xqcDWaoICgIr4cIYEx1GcHfKMhzA/O4mpZJ/WC27BP1rnAqoKfbclk1eA70ndQ==", + "license": "MIT", + "peerDependencies": { + "expo": "*", + "react": "*", + "react-native": "*" + } + }, "node_modules/expo-linking": { "version": "7.1.7", "resolved": "https://mirrors.tencent.com/npm/expo-linking/-/expo-linking-7.1.7.tgz", diff --git a/package.json b/package.json index 06e4f72..43ba889 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,8 @@ "react-native-safe-area-context": "5.4.0", "react-native-screens": "~4.11.1", "react-native-web": "~0.20.0", - "react-native-webview": "13.13.5" + "react-native-webview": "13.13.5", + "expo-linear-gradient": "~14.1.5" }, "devDependencies": { "@babel/core": "^7.25.2", diff --git a/src/components/screens/SplashScreen.tsx b/src/components/screens/SplashScreen.tsx new file mode 100644 index 0000000..380b66a --- /dev/null +++ b/src/components/screens/SplashScreen.tsx @@ -0,0 +1,222 @@ +import { LinearGradient } from 'expo-linear-gradient'; +import React, { useEffect } from 'react'; +import { Dimensions, StyleSheet, Text, View } from 'react-native'; +import Animated, { + interpolate, + useAnimatedStyle, + useSharedValue, + withRepeat, + withTiming, +} from 'react-native-reanimated'; + +const { width, height } = Dimensions.get('window'); + +// AI密码管理器启动页面 +export default function SplashScreen() { + // 加载动画值 + const pulseAnimation = useSharedValue(0); + const fadeAnimation = useSharedValue(0); + + useEffect(() => { + // 启动脉冲动画 + pulseAnimation.value = withRepeat( + withTiming(1, { duration: 1500 }), + -1, + true + ); + + // 启动淡入动画 + fadeAnimation.value = withTiming(1, { duration: 1000 }); + }, []); + + // Logo脉冲动画样式 + const logoAnimatedStyle = useAnimatedStyle(() => { + const scale = interpolate(pulseAnimation.value, [0, 1], [1, 1.05]); + const opacity = interpolate(pulseAnimation.value, [0, 1], [0.9, 1]); + + return { + transform: [{ scale }], + opacity, + }; + }); + + // 内容淡入动画样式 + const contentAnimatedStyle = useAnimatedStyle(() => { + return { + opacity: fadeAnimation.value, + transform: [ + { + translateY: interpolate(fadeAnimation.value, [0, 1], [20, 0]), + }, + ], + }; + }); + + return ( + + {/* AI渐变背景 */} + + + {/* 主要内容 */} + + {/* Logo区域 */} + + + {/* 锁图标 - 可以替换为实际的SVG图标 */} + + + + + + + {/* AI发光效果 */} + + + + {/* 应用标题 */} + AI密码管家 + 智能 · 安全 · 未来 + + {/* 加载指示器 */} + + {[0, 1, 2, 3, 4].map((index) => ( + + ))} + + + + ); +} + +// 加载点组件 +function LoadingDot({ delay }: { delay: number }) { + const opacity = useSharedValue(0.3); + + useEffect(() => { + opacity.value = withRepeat( + withTiming(1, { duration: 800 }), + -1, + true + ); + }, []); + + const animatedStyle = useAnimatedStyle(() => { + return { + opacity: opacity.value, + }; + }); + + return ; +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#667eea', // 备用背景色 + }, + background: { + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, + }, + content: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + paddingHorizontal: 32, + }, + logoContainer: { + alignItems: 'center', + marginBottom: 48, + }, + logoCircle: { + width: 120, + height: 120, + borderRadius: 60, + backgroundColor: 'rgba(255, 255, 255, 0.95)', + justifyContent: 'center', + alignItems: 'center', + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 8, + }, + shadowOpacity: 0.2, + shadowRadius: 16, + elevation: 8, + }, + glowEffect: { + position: 'absolute', + width: 140, + height: 140, + borderRadius: 70, + backgroundColor: 'rgba(255, 255, 255, 0.1)', + shadowColor: '#ffffff', + shadowOffset: { + width: 0, + height: 0, + }, + shadowOpacity: 0.3, + shadowRadius: 20, + }, + lockIcon: { + width: 48, + height: 48, + justifyContent: 'center', + alignItems: 'center', + }, + lockBody: { + width: 28, + height: 20, + backgroundColor: '#667eea', + borderRadius: 4, + position: 'absolute', + bottom: 8, + }, + lockShackle: { + width: 20, + height: 16, + borderWidth: 3, + borderColor: '#667eea', + borderRadius: 10, + borderBottomWidth: 0, + position: 'absolute', + top: 8, + }, + title: { + fontSize: 32, + fontWeight: 'bold', + color: '#ffffff', + textAlign: 'center', + marginBottom: 8, + textShadowColor: 'rgba(0, 0, 0, 0.1)', + textShadowOffset: { width: 0, height: 2 }, + textShadowRadius: 4, + }, + subtitle: { + fontSize: 16, + color: 'rgba(255, 255, 255, 0.8)', + textAlign: 'center', + marginBottom: 64, + letterSpacing: 2, + }, + loadingContainer: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + gap: 12, + }, + loadingDot: { + width: 8, + height: 8, + borderRadius: 4, + backgroundColor: 'rgba(255, 255, 255, 0.8)', + }, +}); \ No newline at end of file