axure制作小程序原型_使用Pixate制作健身应用程序的原型

axure制作小程序原型

在本教程中，我将教您如何创建移动应用程序设计的动画原型。 该原型将在您的手机上看起来像一个真实的应用程序； 您将可以使用手势和自定义动画浏览和滚动设计。

在本教程的最后，您将能够使用Pixate制作任何应用程序设计的动画原型版本。 让我们开始吧！

教程资产

对于本教程，您需要遵循以下三点：

• 我之前的教程中的iOS Fitness Application Sketch文件
• Pixate中的免费帐户
• 来自App Store的免费Pixate应用程序

为什么要使用Pixate？

在我看来，Pixate是设计人员可用来创建功能完整，自定义动画的移动应用程序原型的最佳工具，而无需编写任何代码。

与其他原型制作工具（例如Flinto或Marvel）不同 ，Pixate允许您分离图层并嵌入交互，例如拖动，点击，双击，滚动，捏等。

原型本身存在于网络上。 在本教程中，我们将使用Pixate的网络版本，但在手机上的本机应用程序中将获得最终结果，这将提供出色的流畅体验。

1.新的Pixate项目

在开始创建我们的第一个原型之前，我们必须在Pixate中设置一个新项目。

第1步

登录帐户后，单击“ 新建项目”按钮，然后选择“ 新建原型”选项。

第2步

在这里，我们可以选择要设计的设备的特定类型。 在这种情况下，让我们选择iPhone 6，因为我们在Sketch中为该特定设备设计了健身应用程序。

注意：我们还可以选择智能手表的屏幕尺寸，例如Apple Watch，LG G Watch或Moto 360。

2.导入资产到Pixate

Pixate允许我们基于各种事件和交互（例如屏幕加载，点击，双击或滚动）为原型中的每个对象设置动画。 这也意味着我们必须分别导出要在原型中进行动画处理的元素。

第1步

让我们打开Sketch文件，开始逐个导出每个元素。 如果查看最终的原型，可以看到在“ GO屏幕”的情况下，我分别导出了导航栏，标签栏，天气预报的每一列和目标圈。

您应该以PNG格式导出，因为透明层是关键。

提示：始终一次只聚焦一个屏幕。 在此过程的这一点上，您只应导出“ GO屏幕”的图层，这样将在需要时更轻松地进行操作和修改内容。

第2步

在Pixate中导入资产是将导出的PNG文件拖放到浏览器窗口中的问题：

第三步

现在，是时候在Pixate中重建屏幕了。 如果我们同时引用Pixate和Sketch中的Inspector面板，则可以更快地完成这项工作。 在这种情况下，我们只需复制并粘贴每个元素的X和Y值。

注意：请记住，我们的Sketch设计是在@ 2x分辨率下进行的，而在Pixate中，我们正在以@ 1x分辨率进行工作。 这意味着在应用到Pixate之前，我们必须将Sketch中的每个数字除以2。

3.动画GO屏幕

让我们在iPhone上打开Pixate应用程序，在这里我们可以看到我们的设计已经开始融合在一起。 从现在开始，每次我们在Web应用程序上进行更改时，它将自动同步到我们的手机。

第1步

选择天气预报的第一列后，我们可以在浏览器的左侧看到可用的动画类型。 让我们将Fade动画拖放到另一边，即右侧边栏。

第2步

现在，我们必须指定何时希望此动画出现。 将“ 基于”值设置为* SCREEN *，已加载 。

这意味着我们的动画将在第一个屏幕加载后立即播放，这在我们运行原型时立即发生。

第三步

由于我们的目标是产生淡入淡出的效果，因此让我们在“ 属性”面板上将初始不透明度设置为0％ ，在“ 动画”面板上将初始不透明度设置为100％ 。

第4步

在“ 动画”面板的底部，我们还可以设置缓动曲线，持续时间和延迟值。

您应该将持续时间设置在0.2-0.4s之间，但是这里没有官方的方法，因此我鼓励您使用这些值，直到您觉得它们是正确的为止。

注意：在我的原型中，我倾向于使用稍微慢一点的动画，以便可以更清晰地看到它们。 在真实的项目中，我建议您更快更细微的动作。

第5步

现在，让我们选择天气预报的第二列，并设置与之前完全相同的Fade动画 ，只有一个区别：这次将动画延迟设置为0.1-0.3s左右。 这样，动画将按顺序播放。

对要向其添加Fade动画的所有元素继续使用完全相同的方法，但是不要忘记不断增加动画延迟的值。

第6步

现在，让我们在目标部分中设置圆圈之间的交互。 为了能够在目标环之间水平滚动，我们必须将它们导入为三个单独的PNG文件。

将它们放置在正确的位置后，让我们在Pixate中创建一个新层 。 必须启用水平滚动。 在“ 属性”面板上，确保将外观设置为“ 无图像设置” 。 在向该图层添加任何交互之前，我们将“目标环” PNG文件添加到“ 图层”面板上的新图层 。 简单来说，这类似于Sketch中的“ 分组”工具。

现在，我们可以在这个新图层上添加一个“ 拖动”交互 ，并在“ 动画”面板 120pt 水平滚动”设置为最小位置： -255pt和最大位置： 120pt 。

步骤7

为了在水平滚动过程中产生小的弹跳效果，我创建了具有特殊条件的自定义动画。 首先，将“ 移动”动画添加到包含所有环形图层的最新图层。

现在，在“ 动画”面板中，将“ 基于”值设置为“ 目标设置”，然后将“拖动释放” 。

对于第一个IF条件，我使用以下公式： goal_settings.x > -255 && goal_settings.x < -67 ，这意味着如果目标组图层（图层ID：goal_settings）的位置大于-255 pt且小于大于-67 pt ，会将图层的左侧移至-67 pt点。

为动画我使用的弹簧缓和曲线与摩擦值 25和张力   600

我的第二个IF条件是： goal_settings.x <= -67 && goal_settings.x > -255 ，然后将图层的左侧移至-255 pt 。

第三个条件是： goal_settings.x > -67 && goal_settings.x < 150 ，然后将图层的左侧移至150 pt 。

最后但并非最不重要的一点是，最后一个IF语句是： goal_settings.x < 150 && goal_settings.x > -67 ，这会将图层的左侧移至-67 pt 。

注意：我知道这第一次看起来有点复杂，但是我建议您复制并粘贴我的解决方案并尝试一下，然后进行一些更改然后再试一次。 我的条件绝不是完美的，因此您甚至可以改善和调整它们，直到它们适合您。

步骤8

正如我们对目标环所做的那样，让我们​​创建另一个新层，并将到目前为止的每一层都放入其中。 现在，我们只是将“ GO屏幕”的各层分组在一起。

4.制作挑战屏幕动画

在开始在Pixate中导入和重建“挑战屏幕”之前，我们必须创建一个新层，该层将用作此屏幕上每个元素的组层。 让我们将其放置在“ GO屏幕”旁边，它们之间没有任何填充或间隙。

第1步

逐层导入并重建屏幕后，我们需要为挑战卡设置垂直滚动。

让我们创建一个没有图像背景的新图层 ，并将卡片层添加到其中。 垂直滚动甚至比水平滚动更容易，因为我们唯一要做的就是向此新图层添加Scroll交互 。

第2步

为了同时在我们的iPhone上看到“挑战屏幕”，我们必须返回到“转到屏幕”，并在选项卡栏上“挑战”按钮的顶部添加一个新的矩形层。

将外观设置为不填充图像，并向其中添加Tap交互 。 现在让我们返回，选择“挑战”组图层，其中包含“挑战屏幕”上的每个元素，并向其中添加“ 移动”动画 。

剩下要做的就是将“事件基于”事件设置为我们最近通过“ 点击”交互添加到“ GO屏幕”的按钮，并将“ 移至”值设置为0 pt 。 然后，当我们按下“ GO屏幕”上的挑战按钮时，“挑战”组图层将移至其适当位置。

第三步

为了给挑战卡制作动画，我们将同时使用两个动画，即淡入淡出和移动。 确保已将“ 基于”值设置为“挑战”按钮。

对于Fade动画，我们使用与GO屏幕相同的技术，因此让我们在“ 属性”面板上将“ 不透明度”设置为0％ ，并将“ Fade”设置为 value 动画面板上的100％。 在此期间，我使用了0.5s的延迟，即0.2s 。

注意：不要忘记不断增加每张卡的延迟值。

我们的第二个动画是Move动画 。 就像淡入淡出动画一样，让我们​​将“ 基于”值设置为“挑战”按钮，并使用与淡入淡出动画完全相同的动画持续时间和延迟。 现在，将“ 移动到顶部”值设置为10px ，这将在动画开始时将挑战卡向上移动10px。

由于动画结束时，每个挑战卡都将向上移动10px，因此我们必须在Pixate画布上将它们向下移动10px。

5.浏览挑战部分

第1步

让我们再次创建一个新层，其中将包含“浏览挑战”部分。 与“我的挑战”部分一样，让我们​​向其中添加“ 滚动”交互 。

第2步

为了能够在“我的挑战”和“浏览挑战”部分之间切换，我们必须在“浏览挑战”标题的顶部创建一个新层，该层将作为一个按钮使用。 将图层填充设置为“ 无图像集”，然后向其中添加“ 点击”交互 。

现在，如果我们返回到“浏览挑战”组图层（在上一步中创建），则可以基于此新按钮向其添加淡入淡出动画 。 因此，直到我们按下“浏览挑战”按钮，“浏览挑战”部分的不透明度为0％，而在点击后，其不透明度为100％。

第三步

作为最后一步，我在“浏览挑战”部分的时间轴进度栏中添加了“ 缩放”和“淡入淡出”动画 。

注意：别忘了为Fade和Scale动画使用完全相同的动画持续时间和延迟值。

6.动画活动屏幕

在开始为“活动屏幕”制作动画之前，我们还必须重复执行“挑战屏幕”的几个步骤。

第1步

让我们在“挑战屏幕”旁边创建一个没有任何填充的新图层。 该层将成为“活动”屏幕上元素的分组层。

第2步

现在，让我们回到“转到屏幕”，并在选项卡栏上“ 活动”按钮的顶部创建一个新层。 将Tap交互添加到此新层。

返回到“活动”组图层，并基于我们的新按钮向其添加“ 移动”交互 。

第三步

现在，将“ 淡入淡出”动画添加到“活动”屏幕上的每个结果中， 动画持续时间为0.4s ，结果之间的延迟为0.1s 。

注意：不要忘记将“ 基于”值设置为“活动按钮”，我们将其放置在“转到屏幕”上。

第4步

创建另一个小组图层，并在其中放置每个锻炼会话，第一个锻炼除外。 对于“ 向下移动”动画 ，我们将需要此功能，因为仅向下移动一层比一次向下移动六或七层要容易得多。

现在将Tap交互添加到第一个锻炼会话中，然后将Move动画添加到我们刚刚创建的组图层中。 在“动画”面板上，将“ 基于”值设置为第一次锻炼，然后在“ 277pt附近添加“ 移至顶部”值。 当我们点击第一次锻炼时，其他所有内容将在屏幕上向下移动。

第5步

对于锻炼详细信息视图，我仅在点击第一个锻炼会话的基础上使用了淡入淡出和移动动画。

一开始，只需淡入淡出并在背景中移动，然后是图形，最后是锻炼的特定数字和细节。

您应该在此处播放动画的持续时间和延迟时间。

恭喜你！

你真棒！ 您刚刚创建了第一个功能齐全的自定义动画Pixate原型。 遵循了本教程，我希望您对将Pixate用于移动应用程序原型更有信心。

我很想听听您对本教程的看法，并随时在评论中提出任何问题，我将在这里为您提供帮助和解答。

翻译自: https://webdesign.tutsplus.com/tutorials/prototyping-a-fitness-application-with-pixate--cms-23955

axure制作小程序原型