Työkalut Ja Oppaat
Prototyyppien tekeminen todellisilla tiedoilla - kehystämisopas
Framer on yksi tehokkaimmista sovellusten prototyyppityökaluista. Sitä voidaan käyttää minkä tahansa mobiililaitteen suunnitteluun, iOS: stä Androidiin. Jos tiedät vähän ohjelmointia, sen ominaisuudet ovat käytännössä rajattomat, koska se perustuu CoffeeScript - suhteellisen helppo ohjelmointikieli. A suunnittelija rajoittaisi vain heidän mielikuvituksensa ja koodaustaitonsa.
Tämän artikkelin seuraamiseksi sinulla on oltava vähintään perustiedot Framerista. Käytämme Suunnittelutilaa ja Koodieditoria. Jos haluat täydentää tietämystäsi, voit lukea edelliset Framer-artikkelimme: Kuinka luoda upeita interaktiivisia prototyyppejä , 7 yksinkertaista mikrointeraktiota prototyyppiesi parantamiseksi
Miksi sinun tulisi käyttää kehystintä todellisten tietojen kanssa
Yleinen ongelma suunnittelussa tai prototyyppien tekemisessä on todellisten tietojen puute. Kun olemassa olevalle tuotteelle on suunniteltu uusi toiminto, fiktiivisen sisällön käyttämisen sijaan voidaan näyttää loogista, osuvaa ja todellisen näköistä sisältöä. Se voi olla mitä tahansa dataa - esimerkiksi käyttäjän valokuvia. Tällä tavoin väärän sisällön keksiminen ei hukkaa aikaa, ja virheellisten tietojen käytöstä johtuvat virheet vältetään. Kaikki käytettävissä olevat tiedot ovat näkyvissä, ja voidaan selvittää, mitä sisältöä edelleen tarvitaan - tämän seurauksena viestintä sidosryhmien ja kehitystiimin kanssa on tehokkaampaa. On myös mahdollista suunnitella erilaisia käyttötapauksia.
Suunnitellessamme uutta toimintoa unohdamme joskus, että kaikki käyttäjäprofiilit eivät ole täydellisiä, eikä kaikissa myymälän luokissa ole sama määrä tuotteita, eikä kaikissa tuotteissa ole samoja tietoja. Prototyyppejä todellisilla tiedoilla voidaan verrata LEGO-lohkojen rakentamiseen: Kuvitteellisten, löysien muotojen kanssa työskentelemisen sijaan voimme käyttää olemassa olevia komponentteja alusta alkaen ja rakentaa jotain todellista.
Katsotaan prototyyppi todellisilla tiedoilla!
Todellinen hauskaa Framerissa alkaa, kun käytetään todellisia tietoja, jotka päivitetään reaaliajassa tietokannasta. Kaikenlaisia tietoja voidaan käyttää, esimerkiksi: käyttäjäprofiilit valokuvilla, katuosoitteet, pörssikurssit, valuuttakurssit, sääennusteet, tapahtumatiedot - kaikki sovellusten tavallisesti käyttämät tiedot. Todella tehokas tuotesuunnittelu alkaa tapahtua, kun yhdistät reaaliaikaisen prototyypin ja todellisen datan. Ja ei enää tarvitse käyttää pahamaineisia latinankielisiä ”lorem ipsum” -paikkamerkkitekstejä.
Real-dataa käyttävä sovellusliittymä: mikä se on? Kuinka käytämme sitä?
An Sovellusohjelmointirajapinta (API) on käyttöliittymä, jonka kautta kommunikoimme sovellusten kanssa. Kuvittele sovellus ravintolana. Ruoka on tietoja ja odotushenkilöstö on API. Pyydät ruokaa tarjoilijalta - se on kaikki mitä sinun tarvitsee tehdä. Tarjoilija (API) ja keittiö (tietokanta) hoitavat loput.
Kyse on pääsystä tietyssä tietokannassa oleviin todellisiin tietoihin.
Jokaisella sovelluksella on sovellusliittymä, jonka avulla tietoja voidaan kaapata ja näyttää. Jotkut sovellusliittymät ovat julkisesti saatavilla, ja joitain käytetään vain sisäisissä tuotteissa.
Julkisesti saatavilla olevia sovellusliittymiä käytetään laajalti uusien sovellusten rakentamiseen. Esimerkiksi sääsovelluksen rakentamiseksi tarvitaan joitain säätietoja. Lukuisten sääennusteiden verkkosivustojen avulla, jotka jakavat julkisen sovellusliittymän, se on erittäin helppoa. Lisäksi monia erilaisia sovellusliittymiä voidaan yhdistää täysin uuden tuotteen luomiseksi.
Mistä voimme saada todellisia tietoja? Open API -luettelot
On olemassa monia julkisesti saatavilla olevia sovellusliittymiä, jotka tarjoavat erilaisia tietoja. Tässä on luettelo viidestä, jotka sopivat erinomaisesti prototyyppien luomiseen todellisilla tiedoilla Framerissa. Jokainen näistä sovellusliittymistä palauttaa myös tiedot sisään JSON muodossa, jota voidaan helposti käsitellä kehyksessä.
Satunnainen käyttäjä - Ehdottomasti paras API aloittelijoille. Se luo täydelliset, satunnaiset käyttäjäprofiilit avatarista sähköpostiosoitteeseen.
OpenWeatherMap - Tämä on erittäin helppokäyttöinen sovellusliittymä. Sen avulla voit tarkistaa nykyisen sään ja ennusteet missä tahansa paikassa. Tämän sovellusliittymän avulla voimme näyttää tietoja, kuten lämpötilan, kosteuden tai tuulen nopeuden.
Pokéapi - yksi parhaista opetustarkoituksiin luotuista sovellusliittymistä. Etsitkö jotain Pokémonista? Se löytyy täältä. Tämä on täydellinen RESTful-sovellusliittymä, joka on linkitetty laajaan tietokantaan, joka sisältää kaiken Pokémon-pääpelisarjasta.
Instagram - luettelon ensimmäinen sovellusliittymä, jonka käyttö edellyttää käyttöoikeutta. Sen palvelu on kuitenkin hyvin yksinkertaista. Voit käyttää kaikkia Instagram-valokuvia ja käyttäjiä ja näyttää ne uudessa sovelluksessa.
Mapbox - tarjoaa useita uskomattomia palveluja, jotka on helppo integroida sovellukseen, kartoista ja reittiohjeista geokoodaukseen ja jopa satelliittikuviin. Foursquare, Evernote, Instacart, Pinterest, GitHub ja Etsy on kaikilla yhteisiä - heidän karttansa tarjoaa Mapbox.
Tämä sovellusliittymä eroaa aiemmista, koska se ei palauta JSON-tiedostoja, mutta antaa pääsyn kaikkiin Mapbox-toimintoihin. Mapbox tuotti myös hienoa opetusohjelma niiden API: n käytöstä Framerissa .
Satunnainen käyttäjän sovellusliittymän opetusohjelma Framerissa käyttämällä todellisia tietoja
Aloitetaan siitä, miten ymmärrämme, miten Framer-sovellusliittymiä käytetään Satunnaisen käyttäjän sovellusliittymä . Tarvitsemme yhden sovelluksen näytön - käyttäjäluettelon.
Vaihe 1: Suunnittelutila
Tässä on luettelo käyttäjistä, jotka sisältävät nimiä, sukunimiä ja hahmoja. Se on kaikki mitä tarvitaan. Tärkein osa tätä prosessia on nimetä ja ryhmitellä kaikki elementit oikein. Hahmot ja nimet on ryhmitelty laatikkokerrokseen, ja kaikki laatikot on ryhmitelty luettelon sisällä:
Viimeinen asia, joka on tehtävä suunnittelutilassa, on merkitä lista kerros interaktiivisena kerroksena. Voit tehdä sen napsauttamalla vain kohdekuvaketta.
Vaihe 2: Ymmärrä JSON
Ensinnäkin on ymmärrettävä, mikä JSON on ja miten se saadaan Framerin ulkopuolelle. vuonna Satunnainen käyttäjän sovellusliittymän asiakirja , etsi tietopyyntö sovellusliittymältä. Se näyttää tältä: https://randomuser.me/api/?results=20 . Kuten näette, se on tavallinen linkki, joka avaa JSON-tiedoston selaimessasi:
Itse asiassa se ei näytä ollenkaan selvältä. Käytä JSON-tiedostoja oikein alustettuina käyttämällä nimeltään Chrome-laajennusta JSONview . Laajennuksen avulla tiedosto näyttää tältä:
Paljon parempi. Nyt sen pitäisi olla helppo lukea. Tiedosto sisältää joukon tuloksia ja käyttäjätietoja, jotka saatiin pyydettyään sitä API: lta. Joten mikä on JSON-tiedosto? Teknisiin yksityiskohtiin perehtymättä se on JavaScript-syntaksiin perustuva tekstitiedosto, joka sisältää tiettyjä tietoja tietokannasta. JSON-tiedostoa voidaan käyttää Framerissa tietojen näyttämiseen siitä.
Vaihe 3: Tuo JSON-tiedosto Frameriin
Nyt JSON-tiedosto voidaan tuoda Frameriin yhdellä koodirivillä:
data = JSON.parse Utils.domLoadDataSync 'https://randomuser.me/api/?results=20' Luo nimetty objekti tiedot joka sisältää JSON-tiedoston. Käytä Tulosta toiminto nähdäksesi onko JSON-tiedosto tuotu oikein:
print data 
Vaihe 4: Pääsy tiettyihin tietoihin JSON-tiedostosta
Palaa nyt JSON-tiedostorakenteeseen:
Tässä JSON-tiedostossa results on taulukko, joka sisältää enemmän objekteja. Jokainen esine on eri käyttäjä. Ensinnäkin yksi näistä kohteista on kohdistettava. Käytä tulostustoimintoa ymmärtääksesi paremmin, mitä tapahtuu:
print data.results[1] Framer-konsoli:
{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'} Suluissa oleva luku edustaa joukon objektia. Käyttämällä data.results[1] -painiketta pääset käyttämään kaikkia ensimmäisen käyttäjän tietoja JSON-tiedostossa.
Sitten voidaan näyttää kohteita, kuten nimi tai sukunimi:
print data.results[1].name.first Framer vastaa: 'benjamin'. Et voila! Pääsy API: n tietoihin on saavutettu!
Vaihe 5: JSONin tietojen näyttäminen
Viimeinkin! Ainoa asia on näyttää tiedot. Nyt on luotava yksinkertainen silmukka, joka kohdistaa kaikki kerrokset suunnittelutilasta. Lue lisää tasojen kohdistamisesta silmukalla tässä edellinen artikkeli .
Käytämme x = 0 kohdistaa taulukon ensimmäiseen objektiin JSON-tiedoista. Sitten jokaiselle lapset osa lista , osoitamme tiedot JSON-tiedoista. Silmukan lopussa lisäämme +1 käyttääksesi taulukon seuraavan objektin tietoja:
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++ Se siitä! Nyt voit palata suunnittelutilaan ja pelata suunnittelua, ja todelliset tiedot näkyvät prototyypissäsi!
Voit ladata yllä olevan Framer-tiedoston täältä: https://framer.cloud/djmvG
Instagram-sovellusliittymä - reaaliaikaiset tiedot Framerissa
Instagram on mielenkiintoinen lähtökohta matkan aloittamiseen reaaliaikaisella datalla. Ohjeita on suhteellisen helppo noudattaa, ja sovellusliittymä tarjoaa mielenkiintoisia tietoja - saat täydellisen käyttöoikeuden. Artikkelin tässä osassa Instagram-sovellusliittymää käytetään rakentamaan yksinkertainen prototyyppi, joka näyttää Instagram-profiilini tiedot: nimi, viimeisin valokuva ja tykkäysten lukumäärä.
Vaihe 1: Hanki käyttöoikeustunnus
Instagram-sovellusliittymän käyttäminen edellyttää käyttöoikeustunnusta. Se voidaan saada kahdella eri tavalla:
- Yleisin tapa on mennä Instagram kehittäjille verkkosivustolla ja noudata ohjeita. Tämä prosessi voi olla monimutkainen ei-teknisille ihmisille.
- Onneksi on helppo ja turvallinen tapa saada se. Pixel Union kehitti paljon helpomman napsautuksen: siirry kohtaan heidän verkkosivuillaan ja napsauta Get Access Token -painiketta.
Vaihe 2: Ota verkkotunnusten väliset pyynnöt käyttöön
Saatuaan käyttöoikeustunnuksen tarvitaan yksi pieni temppu. Instagram ei salli API-pyyntöjä paikalliselta isännältäsi (Framer), ja siksi on käytettävä palvelinpuolen kyselyjä. Yksi niistä on JSONProxy . Mene heidän verkkosivustolleen, liitä a pyyntö Instagram-sovellusliittymältä ja paina GO.
Kun se on valmis, voit käyttää JSONProxy-linkkiä sen sijaan, että käyttäisit Instagram API -linkkiä.
Vaihe 3: Suunnittele yksinkertainen sovellus Framerissa
Tässä suunnittelussa on vain kolme keskeistä elementtiä: nimi paikkamerkki, suorakulmio, joka näyttää viimeisimmän kuvan, ja tykkäysten määrä kuvan alla. Kaikki nämä on merkitty interaktiivisiksi tasoiksi, joita voidaan käyttää uudelleen koodieditorissa.
Vaihe 4: Kirjoita neljä riviä koodia Instagram-tietojen käyttämiseen
Virta tässä on sama kuin Random User API -sovelluksessa. Kaikkia käyttäjätietoja voidaan käyttää Instagramista:
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 Se siitä! Viisi riviriviä, ja voit tehdä prototyypin käyttämällä Instagramin toimittamia reaaliaikaisia ja reaalisia tietoja. Lataa toimiva prototyyppi täältä: https://framer.cloud/iYAXl . (Muista, että sinun on lisättävä oma pääsyavaimesi tämän prototyypin ajamiseksi.)
Yhteenveto - hyvät ja huonot puolet
Luomalla prototyyppejä, jotka käyttävät API: sta saatuja todellisia tietoja tietokannasta, tuodaan esiin uusia luovia mahdollisuuksia ja kyky tarkistaa tuotesuunnittelu - voidaan rakentaa 100% tuotteen kanssa sopivia prototyyppejä ja testata uusia toimintoja todellisilla käyttäjillä. . Kun esikatselet kaikkia järjestelmän tietoja, on vaikeampaa jättää väliin elementti, joka on sisällytettävä suunnitteluun, ja kun pääsy oikeisiin tietoihin vältetään väärennettyjen tietojen käytöstä johtuvat suunnitteluvirheet.
Framerin korkean tarkkuuden prototyyppien tekeminen on kuitenkin melko kallista. Tarvitaan paljon säätämistä halutun vaikutuksen saamiseksi - mikä syö aikaa ja rahaa. Kuten Random User API -esimerkissä on esitetty, kommunikointi API: n kanssa ei ole vaikeaa, mutta suuren prototyypin luomiseen tarvitaan vielä paljon aikaa.
Kuitenkin, kun se annetaan täydellä mitalla, se on ehdottomasti harkitsemisen arvoinen. Hyvää prototyyppien tekemistä todellisilla tiedoilla!
• • •
