使用真實數據進行原型設計 – 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 設計最佳實踐和常見錯誤
• 空狀態——用戶體驗中最容易被忽視的方面
• 簡單是關鍵——探索最小的網頁設計
• 移動界面的啟發式原則
• 可讀性設計——網頁排版指南