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

创意实例:不偷看密码的登录页面

3

效果图

这个交互效果是使用Axure8制作的,模仿的一个国外网站登录页面,个人感觉非常有创意并且很可爱。

由于个人比较喜欢阿狸,而又发现了刚好适用的素材,所以我就用阿狸作为本次实例的素材啦。

3635562_13588643035821

素材图

静态界面就不教大家如何制作啦,这只是非常简单的临摹工作而已,在此就不细说了的,给大家看一下静态元素的内容。

战盟图片1460049066

在交互中,我们使用到的有:

【left/right hand】

左右手,因为在交互动画中有叠加层级的变化,所以需要独立出阿狸整体。

【ALI组合】

包含阿狸眼睛上的2条线的图片是纯为了美观而加,因为阿狸的眼睛是歇着的,但是显示/隐藏都是水平的。

left/right-eye:左右眼,用圆形和半圆形组合而成。

mouth:嘴,直接截图原来的嘴巴然后垂直翻转出来的图。

阿狸原图

QQ图片20160408010935

我们需要制作的是2部分交互:

【密码框获取焦点】

手部置顶、阿狸组合置底、设置手部尺寸变化、移动手部、隐藏眼睛和嘴。

【密码框失去焦点】

移动手部、手部尺寸变化、显示眼睛和嘴、等待手部动画完毕、将手部置于顶层。

具体的数值需要根据自己制作的动画去调整,方法不难,需要耐心。

RP源文件下载:http://pan.baidu.com/s/1bEThLW

诚心一起交流学习的欢迎加入QQ群542524521,我们群叫Axure缘分问答,但我发誓这不是一个相亲群,真的是一个正经的Axure交流+问答群。

转载请注明出处:Axure中文网 » 创意实例:不偷看密码的登录页面
axure share

评论 3

评论前必须登录!

 

  1. #2

    用一个8.0的文件 玩儿呢

    dark10个月前 (04-08)
  2. #1

    支持

    DT10个月前 (04-08)

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

购买专业版购买团队版