AXURE图片轮盘式

前言:

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

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

临摹:

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

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

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

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

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

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

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

相关推荐
xy34533 天前
Axure9.0 热区典型实战使用场景
ui·axure·原型·产品设计
充值内卷3 天前
把 Visio 和 Axure 塞进一个 1.5 MB 的 exe:Visioxure 的架构与取舍
架构·axure
充值内卷3 天前
Visio、Axure、draw.io、ProcessOn、墨刀、Figma:六款工具哪个该干哪件事
axure·draw.io·processon
xy34537 天前
Axure 9.0 列表框 介绍
ui·axure·原型·产品设计
xy34537 天前
Axure 9.0 内联框架加载方式
前端·ui·html·axure·原型·产品设计
汉派日月土申15 天前
【移动元件库】8.时间轴
产品经理·axure
结构化知识课堂17 天前
Axure产品原型设计:AI能画原型了,为什么你还得懂这些术语?
人工智能·axure·原型设计·ai产品经理
xy345321 天前
Axure 9.0 动态面板基本操作
前端·ui·html·axure·原型·产品设计
结构化知识课堂22 天前
AI产品设计思维:需求分析的新变化(与传统软件的区别)
人工智能·产品经理·axure·需求分析·ai产品经理·数据产品经理
xy34531 个月前
Axure 9.0 中继器核心结构
前端·ui·html·axure·原型·产品设计