Axure官方正版
快速原型设计工具

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

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

效果分析

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

  1. 大图和文字会随着划屏一起移动,非动态面板多个状态切换,是同一层级的内容滑动。
  2. 背景图汇随着划屏变为对应图片并且放大
  3. 图标会随着划屏变为对应图标
  4. 页码会随着划屏切换到对应页的效果

界面结构

大图和文字

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

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

A

背景图

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

B

图标

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

QQ截图20151210233526

页码

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

D

登陆和注册按钮

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

实现思路

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

制作方法

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

拖动时

QQ截图20151210232546

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

拖动结束时

QQ截图20151210235103

拖动结束分为向左和向右拖动结束时2个交互类型,而拖动又分为大距离拖动和小距离拖动,大距离拖动结束时将跳转到下一页,小距离拖动结束时将保持当前页。

所以我们应当设置条件来判断拖动的距离,我们设拖动200为大小距离的阀值。

在这里要跟大家介绍一个函数——TotalDragX,这个函数的意思是从按下到抬起鼠标总共拖拽的距离。

如果拖拽距离大于200并且当前页码是第1第2页的时候,满足了大距离的拖动条件,则将[[page+1]]。

QQ截图20151210234040

根据page值设置背景图这个动态面板切换到对应的状态,在选择状态中选择Value(值),状态名称和序号中填写全局变量[[page]],这样是第几页就会切换到状态几了。

页码这个动态面板也是一样的,切换到对应[[page]]的状态。

而大图和文字的,我们要根据[[page]]在拖动结束时跳转到整数的页面上,而不是卡在一半。

未标题-2

公式为[[(page-1)*-1屏宽度+左边的空隙距离]]

【思路重点】大距离拖拽=拖拽成功,page+1,小距离拖拽=拖拽失败,page不变。

QQ截图20151211000051

拖动结束处于不同界面时,不同的icon和背景有不同的变化。

icon的变化:显示当前page的icon,隐藏另外2个icon,当前page的icon以中心为锚点,线性动画到原始尺寸。另外2个icon以中心为锚点,线性动画到小尺寸

背景的变化:当前页的背景图由原尺寸放大,其他2个背景图缩小的原尺寸。这样才能在其他page再一次放大图片时,依旧是从原始尺寸放大。需要注意的是,在这i类我们需要把动态面板放大到比原来的图片尺寸大1像素,否则在你放大图片的时候动态面板会跟着一起放大,图片会出框。我在这里的做法是将动态面板高度+1,Y坐标-1。

至此,跟着教程将左拖拽结束时的交互做完了,下面来动动脑筋把向右拖拽做了吧!都是一样的哦,只是有一些轻微的不同。如果还是比较迷茫的话你可以下载Axure源文件去仔细观察学习.^_^.

转载请注明出处:Axure中文网 » 小红书APP登陆界面划屏效果制作

评论 9

评论前必须登录!

 

  1. #6

    马克一下,没事练练手

    Jeremy1年前 (2016-03-18)
  2. #5

    怎么做边界限制啊

    哦哦1年前 (2016-03-15)
    • 如果是axure8的话,下面会有边界选项,7的话用条件做限制。例如只有X坐标大于XX的时候才相应拖动操作。

      Synmo梦儿1年前 (2016-03-16)
  3. #4

    写的有点复杂

    咖啡1年前 (2016-03-01)
    • 写的详细了一些,主要是想教大家方法,可以应用到以后自己的工作中,而不是为了做这么个东西而去做。

      Synmo梦儿1年前 (2016-03-03)
  4. #3

    好文一定要顶,支持一下

    淑梅2年前 (2016-01-30)
  5. #2

    楼主:从此以后我再也不想跟你说话了。
    回复:那你想和我干什么?

    淑梅2年前 (2016-01-30)
  6. #1

    顶顶顶顶顶
    好评好评好评

    郑福根2年前 (2015-12-17)

购买Axure RP正版授权 终身可用

购买专业版购买团队版