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

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

maynowei3周前 (08-02)技术知识16

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

效果分析

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

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

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

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

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

界面结构

大图和文字

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

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

背景图

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

图标

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

页码

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

登陆和注册按钮

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

实现思路

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

制作方法

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

拖动时

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

拖动结束时

相关文章

Axure操刀微信H5页面之《人际沟通风格测试》的制作过程

来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。在之前的文章中我就讲过用Axure制作H5页面(再次声明Axure输出的html文件可能并非基于html5),在H5制...

分享我的产品策划流程,希望对你也有用

本文笔者梳理拆解了自己的产品策划流程,并给出了自己对各流程的思考,希望能够给你带来一定的启发。记得刚开始做产品出需求方案的时候,上来就开始画原型写文档,在写的过程中发现某个交互没想明白或者漏了一部分逻...

第四章:产品设计(2.3)PRD写作 - 原型设计

2.3、原型设计(界面线框图)当我们逐渐清晰了产品的需求后,并梳理了产品的各个频道及页面,那么这一步就要开始验证这些想法的具体界面表现和方案的可行性了。原型设计是帮助我们更细致的思考,并做各项需求的评...

出售闲置原型素材来赚钱,上传作品,即可收上万元收入

出售闲置原型素材来赚钱。产品经理每年设计出大量的原型作品和组件、元件库、交互原型模板等作品,如果项目结束,你的原型就失去了作用,而有需求的人却找不到这样的作品。现在我们发现这样一家元件库、原型模板、素...

[三菱PLC] 用"C语言"玩转PLC,三菱PLC使用ST语言超详细教程

ST语言,全称为结构化文本(Structured Text),是一种高级编程语言,专为工业自动化和控制系统设计。我们学习PLC一般是用梯形图,梯形图学会后,学习SFC,但是我发现梯形图和SFC虽然简单...

Windows 加密盘BitLocker爆锁屏绕过严重漏洞

BitLocker Windows内置现代设备级数据加密保护功能,BitLocker与Windows内核深度集成。有大量的企业和个人使用BitLocker加密自己关键数据,以防止数据泄密。BitLoc...