使用Framer X构建交互式原型使用framerx直观的拖放UI快速添加交互。

Z时代
2024-01-10
分类：知识

作为设计师，总是有一个问题，那就是你应该在你的项目中使用什么样的原型工具。有很多软件可以完成诸如线框图（请参阅我们的顶级线框图工具）、原型制作和构建复杂交互的任务；但是很少有工具能够处理所有这些任务。Framer是一个具有所有这些功能的工具，它大大加快了创建微小动画和交互的过程。

最新的迭代Framer X现在使用React和JavaScript，而不是使用CoffeeScript来开发微交互和动画。这有助于提供更快的加载时间和更好的性能。此外，React组件的使用意味着用户有更多的添加和扩展空间，包括在原型中嵌入媒体播放器、实时数据和图形。

测试是原型构建过程的核心部分，尽管Framer X在创建交互式原型方面非常出色，但它需要帮助来了解它的创建有多好。还可以查看我们的用户测试帖子，以获得一些最好的工具来补充Framer并帮助构建真实世界的原型。

如何使用Framer X创建应用程序

为了充分理解Framer X的强大功能，我们将创建一个真实的项目：一个包含一些内容和媒体的简单烹饪配方应用程序。首先要建立的是主页，我们要保持简单，包括以下几点：

标准搜索栏以查找配方

显示查看的最新配方的最近活动

菜谱卡片显示最受欢迎的菜谱

使用视频和共享选项创建菜谱的详细视图

要开始，您需要通过单击左侧导航栏上的+图标创建一个新框架（一个艺术板）。从右栏的标准iPhone/Android模板列表中选择任何艺术板样式。现在你可以走了。

01年。建立搜索栏

让我们从建立搜索栏开始。我们实际上可以在Framer X中使用快速可重用的组件，这些组件称为包，而不是像通常那样创建一个矩形并添加一个搜索图标。在商店下面的左侧导航栏中可以找到数以千计的包裹。点击商店，搜索Android工具包和示例工具包，然后安装它们。

这些包包含一些元素，如卡片、按钮、键盘、滑块、输入和导航菜单项。安装这些软件包后，可以使用左侧“组件”菜单中的元素。

通过在过滤器中搜索找到所需的元素–在本例中是一个搜索栏，位于示例工具包下。只需将其拖放到框架上。现在可以使用右栏修改占位符文本、字体大小和颜色等属性。

02.创建内容堆栈

对于这个最近的活动块，首先添加文本“最近的活动”，这非常简单。现在我们可以使用Framer X的一个新特性Stacks。这可以通过单击+图标并从菜单中选择堆栈来完成。选择堆栈后，在工作框架上拖放600 x 300的区域以创建堆栈。这个堆栈将显示为蓝色。

现在让我们回到组件部分，在Android kit下，搜索Card-5元素并将其拖到我们刚刚创建的堆栈中。把这三张牌复制两次，确保三张牌都在牌堆里。

只要它们在堆栈中，这三张卡就可以轻松地重新排列，而不必担心间距。如果要增加卡片之间的间距，可以增加整个堆栈的宽度。就这么简单。

您还可以根据自己的喜好更改标题和背景的名称，对这些卡片进行个性化设置。

现在我们已经创建了一个堆栈，让它可以滚动。将其移出框架/艺术板。单击左导航中的+图标，然后单击滚动选项。就像我们用堆栈创建一个区域一样，在框架/艺术板上创建一个与堆栈大小相同的可滚动区域。

现在，通过更改方向箭头更改右栏中滚动的属性，使其成为水平滚动。当我们的滚动容器被创建之后，我们需要它的内容，这是由我们之前创建的堆栈提供的。因此，只需使用滚动容器上的箭头提示将滚动容器连接到堆栈。它通过将鼠标指针拖动到堆栈来工作。

03.创建垂直堆栈

对于菜谱卡，您需要遵循与步骤2类似的方法，但您将创建一个类似的垂直方法，而不是创建一个水平卷轴，它本质上是一个最受欢迎的菜谱列表，带有缩略图。在本练习中，配方的每张卡片都有四个元素：图像缩略图、评级、配方名称和准备所需的时间。

不用担心每张卡的细节。它们可以根据您的设计品味进行个性化设置。遵循同样的方法，从组件中使用一张卡，复制它们并使用垂直滚动将它们全部添加到堆栈中。

04.创建新页面

现在，让我们创建一个新的页面来深入了解特定配方的详细信息。例如，让我们拿第二张卡片的例子：法式通心粉。要创建这个新页面，请创建一个新的框架/艺术板，并介绍我们需要的元素，以显示有关法国面食配方的更多详细信息。这个新页面可以细分为视频、标题、评分、制作所需时间和一些操作按钮，如“保存到列表”和“共享到社交媒体”。

若要添加视频，请转到商店并安装YouTube软件包，这使您能够轻松地将视频添加到原型中。现在转到组件面板，将YouTube元素从YouTube组件下拖放到框架中。

调整缩略图的宽度，使其适合框架的宽度。在右侧的“属性”窗格中，可以插入要在原型中播放的视频的URL。如果愿意，还可以通过“属性”面板中的复选框自动播放视频。

在此视频下面，您可以添加标题、分级和各种图标。为了为我们的示例添加图标，我使用了图标生成器存储区中的组件。这是一个简单的过程：只需将基础图标拖放到框架上，然后将右侧面板上名为icon的属性更改为“heart”和“share”。这将分别将基本图标更改为保存和共享图标。他们的颜色也可以很容易地改变使用右面板。

为了方便游客，您可以添加一个名为“配料”的部分，该部分将列出我们的食谱所需的所有配料-在本例中是法国面食。

05.介绍互动

现在让我们通过为按钮添加交互来使我们的设计更具吸引力。理想情况下，当你点击share图标时，系统会提示你在不同的社交媒体渠道上分享菜谱。让我们用一个新的框架来构建它。

确保此框架的宽度和高度与我们创建的其他两个框架的宽度和高度相同。我们的想法是让这个新的共享屏幕向上滑动，并在单击共享图标时替换当前屏幕。

为了让屏幕与众不同，让我们为它添加一些颜色，并用社交媒体图标（如Facebook、Instagram、WhatsApp和电子邮件）填充它。此共享屏幕还应添加一个X图标，单击该图标可将其恢复到原始状态。

确保所有图标都排列在一个堆栈中。一旦包含了X图标，下一步是链接此框架，以便在单击共享图标时弹出它。

为此，请选择包含共享图标的框架。在右侧面板中，有一个名为Link的属性。单击该按钮后，应用程序界面将为您提供一个箭头，您可以将其拖动到我们创建的新共享框架中。这将在后台创建一个链接。

现在，当您选择share图标时，您将看到Link下右侧面板中的新属性，它们是Target、Transition和Direction。这些属性中的每一个都允许您更改元素，例如转换类型和屏幕弹出的方向等。

您可以通过单击界面右上角的播放图标来测试原型是否工作。类似地，您需要将共享屏幕链接到视频屏幕，以便当用户单击X图标时，它返回到上一个屏幕。

这可以通过使用类似的链接属性并将目标添加为视频屏幕来实现。如果您想尝试添加一些变化，可以使方向向左而不是向上，然后使用play命令来测试交互是否有效。

06.添加保存按钮

现在，让我们将覆盖交互添加到保存图标。在这里，我们的目标是每当访问者单击心形图标时，都应该出现一个弹出窗口，询问您是否要将菜谱保存到自定义列表中。