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

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

maynowei9个月前 (08-02)技术知识146

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

效果分析

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

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

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

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

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

界面结构

大图和文字

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

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

背景图

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

图标

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

页码

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

登陆和注册按钮

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

实现思路

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

制作方法

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

拖动时

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

拖动结束时

相关文章

事半功倍 轻松制作可交互移动原型

写在前面先讲个场景,看看有多少人躺枪,你在一个没有专职的交互设计师的公司做客户端的产品,基本上产品和交互的活儿你全承包了,当你准备好一切需要向领导和项目团队一起讲新版本的设计:做过WEB产品的老手,或...

msf系列篇章之七模块详解,黑客必学

1、 mestasploit有很多模块,一共分为七类那如果是kali中自带的msf,它默认的安装路径是在这里。,然后可以看见它这些模块有些相对应的目录。1)、exploits漏洞利用模块,这个模块通常...

Android TabLayout + ViewPager2使用

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

如何优雅地使用嵌入式事件标志组?

事件标志组嵌入式事件标志组是一种在嵌入式系统中广泛使用的同步机制,主要用于实现多任务间的同步与通信。事件标志组是一组事件标志位的集合,每个位代表一个事件是否发生。它允许任务等待特定的事件发生,当事件发...

掌握C语言多线程:高效并发编程指南

一、多线程基础概念介绍多线程编程是现代软件开发中提高程序性能和响应性的重要技术。在C语言中,pthread(POSIX Threads)库是实现多线程编程的标准工具。本节将通俗易懂地介绍多线程的核心概...

C++26中同步与原子操作新变化(c++ 同步)

引言随着多核处理器和并发编程的普及,C++26进一步增强了对同步与原子操作的支持,为开发者提供了更高效、更安全的工具来应对多线程编程中的数据竞争与同步挑战。自C++11引入原子操作以来,C++标准库在...