AXURE图片轮盘式

前言:

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

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

临摹:

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

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

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

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

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

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

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

相关推荐
Autumn_ing2 天前
2026国内外主流设计工具大对比:Axure、墨刀、Figma、Pixso
ui·aigc·axure·figma·墨刀
okra-2 天前
Axure RP 10 进阶指南:从全局变量到JavaScript语法,打造高效原型设计!
javascript·axure·photoshop
梓贤Vigo3 天前
【Axure高保真原型】卡片和表格间切换
交互·产品经理·axure·原型·中继器
梓贤Vigo4 天前
【Axure教程】拖动分组
交互·产品经理·axure·原型·教程
zzzb1234566 天前
【教程】Axure RP 9 超详细安装指南:从下载、汉化到授权配置(避坑必看)
axure
默默无闻 静静学习7 天前
Axure基础界面介绍及小技巧
axure
梓贤Vigo8 天前
【Axure原型分享】自定义图片列表布局
axure
招风的黑耳9 天前
【实战原型】TMS物流运输管理系统高保真交互原型
ui·交互·axure·原型
虫无涯24 天前
Axure、xiaopiu设计弹窗的实践
axure·产品设计·原型设计
繁星流动 >_<1 个月前
Axure-固定侧边栏-滚动内容区导航
axure