如何使用Origami Studio构建移动应用程序原型

在用户对Web和移动体验有很高期望的世界中,原型设计和用户评估是关键。现在常见的是逐步迭代原型,具有越来越高的保真度和蓬勃发展用户体验围绕这一重要活动的行业已经成长起来。最终,在原型设计阶段获得正确的软件可以节省您的时间和/或金钱。

您可以采用许多方法进行原型设计,还有许多工具可以提供帮助。最新的一个是折纸工作室,由Facebook开发,免费提供macOS。

Origami Studio在成为独立工具之前,实际上作为Quartz Composer(macOS Xcode开发环境中的可视化编程语言)的插件开始,在过去的一年中引起了极大的关注。

这不仅是因为它是由一个大牌开发人员构建的,而且还因为它为开发高保真,交互式原型带来的功能和简单性的结合。

按照以下步骤来了解使用Origami Studio构建原型的难易程度。

01.一个新的原型

Start by creating a new iPhone 8 prototype

首先创建一个新的iPhone 8原型

我们将为移动应用程序创建一个原型,这将允许我们浏览猫的图片并“喜欢”其中一些。一旦我们安装了Origami Studio,我们将从启动画面创建一个新的iPhone 8原型。

02.添加图层

我们可以立即开始为我们的原型添加一些图层。在这种情况下,我们将添加一个位于屏幕顶部的徽标。我们使用右上角的+按钮添加图层并选择“图像图层”。然后,我们可以通过突出显示和修改图层的属性来适当调整大小和位置。在我们的品牌之后,我们还会在屏幕底部添加一个心形图像作为我们的“喜欢”按钮。

03.创建互动

For interactions you'll need to create a patch

对于交互,您需要创建补丁

我们需要让心形按钮响应用户交互。您会注意到,在预览窗口中,光标会更改为表示移动设备上的触摸。为了回应这个问题,我们需要创建一个“Patch”,它实际上是Origami中的一个功能,它接收输入并产生输出。双击空灰色区域以显示新补丁列表,并搜索“交互”。放置你的补丁,它应该出现在屏幕上。

04.将交互链接到图层

Change the patch properties so that it only responds when you click in the right place

更改修补程序属性,使其仅在单击正确位置时响应

目前,您的补丁将响应原型上的任何位置。通过单击测试它,您将看到“向下”和“点击”属性实时更改。如果在修补程序中选择“图层”属性,则可以将其链接到包含心脏图像的图层,现在它将仅响应该特定区域的点击。

05.动画

A pop animation will give users a bit of visual feedback

流行动画将为用户提供一些视觉反馈

现在我们想要在我们的交互触发时发生一些事情。创建另一个补丁,这次是'Pop Animation'。这用于创建弹性效果。暂时保留属性,但我们将在之前创建的交互的Tap输出和新Pop Animation的Number输入之间创建链接。我们通过在每个旁边的小圆圈之间单击并拖动来完成此操作。如果您现在单击心脏,您现在将看到交互触发Pop动画的“进度”输出中的更改。

06.过渡期

You can change the extent to which objects change size when they're clicked

您可以更改对象在单击时更改大小的范围

接下来我们需要的是一个Transition补丁。这将允许我们指定低值和高值,以便在Pop Animation的Progress输出更改时移动。然后,我们可以将Transition的输出值链接到心脏图像层的Scale属性,以告知Origami在单击时调整其大小。您现在应该发现单击心脏会使其动画显示大小的短暂变化。然而,它并不完全正确,因为它会立即恢复正常。

07.开关

Use switch patches to toggle objects between different states

使用开关补丁在不同状态之间切换对象

切换补丁是Origami在两种状态之间切换的方式。这就是我们想要的“喜欢”按钮。传递给Switch补丁的输入可以在“开”和“关”状态之间翻转,然后可以作为输出传递给后续补丁。让我们创建一个新的Switch并将它放在Interaction和Pop Animation之间。然后,您应该能够单击心脏以在小型和大型状态之间切换。

08.更复杂的行为

By experimenting with patches you can add more complex behaviour to your prototype

通过试验补丁,您可以为原型添加更复杂的行为

恭喜!您现在已经创建了第一个交互式功能,使用了您一次又一次使用的最常见的修补程序。我们可以添加更多补丁来创建更复杂的行为。让我们在当前的心脏层后面创建一个不同颜色的心脏层,然后添加新的贴片以同时缩放它,并修改原始图层的不透明度,使其可见。现在,当你敲击心脏时,它会切换得越来越大,但也会出现颜色变化。

It's time to bring on all the cats

是时候带上所有的猫了

为了完成我们的原型,让我们添加一个图像轮播与我们想让用户“喜欢”的猫。为此,我们首先需要添加一组图层。每个图像将是一个单独的图层,具有越来越多的偏移x坐标,因此它们基本上是逐行放置在一行中,在任何一个项目上屏幕上只有一个可见。

10.左右滑动

Follow these steps to add a classic swiping action to your carousel

按照以下步骤将经典滑动操作添加到您的轮播中

我们需要做的最后一件事就是让左右滑动滚动旋转木马。我们通过创建滚动交互链接到轮播层组(而不是单个图像)来实现此目的。交互输出一个x坐标,然后我们可以链接到旋转木马的x属性来移动它。在中间,我们将添加一个Clip补丁,可用于限制值以确保我们不会滚动到旋转木马边缘之外的坐标。

11.后续步骤

Now you've learned the basics you can add more advanced features

现在您已经学习了可以添加更多高级功能的基础知识

而已。你已经创建了一个非常基本的应用程序您还可以使用Origami Studio内置的“框架”将其放置在设备背景上,这有助于提供专业的完成效果。现在您已熟悉使用补丁的基础知识,您可以开始创建更高级的行为。 Origami Studio网站上有很多指南,解释了如何实现应用程序中常见的流行功能。

本文最初发表于创意网页设计杂志Web Designer的第270期。在这里购买问题270要么在这里订阅Web Designer

相关文章:



翻译字数超限