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交流+問答群。

給TA買糖
共{{data.count}}人
人已贊賞
案例教程

Axure8實例:支付寶咻一咻

2016-3-31 0:41:04

案例教程

Axure實戰案例1:帶提示文字的輸入框 淘寶搜索框

2016-7-30 15:11:19

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo