养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

Axure RP 制作图片轮播

时间:2024-11-11 23:57:21

AxureRP制作原型设计。图片轮播是PC,APP常用的效果。本案例,使用动态面板,图片等部件进行交互设计。功能:自动播放,单击序列号播放,左右方向播放。

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

工具/原料

AxureRP软件,4张图片

方法/步骤

1、界面设计:打开AxureRP软件,在page1中,拖入一个动态面板(命名为“图片轮播区“);双击“图片轮播区“动态面板,添加4中状态,分别为图片1,图片2,图片3,图片4。

Axure RP 制作图片轮播

Axure RP 制作图片轮播

2、单击“编辑全部状态”,进入“图片1”工作区中,拖入“图片部件”,双击导入一张图片。放在坐标00位置处。(同理,分别进入“图片2”“图片3”“图片4”导入不同的图片)。

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

3、回到page1,添加序号。拖焯拜芪恨入一个动态面板(命名为序号区域),双击该动态面板,添加4中状态,分别为&qu泠贾高框ot;序号1"、"序号2"、"序号3"、"序号4"。

Axure RP 制作图片轮播

Axure RP 制作图片轮播

4、单击“编辑全部状态”,进入“序号1”工作区,拖入一个椭圆形(设置:无描边,红色,文本为1,加粗,白色;另外3个序号设置:无描边,灰色,文本分别为2,3,4加粗,白色).

Axure RP 制作图片轮播

5、分别进入“序号2”、“序号3”、“序号4”,进行编辑。样式如图:

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

6、返回page1,添加左箭头,右箭头。分别命名“左方向”,“右方向”;设置他们不透明度为80%;至此,界面设计完成。

Axure RP 制作图片轮播

Axure RP 制作图片轮播

7、交互设计(添加相应的事件):首先实现鼠标经过序列号,播放相应的图片。为page1中的序列号分别添加热区部件,以便实现鼠标移入事件。

Axure RP 制作图片轮播

Axure RP 制作图片轮播

8、单击序号1上的热区,双击“鼠标移入时”,打开用例编辑器,单击“设置动态面板”,勾选“设置图片轮播动态面板”,进行如图设置。勾选“序号区域动态面板”,进行如图设置。单击确定。

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

9、按照设置序号1的傲艟茏慕方法,分别设置序号序号序号4的相应事件。如:鼠标移入序号2,选择图片2,序号变为序号2状态。如图示意。至此,鼠标经过序锔鼐抻耄号,图片按序号播放完成。接着是打开页面是图片自动播放的设置。

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

10、打开页面时,图片自动轮播设置。选择“图片轮播区”动态面板。双击“载入时”,单击设置“动态面板”,勾选“设置图片轮播区动态面板”,设置如图所示;勾选“序号区域动态面板”,设置如图所示。单击确定。

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

11、单击右方向按钮。图片向右播放先选择“右方囿鹣分胰向“,双击“鼠标单击时”;单击“添加条件”(当“面板状态”图片轮播区为图片1时,单击右方向,会跳转到图片2上,序号也为2)设置条件如图所示设置动态面板,

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

12、再次添加条件,如果图片处于状态2时,单击右方向,会播放第三长图片。设置如图。

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

13、单击左方向方向按钮。图片向左播放先选择“瘾廛装钒左方向“,双击“鼠标单击时”;单击“添加条件”(当“面板状态”图片轮播区为图片1时,单击左方向,会跳转到图片4上,序号也为4)设就女蒿鸳置条件如图所示设置动态面板,

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

Axure RP 制作图片轮播

14、至此,图片轮播完成。实现三种播放效果按序号播放,自动播放,左右切换播放。

© 一点知识