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

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

效果分析

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

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

界面结构

E69CAAE6A087E9A298-1

大图和文字

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

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

A

背景图

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

B

图标

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

QQE688AAE59BBE20151210233526

页码

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

D

登陆和注册按钮

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

实现思路

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

制作方法

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

拖动时

QQE688AAE59BBE20151210232546

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

拖动结束时

QQE688AAE59BBE20151210235103

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

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

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

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

QQE688AAE59BBE20151210234040

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

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

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

E69CAAE6A087E9A298-2

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

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

QQE688AAE59BBE20151211000051

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

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

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

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

转载自:http://www.axure.com.cn/2909/

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/12057/

(0)
iouedioued
上一篇 2016-01-06
下一篇 2016-01-07

相关推荐

  • 深度解析!天猫双11宇宙 H5 的惊艳效果是如何实现的?

    来源:H5广告资讯站 作者:小呆 原创文章,转载请联系本人! 记得在上个月小站推荐万达的第一支一镜到底H5作品时,就有用户曾放下狠话:“你就等着我们的一镜到底吧!” 因为留言的人是圈内的技术大神,自然也就引起…

    2016-10-25
  • 蜕变.进化——百度云Android端7.0项目总结

    项目背景: 百度云面世之初是一款网盘类产品,以安全、稳定、易用、快速的体验著称,经历近两年时间的升级优化,百度云已不仅仅只是“网盘”了,在慢慢的朝着平台化的方向不断发展。 旧版的Android客户端随着每一次版…

    2015-03-18
  • Apple Watch应用设计案例-QQ空间

    一、初期方案 设计初期,我们希望能够挖掘一些用户在手机端常用的点进行延伸,如:访客、礼物、动态。包括配色和图形设计也延伸了手机端的设计风格。 二、竞品分析 我们对Instagram和Twitter进行了研究,整体上是手…

    2015-07-15
  • 体验方法论:以目标为导向的设计

    产品名称:金融圈APP 设计团队:金融圈UED设计中心 项目介绍:本项目为首页改版方案,与产品经理,交互,运营,视觉四方共同讨论得出的一期改版方向 设计目的:以体验设计方法论体系结合商业目标对APP首屏进行改版 …

    2016-08-31
  • IAMUE 移动客户端的设计作品分享

    Wechat: caochengweiued 分享了他对 IAMUE 移动客户端的设计作品,文末有 阿西 UED 的点评! 阿西UED 的点评: Hi 谢谢你的作品分享,总体上来说,依你当前的学生身份或当前的专业程度,做出这样的设计方案有一定的…

    2016-11-21
  • 网易新闻安卓客户端Material design实战

    编者按:光说不练假把式,聊了这么多的Material design技巧,是时候来看看国内APP怎么跟上这股潮流了。今天网易的同学分享了新闻客户端的Material design改版过程。 项目背景 网易新闻安卓版一直以来照搬IOS版的交…

    2015-07-20
  • 交互动画设计案例—1688首页动效

    随着CSS3和HTML5的发展,越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花,根据最新的浏览器市场份额报告,IE6的份额已经降到了5.21%,这简直是一个喜大普奔的消息,做动效可以完全不care低端浏览器的时代已经在…

    2015-04-24
  • 透视Pad用户与使用行为

      随着Pad的普及,人们如何使用Pad、有哪几类典型用户成为值得深入研究的问题。针对这些问题,ISUX北京设计中心于近期开展了Pad用户基础调研,综合日记卡记录、观察法、深度访谈、问卷调查等多种研究方法对Pad的使…

    2014-12-02
  • Axure制作酷我音乐安卓端高保真原型案例下载

    本案例为原型库网站原创制作,转载请保留出处。这个原型文件,忘记是什么时候练习axure 时做的,做的不好,有bug,部件的层级关系不够明确,仅供参考。拿出来给有兴趣的朋友下载研究吧,关于这个原型的问题就不要找我提问咯,早已忘记了。
    前段时间又重新做了一下安卓端的酷我高保真原型,进步了很多,层级关系十分明确,这个最新的原型等过段时间再给大家分享吧。

    2015-01-04
  • 设计原则:视觉重量和方向

      web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。 我们把这个力称为视觉重量和视觉感知方…

    2014-12-16