iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
2
Modern Web

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

DAY 18-Daily UI 002 Checkout 實作分享 (Prototype)( 二 )

轉場到場景2後,要模擬打資料後的樣子,那模擬的頁面都已經有另外做好了,點擊訂購人的填寫框會轉場到已經填寫好資料的頁面。

點一下旁邊會讓鍵盤退下去,那這邊就選擇訂購資料的底框,添加觸發“單擊”,添加交互動作“移動”,屬性區圖層選擇鍵盤圖層,座標的部分可以先複製一個鍵盤,將他移出畫面外,就可以知道移出畫面外的座標是多少,複製他的Y軸座標數值,貼回剛剛移動屬性區的座標位,其他的設定就照預設。

接下來點擊 VISA 會展開 VISA卡,這邊直接轉到展開的頁面,一樣選擇 VISA 添加觸發單擊,再添加轉場到場景4。那鍵盤會遮到的話可以先將它隱藏,按圖層區的眼睛就可以暫時隱藏起來。

轉到場景4,這邊也是要模擬打完資料的樣子,先資料的屬性區把透明度調降至0%,選擇卡號的圖層添加單擊和交互動作“透明度”,屬性區的圖層選擇資料圖層,透明度的 bar 調至 100% 。

最後就是要讓使用者按確認,跳至完成頁面,所以和前面一樣的這定好就行了,基本上就完成了。

那這個作品就介紹到這裡囉,下一篇會介紹新的作品,掰掰囉喵!


上一篇
DAY 17-Daily UI 002 Checkout 實作分享 (Prototype)( 一 )
下一篇
DAY 19-Daily UI 006 User Profile 實作分享(一)
系列文
UI/UX/ProtoPie入門-喵喵設計師的學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言