AXURE图片轮盘式

前言:

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

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

临摹:

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

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

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

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

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

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

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

相关推荐
繁星流动 >_<6 天前
Axure上下文交互
axure
Dontla6 天前
Axure RP(Rapid Prototyper)原型图设计工具介绍
ui·axure·photoshop
繁星流动 >_<8 天前
Axure拓展列表操作
axure
落雨盛夏8 天前
Axure入门学习(自用)
学习·axure
XiaoXiao_RenHe13 天前
Axure11 使用示例
axure
梓贤Vigo16 天前
【Axure教程】AI自动对话机器人
交互·产品经理·axure·原型·中继器
一起养小猫17 天前
Axure day2 基础教程完整指南
ui·axure·photoshop
招风的黑耳19 天前
Axure后台管理系统模板:智慧化解决方案的界面设计蓝图
ui·axure·后台原型
繁星流动 >_<20 天前
Axure操作之--点聚式导航
axure