Фреймър е един от най-мощните инструменти за прототипиране на приложения на пазара. Може да се използва за проектиране на всяко мобилно устройство, от iOS до Android. Ако знаете малко програмиране, неговите възможности са практически неограничени, защото се основава на CoffeeScript - относително лесен език за програмиране. A дизайнер Вие ще бъдете ограничени само от вашето въображение и умения за кодиране.

Framer - Какво е това?

За да следвате тази статия, трябва да имате поне основно разбиране за Framer. Ще използваме режима на проектиране и редактора на кода. Ако искате да допълните знанията си, можете да прочетете предишните ни статии от Framer: Как да създадете впечатляващи интерактивни прототипи , 7 прости микро-взаимодействия за подобряване на вашите прототипи

Защо трябва да използвате Framer с реални данни

Често срещан проблем при създаването на прототипи или дизайн е липсата на реални данни. Когато проектирате нова функция за съществуващ продукт, вместо да използвате измислено съдържание, можете да покажете логично, подходящо и реално съдържание. Това може да бъде всякакъв вид данни - например потребителски снимки. По този начин не се губи време в опити за създаване на фалшиво съдържание и грешките, произтичащи от използването на невалидни данни, ще бъдат избегнати. Всички налични данни са видими и може да се установи какво съдържание може да се изисква, в резултат комуникацията със заинтересованите страни и екипа за разработка е по-ефективна. Също така е възможно да се проектират в различни сценарии на употреба.

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

Нека прототипираме с реални данни!

Истинското забавление във Framer започва, когато използвате реални данни, които се актуализират в реално време от база данни. Може да се приложи всякакъв вид информация, например: потребителски профили със снимки, улични адреси, цени на акции, обменни курсове, прогнози за времето, информация за транзакции, всякаква информация, която приложенията използват редовно. Наистина мощен продуктов дизайн започва да се случва, когато прототипите в реално време се комбинират с реални данни. И вече не е необходимо да използвате скандалните текстови парчета в стил „lorem ipsum“ в латински стил.

Uber с API на Mapbox от Брайънт Джоу за Uber

API, използващ реални данни: Какво е това? Как да го използваме?

A Интерфейс за програмиране на приложения (API) е интерфейсът, чрез който комуникираме с приложения. Представете си приложение като ресторант. Храната е информация, а сервитьорите са API. Питате сервитьорите за храната, това е всичко, което трябва да направите. За останалото се грижат сервитьорите (API) и кухнята (база данни).

Става въпрос за достъп до реални данни, които живеят в определена база данни.

Какво е API?

Всяко приложение има API, който позволява да се събират и показват данни. Някои API са публично достъпни, а някои се използват само във вътрешни продукти.

Публично достъпните API се използват широко за създаване на нови приложения. Например, за да създадете приложение за времето, са необходими някои данни за времето. С помощта на многобройни уебсайтове за прогноза за времето, които споделят своите публични API, това е бриз. Също така много различни API могат да се комбинират, за да се създаде напълно нов продукт.

Къде можем да получим реални данни? Отворените API списъци

Има много публично достъпни API, които предоставят различни данни. Ето списък от пет, които са чудесни за прототипиране с реални данни във Framer. Всеки от тези API също връща данни във формата JSON , които могат лесно да се управляват в рамките.

Случайни потребители - Определено най-добрият API за начинаещи. Генерирайте пълни и произволни потребителски профили, от аватар до имейл адрес.

OpenWeatherMap - Това е много лесен за използване API. Тя ви позволява да проверявате текущото време и прогнози на всяко място. С помощта на този API можем да показваме данни като температура, влажност или скорост на вятъра.

Приложение за прогноза на времето от Войчех Добри

Покеапи - един от най-добрите API, създадени с образователна цел. Търсите нещо за покемоните? Можете да го намерите тук. Това е изчерпателен RESTful API, свързан с обширна база данни, подробно описваща всичко за основната серия игри Pokémon.

Покемон UI концепция от Сай Аунг

Instagram - Първият API в списъка, който изисква разрешение за използване. Услугата им обаче е много проста. Можете да получите достъп до всички снимки и потребители на Instagram и да ги покажете в новото си приложение.

Instagram на интелигентен часовник от Хиронобу Кимура

Mapbox - Предоставя невероятен брой услуги, които са лесни за интегриране с приложение, от карти и упътвания до геокодиране и дори сателитни изображения. Foursquare, Evernote, Instacart, Pinterest, GitHub и Etsy имат едно общо нещо: техните карти работят с Mapbox.

Този API е различен от предишните, защото не връща JSON файлове, но дава достъп до всички функции на Mapbox. Mapbox също създаде отличен урок за това как да използвате своя API във Framer .

Mapbox на мобилни устройства

Урок за API на RandomUser във Framer с реални данни

За да разберем как да работим с API в Framer, нека започнем с API за произволни потребители . Ще ни трябва един екран на приложението - списък с потребители.

Стъпка 1: Режим на проектиране

Ето списък на потребителите, които съдържат имена, фамилии и аватари. Това е всичко, което се изисква. Най-важната част от този процес е да се наименуват и групират правилно всички елементи. Аватарите и имената са групирани в слоя на рамката и всички рамки са групирани в списъка:

Последното нещо, което трябва да направите в режим на проектиране, е да маркирате слоя списък като интерактивен слой. За да направите това, просто щракнете върху иконата на местоназначението.

Стъпка 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'

Създайте обекта, наречен данни който ще съдържа JSON файла. Използвайте функцията печат за да видите дали JSON файлът е импортиран успешно:

print data

Стъпка 4: Достъп до конкретни данни от JSON файла

Сега се върнете към файловата структура на JSON:

В този JSON файл, resultados е масив, който съдържа повече обекти. Всеки обект е различен потребител. Първо, един от тези обекти трябва да бъде обективен. Използвайте функцията за печат, за да разберете по-добре какво се случва:

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 отговаря с: 'benjamin'. Et voila! Постигнат е достъп до 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

API на Instagram: Данни в реално време във Framer

Instagram е интересна отправна точка за започване на пътуване с данни в реално време. Инструкциите са относително лесни за изпълнение и API предоставя интересни данни - получавате пълен достъп. В тази част на статията API на Instagram се използва за създаване на прост прототип, който показва данните на моя профил в Instagram: име, най-новата снимка и брой „харесвания“.

Необходими са само пет реда код и токен за достъп, за да се извлекат данни от Instagram

Стъпка 1: Получете маркер за достъп

За да използвате API на Instagram, е необходим маркер за достъп. Може да се получи по два различни начина:

1. Най-често срещаният начин е да отидете на уебсайта на Instagram за разработчици и следвайте инструкциите. Този процес може да бъде труден за нетехнически хора.

2. За щастие има безопасен и лесен начин да го получите. Pixel Union разработи много по-опростен процес с едно щракване: отидете на твоят уебсайт и щракнете върху бутона Get access token.

Стъпка 2: Активиране на междудоменни заявки

След получаване на токен за достъп е необходим малък трик. Instagram не позволява заявки за API от вашия локален сървър (Framer) и следователно трябва да се използват заявки от страна на сървъра. Един от тях е JSONProxy . Отидете на уебсайта им, поставете един заявка за api на instagram и натиснете GO.

След като приключите, вместо да използвате свързването на API на Instagram, можете да използвате свързването JSONProxy.

Стъпка 3: Проектирайте просто приложение във Framer

Прост екран за приложение, проектиран във Framer.

В това оформление има само три ключови елемента: запазеното име, правоъгълник, който ще показва последната снимка, и броят на „харесванията“ под изображението. Всички те са маркирани като интерактивни слоеве за повторно използване в редактора на кода.

Стъпка 4: Напишете четири реда код, за да използвате данните от Instagram

Пет реда код във Framer за получаване на данните.

Тук потокът е същият като в API на произволен потребител. Всяка потребителска информация може да бъде достъпна от Instagram:

yourAccessToken = 'YOUR-ACCESS-TOKEN' instagramJSON = JSON.parse Utils.domLoadDataSync 'http://jsonproxy.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 не е трудна, но все пак отнема много време, за да се изгради голям прототип от него.

Въпреки това, когато е напълно скроен, със сигурност си струва да се помисли. Честито прототипиране с реални данни!