Origami Studio 教程 - 第四节 添加逻辑

给过渡和流程添加逻辑。

有时候我们希望原型上的交互只在特定的的情况下发生 - 当布尔值为真或假时，或者让多个事物控制一个交互，比如两个不同的按钮具有相同的效果。

这种行为称为添加逻辑，我们将通过构建一个《Instagram 直接发送消息》原型来学习如何在Origami 中添加逻辑。

开始前先下载好安装文件和教程文件。底下的网盘链接里有安装文件 、一个案例文件夹、一个教程文件夹。

选择教程文件中对应名称的文件夹下载，内包含一个（开始）和一个（已完成）文件；（开始）文件用来和教程同步操作，（已完成）是最终结果。

▲▲

1. 需要懂代码吗？

不需要。

如果已经会如JavaScript、Framer （CoffeeScript）之类的程序语言， Origami 可能跟它们有些不一样。建议先上一篇阅读《和代码的区别》。

▲▲

2. 设置

打开教程文件时，里面已经创建了一些核心交互。

▲ 教程文件打开时是这样的。

这个原型的基础是以Instagram的直接发送消息功能为中心。

我们有 Send To 按钮用来打开了 Modal 图层组 ，Cancel 图层用于关闭 Modal 。

原型包含 Direct Messages Hit Area，这个图层用来交互并连接到 Switch 模块的 Tun On 接口，点击 Cancel 图层激活 Switch 模块的 Turn Off 接口。

▲▲

2. Or 或

理想情况下，点击 Color Fill （等于空白区域）也将关闭 Set to 图层。将鼠标悬停在 “Color Fill” 图层上，然后单击 “Touch” 菜单下的“Tap”。

模块编辑器中出现了一个新的 Interaction 模块。

在查看器中点 Color Fill 图层，可以看到新加的 Interaction 模块已经被监听了。

▲ 盯着 Interaction 模块的 Down 和 Tap 输出口点击 Color Fill 图层。

最终要实现点击 Cancer 或 Color Fill 关闭开关。需要一个 Or 模块来合并这两个选项。

添加模块 Or 快捷键 Shift O 。将 Cancel 图层的 Interaction 模块 Tap 输出口连接到 Or 模块上，Color Fill 图层的 Interaction 模块也一样连接到 Or 模块。

现在应该能看到，当我们点击 Cancel 或 Color Fill 中的任意一个时，Or 的输出将被触发。

▲ 点击时盯着看模块的输出输入。

用 Or 替换

我们目前只有 Cancel 图层的 Interaction 模块 Tap 输出口连接到 Turn Off - Switch。

将 Or 模块的输出连接到 Switch 的 Turn Off 输入来替换该连接。

现在当我们点击Color Fill 或 Cancel 时，关闭开关。

准备更多逻辑

默认情况下，Color Fill 层的尺寸继承查看器的完整高度和宽度。

这意味着点击 Sent To 上的任意位置（不只是Cancel）都能触发 Switch 模块关闭 Modal 图层。

为了避免这种情况，我们需要先知道 Sent to 迪点击的时间。选中 Sent To 图层，点击 Touch 菜单中的 Tap 给 Sent To 图层添加一个 Interaction。

模块编辑器上的新 Interaction 模块将会检测到在 Sent To 上的所有点击。

▲▲

3. Not 非

如果点按了 Color Fil 或 Cancel ，希望 Switch 关闭，但是 非 Sent To 图层被点击时。

连接 Sent To 图层的 Interaction 模块 Tap 输出口到 Not 模块的输入口。在查看器中点击 Sent To 图层，注意观察 Not 模块。脉冲将短暂出现在 Not 模块上，分别是当图层被点击和 非 被点击时。

▲▲

4. And 和

当 Cancel 或 Color Fill 被点击时，开关应该关闭，和 非 Sent To 被点击时。Origami 有一个 And 模块用于种目的。

添加一个 And 模块 Shift A 。

将 Or 模块的输出口连接到 And 模块的输入口。然后将 And 模块的输出口连接到 Switch 模块的 Turn Off。

▲ 建立一个已经存在的新连接将替换旧的连接。

这些连接和排序允许检查以下流程逻辑：

• Cancel 图层 或 Color Fill 是否被点击？

• 和 有其他的事件发送么？

现在可以将 Not 模块的输出口连接到 And 模块的第二个输入口，以完成最后一个逻辑。

▲ 三个逻辑补丁最后的状态。

现在要检查的最后的逻辑是：

• Cancel 图层 或 Color Fill 是否被点击？

• 和 非点击到 Sent To 图层？

点击 Color Fill 上的 Send To 区域时，Modal 不会关闭。点击Cancel 或 Color Fill 的其他区域时, Modal 会关闭。

来源：UI中国

关键字：产品经理

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！