iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
1
Modern Web

UI/UX/ProtoPie入門-喵喵設計師的學習日記系列 第 9

DAY 09-Daily UI 001 Sign Up 的實作分享(Prototype)

上一篇已經介紹過設定框裡的功能,那我們開始製作 Sign Up的prototype吧。

這次的Sign Up是很簡單的兩頁切換,我想要讓使用者可以隨意切換Sign Up和Sign In頁面,所以我要讓首頁的Sign In鍵按了可以換到Sign In頁面,Sign In頁面的Sign Up鍵也可以回到Sign Up頁面。

那我們就點選Sign In物件,這時候會他的右邊會跑出藍底白色的箭頭,按著箭頭拉到第二個Artboard,Trigger就用預設的Tap,Action也是預設的Transition,Destiantion是我們剛剛選擇的第二個Artboard,所以不用再設定,Animation的話,想讓他向上推出去,所以選擇Push Up,下面的Easing和Duration也是用預設的就好,最後的Preserve Scroll Position就不用勾選,因為這次的設計本身就不是滾動頁面。

那Sign In頁面的Sign Up鍵也是要連回Sign Up頁面,一樣的方式做設定,但我想讓這一頁是推回去的感覺,所以Animation是要選Push Down。

都設定好可以按右上角的三角形,可以預覽剛剛設定的效果。
https://ithelp.ithome.com.tw/upload/images/20181024/20112491fFCAvzFmDb.png

那我們來看看效果吧,沒什麼問題就完成囉!

右上角手機icon的這個鍵是可以在手機上看prototype,但是要先下載XD Mobile Apps才可以使用。
https://ithelp.ithome.com.tw/upload/images/20181024/20112491nQSNC5xAnu.png

右邊的分享鍵是可以發表分享檔案,建立連結就可以傳給別人看,還可以在網路上討論,非常方便。
https://ithelp.ithome.com.tw/upload/images/20181024/20112491Akh0RxtSQ2.png

那今天的prototype實作分享就到這囉,有什麼問題想討論回饋都可以在下面留言喔,那我們明天見囉喵!


上一篇
DAY 08-Adobe XD Prototype模式介紹
下一篇
DAY 10-線上設計師平台介紹-Lymma
系列文
UI/UX/ProtoPie入門-喵喵設計師的學習日記30

尚未有邦友留言

立即登入留言