Origami Studio 教程 第七节切换屏幕
创建屏幕切换流程。
在 Origami 中创建屏幕流程比你想的要容易得多，屏幕还可以进行复杂的交互。
本篇教程将搭建 Instagram Boomerang 的界面，其中一个页面还有滚动。甚至有一些高级的 iOS 行为，如屏幕移动时的偏移。
开始前先下载好安装文件和教程文件。底下的网盘链接里有安装文件 、一个案例文件夹、一个教程文件夹；按自己的需要下载。
选择教程文件中对应名称的文件夹下载，内包含一个（开始）和一个（已完成）文件；（开始）文件用来和教程同步操作，（已完成）是最终结果。
▲▲
1. 屏幕
教程文件中已经创建三个屏幕层了。如果需要添加更多屏，按 Shift Cmd N 打开新图层下拉框，在控件类图层中找到 Screen 点击添加。
▲▲
2. 屏幕的启动状态
屏幕默认情况下是显示，所有的屏幕都重叠在一起。选中 Screen Share 图层，将属性 Start State 的值改为 Dismissed。
点击查看器工具栏中的 “重启” 按钮重启原型。
然后将 Screen Boomerangs 图层的属性 Start State 的值也改为 Dismissed。重启原型。
▲ 现在应该能看到默认屏 Screen Main ，其他屏被隐藏了。
最后一个屏是 Screen Main。一个常规的组层，因为它不会去任何地方。
▲▲
3. 连接屏幕
第一个跳转是从 Screen Main 跳转到 Screen Boomerangs。我们需要点击一个点击区域来启动跳转。
Screen Main 组内有一个名为 Open Boomerangs 的热区，覆盖在查看器中的缩略图上。给这个热区加一个 Tap 交互模块。
将交互模块的 Tap 输出口连接到 Screen Boomerangs 图层的状态属性 Present 上。
不用添加 Switch、Pop animation 和 Transition 模块，因为 Screen 包含了这仨呢。
返回的连接
下一步还得瞅瞅咋回到 Screen Main 页面。Screen Boomerangs 内部已经创建了一个命名为 Dismiss Boomerangs 的热区。
跟上一步一样，给这个热区加一个 Tap 交互。
这个新的 Interaction 模块将会影响 Screen Boomerangs 图层。点击并拖动新 Interaction 模块的 Tap 输出口连接到 Screen Boomerangs 图层的状态属性 Dismiss。
现在点击关闭按钮应该会回到 Screen Main，点击缩略图再次打开 Screen Boomerangs。
▲▲
4. 改变过渡类型
一个小细节，在这个原型中 Screen Boomerangs 页面是从右像左显示，而在真实的应用中是从下往上显示。Origami 支持这两种切换类型。
选中 Screen Boomerangs 图层，将属性 Transition 的值从 Push 改为 Modal。
再试着点击一下，Screen Boomerangs 从下往上显示，从上往下关闭。
▲▲
5. 整理流程
最后一个屏幕叫 Screen Share ，是放大列表中的第一个图。跟前面一样，已经有一个叫 Open Share 的热区，在 Screen Boomerangs 下的 Boomerangs 组内。
给热区 Open Share 添加一个 Tap 交互。将 Tap 输出口连接到 Screen Share 图层的 Present 属性。
点击第一张图现打开 Screen Share 。最后要在 Screen Share 页面上添加一个返回到 Screen Boomerangs 页面的交互。
找到 Screen Share 组内名为 Dismiss Share 的热区，给这个热区添加 Tap 交互，连接到 Screen Share 的 Dismiss 属性。
▲▲
6. 屏幕间的交互
整个流程就完成了。想在屏幕里添加其他的交互也很简单。例如，让 Boomerangs 页面的列表可以滚动。Boomerangs 组的高度需要超出屏幕。
展开图层窗口中的 Screen Boomerangs 组。给 Boomerangs 图层添加 Scroll Y 交互。
▲▲
7. 偏移
屏幕切换过程中的偏移是标准的 iOS 转换行为，但对创建屏幕流程没有影响，只是一些细节性的
来源：UI中国
关键字：产品经理
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
