Pixso是一款由国内本土团队打造的一站式协同设计工具,不仅实现了和 Sketch、Adobe XD 的无缝衔接,更基于优秀的组件变体、自动布局、实时协作等特色功能,集UI设计、原型、交互、标注和资源于一身。能够完成产设研全流程,中文语言更符合国人的使用习惯和需求。pixso用来做原型动效很方便,本文小编来为大家分享一下如何使用pixso制作原型动效。
一、进入原型模式
1、当我们设计好App的原型草图后,需要在界面的右边看板中找到【原型】选项并点击,进入到原型模式。
2、没有选中草图的任何交互热点时,原型看板会默认让用户选择【起始面板】。选择哪个页面作为起始面板,原型就会从哪个页面开始演示。
3、需要注意的是,起始面板的选项与画板的命名同步,所以为了提高原型动效的设置效率,我们需要为画板的命名进行区分。
4、当选中原型中的页面、组件或图标时,需要为它们添加【交互事件】,以设置更复杂的触发条件,【+】为添加;【-】为撤销。
二、设置触发条件与目标
为原型组件添加【交互事件】后,即可根据交互逻辑所需的触发条件,设置要跳转到的目标画板。
除了可以设置【跳转到】的交互目标,还有【打开或关闭弹窗】等可以选择。
三、设置转场动画
设置原型动画的作用在于帮助产品经理、交互设计师、UI设计师以及开发了解产品在真实环境中的外观与相应方式,直接决定了原型动效的用户体验质量。
· 在转场动画中,有多个父级条件可选。除了即时和溶解以外,其他6个条件都可以设置动效出现的来源方向。
· 动效预览功能可以帮助产品经理或者设计师在预览的过程中及时改进更新,得到更好的设计效果。
· 在做原型动效的时候,高阶设计师们很少采用线性状态的运动方式(没有速度变化地运动到另一点),多用加速或者减速动效,因为物体移动的方式会使设计更加生动,让人感到心情愉悦。
· 通过设置入场或出场完成所需的时间,可以做出更生动的动画效果。
以上就是Pixso设计原型动效的操作步骤,操作简单方便。在设计动效的时候需要从用户角度出发,设计出用户体验感更高的动态效果。