【Axure】新手教程之首页滑动栏目

it2022-05-05  126

Axure中做一个原型设计。主要利用的模块是中继器,动态面板,地图模块等。本意是做一个APP原型,用来设计自己所需要的功能。

首页

一、 循环Banner的Axure原型实现(动态面板)

  顶部图片循环播放,需求如下:

    图片间隔3秒自动循环切换    图片切换的同事,原点变换颜色

 

  步骤如下:

插入图片控件,尺寸调整为所需要的部分。由于本次原型设计中,手机APP的框架设置为 W:304  H:512。所以讲此次的首页滑动栏中的图片设置为 W:301 H:170图片预览如下:拖入一个圆形空间,调整尺寸为 W:10   H:10  复制几个排列成一行对齐,然后将第一个颜色更改为红色全选图片和原点,点击右键,将其转换为动态面板双击该动态面板,进入state页面预览如下:单击state1,然后选择state1 进行复制,形成state2更换state2中的图片和圆点颜色。如果有多张图片,则需要进行多个state的创建,然后依次更换图片和圆点颜色,形成连续设置动态面板的动作。状态:载入时      动作:设置面板状态    基本情况如下图所示预览如下:

这样基本完成了滑动的步骤。

二、中继器显示模块导航系列

   中继器导航,滑动栏目图片+文字系列组合,需求如下:

   将文字和图片进行组合形成导航栏   多个项目能够滑动预览    底部有状态显示条,显示滑动的进度

 

  步骤如下:

添加中继器控件,增加行列。    *******注:这里只添加一页所显示的行列栏目,如果滑动的下一页,需要进行第二个中继器的制作。在这里可以右键设置中继器的显示内容。可以导入图片,文字,链接等。在这里,我设置了三列,分别是Column0 Column1 Column2 分别对应的图片,文字,链接预览图如下:然后双击中继器,在中继器中添加图片控件和文本标签,并且对齐设置图片空间和文本空间能够显示中继器中的图片和文本预览图如下:这样就能在中继器中显示图片和文字。接下来设置滑动的要求。基本设置和上图一样。需要先将该中继器转换成为动态面板,然后利用动态面板中的state状态来进行动作的设定。有多少栏滑动就设置多少个状态。然后这次不需要设置循环,而是设置成拖动。图片预览如下:       设置连接的话,也是同理。将其交互  设置成 单击时  动作:打开连接  值: [[Item.Column2]]这样设置后,直接点击即可打开连接跳转。

 

  基本的动态面板的循环和切换滑动完成。

转载于:https://www.cnblogs.com/youngyan/p/11201947.html

相关资源:各显卡算力对照表!

最新回复(0)