AXURE图片轮盘式

前言:

在我们日常在制作移动端的产品时常常会遇到这种交互,首页会有一个图片式轮盘,随之我们点击不同的图片,轮盘会随之转动,点中的图片始终保持在中心位置,图片下放的说明文字也会随之改变。

今天我们就来临摹以下猫眼电影。

临摹:

1、完成静态页面的制作:

2、将页面中间海报位置设置为动态面板,命名为【母】。在动态面板中再设置一个动态面板用于存放海报,命名为【子】,用以实现滑动的交互。

3、设置图片轮盘式滚动:【母】动态面板设置交互,拖动,水平移动,并设置移动范围。确保【子】动态面板中的电影海报可以水平移动。

4、设置图片轮盘式交互:点击对应海报对应海报放大,对应海报移动到底部指针位置,【子】动态面板根据点击不同海报移动,当选中第二次海报时【子】动态面板移动(-85,0)其余海报根据-85为区间依次往后。

5、制作影片简介:将海报下放的电影简介设置为动态面板,命名为【电影简介】。

6、将影片简介的交互加入到电影海报交互中。

7、观影日期选中的交互,在观影日期下方新增浮动条,当选中不同日期时浮动条随之移动,当选中对应日期元件时对应日期变为红色。单机交互中需要加入"设置选中"下放字段设置交互设置选中时字段为红色,并加入选项组,加入选项组三组日期选中时的颜色才能为互斥的。

相关推荐
colin52102 天前
AxureRP9实例-上传附件教程,并且美化上传元件SL090002
axure·上传附件
Three~stone5 天前
Axure RP 9.0 是干啥?附安装教程和安装包
axure
梓贤Vigo7 天前
【Axure教程】字母定位选择器
交互·产品经理·axure·原型·中继器
梓贤Vigo9 天前
【Axure原型分享】能上下拖动和滚动查看内容的中继器表格
交互·产品经理·axure·原型·中继器
xy34539 天前
Axure 9.0 原生组件:让折线图实现动态交互(文本标签)
ui·交互·axure·原型·折线图
xy345310 天前
Axure 9.0 原生组件:绘制折线图
ui·信息可视化·交互·axure·原型·折线图
xy345313 天前
Axure 9.0 原生组件:让柱图实现动态交互(文本标签)
ui·交互·axure·原型·柱状图
梓贤Vigo14 天前
【Axure视频教程】拖动和滚动效果
交互·产品经理·axure·原型·教程
探索未知的自己14 天前
Axure RP 9 制作登录页面过程
axure
梓贤Vigo15 天前
【Axure原型分享】字母分类选择器
交互·产品经理·axure·原型·中继器