Designe det rigtige ting med Haiku-handlinger

Lad os udforske ved hjælp af handlinger i Haiku til at oprette følgende interaktive design:

Den egentlige haiku (https://share.haiku.ai/u/taylor/CheckOut) har * langt * overlegen kvalitet end det, der er vist her. Fork det for at begynde at bruge Haiku.

Jeg vil starte med at understrege, at det, vi laver, er en reel komponent. Haiku er alle SVG og fungerer på iOS, Android og Internettet. De er statslige, programmerbare og bedst af alt, du, designeren, bevarer kontrollen over dine kreationer, selv efter at de er integreret. Men hvorfor betyder det noget?

Problemet med designværktøj

Brugernes forventninger har udviklet sig forbi enkle overgange fra skærm til skærm - de bedste apps giver nu tankevækkende koreograferede interaktioner, der hjælper brugerne med hver bevægelse. Men selv det nyeste og bedste værktøj til skærmdesign hjælper os ikke med at gøre dette spring. Vi sidder fast ved at forsøge at brute tvinge tegnebræt til at beskrive komplekse tilstande. Vi kæmper med symboler, tilsidesættelser, layoutbegrænsninger, dynamiske data og designsystemer kun for at skabe artefakter, der ikke er den rigtige ting. Det efterlader ganske mange af os i denne erkendelse:

Hos Haiku mener vi, at designere fortjener noget mere magtfuldt end evnen til at tegne magiske linjer mellem skærme; mere reelle end symboler, der falder ud af synkronisering med produktionsapps.

Hvordan ser dette ud? Glad for at du spurgte. Vi har en række kommende indlæg, der giver det fulde billede. I dag vil vi kun fokusere på et stykke af det: Handlinger.

Introduktion af Haiku-handlinger

Handlinger er små kodestykker (JavaScript) med meget magt. Vi har designet handlinger, der skal være tilgængelige for folk, der kun kender lidt kode, eller som vil lære - såvel som for ingeniørveteraner.

For at være klar: du behøver ikke at kode for at bruge Haiku. Handlinger er helt valgfri, og du kan holde dig strengt i tidslinjen og scenen, eller du kan dykke lige ind i koden. Haiku inviterer dig til at bringe dine egne færdigheder til det kreative bord.
 
 Du kan bruge handlinger til at:

  • Rejse gennem tiden ved at ændre tidslinjepositionen
  • Svar på brugerinput
  • Arbejd med rigtige data
  • Skift appelementers egenskaber (tænk: placering, farve osv.)
  • Og mere! Kaninhullet løber dybt, da du har al JavaScript lige ved hånden.

Brug handlinger til at rejse gennem tiden

Lad os dykke ned i at udforske, hvordan man laver en interaktiv oplevelse i Haiku. For enkelhedens skyld kører vi hele eksemplet på en enkelt tidslinje; inden for en enkelt komponent. Meget kan opnås, selv med disse begrænsninger. Fra den første gif har du måske bemærket, at den første del af tidslinjen viser bevægelse i vandløkkerne, indtil brugeren klikker på knappen 'Check Out'.

Dette opnås med en rammeaktion - en begivenhed, der udløses, hver gang en ramme krydses. Vi har lagt vores på ramme 518 og instrueret den til at gå tilbage og spille igen fra starten (tid 0). Se nedenunder:

Med denne rammeaktion i spillet vil tidslinjen aldrig krydse denne ramme alene - den respekterer kommandoen til at hoppe tilbage og gentage fra begyndelsen. Det valgte uddrag indsætter blot JavaScript. Ved afslutningen af ​​denne tutorial skal du være forvisset om, at du ikke behøver at kende JavaScript for at være i stand til at opnå den adfærd, du forfølger. De fleste opgaver kan udføres ved at indsætte et uddrag og vide, til hvilket tidspunkt, du gerne vil rejse. Tro ikke mig? Lad os rejse igen; denne gang, når brugeren klikker på knappen 'Check Out'.

Brug af handlinger til at svare på brugerinput

Lad os tilføje en elementhandling denne gang, der fortæller tidslinjen at hoppe forbi vores rammeaktion og afspille vores sluttsekvens. Dette afsnit begynder på millisekund 8780, så lad os instruere knappen til at afspille tidslinjen fra dette punkt.

Med bare disse to handlinger - en på en ramme og en på et element - har vi opnået en hel del, ville du ikke sige?

Den egentlige haiku (http://bit.ly/2CXrjD1) har * langt * overlegen kvalitet end GIF'et, der er vist her.

Egenskaber, der lytter

Lad os fortsætte med at udforske. Du er måske fortrolig med at bruge enkle formler i regneark til at oprette dynamiske ligninger.

Det er en enkel og klar, men alligevel kraftig bestemmelse om at henvise til en værdi, der er gemt i en celle og bruge den på en anden på en ny måde. Vi har taget denne konstruktion og lagt den i alle vores ejendomsindgange inde i Haiku. Vi kalder dem udtryk. Vores input kan naturligvis have en simpel værdi, men de bliver dynamiske udtryk, når du starter dem med en "=".

Lad os gøre vores statiske 'Check Out'-knap dynamisk ved at fortælle dens vandrette position for at afspejle en lille procentdel af brugerens museposition.

Efter det samme mønster for knapens position Y, kan vi opnå en dynamisk effekt, der henleder opmærksomheden på opfordringen til handling.

Haikus ekspressionsindgange kan også lytte til stater. Du er i stand til at definere og ændre disse stater for at skabe en næsten ubegrænset mængde dynamisk interaktivitet. Vi overlapper det stykke til den næste tutorial, hvor vi vil demonstrere, hvordan du overfører dynamiske data til dine Haiku-kreationer, samt hvordan du slipper dem til din codebase.

Tak for at have læst! Sørg for at abonnere på vores publikation her på Medium og følg os på vores sociale kanaler for opdateringer.

  • Twitter
  • Facebook
  • Instagram
  • slack