新的讲者在 Sky 工作,要来跟我们讲怎麽做有逻辑判断的互动设计。
这次会做三个范例:
来吧!
选择这 Settings 这个 Scene 。
接着我们主要会使用之前用过很多次的输入栏位:名字、密码、密码确认,这三个。
(我已经把名称改为「您的名字」、「您的密码」与「请再次输入密码」)
以及一个 Error 的 layer ,会在我们密码两次输入不同的时候,作为提示用。
我们先选择「您的密码」。
选择 Focus 这个 Trigger ,设定为 Focus Out 给 「请再次输入密码」。
接着点开平常点 Response 的地方,拉到最下面就是 Condition 。
我们想要判断两个密码输入是否相同,因此先选择「您的密码」。
接着选择判断 text 。
(这边突然发现可以判断的东西好多,位置、透明度、圆角...等)
然後选择「=」等於。(已经是预设)
再来选择「请再次输入密码」。
这边一样选择判断 text。
这边的判断式,代表两个密码输入完全相同的时候,我们希望 Error 这个 Layer 透明度为0 。
所以我们就在底下加上一个 Opacity 的Response 。
输入 Error 就能搜寻到(如果 Layer 很多,命名清楚就很方便)。
那如果两个密码「=/=」不等於的时候呢?
这时候我们只要同时选择刚刚做完的 Condition ,按 cmd+c 复制再按 cmd+d 贴上,就能直接改设定了。
把第二个 Condition 改为不等於。
第二个 Opacity 改为 100 。(透明度100就会出现的意思)
这两个 Condition 这样很容易混乱,所以 ProtoPie 提供你改名的机制,我们就来改一下。
用 Preview 看一下,果然***长度不同的时候***,就会跳出 Error 这个 Layer 来提示。
好,那如果密码相同的时候,点下 Save 我们就要跳转到另外一个画面。
因此我们选择 Save 这个Layer ,选择 Tap 这个 Trigger 。
然後就跟前面一样,我只是要判断密码相同,我可以直接复制上方的 Condition 下来。
删掉 Opacity 并选择 Jump 这个 Response ,并选责 IoT home 这个 Scene。
Preview 来测试一下,输入一样的密码之後...
跳转成功!
要来喂猫了,先这样 ker
<<: Day 16 网页分析 - Web Application Analysis (网页内容扫描器 - DIRB )
今日文章目录 需求说明 事前准备 重点说明 参考资料 DAY12练习ToDoList分类项目,遇到...
HTTP 和 HTTPS HTTP是甚麽? 定义 超文本传输协定**(英语:HyperText Tr...
Text会讲三天,因为发现东西有点多,怕放在一篇会爆炸。 ♠♣今天的文章大纲♥♦ 复原与重复 搜寻 ...
Security https://wolkesau.medium.com/security-b198...
What is the Event? “HTML DOM events allow JavaScri...