使用真实数据进行原型设计 – Framer 教程

Framer 是目前最强大的应用程序原型设计工具之一。 它可用于设计任何移动设备，从 iOS 到 Android。 如果你懂一点编程，它的功能几乎是无限的，因为它基于 CoffeeScript——一种相对简单的编程语言。 设计师只会受到他们的想象力和编码技能的限制。

要阅读本文，您至少应该具备 Framer 的基本知识。 我们将使用设计模式和代码编辑器。 如果你想补充你的知识，你可以阅读我们之前的 Framer 文章：如何创建令人惊叹的交互式原型，7 个简单的微交互来改进你的原型

为什么你应该使用 Framer 处理真实数据

设计或原型设计中的一个常见问题是缺乏真实数据。 当为现有产品设计新功能时，可以显示逻辑、相关和真实的内容，而不是使用虚构的内容。 它可以是任何类型的数据——例如用户照片。 这样，就不会浪费时间试图提出虚假内容，并且可以避免因使用无效数据而导致的错误。 所有可用数据都是可见的，并且可以确定可能仍需要哪些内容——因此，与利益相关者和开发团队的沟通更加有效。 也可以围绕不同的用例场景进行设计。

当我们设计一个新功能时，我们有时会忘记并非每个用户资料都是完整的，不是商店中的所有类别都有相同数量的产品，也不是每个产品都显示相同的数据。 可以将使用真实数据进行原型制作与用乐高积木构建一些东西进行比较：我们可以使用盒子中的现有组件并构建真实的东西，而不是使用想象的、松散的形状。

让我们用真实数据制作原型！

当使用从数据库实时更新的真实数据时，Framer 的真正乐趣就开始了。 可以应用任何类型的数据，例如：带有照片的用户资料、街道地址、股票报价、汇率、天气预报、交易信息——应用程序通常使用的任何数据。 当您将实时原型设计与真实数据相结合时，真正强大的产品设计开始出现。 并且不再需要使用臭名昭著的拉丁式“lorem ipsum”占位符文本片段。

使用真实数据的 API：它是什么？ 我们如何使用它？

应用程序编程接口 (API) 是我们与应用程序通信的接口。 想象一个应用程序作为餐厅。 食物就是数据，服务员就是 API。 你向服务员要食物——这就是你需要做的。 服务员（API）和厨房（数据库）负责其余的工作。

这一切都与访问给定数据库中的真实数据有关。

每个应用程序都有一个 API，允许捕获和显示数据。 有些 API 是公开可用的，有些仅用于内部产品。

公开可用的 API 被广泛用于构建新的应用程序。 例如，为了构建一个天气应用程序，需要一些天气数据。 在众多共享其公共 API 的天气预报网站的帮助下，这非常容易。 更重要的是，可以组合许多不同的 API 来创建一个全新的产品。

我们在哪里可以获得真实数据？ 开放 API 列表

有许多提供各种数据的公开可用的 API。 这是一个包含五个非常适合在 Framer 中使用真实数据进行原型设计的候选清单。 这些 API 中的每一个还返回 JSON 格式的数据，这些数据可以在框架中轻松处理。

随机用户——绝对是初学者的最佳 API。 它生成完整的、随机的用户配置文件，从头像到电子邮件地址。

OpenWeatherMap – 这是一个非常易于使用的 API。 它允许您查看任何位置的当前天气和预报。 使用此 API，我们可以显示温度、湿度或风速等数据。

Pokeapi – 为教育目的而创建的最佳 API 之一。 寻找有关口袋妖怪的东西？ 在这里能找到它。 这是一个完整的 RESTful API，链接到一个详尽的数据库，详细介绍了 Pokemon 主游戏系列的所有内容。

Instagram – 列表中第一个需要授权才能使用的 API。 但是，它的服务非常简单。 您可以访问所有 Instagram 照片和用户，并将它们显示在您的新应用中。

Mapbox - 提供了许多令人难以置信的服务，这些服务很容易与应用程序集成，从地图和方向到地理编码甚至卫星图像。 Foursquare、Evernote、Instacart、Pinterest、GitHub 和 Etsy 都有一些共同点——它们的地图由 Mapbox 提供支持。

此 API 与以前的 API 不同，因为它不返回 JSON 文件，但可以访问所有 Mapbox 功能。 Mapbox 还制作了一个很棒的教程，介绍如何在 Framer 中使用他们的 API。

Framer 中使用真实数据的随机用户 API 教程

要了解如何在 Framer 中使用 API，让我们从 Random User API 开始。 我们将需要一个应用程序屏幕——一个用户列表。

第 1 步：设计模式

这是包含姓名、姓氏和头像的用户列表。 这就是所有需要的。 此过程中最重要的部分是正确命名和分组所有元素。 头像和名字分组在盒子层，所有盒子都分组在列表内：

在设计模式中需要做的最后一件事是将列表层标记为交互层。 为此，只需单击目标图标。

第 2 步：了解 JSON

首先，有必要了解 JSON 是什么以及如何在 Framer 之外获取它。 在 Random User API 文档中，找到来自 API 的数据请求。 它看起来像这样：https://randomuser.me/api/?results=20。 如您所见，这是一个在浏览器中打开 JSON 文件的常规链接：

事实上，它看起来一点也不清晰。 要查看格式正确的 JSON 文件，请使用名为 JSONview 的 Chrome 插件。 使用插件，文件将如下所示：

好多了。 现在应该很容易阅读了。 该文件包含带有用户数据的结果数组，这些数据是在向 API 询问后收到的。 那么 JSON 文件是什么？ 在不深入技术细节的情况下，它是一个基于 JavaScript 语法的文本文件，其中包含来自数据库的特定数据。 JSON 可以在 Framer 中用于显示其中的数据。

第 3 步：将 JSON 文件导入 Framer

现在，只需一行代码即可将 JSON 文件导入 Framer：

 data = JSON.parse Utils.domLoadDataSync "https://randomuser.me/api/?results=20"

创建名为data的对象，该对象将包含 JSON 文件。 使用print函数查看 JSON 文件是否正确导入：

 print data 

第 4 步：从 JSON 文件访问特定数据

现在回到 JSON 文件结构：

在这个 JSON 文件中， results是一个包含更多对象的数组。 每个对象都是不同的用户。 首先，必须针对这些对象之一。 使用打印功能更好地了解发生了什么：

 print data.results[1]

成帧器控制台：

 {gender:"male", name:{title:"mr", first:"benjamin", last:"petersen"}, location:{street:"2529 oddenvej", city:"sandved", state:"midtjylland", postcode:48654}, email:"[email protected]", login:{username:"organicsnake771", password:"bauhaus", salt:"PohszyFx", md5:"b19140299c05e5e623c12fb94a7e19e6", sha1:"78d95ec718ef118d9c0762b3834fc7d492111ab2", sha256:"0a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54"}, dob:"1974-12-17 04:58:03", registered:"2009-04-08 16:50:59", phone:"76302979", cell:"41168605", id:{name:"CPR", value:"605218-6411"}, picture:{large:"https://randomuser.me/api/portraits/men/65.jpg", medium:"https://randomuser.me/api/portraits/med/men/65.jpg", thumbnail:"https://randomuser.me/api/portraits/thumb/men/65.jpg"}, nat:"DK"}

括号中的数字代表数组中对象的数量。 使用data.results[1] ，接收对 JSON 文件中所有第一个用户数据的访问。

然后，可以显示姓名或姓氏等项目：

 print data.results[1].name.first

Framer 回复： "benjamin" 。 瞧！ 从API访问数据已经实现了！

第 5 步：显示来自 JSON 的数据

最后！ 剩下的就是显示数据了。 现在，必须创建一个针对设计模式中所有层的简单循环。 在上一篇文章中阅读有关使用循环定位图层的更多信息。

我们使用x = 0来定位 JSON 数据中数组中的第一个对象。 然后，对于list的每个子元素，我们从 JSON 数据中分配数据。 在循环结束时，我们添加 +1 以使用数组中下一个对象的数据：

 x = 0 for i in list.children i.children[2].text = data.results[x].name.first i.children[1].text = data.results[x].name.last i.children[0].image = data.results[x].picture.large x++

而已！ 现在您可以回到设计模式并玩转设计，真实数据将显示在您的原型中！

您可以在此处下载上述 Framer 文件：https://framer.cloud/djmvG

Instagram API – Framer 中的实时数据

Instagram 是开启实时数据之旅的有趣起点。 这些说明相对容易理解，API 提供了有趣的数据——您可以获得完整的访问权限。 在本文的这一部分中，Instagram API 用于构建一个简单的原型，用于显示我的 Instagram 个人资料数据：姓名、最新照片和点赞数。

第 1 步：获取访问令牌

要使用 Instagram API，需要访问令牌。 它可以通过两种不同的方式获得：

1. 最常见的方法是访问 Instagram for Developers 网站并按照说明进行操作。 对于非技术人员来说，这个过程可能很复杂。
2. 幸运的是，有一种简单而安全的方法可以获取它。 Pixel Union 开发了一个更简单的一键式流程：转到他们的网站并单击“获取访问令牌”按钮。

第 2 步：启用跨域请求

收到访问令牌后，需要一个小技巧。 Instagram 不允许来自本地主机（Framer）的 API 请求，因此必须使用服务器端查询。 其中之一是 JSONProxy。 转到他们的网站，粘贴来自 Instagram API 的请求，然后点击 GO。

完成后，可以使用 JSONProxy 链接，而不是使用 Instagram API 链接。

第 3 步：在 Framer 中设计一个简单的应用程序

此设计中只有三个关键元素：名称占位符、将显示最新照片的矩形以及图像下方的点赞数。 所有这些都被标记为可在代码编辑器中重用的交互层。

第 4 步：编写四行代码以使用来自 Instagram 的数据

此处的流程与 Random User API 中的流程相同。 可以从 Instagram 访问任何用户数据：

 yourAccessToken = "YOUR-ACCESS-TOKEN" instagramJSON = JSON.parse Utils.domLoadDataSync "https://json-proxy.herokuapp.com/?callback=&url=https%3A%2F%2Fapi.instagram.com%2Fv1%2Fusers%2Fself%2Fmedia%2Frecent%2F%3Faccess_token%3D#{yourAccessToken}" likesCount.text = instagramJSON.data[1].likes.count name_1.text = instagramJSON.data[1].user.full_name photo.image = instagramJSON.data[1].images.standard_resolution.url

而已！ 五行代码，您可以使用 Instagram 提供的实时和真实数据进行原型制作。 在此处下载工作原型：https://framer.cloud/iYAXl。 （请记住，您必须添加自己的 ACCESS KEY 才能运行此原型。）

摘要–优点和缺点

通过使用从数据库中通过 API 获得的真实数据创建原型，新的创意可能性和检查产品设计的能力被展现出来——可以构建与产品 100% 一致的原型，并在真实用户身上测试新功能. 通过预览系统中的所有数据，很难错过设计中必须包含的元素，并且通过访问真实数据，可以避免使用虚假数据导致的设计错误。

也就是说，Framer 中的高保真原型设计非常昂贵。 需要进行大量调整才能获得所需的效果——这会耗费时间和金钱。 如 Random User API 示例所示，与 API 通信并不困难，但仍需要大量时间才能从中创建一个出色的原型。

然而，当给予充分的衡量时，它当然值得考虑。 使用真实数据进行快乐原型制作！

• • •

进一步阅读 Toptal 设计博客：

• UI 设计最佳实践和常见错误
• 空状态——用户体验中最容易被忽视的方面
• 简单是关键——探索最小的网页设计
• 移动界面的启发式原则
• 可读性设计——网页排版指南