Prototypowanie z wykorzystaniem rzeczywistych danych — samouczek dotyczący tworzenia ramek

Framer to jedno z najpotężniejszych narzędzi do prototypowania aplikacji. Można go wykorzystać do projektowania na dowolne urządzenie mobilne, od iOS do Androida. Jeśli znasz trochę programowanie, jego możliwości są praktycznie nieograniczone, ponieważ opiera się na CoffeeScript – stosunkowo łatwym języku programowania. Projektant byłby ograniczony jedynie swoją wyobraźnią i umiejętnościami kodowania.

Aby śledzić ten artykuł, powinieneś mieć przynajmniej podstawową wiedzę na temat Framer. Użyjemy trybu projektowania i edytora kodu. Jeśli chcesz uzupełnić swoją wiedzę, możesz przeczytać nasze poprzednie artykuły dotyczące Framer: Jak tworzyć oszałamiające interaktywne prototypy, 7 prostych mikrointerakcji, aby ulepszyć swoje prototypy

Dlaczego powinieneś używać framera z prawdziwymi danymi

Częstym problemem w projektowaniu lub prototypowaniu jest brak prawdziwych danych. Gdy nowa funkcja jest zaprojektowana dla istniejącego produktu, zamiast fikcyjnych treści można wyświetlić logiczną, istotną i realistycznie wyglądającą treść. Mogą to być dowolne dane — na przykład zdjęcia użytkowników. W ten sposób nie marnujesz czasu na wymyślanie fałszywych treści, a unikniesz błędów wynikających z używania nieprawidłowych danych. Wszystkie dostępne dane są widoczne i można ustalić, jakie treści mogą być jeszcze potrzebne — dzięki temu komunikacja z interesariuszami i zespołem programistów jest bardziej efektywna. Możliwe jest również projektowanie wokół różnych scenariuszy użycia.

Projektując nową funkcję czasami zapominamy, że nie każdy profil użytkownika jest kompletny, nie wszystkie kategorie w sklepie mają taką samą ilość produktów, a nie każdy produkt wyświetla te same dane. Prototypowanie z użyciem prawdziwych danych można porównać do budowania czegoś z klocków LEGO: Zamiast pracować z wyimaginowanymi, luźnymi kształtami, możemy użyć istniejących komponentów z pudełka i zbudować coś prawdziwego.

Zróbmy prototyp z prawdziwymi danymi!

Prawdziwa zabawa w Framer zaczyna się, gdy używane są prawdziwe dane aktualizowane w czasie rzeczywistym z bazy danych. Można zastosować dowolny rodzaj danych, na przykład: profile użytkowników ze zdjęciami, adresami, notowaniami giełdowymi, kursami wymiany, prognozami pogody, informacjami o transakcjach — dowolnymi danymi, których zwykle używają aplikacje. Naprawdę potężny projekt produktu zaczyna się pojawiać, gdy połączysz prototypowanie w czasie rzeczywistym z rzeczywistymi danymi. I nie będzie już konieczne używanie niesławnego łacińskiego tekstu zastępczego „lorem ipsum”.

Interfejs API wykorzystujący rzeczywiste dane: co to jest? Jak tego używamy?

Interfejs programowania aplikacji (API) to interfejs, przez który komunikujemy się z aplikacjami. Wyobraź sobie aplikację jako restaurację. Jedzenie to dane, a kelnerzy to API. Pytasz obsługę kelnerską o jedzenie — to wszystko, co musisz zrobić. Resztą zajmuje się obsługa kelnerska (API) i kuchnia (baza danych).

Chodzi o dostęp do rzeczywistych danych, które znajdują się w danej bazie danych.

Każda aplikacja ma interfejs API, który umożliwia przechwytywanie i wyświetlanie danych. Niektóre interfejsy API są publicznie dostępne, a niektóre są używane tylko w produktach wewnętrznych.

Publicznie dostępne interfejsy API są szeroko stosowane do tworzenia nowych aplikacji. Na przykład, aby zbudować aplikację pogodową, wymagane są pewne dane pogodowe. Dzięki licznym witrynom z prognozą pogody, które udostępniają swoje publiczne interfejsy API, jest to bardzo łatwe. Co więcej, wiele różnych interfejsów API można łączyć w celu stworzenia zupełnie nowego produktu.

Skąd możemy uzyskać prawdziwe dane? Listy otwartych interfejsów API

Istnieje wiele publicznie dostępnych interfejsów API, które udostępniają różne dane. Oto krótka lista pięciu, które doskonale nadają się do tworzenia prototypów z prawdziwymi danymi w programie Framer. Każdy z tych interfejsów API zwraca również dane w formacie JSON, który można łatwo obsłużyć we frameworku.

Random User – Zdecydowanie najlepszy interfejs API dla początkujących. Generuje kompletne, losowe profile użytkowników, od awatara po adres e-mail.

OpenWeatherMap – jest to bardzo łatwy w użyciu interfejs API. Pozwala sprawdzić aktualną pogodę i prognozy w dowolnym miejscu. Za pomocą tego API możemy wyświetlać takie dane jak temperatura, wilgotność czy prędkość wiatru.

Pokeapi – jedno z najlepszych API stworzonych do celów edukacyjnych. Szukasz czegoś o Pokemonach? Można go znaleźć tutaj. Jest to pełny interfejs API RESTful połączony z obszerną bazą danych, która zawiera szczegółowe informacje na temat głównej serii gier Pokemon.

Instagram – pierwsze API na liście, które wymaga autoryzacji do korzystania. Jego obsługa jest jednak bardzo prosta. Możesz uzyskać dostęp do wszystkich zdjęć i użytkowników Instagrama i wyświetlać je w nowej aplikacji.

Mapbox — zapewnia szereg niesamowitych usług, które można łatwo zintegrować z aplikacją, od map i wskazówek dojazdu po geokodowanie, a nawet zdjęcia satelitarne. Foursquare, Evernote, Instacart, Pinterest, GitHub i Etsy mają coś wspólnego — ich mapy są oparte na Mapbox.

Ten interfejs API różni się od poprzednich, ponieważ nie zwraca plików JSON, ale zapewnia dostęp do wszystkich funkcji Mapbox. Mapbox stworzył również świetny samouczek na temat korzystania z interfejsu API w programie Framer.

Samouczek losowego interfejsu użytkownika w programie Framer przy użyciu rzeczywistych danych

Aby zrozumieć, jak pracować z interfejsami API w programie Framer, zacznijmy od interfejsu Random User API. Będziemy potrzebować jednego ekranu aplikacji — listy użytkowników.

Krok 1: Tryb projektowania

Oto lista użytkowników zawierająca imiona, nazwiska i awatary. To wszystko, co jest wymagane. Najważniejszą częścią tego procesu jest odpowiednie nazwanie i pogrupowanie wszystkich elementów. Awatary i nazwy są pogrupowane w warstwie pudełkowej, a wszystkie pola są zgrupowane na liście:

Ostatnią rzeczą, którą należy zrobić w trybie projektowania, jest oznaczenie warstwy listy jako warstwy interaktywnej. Aby to zrobić, po prostu kliknij ikonę celu.

Krok 2: Zrozumienie JSON

Przede wszystkim konieczne jest zrozumienie, czym jest JSON i jak uzyskać go poza Framer. W dokumentacji interfejsu Random User API znajdź żądanie danych z interfejsu API. Wygląda to tak: https://randomuser.me/api/?results=20. Jak widać, jest to zwykły link, który otwiera plik JSON w Twojej przeglądarce:

Tak jak jest, wcale nie wygląda to jasno. Aby wyświetlić poprawnie sformatowane pliki JSON, użyj wtyczki do Chrome o nazwie JSONview. Z wtyczką plik będzie wyglądał tak:

Dużo lepiej. Teraz powinno być łatwe do odczytania. Plik zawiera tablicę wyników z danymi użytkownika, które otrzymano po zapytaniu o to API. Czym więc jest plik JSON? Bez wchodzenia w szczegóły techniczne, jest to plik tekstowy oparty na składni JavaScript, który zawiera określone dane z bazy danych. JSON może być używany w programie Framer do wyświetlania z niego danych.

Krok 3: Zaimportuj plik JSON do Framer

Teraz plik JSON można zaimportować do programu Framer za pomocą jednego wiersza kodu:

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

Utwórz obiekt o nazwie data , który będzie zawierał plik JSON. Użyj funkcji drukowania , aby sprawdzić, czy plik JSON został prawidłowo zaimportowany:

 print data 

Krok 4: Dostęp do określonych danych z pliku JSON

Teraz wróć do struktury pliku JSON:

W tym pliku JSON results to tablica zawierająca więcej obiektów. Każdy obiekt to inny użytkownik. Najpierw jeden z tych obiektów musi zostać namierzony. Użyj funkcji drukowania, aby lepiej zrozumieć, co się dzieje:

 print data.results[1]

Konsola ramek:

 {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"}

Liczba w nawiasach reprezentuje numer obiektu w tablicy. Za pomocą data.results[1] uzyskuje się dostęp do wszystkich danych pierwszego użytkownika w pliku JSON.

Następnie można wyświetlić elementy takie jak imię czy nazwisko:

 print data.results[1].name.first

Framer odpowiada: "benjamin" . Zrobione! Dostęp do danych z API został osiągnięty!

Krok 5: Wyświetlanie danych z JSON

Wreszcie! Pozostało tylko wyświetlić dane. Teraz należy utworzyć prostą pętlę, która będzie kierować wszystkie warstwy z trybu projektowania. Przeczytaj więcej o kierowaniu warstw za pomocą pętli w tym poprzednim artykule.

Używamy x = 0 , aby wskazać pierwszy obiekt w tablicy z danych JSON. Następnie dla każdego elementu child z listy przypisujemy dane z danych JSON. Na końcu pętli dodajemy +1, aby wykorzystać dane z następnego obiektu w tablicy:

 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++

Otóż ​​to! Teraz możesz wrócić do trybu projektowania i bawić się projektem, a prawdziwe dane zostaną wyświetlone w twoim prototypie!

Możesz pobrać powyższy plik Framer tutaj: https://framer.cloud/djmvG

Instagram API – dane w czasie rzeczywistym w Framer

Instagram to ciekawy punkt wyjścia do rozpoczęcia podróży z danymi w czasie rzeczywistym. Instrukcje są stosunkowo łatwe do wykonania, a API dostarcza ciekawych danych – otrzymujesz pełny dostęp. W tej części artykułu interfejs API Instagrama służy do zbudowania prostego prototypu, który wyświetla moje dane z profilu na Instagramie: imię i nazwisko, ostatnie zdjęcie i liczbę polubień.

Krok 1: Uzyskaj token dostępu

Aby korzystać z API Instagrama, wymagany jest token dostępu. Można go zdobyć na dwa różne sposoby:

1. Najpopularniejszym sposobem jest wejście na stronę Instagram for Developers i postępowanie zgodnie z instrukcjami. Ten proces może być skomplikowany dla osób nietechnicznych.
2. Na szczęście istnieje łatwy i bezpieczny sposób na jego zdobycie. Pixel Union opracował znacznie łatwiejszy proces jednym kliknięciem: przejdź do ich witryny i kliknij przycisk Uzyskaj token dostępu.

Krok 2: Włącz żądania międzydomenowe

Po otrzymaniu tokena dostępu wymagana jest jedna mała sztuczka. Instagram nie zezwala na żądania API z Twojego hosta lokalnego (Framer), dlatego należy używać zapytań po stronie serwera. Jednym z nich jest JSONProxy. Wejdź na ich stronę, wklej żądanie z API Instagrama i naciśnij GO.

Gdy to zrobisz, zamiast korzystać z łącza API Instagram, można użyć łącza JSONProxy.

Krok 3: Zaprojektuj prostą aplikację w Framer

W tym projekcie są tylko trzy kluczowe elementy: symbol zastępczy nazwy, prostokąt, który wyświetli najnowsze zdjęcie oraz liczba polubień pod obrazem. Wszystkie te elementy są oznaczone jako warstwy interaktywne, które można ponownie wykorzystać w edytorze kodu.

Krok 4: Napisz cztery wiersze kodu, aby wykorzystać dane z Instagrama

Tutaj przepływ jest taki sam, jak w interfejsie Random User API. Wszelkie dane użytkownika można uzyskać z Instagrama:

 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

Otóż ​​to! Pięć linijek kodu i możesz tworzyć prototypy, korzystając z danych na żywo i rzeczywistych dostarczanych przez Instagram. Pobierz działający prototyp tutaj: https://framer.cloud/iYAXl. (Pamiętaj, że aby uruchomić ten prototyp, musisz dodać własny KLUCZ DOSTĘPU).

Podsumowanie – plusy i minusy

Tworząc prototypy wykorzystujące rzeczywiste dane uzyskane za pośrednictwem API z bazy danych, ujawniają się nowe możliwości twórcze i możliwość sprawdzenia projektu produktu – można budować prototypy w 100% zgodne z produktem i testować nowe funkcje na rzeczywistych użytkownikach . Dzięki podglądowi wszystkich danych w systemie trudniej przeoczyć element, który musi znaleźć się w projekcie, a mając dostęp do danych rzeczywistych, unika się błędów projektowych wynikających z użycia fałszywych danych.

To powiedziawszy, prototypowanie w wysokiej wierności w Framer jest dość drogie. Uzyskanie pożądanego efektu wymaga wielu poprawek, co pochłania czas i pieniądze. Jak pokazuje przykład Random User API, komunikacja z API nie jest trudna, ale wciąż potrzeba dużo czasu, aby stworzyć z niego świetny prototyp.

Niemniej jednak, mając pełną miarę, z pewnością warto się nad tym zastanowić. Udanego prototypowania z prawdziwymi danymi!

• • •

Dalsza lektura na blogu Toptal Design:

• Najlepsze praktyki projektowania interfejsu użytkownika i typowe błędy
• Puste stany – najbardziej pomijany aspekt UX
• Prostota jest kluczem – odkrywanie minimalistycznego projektowania stron internetowych
• Zasady heurystyczne dla interfejsów mobilnych
• Projektowanie pod kątem czytelności — przewodnik po typografii internetowej