feat(docs): add comprehensive design system and AI password manager architecture
- Add complete Figma design system with color, typography, and component specifications - Create detailed UI/UX design architecture for React Native implementation - Include AI-specific design elements with gradients, animations, and visual language - Add implementation guides for developers and step-by-step Figma instructions - Configure MCP server integration for Figma design workflow - Create SplashScreen component with AI gradient background and loading animations
This commit is contained in:
richarjiang
513
docs/figma-ai-animations-spec.md
Normal file
513
docs/figma-ai-animations-spec.md
Normal file
@@ -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视觉语言和流畅的用户体验，同时体现了未来感和科技感。
|
||||
Reference in New Issue
Block a user