Prototyypitys Webille Framerilla
Framer on todella tehokas työkalu, joka voi prototyyppaa kaiken, mitä voit ajatella, mutta jos katsot Framerin galleriaa, huomaat nopeasti:
Niistä 54 esimerkistä, 48 niistä on apps, 4 Apple Watch, 1 iPad ja 1 Apple TV. Onko Framer edes tarkoitettu "perinteiseen" web / desktop-suunnitteluun?
Ehdottomasti.
IBM Designissa suurin osa mallistoistani tehdään yritysten työpöydän web-sovelluksille. Suurin osa suunnittelijoista työskentelen käytössä Luonnos (mukaan lukien itse). Nämä sketch-tiedostot prototyyppataan sitten työkalulla InVision tai uudelleen ja prototyped koodi. Suunnittelutiimin etupään kehittäjänä minulla on ainutlaatuinen asema, jossa olen sekä suunnitellut että koodannut prototyyppejä.
Kun olen oppinut Framerin perusteet, päätin lisätä sen työnkulkuun ja se on todella parantanut suunnitteluprosessia. Yksittäisen tehokkain osa pystyy tuomaan staattisen Sketch-tiedoston Frameriksi ja kääntämään sen realistiseksi vuorovaikutteiseksi prototyypiksi suhteellisen lyhyessä ajassa.
Tällöin minun ei tarvitse viettää arvokasta aikaa prosessin alussa, joka tuo mallia uudelleen koodiin. Voin saada ideoita sidosryhmien ja käyttäjien eteen paljon nopeammin. Voin tallentaa koodauksen myöhemmin, kun projekti on vakiintunut.
Käyttämällä Frameria muutaman kuukauden ajan tässä muutamia asioita, joista olen oppinut:
Suunnittele ja suojaa prototyyppejäsi
Ennen projektin aloittamista päätän muutamia asioita:
Mitä yritän tehdä?
Olipa prototyyppi käyttäjätestejä varten tai idean käsitteellistämiseen, mikä on minimaalinen työmäärä, jonka avulla voisin saada ajatukseni tai hankkia tietoa testauksesta? En vain ole laiska;), tämä auttaa ratkaisemaan tarvittavat vuorovaikutukset, animaatiot ja näytöt, joita tarvitaan.
Mitä enemmän aikaa vietät suunnitteluun, sitä enemmän kiinnität. Mitä enemmän kiinnität, sitä vähemmän todennäköisesti olet tekemässä tarvittavat muutokset.
Käytämme esimerkkinä edellä olevaa prototyyppiä.
Tein työtä uudella projektilla ja halusin tutkia, mitä näyttäisi korttipohjaisen asettelun "sekoitus" animaatioiden välillä valtioiden välillä. Esitin perusajatuksen, jonka halusin tehdä ja jota käytin lähtökohtani.
Jos sinä Katso Lopullisessa prototyypissä vain ensimmäinen kortti voidaan napsauttaa jokaisessa vaiheessa. Ei ole mitään keinoa palata, ei leijua, viimeisen näytön sisältö ei ole täydellinen, eikä se ole lähes pikselin täydellinen. Mikään näistä ei ollut tarpeellista saada ajatukseni niin, etten viettänyt aikaa mukaan lukien. Framer voi tehdä lähes kaiken, mutta se ei tarkoita sitä, että sinun pitäisi yrittää tehdä kaiken prototyypillänne.
Luo UI-virtoja käyttämällä Andreasin mahtavaa ViewController-moduulia
Voit käyttää ViewController Sketch-plugin luodaan käyttöliittymät suoraan Sketchissä. Nopeasti kääntämällä mallisi napsautettaviin prototyyppeihin ilman koodin kirjoittamista.
Tämä on hienoa esitellä työsi sidosryhmille ja on todella yksinkertaista tehdä. Sen sijaan, että kävelisit Sketch-tiedoston läpi, jossa on kymmeniä taulukoita tai .pdf, voit esittää interaktiivisen prototyypin tai jakaa isännöidyn Framer-projektin URL-osoitteen.
Riippuen siitä, mitä yritän saavuttaa, saattaisin päätyä kirjoittamaan jonkinlaista koodia sellaisista asioista, kuten hover-vaikutuksista, animaatioista ja tekstinsyötteistä, jotka tuovat lisää realismia ja vuorovaikutteisuutta. Jälleen suunnittelija päättää, mikä on välttämätöntä, jotta saat ideaasi ja toteuttaisit sen asianmukaisesti.
Tarkista Andreas'Luo UI-virtoja Sketch- ja Framer-artikkelin avulla lisätietoja pluginista.
Microinteractions
Mielestäni on muutamia syitä, että liikkuvien prototyyppien käyttö on todella suosittua Framerin kanssa, joista yksi on mikrointeraktioita. Mutta sen ei tarvitse olla näin! Uskon, että web-suunnittelijat voivat olla parempia tekemään työmme enemmän liikkeitä, ja Framer on todella hyvä tässä.
Tämä on vain yksinkertainen esimerkki nopeasta vuorovaikutuksesta, jonka tein Sketch-tiedostolla, jonka suunnittelija oli jo tehnyt. Tällaisen vuorovaikutuksen tutkiminen kestää muutaman minuutin.
Toki, mutta miksi ei vain koodia?
Etupään kehittäjänä monet projekteistani lopulta päätyvät koodattuun prototyyppiin. Käytän sitten tätä prototyyppiä pohjana, jonka avulla kirjoitetaan etupään koodi tuotteeseen, joka toimii sivutekniikan puitteissa. Joten miksi ei vain koodia alusta alkaen?
Kuten aiemmin mainitsin, nopeus. Voin nopeasti tulostaa ideoita, jotka joko minä tai toinen suunnittelija ovat jo tehneet tuomalla ne Sketchistä Frameriksi. On hienoa suunnitteluprosessin alkuvaiheessa, jossa tutustut ideoihin ja pannaan palautetta nopeasti. Voin liikkua melko nopeasti koodilla, mutta Framer vie sen seuraavalle tasolle.
Toinen syy on vapaus. Yksinkertainen tosiasia, että kaikki Framerissa kirjoittamani koodini heitetään pois, on todella erinomainen. Sen avulla voin kokeilla asioita, joita en muuten haluaisi ja olla hieman löysempi koodini kanssa. Voin viettää 15 minuuttia tutkia ajatusta ja sitten roskata sen ilman katumusta.
Joitakin vinkkejä ja temppuja
Sinä (tai suunnittelijan kanssa, jonka kanssa työskentelet) luultavasti on luotava Sketch-tiedostot hieman eri tavalla.
- Ryhmittele kerrokset. Ryhmät, jotka eivät ole ryhmässä, jätetään huomiotta
- Vältä ryhmien nimien käyttämistä välilyönneillä
- Sketchissä piilotetut kerrokset tuodaan edelleen, mutta niiden näkyvyys asetetaan vääriksi.
- Luo yksinkertaisia, ainutlaatuisia nimiä teidän taululle
- Taulukon lopussa oleva miinus (-) sulkee sen, että sitä ei tuoda Framerille
Tasaa kaikki Sketchin kerrokset, jotka pysyvät staattisina. Tämä parantaa projektin latausaikaa, mikä on erityisen hienoa luodaksesi paremman prototyypin. Voit tehdä tämän lisäämällä tähdellä (*) Sketchin kerroksen loppuun.
Kannattaa viettää aikaa tiimisi suunnittelijoiden kanssa käymällä läpi Sketch-tiedostojen määrittäminen parhaiten sopivaksi työnkululle ja mikä toimii parhaiten joukkueelle.
Kun tuodaan Sketch-tiedosto Framer-sovellukseen, näet jotain tällaista:
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")Korvaa luonnos $: llä ja voit nyt käyttää $: ta viittaamaan Sketch-kerroksiin, säästämällä itsesi kirjoittamasta sanaa luonnosta satoja kertoja:
$ = Framer.Importer.load("imported/design@1x")Käytä normaalin kohdistimen koodinpalaa tavalliselle hiiren osoittimelle:
document.body.style.cursor = "auto"and then scale them down, so they're extra crisp. Tuon kuvani @ 2x: n ja pienennän ne alas, joten ne ovat erittäin teräviä. Huomaa, että tämä ei näytä liittyvän edellä mainitun ViewController-moduulin kanssa.
Framer.Device.contentScale = .5Sketch ja Framer käyttävät erilaisia oletusartikkeleita / laitteita webille. Sketch käyttää 1440 × 1024, kun Framer käyttää 1440 × 900. Valitsen 1440 × 900. Älä luota, että olet vain 900 pikseliä korkeudelle, mutta voit helposti luoda vieritettäviä sivuja Framerissa.
[- Tämä artikkeli oli alunperin lähetetty Mediumille , julkaistu uudelleen tekijän luvalla -]