Прототипирование с использованием реальных данных — Учебное пособие по Framer

Framer — один из самых мощных инструментов для создания прототипов приложений. Его можно использовать для дизайна под любое мобильное устройство, от iOS до Android. Если вы немного разбираетесь в программировании, его возможности практически безграничны, поскольку он основан на CoffeeScript — относительно простом языке программирования. Дизайнер будет ограничен только своим воображением и навыками кодирования.

Чтобы следовать этой статье, вы должны иметь хотя бы базовые знания о Framer. Мы будем использовать режим разработки и редактор кода. Если вы хотите пополнить свои знания, вы можете прочитать наши предыдущие статьи о Framer: Как создавать потрясающие интерактивные прототипы, 7 простых микровзаимодействий для улучшения ваших прототипов.

Почему вы должны использовать Framer с реальными данными

Распространенной проблемой при проектировании или прототипировании является отсутствие реальных данных. Когда новая функция разрабатывается для существующего продукта, вместо использования вымышленного контента может отображаться логичный, актуальный и реалистичный контент. Это могут быть любые данные, например, фотографии пользователей. Таким образом, не тратится время на попытки придумать фиктивный контент, и можно избежать ошибок, связанных с использованием неверных данных. Все доступные данные видны, и можно установить, какой контент может еще понадобиться — в результате общение с заинтересованными сторонами и командой разработчиков становится более эффективным. Также возможно разработать различные сценарии использования.

Когда мы разрабатываем новую функцию, мы иногда забываем, что не каждый профиль пользователя является полным, не все категории в магазине имеют одинаковое количество товаров, и не каждый продукт отображает одинаковые данные. Прототипирование с использованием реальных данных можно сравнить с созданием чего-то из блоков LEGO: вместо того, чтобы работать с воображаемыми, свободными формами, мы можем использовать существующие компоненты из коробки и построить что-то реальное.

Давайте прототипировать с реальными данными!

Самое интересное во 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 отличается от предыдущих тем, что не возвращает файлы JSON, но дает доступ ко всем функциям Mapbox. Mapbox также подготовил отличный учебник о том, как использовать их API во Framer.

Учебное пособие по Random User API во Framer с использованием реальных данных

Чтобы понять, как работать с API во Framer, начнем с Random User API. Нам понадобится один экран приложения — список пользователей.

Шаг 1: Режим дизайна

Вот список пользователей, содержащий имена, фамилии и аватары. Это все, что требуется. Самая важная часть этого процесса — правильно назвать и сгруппировать все элементы. Аватары и имена сгруппированы в слое блоков, а все блоки сгруппированы внутри списка:

Последнее, что нужно сделать в режиме дизайна, — это пометить слой списка как интерактивный слой. Для этого просто щелкните значок цели.

Шаг 2: Понимание JSON

В первую очередь необходимо понять, что такое JSON и как его получить вне Framer. В документации Random User 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. Используйте функцию печати , чтобы убедиться, что файл 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

Фреймер отвечает: "benjamin" . И вуаля! Доступ к данным из 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 предоставляет интересные данные — вы получаете полный доступ. В этой части статьи API Instagram используется для создания простого прототипа, отображающего данные моего профиля в Instagram: имя, последнее фото и количество лайков.

Шаг 1: Получите токен доступа

Для использования API Instagram требуется токен доступа. Его можно получить двумя разными способами:

1. Самый распространенный способ — перейти на сайт Instagram для разработчиков и следовать инструкциям. Этот процесс может быть сложным для нетехнических людей.
2. К счастью, есть простой и безопасный способ его получить. Pixel Union разработал гораздо более простой процесс в один клик: перейдите на их веб-сайт и нажмите кнопку «Получить токен доступа».

Шаг 2. Включите междоменные запросы

После получения токена доступа требуется одна маленькая хитрость. Instagram не разрешает запросы API с вашего локального хоста (Frame), поэтому необходимо использовать запросы на стороне сервера. Одним из них является JSONProxy. Перейдите на их веб-сайт, вставьте запрос из Instagram API и нажмите GO.

После этого вместо ссылки API Instagram можно использовать ссылку JSONProxy.

Шаг 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. (Имейте в виду, что для запуска этого прототипа вам необходимо добавить свой собственный КЛЮЧ ДОСТУПА.)

Резюме – плюсы и минусы

Создавая прототипы, использующие реальные данные, полученные через API из базы данных, выявляются новые творческие возможности и возможность проверить дизайн продукта — можно создавать прототипы, которые на 100% соответствуют продукту, и тестировать новые функции на реальных пользователях. . При предварительном просмотре всех данных в системе труднее пропустить элемент, который необходимо включить в дизайн, а при доступе к реальным данным можно избежать ошибок проектирования, связанных с использованием поддельных данных.

При этом высокоточное прототипирование во Framer стоит довольно дорого. Чтобы получить желаемый эффект, требуется много настроек, что съедает время и деньги. Как показано в примере с Random User API, взаимодействие с API не представляет сложности, но все же требуется много времени, чтобы создать на его основе отличный прототип.

Тем не менее, в полной мере, это, безусловно, заслуживает внимания. Удачного прототипирования с реальными данными!

• • •

Дальнейшее чтение в блоге Toptal Design:

• Лучшие практики дизайна пользовательского интерфейса и распространенные ошибки
• Пустые состояния — самый недооцененный аспект UX
• Простота — это ключ — изучение минимального веб-дизайна
• Эвристические принципы для мобильных интерфейсов
• Дизайн для удобочитаемости — руководство по веб-типографике