2026年UI设计（Figma）动效制作技能测试卷.docxVIP

2026年UI设计（Figma）动效制作技能测试卷

考试时间：______分钟总分：______分姓名：______

一、基础过渡动效实现

请根据以下要求，在提供的Figma文件（假设文件名为`base_ui.figma`）中为指定元素添加基础过渡动效。

1.为“主要按钮”（PrimaryButton）添加点击动效：点击时轻微放大（Scale:1.05），并在0.2秒内恢复原状。使用Figma的Auto-Animate功能实现。

2.为顶部的“导航栏”添加过渡动效：当从“首页”页面切换到“关于我们”页面时，导航栏应从完全可见平滑淡出至完全不可见（Opacity:0），持续时间为0.3秒。使用Figma的Auto-Animate功能实现页面切换动效，并关联此过渡。

3.为“通知图标”（NotificationIcon）添加悬停动效：鼠标悬停时，图标颜色变为品牌强调色，并轻微上移（TranslateY:-3px）。使用Figma的状态（States）和Auto-Animate功能实现。

二、进阶交互动效设计

假设你正在为一个电商APP设计购物车页面“添加商品”动效。请设计并实现以下连贯的交互动效流程。

1.用户点击“添加到购物车”按钮。按钮本身先有一个短暂的缩放和颜色变化的反馈动效。

2.接着，一个代表商品的卡片（假设名为`Pro