iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
自我挑戰組

ProtoPie 摸一摸系列 第 16

連續 30 天 玩玩看 ProtoPie - Day 16

  • 分享至 

  • xImage
  •  

新的講者在 Sky 工作,要來跟我們講怎麼做有邏輯判斷的互動設計。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941mDQMwpKwiz.png

這次會做三個範例:

  1. 判斷兩次密碼輸入是否相同(使用 Condition)
  2. 滑動畫面的時候,下方的的點點會變換位置 (使用Chain)
  3. 滑動畫面的時候,每變換一個就會播放裡面的影片(使用 Range)

https://ithelp.ithome.com.tw/upload/images/20211001/20141941aAEBOXTYaV.png

來吧!

判斷兩次密碼輸入是否相同

選擇這 Settings 這個 Scene 。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941M8aBPfyHEv.png

接著我們主要會使用之前用過很多次的輸入欄位:名字、密碼、密碼確認,這三個。
(我已經把名稱改為「您的名字」、「您的密碼」與「請再次輸入密碼」)
以及一個 Error 的 layer ,會在我們密碼兩次輸入不同的時候,作為提示用。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941vfQlG31cyO.png

我們先選擇「您的密碼」。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941D2Y6Lf2RtT.png

選擇 Focus 這個 Trigger ,設定為 Focus Out 給 「請再次輸入密碼」。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941XWmvsodKvu.png

接著點開平常點 Response 的地方,拉到最下面就是 Condition 。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941OpHvtBsJfZ.png

https://ithelp.ithome.com.tw/upload/images/20211001/20141941TIoyCL77f5.png

我們想要判斷兩個密碼輸入是否相同,因此先選擇「您的密碼」。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941MEzzED7ejE.png

接著選擇判斷 text 。
(這邊突然發現可以判斷的東西好多,位置、透明度、圓角...等)

https://ithelp.ithome.com.tw/upload/images/20211001/20141941yieYcnlx6F.png

然後選擇「=」等於。(已經是預設)

https://ithelp.ithome.com.tw/upload/images/20211001/20141941hfdWYCSIho.png

再來選擇「請再次輸入密碼」。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941M7sp1pFu8q.png

這邊一樣選擇判斷 text。

https://ithelp.ithome.com.tw/upload/images/20211001/201419415mtBRdm8oz.png

這邊的判斷式,代表兩個密碼輸入完全相同的時候,我們希望 Error 這個 Layer 透明度為0 。

https://ithelp.ithome.com.tw/upload/images/20211001/201419414NXqZSupKm.png

所以我們就在底下加上一個 Opacity 的Response 。
輸入 Error 就能搜尋到(如果 Layer 很多,命名清楚就很方便)。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941QWu0fLQTJG.png

那如果兩個密碼「=/=」不等於的時候呢?

這時候我們只要同時選擇剛剛做完的 Condition ,按 cmd+c 複製再按 cmd+d 貼上,就能直接改設定了。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941J35dQUsLcA.png

把第二個 Condition 改為不等於。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941IJDyGssod1.png

第二個 Opacity 改為 100 。(透明度100就會出現的意思)

https://ithelp.ithome.com.tw/upload/images/20211001/201419419bcBlcCImN.png

這兩個 Condition 這樣很容易混亂,所以 ProtoPie 提供你改名的機制,我們就來改一下。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941VATRm2Xhmq.png

用 Preview 看一下,果然長度不同的時候,就會跳出 Error 這個 Layer 來提示。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941IzJ2HJagEY.png

好,那如果密碼相同的時候,點下 Save 我們就要跳轉到另外一個畫面。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941FPdBIbyQ6d.png

因此我們選擇 Save 這個Layer ,選擇 Tap 這個 Trigger 。

https://ithelp.ithome.com.tw/upload/images/20211001/20141941fKR9BMbu8d.png

然後就跟前面一樣,我只是要判斷密碼相同,我可以直接複製上方的 Condition 下來。

刪掉 Opacity 並選擇 Jump 這個 Response ,並選責 IoT home 這個 Scene。

https://ithelp.ithome.com.tw/upload/images/20211001/201419414ftSHGiw4H.png

https://ithelp.ithome.com.tw/upload/images/20211001/20141941JcuZrhSoOm.png

Preview 來測試一下,輸入一樣的密碼之後...

跳轉成功!

https://ithelp.ithome.com.tw/upload/images/20211001/20141941aWhAP2t75i.png

https://ithelp.ithome.com.tw/upload/images/20211001/20141941r16S17FvRd.png

要來餵貓了,先這樣 ker


上一篇
連續 30 天 玩玩看 ProtoPie - Day 15
下一篇
連續 30 天 玩玩看 ProtoPie - Day 17
系列文
ProtoPie 摸一摸30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言