跳到主要内容

使用Proto.io设计感觉真实的原型

Prototyping: juxtacaption

学习如何构建应用程序是一个需要仔细规划的过程,需要考虑很多事情。设计触摸屏应用程序最终需要感觉真实的原型。尽管如此,当针对具有交互式动画的手势驱动应用程序时,我们常常将自己的设计思维放在静态设计工具中。我们不应该将我们的探索基于交互式动画工具吗?

与语言过滤我们的感知的方式类似,我们的工具可以过滤我们如何通过解决方案进我们希望保持流畅,而不是经常在工具之间切换以探索设计解决方案。我们很少需要使用矢量完美原型,但我们确实需要足够好的原型设计资产。

Proto.io作为一种视觉原型制作工具。您可以导入comps以链接到流和资产层以进行动画处理。但您也可以动态地以足够高的保真度创建资产,并为iOS,watchOS和Material Design自定义本机组件库。

在本教程中,我们将原型化产品概念,用于并置两张照片并键入关于它们之间连接的标题。应该是这样的这个

我们首先引入一系列外部资产。然后我们将设计资产并在工具中自定义本机组件。交互将由手势,键盘输入触发,并在原型加载时自动触发,然后沿动画时间线编排。

第01步

Prototyping: new project

首先,您需要转到Proto.io并注册试用版。启动一个新项目并将其命名为“Juxtacaption”。选择iPhone 6屏幕尺寸(750x1334),然后点击创建项目。翻转项目缩略图,然后单击编辑项目以打开编辑器。

第02步

我创造了一个资产文件夹这个项目。在编辑器的右下角,您可以找到将这些添加到项目中的选项。或者,您可以将它们直接拖到画布上。

第03步

双击'opening-photo-bottom.jpg'(树干横截面)将其添加到画布。将其拖动到底部,直到它捕捉到边缘。然后将'opening-photo-top.jpg'(摩天轮)拖到画布上,并将其定位,使其位于树形图像的正上方。现在将'logo.png'添加到画布。在尺寸和位置下,将其左边距设置为140,将上边距设置为120。

第04步

让我们创建一个原生资产。在画布上调出Type工具(T),然后单击左边标题下方的。键入“标记两张照片之间的连接”,并将其放置在画布的水平中心。

第05步

我们要添加一个网络字体。转到“属性”>“文本”>“管理项目Webfonts”。搜索'Catamaran',点击返回。单击全部添加。现在,返回文本下拉列表,选择Catamaran 300,并将大小设置为34.居中对齐文本。

第06步

Prototyping: button

让我们添加按钮资产。将'button.png'拖到画布底部,然后将其定位在左边175,顶部1070.如果您想在任何时候预览项目,只需单击右上角的预览即可。

第07步

Prototyping: new screen

翻过左上角的“屏幕”下拉列表,然后选择“添加新屏幕”。标题为'Screen:Main',点击OK。这将形成我们的第二个屏幕,其中包含原型的照片和标题内容。

第08步

在画布上,使用快捷键cmd + F调出搜索功能。输入“状态栏”以搜索资产。双击标准iOS栏以添加它。在“属性”下,我们可以更改背景颜色(我已经为蓝色)。将您选择的阴影拖动到保存的颜色区域以便稍后使用。

第09步

在Proto.io中,如果内容需要滚动超出屏幕的长度,则需要将其放在容器中。要执行此操作,请转到容器>添加新容器并将其命名为“容器:主内容滚动”。将容器高度更改为2000。

第10步

我们将照片添加到第二个视图中。双击'juxtaphoto_1.jpg'(鲜花)并沿着画布的上边缘水平居中。您可以使用cmd + 1(缩放至100%)和cmd + 0(返回缩小视图)进行放大和缩小。

第11步

将'juxtaphoto_2.jpg'(蛋糕)直接拖到顶部照片下方。这需要有455的上边距,因此它比花图像低5px。在此下方(左边距11,上边距1000)和'juxtaphoto_4.jpg'(面部),在底部(左边距11,上边距1455)拖出'juxtaphoto_3.jpg'(煎饼)。

第12步

在“组件”区域中,向下滚动到“表单”并拖出“文本字段”,使其位于顶部照片下方。将其大小调整为600x120px,并将其放置在前两个图像之间的连接上。在“属性”下,调整样式。我选择了白色背景和10的边界半径。

第13步

Prototyping: properties

当您仍在“属性”选项卡中时,请调整文本。我们使用的是Catamaran 300,尺寸40,蓝色和中心对齐。将占位符文本字段设置为'键入juxtacaption'。

第14步

我们希望这个文本输入字段有两个状态,第一个用于输入文本,第二个用于显示已输入的内容。右键单击文本输入字段,然后选择“转换为容器”。在“图层”面板上,双击“文本字段1”并重命名图层文本输入。

第15步

在容器画布的顶部,单击“状态1”旁边的+符号以添加新状态。在状态2上,单击以选中文本输入字段,然后将其删除。

第16步

点击R并添加一个600x120px的矩形。使背景为蓝色和边框半径10.键入T并单击以插入文本。更改文本样式,使其与状态1上的文本匹配,但这次它想要是白色而不是蓝色。将线高调整为50。

第17步

调整文本框570x100的大小,并使其水平和垂直居中。将文字更改为“你的juxtacaption”。导航回Container> Main Content Scroll。

第18步

现在我们将在设计中包含一些Material Design元素。在组件面板的顶部,转到Material Design> Buttons并将圆形Action Button拖到文本输入字段容器的右下角。将操作按钮的背景颜色更改为已保存的蓝色。在图标字段中,键入“check”并选择第一个勾选按钮。在涟漪效应下拉列表中,选择“浅”。

第19步

Prototyping: actions

现在我们会做一些更先进的事情(我保证这仍然很简单)。为了使用键入的标题,我们需要设置一个变量来更改生成的文本框以显示此标题。选择“操作”按钮,然后转到“交互”>“添加交互”。将触发器设置为Tap,将动作设置为Set variable。

第20步

让我们设置一个变量来抓取输入到文本输入字段的内容。选择New Variable并将其命名为'juxtacaption`。然后选择文本,选中评估变量,从项属性设置值,当前容器。在项目下,选择文本输入,对于属性选择值。检查回调以链接另一个操作。

第21步

Callback 1将出现一个新窗口。在这里,我们将链接另一个读取变量的操作,将文本框更改为已键入的内容。对于操作,选择Change属性(在Logic下),然后选择Current container,yourjuxtacaption ,文本,从变量读取,juxtacaption。现在保存您的互动。

第22步

Prototyping: make it scroll

现在,让我们添加主内容容器并使其可滚动。转到屏幕>屏幕:主屏幕。选择后,翻转容器>容器:主内容滚动,然后单击添加到画布。

第23步

将水平向导设置为160,然后向下移动容器,使其与指南对齐。转到屏幕底部并向上拖动中心容器手柄,使其捕捉到屏幕画布的底部边缘。

第24步

Prototyping: vertical scroll

让我们将主容器设置为垂直滚动。选择容器,转到“属性”,然后从“滚动属性”下拉列表中选择“垂直”。现在,双击'header.png'资产添加它。将此左侧225和顶部85定位。

第25步

双击容器,然后选择“操作”按钮。在交互下,选择添加交互,点击,更改容器状态,当前容器,文本字段1容器,状态2。

第26步

让我们错开主要内容的时间,使其逐步出现,建议如何处理原型。选择文本字段1容器并从顶部向下移动25px到417px。

第27步

现在我们需要添加一个新状态(到Containers> Main Content Scroll)。将“文本字段1”容器向上移动25px到392,并将其不透明度更改为0.9。返回状态1并选择画布上的所有内容(cmd + A)。将不透明度更改为0并按回车键。返回状态2.画布底部的时间轴显示状态1和2之间具有已更改属性的所有图层。

第28步

在时间轴中选择“juxtaphoto_1.jpg”和“juxtaphoto_2.jpg”,然后将其中一个动画滑块拖动到0.5持续时间。单击“juxtaphoto_2.jpg”动画滑块并将延迟更改为0.4。将“文本字段1容器”的动画滑块拖动到0.6,并将延迟更改为0.7。

第29步

将'juxtaphoto_3.jpg'的动画滑块拖动到0.5持续时间,延迟为1.3。保持默认的缓出四边形曲线。将“动作按钮”动画滑块拖动到1秒持续时间,延迟为1.3秒。

第30步

因此容器自动前进到状态2,您需要设置屏幕交互。转到屏幕>屏幕:主要>交互>添加交互。将触发器设置为屏幕显示,操作更改容器状态,屏幕主,容器主容器滚动,状态2.保存您的交互。

第31步

现在让我们在两个屏幕之间添加一个过渡。首先,转到屏幕1.选择“button.png”,转到“交互”选项卡和“添加交互”。选择Tap,Go to Screen,Main和Slide left。

第32步

要转换回去,请转到“屏幕:主要”,选择透明的“容器:主要内容滚动”并添加交互。选择向右滑动,转到屏幕:屏幕1,向右滑动。

第33步

我们来看看原型吧!保存项目,然后预览它。要共享项目,请返回编辑器,共享>发布>与所有人共享>发布。点击继续>查看>共享图标选项卡 - 这将为您提供链接,以便您可以与您喜欢的任何人共享您的原型。请享用!

托德西格尔

Todd Siegel是Proto.io的UX设计师和产品传播者。本文最初发表于276期网络杂志

像这样?阅读这些:



翻译字数超限