连续 30 天 玩玩看 ProtoPie - Day 16

新的讲者在 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


<<:  Day 16 网页分析 - Web Application Analysis (网页内容扫描器 - DIRB )

>>:  [ Day 16 ] - 事件

DAY13 - [JS] 重新改写ToDoList

今日文章目录 需求说明 事前准备 重点说明 参考资料 DAY12练习ToDoList分类项目,遇到...

HTTP & HTTPS

HTTP 和 HTTPS HTTP是甚麽? 定义 超文本传输协定**(英语:HyperText Tr...

Day25 用python写UI-聊聊Text(二)

Text会讲三天,因为发现东西有点多,怕放在一篇会爆炸。 ♠♣今天的文章大纲♥♦ 复原与重复 搜寻 ...

Security 组别

Security https://wolkesau.medium.com/security-b198...

#23 JS: HTML DOM Events - Part 1

What is the Event? “HTML DOM events allow JavaScri...