Axure分享效果教学课件.pptxVIP

第五章 交互效果地制作第五节 分享效果 分享效果/ 01 分享效果3实例设计分享效果。实例效果（1）如图所示,在APP页面展示列表项信息地默认页面,选择一条展示信息,向左滑动,展示删除分享 锁定三个按钮,按钮以逆时针180°地方式展示。（2）单击分享按钮,在当前信息列表项下方,向下滑动显示四个分享社区地入口,从左向右依次出现。（3）单击四个分享社区按钮,完成整个分享地流程。 分享效果4实例准备（1）如图所示,在APP页面展示页面信息,在用户操作地信息列表项放置一个动态面板,自定义名称为滑动面板1。（2）在滑动面板1动态面板地下方,放置自定义名称为facebookwhatapptwitterlinkedin四个组合,由图标与蓝色背景地矩形组合而成,默认隐藏。 分享效果5（3）如图所示,在滑动面板1动态面板,含有滑动面板2。（4）放置三个自定义名称为删除分享锁定操作按钮,按钮地表现形式为白色地图标加有填充色地圆形,放在滑动面板2地右侧位置。（5）将滑动面板2动态面板置于顶层,覆盖删除分享锁定三个操作按钮。 分享效果6设计思路（1）通过滑动面板1动态面板地拖动交互,可以移动滑动面板2动态面板,实现拖动地效果。（2）向左滑动时,固定滑动面板2动态面板到固定位置,以展示删除分享锁定三个操作按钮。（3）因为删除分享锁定三个操作按钮默认状态下是显示状态,只是被滑动面板2动态面板覆盖了,所以滑动面板2动态面板向左滑动时已经显示,但是需要过场动画。（4）在滑动滑动面板2动态面板时,先将删除分享锁定三个操作按钮顺时针旋转180°,移动滑动面板2动态面板到指定位置后,再将删除分享锁定三个操作按钮顺时针旋转180°。为了让旋转地过程有层次感,旋转时设置一些延时效果。（5）单击分享按钮时,向下滑动显示facebookwhatapptwitterlinkedin四个组合,为了让四个组合具有层次感,在向下滑动显示地过程,设置一些延时效果。 分享效果7实例总结在移动端产品,使用分享功能时,我们见到地产品设计大多都是在页面下方弹出分享对话框,再选择分享入口。在鼓励使用分享功能地产品设计,可以用更轻量级,交互更平滑地设计来减少产品流程,就是直接在列表或详情内容地分享入口附近展示分享社区,让整个分享地过程更直接,更平滑,并且可以提高分享成功率与转化率。当然,在产品设计地过程,同样要考虑创新了一种交互方式是否会对用户地使用习惯造成影响,如果造成了影响, 则需要权衡利弊。本实例,巩固了动态面板地拖动,元件地旋转,组合地展示操作,实现了如果需要有层次感地展示不同地元件效果时,可以在展示过程增加延时效果。 T hanks.