Vremenska crta 2.0 - Interakcijski dizajn za skicu

Interakcije dizajna i izvozni kôd, izravno u skici

Naša misija je premostiti jaz između dizajnera i programera. Ogromna količina vremena i truda tijekom ciklusa razvoja proizvoda troši se na dizajnere koji programerima komuniciraju kako proizvod treba izgledati i osjećati, a obično se stvari izgube u prijevodu.

Ako ste perfekcionist koji brine o sitnim detaljima, to može biti prilično frustrirajuće. Ulazi u vremensku traku.

Ažuriranje: Vremenska linija sada je dio Anima Toolkit - dopušta dizajnerima da izrade responzivne i interaktivne prototipove visoke vjernosti, a sve u Sketch-u
Napravite osjetljive i interaktivne prototipove visoke vjernosti, sve unutarnje skice

Jedna od stvari koja može stvoriti veliko korisničko iskustvo su animirane interaktivne komponente upletene u naš dizajn.

Ali u današnjem smo svijetu ograničeni na načine na koji možemo objasniti programerima te složene elemente dizajna. Uobičajena praksa je stvaranje GIF-ova ili mahanje rukama kako bismo objasnili kako se gumb treba ponašati kada ga korisnik klikne.

Interaktivne komponente na web mjestu koje je dizajnirao Stripe - https://stripe.com/us/billing

Danas s uzbuđenjem objavljujemo da smo stigli do druge faze našeg tajnog plana Anima. Interaktivne komponente su tu da u potpunosti promijene igru ​​za dizajnere i programere.

Po prvi put dizajneri mogu kreirati interaktivne komponente i izvesti ih kao kod.

Pa što su interaktivne komponente?

To je dobro pitanje.

Interaktivna komponenta:

  • Ima države.
  • Ima prijelaze između država.
  • Sadrži radnje koje korisnici mogu izvoditi, poput klika i zadržavanja miša, što pokreće prijelaze između država.
Kupite sada - interaktivni gumb s pokazivačem miša
Pomoću ova tri jednostavna koncepta stanja, tranzicije i radnji svatko može stvoriti potpuno funkcionalne interaktivne komponente.

Neki primjeri interaktivnih komponenti su gumbi, utovarivači, kartice, sklopke, potvrdni okviri itd.

Interakcijski urednik u Sketch

Anima interaktivni urednikNapravite osjetljive i interaktivne prototipove visoke vjernosti, sve unutarnje skice

Uređivač vremenske trake je mjesto na kojem se događa čarolija.

Počevši od vašeg dizajna Sketch, Artboard ili Group mogu se odabrati i učitati u uređivač vremenske trake.

Da bi komponenta postala interaktivna, dodaćemo jednu ili više država u kojima se slojevi u svakom stanju mogu prikazati ili sakriti, ponovno postaviti ili rotirati.

Zatim ćemo dodati Radnje koje su kombinacija sloja, događaja (klik / lebdjeti) i ciljanog stanja. U našem primjeru, kada korisnik pređe preko ružičastog sloja pozadine, aktivira se prijelaz u stanje1.

Odabirom ružičaste pozadine otkriva se ploča Akcije

Animacije unutar prijelaza mogu se u potpunosti prilagoditi pomoću ploče za olakšavanje u donjem desnom kutu.

Animacije prijelaza mogu se u potpunosti prilagoditi

Pregledajte komponentu

Nakon što sve postavite, možete pregledati komponentu.

U načinu pregleda možete pomaknuti pokazivač miša i kliknuti i vidjeti kako se komponenta ponaša točno u Sketch-u.

Izvozni kod

Sada ovdje postaje zanimljivo!

Izrada nevjerojatnih komponenti samo je prvi korak na putu za vaš dizajn. Postoji još jedan važan korak prije nego što korisnici mogu osjetiti i cijeniti sav vaš naporan rad. A to zapravo uključuje kodiranje komponente i njezino integriranje u konačni proizvod.

S izvoznim kodom, umjesto mahanja rukama pokušavajući objasniti ponašanje komponenti, programeri mogu zapravo komunicirati s njim i provjeriti stvarni kôd kako ga pokrenuti.

Kod je univerzalni jezik. Probijamo jezičku barijeru prevodeći dizajn u kod.

FAQ

P: Podržava li ugniježđene komponente?

O: Da.

P: Koji kod Anima izvozi?

O: Danas Vremenska crta izvozi HTML / CSS / JS vanilije bez ovisnosti. Naš plan puta uključuje React, VueJS, Angular, Lottie, iOS i Android.

P: Koliko košta Anima?

O: Počinje besplatno, a besplatan je za jedan projekt, pogledajte stranicu s planovima.

Napravite osjetljive i interaktivne prototipove visoke vjernosti, sve unutarnje skice

Prijeđite na našu web stranicu i započnite stvarati nevjerojatne interaktivne komponente i prototipove svojih proizvoda već danas: www.animaapp.com