Framer 这是最强大的应用原型工具之一吗. 它可以用于设计任何移动设备，从iOS到Android. 如果你知道一点 programming，它的功能几乎是无限的，因为它是基于 CoffeeScript一种相对简单的编程语言. A designer 只会被他们的想象力和编码技能所限制吗.

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

为什么要在真实数据中使用Framer

设计或制作原型的一个常见问题是缺乏真实数据. 当为现有产品设计新功能时, 而不是使用虚构的内容, logical, relevant, 并且可以显示真实的内容. 例如，它可以是任何类型的数据用户照片. This way, 没有时间浪费在编造虚假内容上, 并且避免了由于使用无效数据而产生的错误. 所有可用数据都是可见的, 因此，它可以确定哪些内容可能仍然需要, 与涉众和开发团队的沟通更加有效. 围绕不同的用例场景进行设计也是可能的.

当我们设计一个新功能时, 我们有时会忘记，并非每个用户的配置文件都是完整的, 不是商店里所有类别的产品数量都一样, 并不是每个产品都显示相同的数据. 使用真实数据进行原型设计 可以比作用乐高积木搭东西:而不是用想象的, loose shapes, 我们可以使用现成的组件来构建一些真正的东西.

让我们用真实数据做原型!

Framer的真正乐趣开始于使用从数据库实时更新的真实数据. 任何类型的数据都可以应用, 例如:带有照片的用户配置文件, street addresses, stock quotes, exchange rates, weather forecasts, 交易信息——应用程序通常使用的任何数据. 当你将实时原型与真实数据结合起来时，真正强大的产品设计就开始出现了. 而且也不再需要使用臭名昭著的拉丁风格的“lorem ipsum”占位符文本片段.

使用真实数据的API:它是什么? How Do We Use It?

An 应用程序编程接口 (API)是我们与应用程序通信的接口. 把应用程序想象成一家餐厅. 食物是数据，服务员是API. 你向服务员要食物，这就是你所需要做的. 服务员(API)和厨房(数据库)负责其余的工作.

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

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

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

我们从哪里可以得到真实的数据? The Open API Lists

有许多公开可用的api提供各种数据. 以下是在Framer中使用真实数据进行原型制作的5个候选列表. 这些api中的每一个都返回数据 JSON 格式，它可以很容易地在框架中处理.

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

OpenWeatherMap 这是一个非常容易使用的API. 它允许你在任何地方查看当前的天气和天气预报. 使用这个API，我们可以显示温度、湿度或风速等数据.

Pokéapi -为教育目的创建的最好的api之一. 我在找关于波克萨蒙的事? 可以在这里找到. 这是一个完整的RESTful API链接到一个广泛的数据库，详细介绍了关于poksammon主要游戏系列的所有内容.

Instagram -列表中第一个需要授权才能使用的API. 然而，它的服务非常简单. 你可以访问所有Instagram照片和用户，并在你的新应用程序中显示它们.

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

这个API与以前的API不同，因为它不返回JSON文件, 但可以访问Mapbox的所有功能. Mapbox也产生了一个伟大的 如何在Framer中使用他们的API的教程.

随机用户API教程在帧使用真实数据

要了解如何在Framer中使用api，让我们从 Random User API. 我们将需要一个单一的应用程序屏幕-一个用户列表.

步骤1:设计模式

下面是包含姓名、姓氏和头像的用户列表. 这就是所需要的. 这个过程中最重要的部分是正确地命名和分组所有元素. 头像和名字被分组在盒子层中，所有的盒子被分组在列表中:

在设计模式下需要做的最后一件事是标记 list 层作为交互层. 要做到这一点，只需单击目标图标.

步骤2:理解JSON

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

事实上，它看起来一点也不清楚. 要查看正确格式化的JSON文件，使用Chrome插件 JSONview. 使用插件后，文件看起来像这样:

Much better. 现在应该很容易读了. 该文件包含带有用户数据的结果数组, 问API后收到了什么. JSON文件是什么? 不涉及技术细节, 它是一个基于JavaScript语法的文本文件，包含来自数据库的特定数据. 在Framer中可以使用JSON来显示数据.

步骤3:将JSON文件导入框架

现在，JSON文件可以通过一行代码导入到Framer中:

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

创建名为 data 它将包含JSON文件. Use the print 函数查看JSON文件是否被正确导入:

print data

步骤4:从JSON文件访问特定数据

现在回到JSON文件结构:

在这个JSON文件中， results 数组是否包含更多对象. 每个对象都是一个不同的用户. 首先，这些物体中的一个必须成为目标. 使用print函数可以更好地理解发生了什么:

print data.results[1] 

Framer console:

{gender:"male", name:{title:"mr", first:"benjamin", last:"petersen"}, 地点:{街道:“2529 oddenvej”, city:"sandved", 状态:“midtjylland”, postcode:48654}, email:"benjamin.petersen@example.com", 登录:{用户名:“organicsnake771”, password:"bauhaus", salt:"PohszyFx", md5:“b19140299c05e5e623c12fb94a7e19e6”, sha1:“78 d95ec718ef118d9c0762b3834fc7d492111ab2”, sha256:“0 a702949d5e066d70cde2b9997996575e4c3df61ff3751294033c6fc6cd37e54”}, 罗伯特:“1974-12-17 04:58:03”, 注册:“2009-04-08 16:50:59”, phone:"76302979", cell:"41168605", id:{name:"CPR", 价值:“605218 - 6411”}, 图片:{大:“http://randomuser.我/ api /肖像/男人/ 65.jpg”中:“http://randomuser.我/ api /肖像/地中海/男人/ 65.jpg”,缩略图:“http://randomuser.我/ api /肖像/经验/男人/ 65.jpg"}, nat:"DK"}

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

然后，可以显示姓名等项:

print data.results[1].name.first

Framer回应道: "benjamin". Et voila! 已经实现了从API访问数据!

步骤5:显示来自JSON的数据

Finally! 剩下的唯一工作就是显示数据. 现在，必须创建一个简单的循环，该循环将针对设计模式中的所有图层. 阅读更多关于使用循环定位图层的内容 previous article.

We are using x = 0 从JSON数据中定位数组中的第一个对象. Then, for each children element of the 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++

That’s it! 现在您可以返回到设计模式并进行设计, 真实的数据将会显示在你的原型中!

你可在此下载上述帧器档案: http://framer.cloud/djmvG

Instagram API - frame中的实时数据

Instagram是开启实时数据之旅的一个有趣的起点. 这些说明比较容易理解, API提供有趣的数据——您可以获得完整的访问权限. 在本文的这一部分中, Instagram API用于构建一个简单的原型，显示我的Instagram个人资料数据:name, latest photo, 点赞数.

步骤1:获取访问令牌

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

1. 最常见的方式是去 面向开发者的Instagram 浏览并按照说明操作. 对于非技术人员来说，这个过程可能会很复杂.
2. 幸运的是，有一种简单而安全的方法可以获得它. Pixel Union开发了一种更简单的一键式流程:转到 their website 并单击“获取访问令牌”按钮.

步骤2:启用跨域请求

在收到访问令牌之后，需要一个小技巧. Instagram不允许来自本地主机(帧器)的API请求, 因此必须使用服务器端查询. One of them is JSONProxy. 去他们的网站，粘贴一个 来自Instagram API的请求, and hit GO.

一旦完成，就可以使用JSONProxy链接而不是Instagram API链接.

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

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

步骤4:编写四行代码来使用来自Instagram的数据

这里的流程与随机用户API中的流程相同. 任何用户数据都可以从Instagram访问:

yourAccessToken = "YOUR-ACCESS-TOKEN"

instagramJSON = JSON.parse Utils.domLoadDataSync“http://json-proxy.herokuapp.com/?callback=&url = http % 3 fapi % 2 f % 2.instagram.com % 2 fv1 % 2熔化炉% 2 fself % 2 fmedia % 2 frecent % 2 f % 3 faccess_token % 3 d # {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

That’s it! 五行代码，你就可以使用Instagram提供的实时和真实数据来创建原型. 在这里下载一个工作原型: http://framer.cloud/iYAXl. (请记住，您必须添加自己的ACCESS KEY来运行此原型.)

总结-利弊

通过创建使用通过API从数据库获得的真实数据的原型, 新的创意可能性和检查产品设计的能力被带到与产品100%一致的轻型原型中，并可以在真实用户身上测试新功能. 可以预览系统中的所有数据, 忽略设计中必须包含的元素是比较困难的, 并且可以获得真实的数据, 避免了使用虚假数据导致的设计错误.

也就是说，Framer中的高保真原型是相当昂贵的. 要达到想要的效果，需要进行大量的调整，这就消耗了时间和金钱. 如随机用户API示例所示, 与API通信并不困难, 但是我们仍然需要大量的时间去创造一个优秀的原型.

然而，如果考虑到所有的因素，这当然是值得考虑的. 快乐的原型与真实的数据!