Axure案例小红书APP登陆界面划屏效果制作
有一款叫做小红书的APP(不是小黄书)登陆界面做的非常清新脱俗,教他家用Axure模仿练习一下他的登陆界面划屏效果,这个内容虽然有些多,但是制作方法并不难,耐心跟着做的话肯定没问题哒!点击观看效果
效果分析
这个登陆界面中,我们需要做的效果有下面4个内容:
大图和文字会随着划屏一起移动,非动态面板多个状态切换,是同一层级的内容滑动。
背景图汇随着划屏变为对应图片并且放大
图标会随着划屏变为对应图标
页码会随着划屏切换到对应页的效果
界面结构
大图和文字
3屏宽的界面,将图片和文字摆放在对应位置。
将外层动态面板缩小为1屏大小,起到限制显示区域的作用。
背景图
1个动态面板的3个状态,每个状态中是不同的图。
图标
3个相同位置的图标,默认显示第1个,隐藏其他2个。
页码
1个动态面板的3个状态,每个状态中表示不同的页码。
登陆和注册按钮
用矩形画2个按钮,本次教程中不涉及登录之后的内容,所以不在这里做交互。
实现思路
建立全局变量page,默认值为1,代表当前的页码,各个元件根据page的值进行相应交互。
制作方法
拖动分为2类交互,1是拖动时,2是拖动结束时。
拖动时
将大图和文字分别设置水平拖动,并且进行边界限制,不做限制的话就可以左右无限拖拽了。