跳到主要内容

在Atomic中制作一个高保真原型

在静态模型或平面文件绘制工具中尝试开发一个想法很容易陷入困境,但是原型值得一千次会议。为什么你会满足于以互动的方式探索你的想法?

也许你对转换的行为方式有所了解,但你不确定它是否适合用户。快速原型化过渡并直接与其进行交互,可以让您更真实地体验最终产品在现实世界中的运作方式。

我们已经看到工具为设计空间带来了原型设计,但没有人喜欢原子。现在有一种方法可以构建完全交互式的高保真原型,其外观和行为就像真实的一样。

Atomic中的原型设计非常快:您可以在几分钟内创建漂亮的高级模型,无需编写任何代码,安装任何软件或喝太多咖啡。您可以直接在移动设备上预览原型,或与队友分享以获得反馈。我们还预先制作了您开始使用所需的所有资产,因此您无需导入任何内容(但您可以从Sketch导入Photoshop CC太)。

在本教程中,我们将探索我们将在Atomic中创建的天气应用程序内的简单滑动过渡。我们将通过简单的步骤来设计过渡,如果您需要挑战,我还将介绍一些更高级的原型设计功能供您探索。

01.注册

让我们开始吧!如果您还没有帐户,请打开Google Chrome,然后访问Atomic.io并注册免费试用。这将持续30天,这应该是你有足够的时间探索Atomic并制作你的第一个原型。

02.环顾四周

The Sample Project contains sample files to help you get familiar with Atomic

示例项目包含示例文件,以帮助您熟悉Atomic

现在您已登录自己的帐户,这是一个值得探索的好时机。您会注意到已为您设置了示例项目。这里有一些介绍性的示例文件,您可以在熟悉Atomic的同时使用它们。或者你可以访问我们的橱窗,其中包含其他人制作的原型集合。如果您遇到困难,寻找解决方案的最佳位置是我们的帮助中心

03.新项目

单击“新建项目”创建一个新项目,并将其命名为“Recipe App”。按Enter将打开项目文件夹。在这里,您可以查看此特定项目中的所有设计。由于这是一个新项目,它是空的。但是,随着时间的推移,设计将在此处填充。

04.抓一个样本

There's a ready-made sample file for this project

这个项目有一个现成的样本文件

而不是创建一个新的空设计,来到这里。这将打开我们创建的示例文件,以帮助您入门。

请参阅右下角的“复制和修改”按钮?单击它并将其添加到您的Recipe App项目。点击“立即编辑”。就像那样,我们的示例文件的副本现在可以在您的项目中准备好进行编辑。

05.探索编辑器

欢迎来到编辑!如果您以前使用过设计工具,Atomic可能会觉得很熟悉。让我们环顾四周。在左侧,您可以访问绘图,布局和原型设计工具,以及两个可以在页面和图层面板之间切换的选项卡。在右侧,您会注意到“属性”面板,该面板允许您更改页面大小,以及调整样式和过渡的设置。

06.查看元素

In the sample file's Assets page you’ll find the elements you need

在示例文件的Assets页面中,您将找到所需的元素

在示例文件的Assets页面上,您将看到我们已经为您创建了此原型中使用的所有元素。切换到“图层”面板,然后单击画布上的某些元素。您选择的元素将在图层面板中自动突出显示。按“?”加快工作流程查看您可以使用的键盘快捷键范围。

07.预览

您可以通过单击编辑器右下角的“预览”,随时预览原型并与原型交互。我们稍后会用它来测试我们的过渡感觉。选择“预览”现在将以全屏模式显示资源,但如果您使用箭头导航到第2页,您将看到我们原型的第一个状态的参考示例。尝试通过单击标题中的“已保存的食谱”按钮与参考示例进行交互,以预览我们要创建的内容。

08.开始吧

现在您已熟悉我们正在构建的原型,现在是时候开始了!选择“编辑”,返回编辑器,然后在“资源”页面上选择所有元素并将其复制到剪贴板。转到第1页并将元素粘贴到页面上。

09.安排你的资产

如果未选择任何元素,请将画布的背景填充设置为#F6F7F8(查看右侧的“属性”面板)。将标题放在画布上,顶部和中心。

您需要重新排列资源,以便将第一个状态(All Recipes)定位在画布上,并且即将创建的第二个状态(Saved Recipes)的资源在画布右侧。原因如下:当第1页和第2页上存在相同的对象时,Atomic将自动为它们之间的任何更改设置动画。

10.堆叠你的卡

当您最初预览原型时,您可能已经注意到“参考 - 所有食谱”页面上的食谱新闻源可以垂直滚动。要添加此效果,请将配方卡排列在垂直堆栈中,包括应放在最后的“明天再来”文本。

11.创建一个滚动容器

选择食谱卡和“明天再来”文本,然后选择将出现在“画布”顶部中心的“容器”工具。选择“创建滚动容器”。然后将内容分组并放置在我们称之为滚动容器的内部,默认情况下启用垂直滚动。确保通过向下拖动底部边界来定义容器的边界以屏蔽元素并与画布相遇。

12.放置元素

对于这个特定的过渡,我们希望从右边进入'Saved Recipes'网格,从下面出现'Add more'文本。为确保发生这种情况,请将每个元素放在各自的起始位置。例如,'Saved Recipes'应该放在第1页,不在画布上和右边;而“添加更多”文本应放在第1页,不在画布下面。

13.点击转换

当我们创建一个tap过渡时,我们希望下一页上的元素可以滑入,重要的是它们也存在于第1页,不在画布上,以定义它们的起始位置。您可以随时参考“参考 - 所有食谱”页面,了解如何安排此页面。

14.复制

For our transition, duplicate page 1

对于我们的过渡,重复第1页

现在我们已经设置了第一页,是时候为转换创建第二个状态,我们将在新页面上执行此操作。确保选中“页面”面板,然后将鼠标悬停在第1页上以显示页面卡右下方的汉堡菜单。单击菜单,然后选择“复制”。

15.保存的食谱

Atomic will animate any changes you make between Page 1 and your new Page 2

Atomic将动画您在第1页和新页面之间所做的任何更改

导航到新复制的页面以创建第二个状态:Saved Recipes。这里重要的是不要删除页面上的任何元素,因为这将打破转换。因为我们复制了页面,Atomic知道两个页面上的元素都是相同的连接元素。因此,它知道我们对第2页上的元素属性所做的任何更改(大小,位置,旋转,不透明度,颜色等)。

16.更多过渡

首先将“All Recipes”滚动组向左移动,离开画布,将“Saved Recipes”元素和“Add more”文本移动到新的位置:在体内(代替'All Recipes'组)画布的下半部分,分别位于画布中央。我们在这个过渡中没有移动的唯一元素是标题。这是因为标题仍保留在屏幕上,只是巧妙地改变 - 我们很快就会到达。

17.进一步的动画

对于标题,我们希望蓝色背景在第二个状态上滑过。在第2页上打开“图层”面板的同时,展开标题为“标题”的组并选择蓝色矩形。然后将其移到右侧,使其放在“已保存的食谱”后面。太好了!

18.有趣的部分

Add an interaction hotspot over the area you want users to interact with

在您希望用户与之交互的区域上添加交互热点

现在是创建过渡的有趣部分。在第1页,我们将在Header中的'Saved Recipes'文本上绘制一个热点,因为这是我们希望用户与之交互的区域。从编辑器最左侧的“工具”面板中选择“交互热点”工具(或者只需按H)。您可以使用与在画布上绘制矩形相同的方法绘制热点:只需单击并拖动即可。

19.过渡设置

Customise your transition, including the trigger gesture and motion type

自定义过渡,包括触发手势和动作类型

绘制热点后,如果仍然选中了热点,您会在右侧的“属性”面板中看到“交互”部分。您可以在此处指定触发手势,目标页面,运动类型和转换持续时间。对于此转换,请指定以下设置:手势:点击或点按;去:第2页;动作:E进出;持续时间:250

20.来回

我们希望能够在两个转换之间来回切换,因此我们现在还需要在第2页上放置一个热点,将我们带回到第1页。使用键盘快捷方式从第1页复制热点,然后粘贴它在第2页上的“标题”中的“所有食谱”文本中。请记住将新热点的目标页面设置更新为第1页。

21.预览

Click the Preview button to see your transition in action

单击“预览”按钮以查看您的转换操作

是时候预览你的过渡了!导航到页面面板中的第1页,然后单击编辑器右下角的“预览”(快捷方式)CMD +进入)。点击或点击原型上的“Saved Recipes”,转到第2页。然后,选择“All Recipes”原型,将其带回第1页。

22.一切都完成了!

现在你是专业人士!选择“编辑”返回编辑器,然后如果删除资源和两个参考页面(通过选择页面的汉堡包菜单然后选择“删除页面”),您刚制作的原型就可以分享了。您可以通过按编辑器右下角的“共享”轻松创建共享链接。

这篇文章最初出现在网络杂志问题283;在这里买



翻译字数超限