使用真实数据进行原型制作–Framer教程

本文概述

• 为什么要对真实数据使用Framer
• 让我们以真实数据为原型！
• 使用实际数据的API：这是什么？我们怎么用它？
• 我们在哪里可以获取真实数据？开放的API列表
• Framer中使用实际数据的随机用户API教程
• Instagram API – Framer中的实时数据
• 摘要–优点和缺点

Framer是最强大的应用程序原型制作工具之一。它可以用于从iOS到Android的任何移动设备的设计。如果你懂一点编程, 它的功能实际上是无限的, 因为它基于CoffeeScript(一种相对简单的编程语言)。设计师将仅受其想象力和编码技能的限制。

Framer–这是什么？

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

为什么要对真实数据使用Framer

设计或原型制作中的一个常见问题是缺少实际数据。当为现有产品设计新功能时, 可以使用逻辑, 相关且外观逼真的内容来代替虚构内容。它可以是任何类型的数据, 例如用户照片。这样, 就不会浪费时间来尝试虚假内容, 并且可以避免由于使用无效数据而导致的错误。所有可用数据都是可见的, 并且可以确定仍需要什么内容-结果, 与利益相关者和开发团队的沟通更加有效。还可以围绕不同的用例场景进行设计。

设计新功能时, 有时会忘记并非每个用户配置文件都是完整的, 商店中的所有类别都不具有相同数量的产品, 也不是每个产品都显示相同的数据。可以将真实数据的原型与从LEGO块中构建出的东西进行比较：我们可以使用盒子中的现有组件来构建真实的东西, 而不是使用虚构的松散形状。

让我们以真实数据为原型！

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

布莱恩特·乔恩(U.B.

使用实际数据的API：这是什么？我们怎么用它？

应用程序编程接口(API)是我们与应用程序进行通信的接口。想象一个应用程序是餐厅。食物是数据, 服务员是API。你只需要服务员的食物就可以了。服务员(API)和厨房(数据库)负责其余的工作。

这一切都是关于访问给定数据库中存在的真实数据的。

什么是API？

每个应用程序都有一个API, 可以捕获和显示数据。一些API是公开可用的, 而某些API仅在内部产品中使用。

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

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

有许多提供各种数据的公开可用的API。这是五个候选清单, 非常适合在Framer中使用真实数据进行原型制作。这些API均以JSON格式返回数据, 该数据可以在框架中轻松处理。

随机用户–绝对是初学者的最佳API。它会生成从头像到电子邮件地址的完整, 随机的用户个人资料。

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

Wojciech Dobry的天气预报应用程序

Pokéapi–为教育目的而创建的最佳API之一。寻找有关神奇宝贝的东西吗？在这里能找到它。这是一个完整的RESTful API, 链接到一个广泛的数据库, 该数据库详细介绍了神奇宝贝主游戏系列的所有内容。

Sai Aung的PokémonUI概念

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

Instagram上的Smartwatch by Hironobu Kimura

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

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

移动设备上的Mapbox

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

要了解如何在Framer中使用API​​, 请先从随机用户API开始。我们将需要一个应用程序屏幕-一个用户列表。

步骤1：设计模式

这是包含名称, 姓氏和头像的用户列表。这就是全部。此过程中最重要的部分是正确命名和分组所有元素。化身和名字在box图层中分组, 所有box都在列表中分组：

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

步骤2：了解JSON

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

就目前而言, 它看起来一点也不清晰。要查看格式正确的JSON文件, 请使用Chrome浏览器插件JSONview。使用该插件, 文件将如下所示：

好多了。现在, 它应该很容易阅读。该文件包含带有用户数据的结果数组, 该数组是在询问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文件中, 结果是一个包含更多对象的数组。每个对象都是不同的用户。首先, 必须将这些对象之一作为目标。使用打印功能可以更好地了解发生了什么：

print data.results[1] 

Framer控制台：

{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回应：”本杰明”。瞧！已实现从API访问数据！

步骤5：显示JSON中的数据

最后！剩下的唯一一件事就是显示数据。现在, 必须创建一个将以设计模式为目标的所有图层的简单循环。在上一篇文章中, 了解有关使用循环定位图层的更多信息。

我们使用x = 0来定位JSON数据中数组中的第一个对象。然后, 对于列表的每个子元素, 我们从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个人资料数据：名称, 最新照片和喜欢的人数。

只需五行代码和一个访问令牌即可从Instagram获取数据

步骤1：获取访问令牌

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

1. 最常见的方法是访问Instagram for Developers网站并按照说明进行操作。对于非技术人员来说, 此过程可能会很复杂。

2. 幸运的是, 有一种简单而安全的方法来获取它。 Pixel Union开发了一个简单得多的一键式流程：转到其网站, 然后单击”获取访问令牌”按钮。

步骤2：启用跨域请求

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

完成后, 可以使用JSONProxy链接来代替Instagram API链接。

步骤3：在Framer中设计一个简单的应用

使用Framer设计的简单应用程序屏幕

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

步骤4：编写四行代码以使用Instagram中的数据

Framer中有五行代码来获取数据。

这里的流程与随机用户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。 (请记住, 你必须添加自己的访问密钥才能运行此原型。)

摘要–优点和缺点

通过创建使用通过API从数据库中获取的真实数据的原型, 可以发现新的创造可能性和检查产品设计的能力-可以构建与产品100％一致的原型, 并在真实用户上测试新功能。通过预览系统中的所有数据, 很难错过必须包含在设计中的元素, 并且可以访问真实数据, 从而避免了由于使用伪造数据而导致的设计错误。

也就是说, Framer中的高保真原型制作非常昂贵。为了获得理想的效果, 需要进行大量的调整, 这会浪费时间和金钱。如随机用户API示例所示, 与API进行通信并不困难, 但仍需要大量时间才能从中创建出色的原型。

不过, 如果采取全面措施, 当然值得考虑。拥有真实数据的快乐原型！

• • •

在srcmini设计博客上进一步阅读：

• UI设计最佳做法和常见错误
• 空状态-用户体验最被忽视的方面
• 简单是关键–探索最小的Web设计
• 移动接口的启发式原理
• 为可读性而设计– Web排版指南