原子和非原子oc_了解如何在原子中创建原型

原子和非原子oc

原型制作应该是一种快速，简便的方法，可以使您对设计充满信心。 原型制作不再只是纯粹地添加运动魔术或过度抛光设计的一种方式，而是一种交流工具。 无论是与利益相关者，设计经理还是用户沟通，一个好的原型都有助于传达设计决策和测试想法。

我们的原型

在本教程中，我们将在Atomic中创建一个基本的“登机牌”原型， 您可以在此处进行预览 。 原型从加载状态开始，然后使您能够浏览即将到来的航班并预览登机QR码。 为了创建这个原型，我们将使用交互式组件，数据，变量和页面过渡。 不要担心！ 我会在每个步骤中为您提供帮助。

这是我们将创建的演示：

教程资产

您需要遵循以下几点：

1. Atomic帐户 ：免费试用（还有免费计划）。
2. 设计资产 ：这是您可以在其中找到设计资产并创建原型的文件。
3. 数据源 ：一个Google表格文件，其中包含我们将在原型中使用的数据。
4. Atomic iOS应用程序 ：从App Store下载该应用程序以在手机上测试您的原型。

如果在本教程中的任何时间有任何疑问，请随时与我（ @femkesvs ）或Twitter上的Atomic支持团队（ @we_are_atomic ）联系。

我们走吧！

1.将资产复制到您的帐户

我已经创建了一个示例文件，其中包含创建原型所需的资产。 该样本文件包含我们将要使用的资产以及预构建的组件。

您可以在此处访问资产 。 要使用资产，您需要将原型复制到您的帐户中。 您可以通过单击右下角的“ 复制并编辑 ”，然后选择要复制到的项目来执行此操作。 我建议为本教程创建一个新项目。

2.将数据上传到原子

在开始创建原型之前，我们需要首先将数据源添加到Atomic。 我将Google表格与一些基本数据放在一起，这些基本数据将在原型中使用。

您可以在此处访问数据 。 在数据源打开的情况下，转到文件>添加到我的云端硬盘 （为此您需要一个Google帐户）。

接下来，在Atomic中打开项目，然后选择“ 数据”选项卡。 从此处单击导入数据 ，然后通过搜索找到数据源。 找到后，选择数据源。 您会看到Atomic将数据加载到您的项目中。 现在可以在项目内的任何原型中访问和使用此数据源。

我们准备好了！

3.创建加载状态

让我们开始通过创建加载状态来组装原型。 我们将通过创建自定义过渡和基于时间的页面操作来完成此操作。

首先，从“资产”页面中选择加载组件以将其复制（CMD-C，然后粘贴（CMD-V）到页面1）。它将很大，而不是调整大小，而是将其放置到起始位置。

然后复制刚在第1页上放置的加载元素，这次将其粘贴在第2页上。将其重新放置到最终状态（顺时针旋转75°，以使平面位于画布的右侧）。

要创建过渡，请跳回到第1页。在右侧的属性面板中，您将看到一个名为Page Actions的部分。 单击加号按钮，然后设置以下内容：

• 使事情发生：在设定的时间之后
• 等待：0
• 前往：第2页
• 运动：自定义过渡
• 缓和：缓入缓出
• 持续时间：2000

让我们预览一下并观察我们的操作过渡-您应该在两秒钟的时间内看到飞机从左向右滑动。 整齐！

为了更进一步，您还可以将Fly徽标复制并粘贴到页面1和页面2（在页面面板中的加载组件下方并置于其后）。 确保使用相同的技术将其放置在每页的开始和结束位置。 您可能必须调整图层的顺序才能使其从后面出现。

最后，我们需要创建一个动作，该动作将使用户自动从页面2跳到页面3。在页面2上，添加另一个定时页面动作。 这次，我们将使用以下设置：

• 使事情发生：在设定的时间之后
• 等待：1000
• 回家
• 运动：向上滑动
• 缓和：缓入缓出
• 持续时间：300

提示 ：如果您想错开动画的两个元素的时间，可以使用“ 高级运动时间轴”来完成 。

4.了解组件

接下来，复制第3页所需的元素并将其粘贴到第3页。您需要进行一些重新排列和调整，以根据需要适合页面上的元素。

此页面所需的几乎所有元素都是组件。

关于组件的一句话

原子中的组件就像符号。 任何组件都可以在整个项目中进行编辑和重用。 对组件所做的任何编辑都会在每个实例中更新。 组件也可以是交互式的，并且可以包含符号的多个状态。 这使得构造原型非常容易。

让我们向boardingPasses组件添加一些交互性。 要打开组件，请双击图层面板中图层名称旁边的组件图标。 打开后，您将看到三页。 一个代表每个航班。 目前这些通行证是相同的，很快我们将对其进行更改。

我们知道用户有3个航班，我们希望他们能够在每个航班上滑动。 还有一个QR码图标，当与之互动时，应显示其登机牌密码。

如果您在“图层”面板中查看，您会发现每个页面都是一个名为“ boardingCard”的组件的实例。 现在让我们打开boardingCard组件，看看如何应用数据。

5.使用数据

boardingCard组件是嵌入在组件中的组件。 这使我们可以创建一个登机牌符号，在显示不同数据集时可以重复使用。

打开boardingCard组件，您将看到两个页面； 通行证的正面和背面。 这是将数据分配给各个文本元素的地方。

选择ABC文本，然后查看“ 文本”属性 。 您会注意到以下内容：

• 内容：从数据列设置
• 数据：继承自父对象
• 列：出发代码

随后，如果您查看从中提取此数据的Google表格 ，则会看到标题为“出发代码”的列。 这意味着文本元素ABC将显示“出发代码”列中显示的所有数据。

此组件中的所有动态文本均已设置为Inherit from parent 。 这使我们可以在组级别链接到数据表，因此可以逐行显示和分类数据。 我们将尽快解决。

6.添加翻转交互

接下来，我们将建立一个基于页面的过渡，以便在通行证和QR码之间切换。 在boardingCard组件的首页上，按H调出热点工具。 然后，在首页的QR码图标上绘制一个热点。

热点使您可以定义原型的交互区域。 选择热点后，在“交互”面板下设置以下内容：

• 手势：单击或点击
• 转到：>下一页
• 动作：翻转
• 缓和：缓入缓出
• 持续时间：300MS

然后，在底页上，创建另一个热点（H），它将使我们回到首页。 这次将其绘制在关闭图标上并进行以下设置：

• 手势：单击或点击
• 转到：>上一页
• 动作：翻转
• 缓和：缓入缓出
• 持续时间：300MS

是时候测试您的互动了！ 在右下角，按“ 预览”按钮。 预览模式使您可以测试过渡并通过热点与原型进行交互。 尝试点击QR卡或关闭图标； 该卡应在两种状态之间翻转。 您可以通过按X关闭预览。

将此登机牌用作交互式组件，使我们可以选择动态显示哪些数据，而不必创建多个状态和交互。

7.将数据连接到父级

要返回，请单击左上方的紫色后退按钮。 现在您应该回到boardingPasses组件。 在此组件中，我们当前有三遍显示相同的数据。 让我们现在更新它。

还记得在boardingCard组件内部如何将数据设置为Inherit from parent吗？ 在这种情况下，父级是组件实例。

在广告投放1页面上，选择boardingCard实例。 在组件属性中，保持“ 状态 ”不变。 在“ 数据”下 ，选择数据源，并确保将“ 行”设置为第1行。实例现在应显示数据表第一行中的数据。

如果您切换该行，则会注意到显示的数据正在更新。 现在让我们将其保留在第1行，但是在第2和第3排中将其设置为分别显示第2行和第3行的数据。

8.添加滑动手势

为了使用户能够刷卡登机牌，我们需要设置一些刷卡互动。

在广告投放1页面的右侧创建并绘制一个热点（H）（确保在boardingCard组件背面的关闭图标上方的热点顶部留出一些空间，并且不会）不能覆盖首页上的QR码）。 要创建滑动手势，请使用以下设置：

• 手势：向左滑动
• 滑动距离：200
• 转到：>下一页
• 运动：向左推
• 缓和：缓入缓出
• 持续时间：300MS

在广告投放2页面上执行相同操作，然后在广告投放2和广告投放3的左侧添加第二个热点，分别设置为向右 推和向左推 。 随时按预览以测试组件并与之交互，并相应地调整滑动设置。

9.创建一个变量

为了完成原型的构建，我们需要创建并使用一个变量。 此变量将使我们的组件可以相互通信，同时影响它们的状态。

我们将创建的变量将用于根据显示的登机牌更新进度点。

要创建变量，请按V打开“ 变量模态” 。 在此处单击“ 创建新变量 ”，然后在“ 名称”字段中键入“ flightDisplayed”。 将默认值留空。

太好了，您已设置好变量！ 关闭变量模态按X或键盘上的Escape。

10.使用变量

导航回到原型。 如果我们现在从主页上进行预览，则您应该能够在卡之间滑动并与QR码进行交互。

现在，我们可以轻扫通行证，但还有其他几项需要配置的内容，以影响进度点，以便根据登机牌的进度进行更新。

为此，请打开boardingPasses组件。 在页面1上，我们创建以下页面操作：

• 设定时间后
• 等待：0
• 设置：flightDisplay（变量）
• 致：价值...
• 价值：1

在第2和3页上重复此操作，确保将值设置为2或3以反映您所在的页面。

我们已经有效地告诉组件boardingPass根据显示的航班（页面）更新变量flightDisplayed的值。 现在，我们可以使用该值来影响进度点的状态。

方法如下：回到原型并打开progressDots组件。

您会注意到三个页面（状态）分别命名为1、2和3。此命名与flightDisplayed变量中设置的值匹配。 这些页面名称必须与设置的值相匹配，这一点很重要。

回到原型，选择progressDots组件，然后：

1. 在属性面板的“ 组件”部分中，打开“ 状态”下拉列表。
2. 选择flightDisplayed变量。

现在，我们已经将progressDots组件连接到变量flightDisplayed。 这意味着当变量的值更改为值时，progressDots组件将显示与变量值匹配的页面。

现在尝试预览您的原型，通过滑动并查看进度点是否更新来与登机牌进行交互。

最后，您可以删除或移动“资产”页面，以确保共享预览在正确的起始页面上打开。 要删除页面，请选择页面缩略图上的汉堡菜单，然后单击“ 删除页面” 。

提示 ：查看您是否可以根据显示的航班确定如何获取promoCard组件以更新其状态。 您将要创建一个名为cardDisplayed的新变量。

-

你有它！ 您自己的登机牌应用程序。 如果您下载了iOS App，请尝试打开原型并在iPhone上进行交互； 它应该感觉就像真实的东西。

在完成本教程之前，做得很好。 您现在应该对如何在Atomic中创建自己的原型有透彻的了解。 如果Sketch中已有资产，则可以使用Atomic Plugin for Sketch导入它们，也可以根据需要在Atomic中进行原生设计。

有什么问题吗 注释？ 将它们留在下面，或通过Twitter（ @femkesvs ）与我联系 。

翻译自: https://webdesign.tutsplus.com/tutorials/learn-how-to-create-a-prototype-in-atomic--cms-29155

原子和非原子oc