Origami Studio 教程十一 介绍母版 - 循环

使用循环复用常见的元素，能很大程度的减少原型复杂性，节省时间提交效率。

这个 Facebook 的通知原型包含一个循环通知，可编辑的文件图片、文本、时间和字符。下载教程文件。

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

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

▲▲

1. 手动复制

上面提到的图层都已经在教程文件中准备了，但只有第一条通知。如果我们想在没有循环的情况下多添加几行通知，可以复制 Cmd C 并粘贴 Cmd V Notification 组。

但是这个过程很繁琐，尤其以后要编辑格式样式等得一条一条改，那就太可怕了！

▲▲

2. 用循环啦

循环可以以一个通知为实例，重复使用这个实例，相当于母版。如果要在所有通知中改变一个元素，只需要调整一次，其他的通知也会自动调整。

添加一个 Loop 模块到编辑器。

循环的位置

这个原型种需要6个通知，所以将 Loop 模块的 Count 值改为 6。这6个通知是垂直方向排列的，所以将 Loop 模块的 Index 输出口连接到 Notification 图层组的 Position Y 属性。

隐藏 Chrome 图层组会显示叠在一起的 6 个通知。实际上下一条通知距离上一条的垂直距离有 1pt。这是因为 Loop 模块给出了从 0 开始的 6 个值和数字，它们直接连接到 Notification 图层的Y位置。

▲ 左边为 Loop 模块对应的 Count 值，右边为给出的 Position Y 值。

给每个循环之间添加位置和间距

已知 6 个 Notification 组有相等的高度 80pt。也知道 Index 值是 0 到 5 。因此，需要将索引乘以 80，使它们相互间隔 80pt。

添加一个 × 模块快捷键 X 到 Loop 模块和 Notification 模块中间，× 模块的第二个值输入80。

索引值乘以 80 ，垂直定位通知列表 。尝试将值从 80 改为更高或更低实现不同的效果。

▲▲

3. 整体移动

循环的顶部现在和 Chrome 组叠在了一起，需要移动到 Chrome 组下面来。添加一个 + 模块，快捷键 +／= 。

把 + 模块插到 × 模块和 Notification 模块中间。× 模块的输出口连接到 + 模块的第一个输入口。

▲ 新连接替换旧连接。

显示 Chrome 组。在 + 模块的第二个输入口填写 Chrome 组的高度值，这样通知列表就能刚好显示在 Chrome 组下面。

▲ 重新启用 Chrome 可视化计算此值。

▲▲

4. 让每列显示的字段不一样

到目前为止，只实现了改变 Notification 实例的Position 属性。要怎么让每个通知实例显示的元素不一样了，比如头像啊？

在教程文件中，应该有一个名为 Profile Picture 的文件夹。将文件夹拖入编辑器。

Origami 将用这些图像创建一个 Loop Builder 模块，每个图片都是一个输入口。

▲ 一个自动创建的 Loop Builder 模块。

将Loop Builder 模块的 Images 输出口连接到图层窗口中头像图层 Profle Picture 的 Image 属性上。哒哒～头像们就变成步一样的了。

Loop Builder 模块循环每个 Notification 实例，并按顺序为每个实例分配一个图片。用 Timestamp Glyph 也可以相同的事，打开教程文件夹，将Icons 文件夹拖入编辑器。

将生成的 Loop Builder 模块 Image 输出口连接到Timestamp Glyph 图层的 Image 属性。注意看字符就跟头像一样更新了。

Loop Builder 和 Loop 模块之间的区别是Loop Builder 模块提供了一个索引以及一个图层类型。在这个教程中是图像。

除了图片的其他内容替换

除了直接拖文件夹，也可以通过模块库添加 Loop Builder 模块。模块上右键，Number of Inputs 改为6，类型 Type 改为文本 Text。

▲ Loop Builder 模块支持各种输入类型。

用这个新的 Loop Builder 模块来替换每个实例上的 Notification Text 文字，进入下一步之前，在左侧输入口随意填写一些文字。接下来，将 Loop Builder 模块的的 Strings 输出口连接到 Notification Text 图层的 Text 属性。

查看器中可以看到已经用新内容填写 Notification Text 的文字了。

接下来，复制一个刚刚的文字 Loop Builder 模块，按住 Alt 拖动模块复制。不是添加另一个新建一个。

▲ 复制的模块将保留输入口数量和类型。

改变输入口的值，再将输出口连接到 Timestamp Text 图层的 Text 属性。

现在应该有 6 个值不一样但格式一样的通知了。

完成。

来源：UI中国

关键字：产品经理

版权声明

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