效果圖
這個交互效果是使用Axure8制作的，模仿的一個國外網(wǎng)站登錄頁面，個人感覺非常有創(chuàng)意并且很可愛。
由于個人比較喜歡阿貍，而又發(fā)現(xiàn)了剛好適用的素材，所以我就用阿貍作為本次實(shí)例的素材啦。
素材圖
靜態(tài)界面就不教大家如何制作啦，這只是非常簡單的臨摹工作而已，在此就不細(xì)說了的，給大家看一下靜態(tài)元素的內(nèi)容。
在交互中，我們使用到的有：
【left/right hand】
左右手，因?yàn)樵诮换赢嬛杏携B加層級的變化，所以需要獨(dú)立出阿貍整體。
【ALI組合】
包含阿貍眼睛上的2條線的圖片是純?yōu)榱嗣烙^而加，因?yàn)榘⒇偟难劬κ切，但是顯示/隱藏都是水平的。
left/right-eye：左右眼，用圓形和半圓形組合而成。
mouth：嘴，直接截圖原來的嘴巴然后垂直翻轉(zhuǎn)出來的圖。
阿貍原圖
我們需要制作的是2部分交互：
【密碼框獲取焦點(diǎn)】
手部置頂、阿貍組合置底、設(shè)置手部尺寸變化、移動手部、隱藏眼睛和嘴。
【密碼框失去焦點(diǎn)】
移動手部、手部尺寸變化、顯示眼睛和嘴、等待手部動畫完畢、將手部置于頂層。
具體的數(shù)值需要根據(jù)自己制作的動畫去調(diào)整，方法不難，需要耐心。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。