视觉层级与动效配合 · 课程目录

视觉层级基础

什么是视觉层级 · 为什么重要 · 用户注意力模型

🧠 注意力 · 基础

视觉层级构建原则

大小比例 · 颜色对比 · 留白间距 · 位置对齐

📐 原则 · 核心

动效设计基础

12项基本原则 · 缓动时间 · 跟随重叠 · UI作用

⚡ 动效 · 入门

动效与视觉层级结合

强化层级 · 引导视线 · 优先级与节奏

🔄 融合 · 进阶

实战案例：登录页 & 仪表盘

登录页视觉层级与动效 · 数据仪表盘配合

🚀 实战 · 案例

工具与工作流

Figma层级动效原型 · Lottie/JSON · 开发交付

🛠️ 工具 · 规范

性能与可访问性

60fps · GPU加速 · prefers-reduced-motion

⚙️ 性能 · 包容

设计系统与规范

统一层级动效语言 · 组件动效状态管理

📚 系统 · 规范

用户测试与迭代

A/B测试 · 眼动追踪 · 热力图 · 数据驱动优化

📊 测试 · 迭代

3D动效空间层级 · AI自适应 · 微交互情感化

🔮 前沿 · 趋势

视觉层级进阶：格式塔原理

接近性 · 相似性 · 闭合性 · 连续性

🧩 格式塔 · 进阶

动效进阶：关键帧 & 粒子

关键帧路径 · 蒙版遮罩 · 粒子系统UI

✨ 动效 · 高阶

层级与动效心理学

认知负荷 · 注意力残留 · 情感化动效

❤️ 心理 · 认知

响应式层级与动效

屏幕适配 · 断点过渡策略

📱 响应式 · 适配

无障碍设计：层级与动效

屏幕阅读器 · 癫痫风险规避

♿ 无障碍 · 包容

品牌化层级与动效

品牌色应用 · 专属动效语言

🎯 品牌 · 识别

数据可视化层级与动效

图表叙事 · 数据下钻层级过渡

📈 数据 · 可视化

手势交互与动效

滑动层级反馈 · 长按3D Touch

👆 手势 · 交互

页面转场与层级

共享元素过渡 · 容器变换 · 模态层级

🔄 转场 · 导航

微文案与动效

文字动效引导 · 加载空状态文案配合

✍️ 文案 · 微交互

设计评审中的层级与动效

展示动效设计 · 动效文档规范

📋 评审 · 文档

开发协作：CSS动画 vs JS

GSAP · Framer Motion · 动效库选择

💻 开发 · 协作

动效节奏与韵律

时间曲线 · 层级感知 · 序列编排

🎵 节奏 · 韵律

失败案例：过度动效 & 层级混乱

用户迷失 · 常见错误

⚠️ 避坑 · 反思

游戏化设计：层级与动效

成就解锁 · 进度条 · 奖励反馈

🎮 游戏化 · 激励

表单与输入层级动效

焦点动效 · 错误提示 · 验证状态反馈

📝 表单 · 输入

导航系统中的层级与动效

底部导航 · 侧边栏 · 标签页切换

🧭 导航 · 系统

卡片与列表层级动效

展开折叠 · 拖拽排序 · 滑动删除

🗂️ 卡片 · 列表

通知与提示层级动效

Toast入场出场 · 弹窗遮罩 · Badge提醒

🔔 通知 · 提示

综合项目实战：移动端应用

天气App/音乐播放器 · 全流程层级动效

🏆 实战 · 毕业项目