原型动效怎么做？3步设置触发、转场和状态

原型动效可以按“起始画板—触发条件—转场与状态”三步完成：先选一条真实任务，再为按钮连接目标画板，最后补齐默认、加载、成功和失败状态。需要在线完成原型与评审时，可从在线原型设计工具开始。

先确定一条可验收的原型任务

不要先给所有页面添加动画。以“提交报名后看到结果”为例，先列出起始画板、点击对象、目标画板和可恢复动作，再决定哪些状态需要动效。这样评审时能判断交互是否完成，而不只是看转场是否顺滑。

Pixso支持在同一份设计文件中绘制界面、设置原型交互并进行在线评审。本文用“提交报名后看到结果”的流程，说明触发、目标、状态和转场怎样连起来。

使用Pixso制作原型动效，你将收获

• 从已有组件和页面素材开始搭建高保真原型

• 丰富原型动效，流畅交互体验

• 随时在线评审，并按标注与资源继续交付

• 组件与样式保持一致，便于团队复用

简单3步，制作原型动效

核心设置可以按三步完成；复杂项目仍应结合研发和测试环境验证。下面看看如何用 Pixso 制作原型动效。

（一款社交博客App的原型动效图）

第一步：进入原型模式

设计好App的原型草图后，点击右边看板的【原型】按钮，即可进入原型模式。

在没有选中草图的任何交互热点时，原型看板会默认让用户挑选【起始面板】。选择哪个页面作为起始面板，原型就会从哪个页面开始演示。

值得注意的是，起始面板的选项与画板的命名同步，为了提高原型动效的设置效率，做好画板命名区分十分重要。

当选定了原型中的页面、组件或图标时，需要添加【交互事件】，来设置更复杂的触发条件，【+】为添加；【-】为撤销。

第二步：设置触发条件与目标

在添加【交互事件】后，即可根据交互逻辑所需的触发条件，设置要跳转到的目标画板。如图所示，Pixso有多种可设置的触发条件，均可以单独或者叠加使用，还原各种产品经理期望的效果。

例如【按下时】这个触发条件，当用户点击并按住画布中的鼠标或触控板时，将触发操作。这个触发条件，可以用来做移动端原型的长按复制或长按扫描二维码交互。

当然，了解每个触发条件的含义，可以做更丰富的原型动效。到Pixso官网的【帮助中心】，搜索“原型”关键词，可以了解更多。

除了可以设置【跳转到】的交互目标，还有【打开或关闭弹窗】等可以选择。以【打开弹窗】为例，弹窗在画板中的位置可以按界面提供的选项选择，还有诸如【点击弹窗以外区域关闭弹窗】等条件，这些丰富的原型交互在Pixso一个工具上就可以完成。

第三步：设置转场动画

完成以上的设置，到了原型动效最关键的一步——设置原型动画。这有助于产品经理、交互设计师、UI设计师以及开发了解产品在真实环境中的外观与响应方式，直接决定了原型动效的用户体验质量。

在转场动画中，有多个父级条件可选。除了即时和溶解，其他转场可按界面提供的方向选项调整进入方向。同时还有动效预览，可以帮助产品经理或者设计师找到其理想的动效方式。如选择【移入】+【←】，预览区域中的正方块就会从右边进入，定格在目标画框之中。

（为了帮助用户找到理想的转场方式，Pixso为每个动画都配置了预览动效）

动效速度曲线应服务于层级变化：需要强调进入或退出时，可以选择加速或减速，并在预览中检查是否影响信息阅读。Pixso支持调整相应参数，便于团队在评审时统一判断。

通过设置入场或出场完成所需的时间，可以使动画不再那么尖锐或生硬，甚至做出更生动的效果。

完成以上3个步骤，在Pixso上的原型动效就基本完成了。

在Pixso，只要完成一个交互动作的设置，画板上都会有浅蓝色的箭头，可以直观地看到整个原型的交互逻辑，点击箭头就可以进行调整。这样可以在同一份文件中查看交互连线并继续调整界面，减少在设计稿与原型之间来回切换。

把三步串起来时，先用主组件统一重复导航，再逐画板检查选中状态与返回路径；最后用评论记录需要修改的触发条件和版本。