猫眼电影-Axure原型制作

一.制作啦猫眼电影App的4个首页面
今天借着制作的原型页面讲制作Axure的几个交互效果:

1.底部tabbar的选中切换
2.试图的上下滚动
3.轮播图的切换
4.头部segement的切换选中不同的视图
  1. 底部tabbar的切换到不同的地方呈现不同的页面并且呈现选中效果
猫眼电影-Axure原型制作_第1张图片
834216EE-91A2-4346-ADA6-5BDC36B58213.png

第一步:把手机外官和底部的电影,影院,发现,我的设置为母模板
第二步:把设置好的母模板添加到创建好的电影,影院,发现,我的的视图中,
第三步:在母版上给电影,影院,发现,我的添加热点区(Hot Spot)方便点击,给其分别添加点击事件,鼠标打击使(on click),设置当前窗口(current window)分别为对应的电影,影院,发现,我的页面
第三步:选中电影的页面,在页面载入时onPageLoad设置文字setText,选中电影,(富文本)rich Text-编辑富文本(Edit text),选中电影2个字变成红色

2.视图的上下滚动

设置动态面板:最外层的带手机的动态面板显示区为控制当前展示的屏幕,相当于手机,点击给动态面板命名-添加子面板,在子面板上添加一个大于屏幕显示区域的动态面板(共2层动态面板)

方法一:

在第二层动态面板上,点击右键

首页列表

猫眼电影-Axure原型制作_第2张图片
6D8E2A19-D467-416C-9B4E-B21271975424.png

跳转屏幕详情页显示

猫眼电影-Axure原型制作_第3张图片
87669AAB-8FAC-4132-B6C0-7A1894886535.png

3.轮播图的切换

4.头部选中不同的视图

猫眼电影-Axure原型制作_第4张图片
D529B010-1034-4B93-AC9E-849930610C4A.png
猫眼电影-Axure原型制作_第5张图片
47F38B3F-DC02-49A5-B599-0641E1476134.png

5.我的页面视图效果

猫眼电影-Axure原型制作_第6张图片
1D7FFB42-584E-4BF8-83E7-16A0A0B3E992.png

未完内容待详细添加

你可能感兴趣的:(猫眼电影-Axure原型制作)