Bevægelsesdesign til internettet, iOS og Android med Haiku

Et fælles designmål for moderne digitale produkter er at overraske og glæde brugerne, og bevægelsesdesign kan være et kraftfuldt værktøj i dit arsenal til at gøre det. Underholdende indlæsningsanimationer, glædelig feedback og brug af bevægelse til at lede øjet mellem overgange er alle gode måder at hæve din brugeroplevelse på.
 
Paul Stamatiou opsummerede vores tanker godt om, hvor designere skulle passe ind i denne ligning for over tre år siden:

Desværre er de fleste moderne designværktøjer og arbejdsgange ikke konfigureret til at lade designere faktisk designe disse 58 rammer.

Dagens populære arbejdsgange drejer sig om at skabe bortkastede prototyper, der bruges til at kommunikere til udviklere, som derefter omhyggeligt genskaber animationer efter bedste evne og i kode.
 
Ikke kun er dette spild af tid og ressourcer, men processen er så udmattende, at selv erfarne designere og udviklere ender med at nøjes med "gode nok" implementeringer. Og hvis de ønsker at gentage deres design efter at have prøvet et koncept, er de tilbage igen fra firkant et.

Haiku er anderledes

Haiku er et moderne designværktøj, der giver designere og udviklere mulighed for at opbygge fantasifulde brugergrænsefladekomponenter. Kode valgfri. Med sin visuelle tidslinje er det let at designe grænseflader, der er drevet af bevægelse.

Mød Haiku

Alt, der er skrevet i Haiku, er produktion klar, og når den er integreret med din kodebase, kan du fortsætte med at itereere dine design. Ingen hånd af nødvendigt.

Tænker i tid og rum

Før vi ruller ærmerne op i Haiku, er det nyttigt at tænke på, hvordan vi ønsker at oversætte vores design til bevægelse ved at tænke som en animator - i tid og rum.

Hvis du er ny i bevægelse, er en enkel måde at gøre det på storyboard.

Storyboards blev populariseret af Walt Disney Productions i 1930'erne som en måde for animatører og instruktører at kommunikere en historie som en rækkefølge. I interaktionsdesign kan storyboards hjælpe os med at bestemme:

  • Hvilke elementer har vi brug for
  • Hvilke egenskaber vi manipulerer
  • Hvilke nøglerammer vi begynder med (mere om dem senere)

Lad os f.eks. Storyboard en hoppende bold, som vi vil bruge til at komme i gang i Haiku:

Fra dette enkle storyboard kan vi bestemme:

  • Vi har brug for 2 elementer; bolden og skyggen
  • Vi vil ændre kuglens placering, kuglens skala og skyggenes uklarhed
  • Vi har brug for mindst 3 nøglerammer til, at vores animation sømløst kan loopes

Ved storyboarding skal du prøve at ikke hænge på små detaljer - en masse af magien i bevægelse sker, når du animerer og itererer dit design visuelt. Bare regne ud nok til at komme i gang.

Kom godt i gang med Haiku

Arbejde med sketch

I Haiku er der 2 måder at arbejde med Sketch - du kan enten importere en eksisterende Sketch-fil eller oprette nye designs fra bunden.

Hvis du vil starte med et nyt design, er den bedste måde at gøre det på at begynde at designe i kedelfilen Sketch-fil, der er inkluderet i hvert Haiku-projekt. Bare dobbeltklik for at redigere:

Kedelpladen Sketch-fil indeholder flere instruktioner - vi dækker dem senere.

Du kan også importere eksisterende Sketch & SVG-filer:

Her er en, jeg lavede tidligere.

Haiku ser efter tegnebræt og skiver og importerer dem smart som separate elementer i dit bibliotek. Når du har tegnet din kugle og skygge, er den nemmeste måde at konvertere dine figurer til skiver på at markere dem som 'Make Exportable' i Sketch:

Når du har ramt Gem, vises dine Sketch-skiver i dit Haiku-bibliotek:

Du kan derefter trække elementer fra biblioteket til scenen:

Hver gang en egenskab redigeres, opretter Haiku automatisk en keyframe, hvor spillehovedet er placeret. Tænk på nøglerammer på samme måde, som du vil ramme i vores originale storyboard.

Egenskaber kan redigeres direkte på tidslinjen eller ved at manipulere elementer visuelt på scenen:

Indtastning af nøjagtige egenskaber sikrer en 100% sømløs løkke af vores hoppende kugle.

Nu hvor vores nøglerammer er konfigureret, er det let at lette mellem dem ved hjælp af det indbyggede tween-bibliotek ved at højreklikke på tidslinjen. Jeg bruger Ease In → Cubic and Ease Out → Cubic, men jeg vil anbefale at eksperimentere med forskellige tweens for at finde den rigtige til din animation:

Nu kommer vi et sted!

Ved hjælp af de grundlæggende teknikker, vi netop har brugt, er det let at tilføje flere detaljer. Tilføjelse af nøglebilleder delvis gennem tidslinjen for at afsløre skyggen, når bolden er i nærheden:

Og skubber bolden lodret for at efterligne fysik:

Udgivelse genererer en unik Share URL, du kan bruge til at dele med andre:

På delingssiden kan du forhåndsvise din haiku på nettet med indlejringsinstruktioner:

Se delingsiden for denne haiku

Alt oprettet i Haiku er ren JS / CSS klar til at klikke ind i enhver web-app, med indbyggede rendere til iOS og Android drevet af Lottie.

Det er en wrap!

Hvis du har nået det så langt, skal du sandsynligvis tilmelde dig den private beta, hvis du ikke allerede har gjort det. Hvis du har spørgsmål, er du velkommen til at nå ud i kommentarerne herunder.

Du kan også holde dig opdateret med det nyeste om:

  • Twitter
  • Facebook
  • Instagram
  • slack