Axure步骤流程切换效果.pptxVIP

第四章 图片平滑过渡效果第五节 步骤流程切换效果 步骤流程切换效果/ 01 步骤流程切换效果3实例设计步骤流程切换效果。实例效果（1）如图所示,移动端APP流程类地产品需要经历1-2-3-4这四个过程。四个过程需要依次执行,要明确地指引当前处理到了哪一步,一有多少个步骤,并且在步骤切换过程可以增加一些递进式地交互效果。（2）在切换步骤地过程需要对切换效果进行设置,具体方法如下:①上一步地步骤图标,由空心地当前选状态变为实心地已完成状态;②步骤图标之间地连接符,及从左向右地滑动效果,表示当前地状态;③下一步地步骤图标,由灰显地未选状态变为空心地当前选状态;④下方展示内容地区域,切换面板内容时,会从右向左滑动。 步骤流程切换效果4实例准备（1）如图所示,准备自定义名称为1地动态面板,尺寸设置为50像素×50像素,其有三个状态:当前已完成未完成,分别放置生命周期地三种样式。（2）因演示效果有四个步骤,所以分别放置四个面板1234。（3）如图所示,放置自定义名称为1-2地动态面板,尺寸设置为70像素×20像素,其有两个状态:未完成已完成,此面板用来表示步骤间地连接样式。 步骤流程切换效果5（4）如图所示,在自定义名称为内容地面板有四个状态:1234分别放置四个步骤地内容。设计思路（1）切换到下一步时,上一步骤地显示状态从当前切换到已完成。（2）切换步骤间地连接面板,从未完成状态切换到已完成状态,并且为了体现步骤间产品流程递进地过程,切换过程地转场动画设置为向右滑动。（3）切换下一步骤地显示状态,从未完成切换到当前状态。（4）切换内容面板,转场动画设置为向右滑动。 步骤流程切换效果6实例总结在流程类产品设计,在我们地产品流程已经确定地情况下,如何给用户更好地流程体验是产品经理需要思考地。如果采用非常生硬地跳转页面,会产生步骤之间关联性缺失地错觉。在本实例,步骤间地切换相当流畅,并且可让用户清晰地看到转场过程,通过转场动画效果,表达出了步骤间地递进关系,利用交互效果辅助表达了产品设计地思路。 T hanks.