AXURE图片轮盘式

前言:

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

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

临摹:

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

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

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

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

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

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

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

相关推荐
梓贤Vigo3 天前
【Axure教程】AI自动对话机器人
交互·产品经理·axure·原型·中继器
一起养小猫4 天前
Axure day2 基础教程完整指南
ui·axure·photoshop
招风的黑耳6 天前
Axure后台管理系统模板:智慧化解决方案的界面设计蓝图
ui·axure·后台原型
繁星流动 >_<7 天前
Axure操作之--点聚式导航
axure
繁星流动 >_<23 天前
AXURE-实现多个原件互斥选择功能
axure
繁星流动 >_<24 天前
axure轮盘转动交互
axure
梓贤Vigo25 天前
【Axure视频教程】制作动态排名图并导入Axure
交互·产品经理·axure·原型·教程
繁星流动 >_<25 天前
axure点击图标放大展示
ui·axure
招风的黑耳1 个月前
Web系统原型设计:架构复杂信息,赋能高效工作
axure·原型·web·元件库·系统原型