当前位置:首页 > 技术知识 > 正文内容

Axure案例小红书APP登陆界面划屏效果制作

maynowei2周前 (08-02)技术知识14

有一款叫做小红书的APP(不是小黄书)登陆界面做的非常清新脱俗,教他家用Axure模仿练习一下他的登陆界面划屏效果,这个内容虽然有些多,但是制作方法并不难,耐心跟着做的话肯定没问题哒!点击观看效果

效果分析

这个登陆界面中,我们需要做的效果有下面4个内容:

  1. 大图和文字会随着划屏一起移动,非动态面板多个状态切换,是同一层级的内容滑动。

  2. 背景图汇随着划屏变为对应图片并且放大

  3. 图标会随着划屏变为对应图标

  4. 页码会随着划屏切换到对应页的效果

界面结构

大图和文字

3屏宽的界面,将图片和文字摆放在对应位置。

将外层动态面板缩小为1屏大小,起到限制显示区域的作用。

背景图

1个动态面板的3个状态,每个状态中是不同的图。

图标

3个相同位置的图标,默认显示第1个,隐藏其他2个。

页码

1个动态面板的3个状态,每个状态中表示不同的页码。

登陆和注册按钮

用矩形画2个按钮,本次教程中不涉及登录之后的内容,所以不在这里做交互。

实现思路

建立全局变量page,默认值为1,代表当前的页码,各个元件根据page的值进行相应交互。

制作方法

拖动分为2类交互,1是拖动时,2是拖动结束时。

拖动时

将大图和文字分别设置水平拖动,并且进行边界限制,不做限制的话就可以左右无限拖拽了。

拖动结束时

相关文章

Axure使用技巧:全局变量(axure全局变量和局部变量)

编辑导语:关于全局变量的作用,有些人可能尚未完全了解,那么,如何利用Axure来设置全局变量,进而发挥全局变量的作用,如跨页面传递文本呢?本篇文章里,作者通过注册页面的案例,就全局变量的操作流程做了梳...

去哪儿暑期PM实习一月记:在互联网公司做产品实习是怎样一种体验

人人都是产品经理旗下【起点学院】推出产品经理“365天”成长计划,BAT大牛带你学产品! 在毕业前的最后一个暑假,缘分使然找了几个月暑期实习之后进入了去哪儿,申请提前入职工作至今正好满一个月。原先有在...

产品经理的术与器:从想法到产品原型

工欲善其事,必先利其器。从idea,到product,中间的可谓要经历几番曲折, 产品定位确定决定产品的生死,产品功能需求的确定决定着开发的周期和试错的成本,互联网拼的就是快,所以要做 MVP(最小化...

伪装成抖音国际版Tiktok的短信蠕虫

概述近期监测到一款仿冒Tiktok的短信蠕虫,该短信蠕虫最明显的特点就是针对Android系统版本高于6.0以上的设备,由于Android版本的更新迭代,现在大部分设备已经更新到较高的版本,通过不完全...

有了这份900多页的Android面试指南,你离大厂Offer还远吗?

前言对于大部分程序员来说,一线互联网是的工作经历是毕生的追求,实际上大厂对于学历的要求远远没有我们想象的那么高,近几年来,互联网公司更注重技术,所以提升自身技术水平才是斩获offer的制胜关键。一线互...

Android TabLayout + ViewPager2使用

1、xml文件<!--明细列表--> <com.google.android.material.tabs.TabLayout android:id="@+id/ty_...