中国传媒大学-用户体验与UI交互设计-课件-知识点6.6 Axure中如何应用动态面板实现图片轮播效果.pptxVIP

交互式界面设计 西安邮电大学 数字艺术学院 PART 01 引言 目录 CONTENTS PART 02 案例分析 01 引言 01 引入淘宝 在导航栏的下方有一组自动滚动的图片，这些图片会根据淘宝不同的活动自动更新，一般以广告为主。那么这组滚动图片的交互是如何实现的？ 案例分析 02 案例关键点一 图片是自动轮播的，要做到自动轮播，就要在页面加载时驱动图片，否则无法自动，只能通过按钮、触摸或滑动动作来驱动图片轮播。 自动轮播 驱动图片 页面加载时 无法自动 否则 案例关键点二 案例中除了图片轮播，图片下方的小圆点也随着图片的变化而自动同步变化，以3000MS的速率循环播放。 小圆点虽图片同频率循环播放 3000MS 图片轮播 案例关键点三 要实现这个效果，我们将设置三个动态面板，分别为放置多个图片的动态面板Photo、放置随图片同频率循环播放的小圆点Dot和一个空的动态面板Null。 动态面板Photo 动态面板Dot 空动态面板Null 页面载入 Null自动循环 空的动态面板Null状态改变时触发 谢谢