Dovođenje bliže skice i efekata

Predstavljamo dva nova alata za tijek animacije iz UX Motion Design u Googleu

Predstavljamo Prostorno vrijeme inspektora i Sketch2AE

Dobar dizajn UX pokreta nije jednostavno animiranje imovine. Bilo da unosimo radost i razigranost, definiramo nove skalabilne uzorke ili zamišljamo ludi novi proizvod, pokret govori priču. A kad potrošimo djeliće vremena rekreirajući imovinu i pišući naočale, imamo manje vremena da se usredotočimo na pripovijedanje priča, najvažniji (i najugodniji) dio našeg posla.

Kao Googleov UX dizajner pokreta, gledao sam kako se vjernost naših platformi i aplikacija povećava kako bi djelomično premostila jaz između interaktivnog dizajna i animacije. Google razumije presudnu razliku između pričanja priče i klika preko zaslona. To osnaživanje, u kombinaciji s frustracijom zbog preostalih nedostataka u našem tijeku rada, nadahnulo je Adama Plouffa za pružanje više vremena za pripovijedanje.

Alati za dizajn mogu biti bol ¯ \ _ (ツ) _ / ¯

Unatoč postignutom napretku, mnogi od naših najdražih alata za dizajn gibanja još nisu stigli. Iako animacijski alati poput Bodymovina i Lottie pomažu u poboljšanju našeg tijeka rada, vjerojatno se svi možemo složiti da su dijelovi našeg procesa još uvijek pomalo i dobro slomljeni.

UX dizajneri Adam i ja surađujemo s Sketch-om dok radimo uglavnom u poslije efektima (AE). Iako ovi alati postaju industrijski standardi, uopće se ne igraju dobro. Naši najmanje omiljeni dani provodimo se rekreirajući sredstva u Illustratoru ili After Effectsima, često ostavljajući samo nekoliko sati da stvorimo nešto smisleno. I nakon što konačno nešto stvorimo, slijedi još jedan naporni rad - smišljanje načina objašnjavanja inženjerstvu pokreta (° ° □ °) ╯︵ ┻━┻. Umorni od gubljenja vremena, Adam je izbacio neke zlatne alate za pokret SUMux² Dizajnerski tim za koji nismo mogli zamisliti da sve zadrži za sebe, zato smo rado podijeljeni:

Sketch2AE: Maslac od kikirikija i žele između Sketch-a i AE-a
Inspektor prostor: Google Translate za inženjere

Sketch2AE: Skica za poslije efekte umanjena za aspirin

Sketch2AE je dodatak za Sketch i AE skripta koja umjetničke ploče prelazi sa Sketch na After Effects kao slojeve oblika i tekst koji se može uređivati ​​bez potrebe za vanjskim datotekama. Grupe i simboli su sačuvani, a jednostavni oblici se uvoze kao parametrični oblici za jednostavno animiranje. To je kao da je netko ponovno stvorio i organizirao svu imovinu Sketch-a za vas u After Effectsu u roku od nekoliko sekundi. Hvala, Adame!

Za moj tim, ovaj je postupak čak korak korak od željenog Adobe Illustrator => AE tijeka rada. Kad dobijem datoteku Illustrator od dizajnera, još uvijek imam puno priprema prije nego što započnem s animacijom u AE-u, a uključuje mnogo naprijed i nazad između aplikacija. Prošli su dani odbacivanja pripovijedanja.

Lijepljenje sredstava sa Sketch-a u After Effects

Radni tijek koji zapravo teče

Sketch2AE uklanja gomilu posrednih koraka i gradi sastav u AE koji je analogan projektu Sketch. Sketch2AE pretvara vaše:

  • Skicirajte simbole u predkomponente cijelog projekta u After Effects. Ažuriranje jednom posvuda.
  • Skicirajte grupe u slojeve s nadređenim radi skaliranja i repozicioniranja. Ovim se postiže nešto poput standardne funkcije grupiranja.
  • Skice maske u grupe s postavljenim mat efektima. Nema više maski za rekreiranje ispočetka.
  • Skica se oblikuje u prirodne slojeve AE oblika. Pravokutnici ostaju pravokutnici, a ovalni ostaju elipse. Animirajte učinkovito (konačno).

Saznajte više ili preuzmite Sketch2AE

Prostorno vrijeme inspektora: Nabavite svoje specifikacije za kod

Inspector Spacetime je također dodatak i AE skripta, ali dolazi u igru ​​nakon što se dogodi magija pokreta. Inspector Spacetime kreira naočale pokreta za referentne video zapise u jednom kliku, tako da možete ostati izvan pseće kuće inženjerskog tima.

Iako Bodymovin i Lottie olakšavaju izvoz upotrebljivog koda iz AE, ova čarobnica nije potrebna za spec komunikacije poput vremenskog kašnjenja ili ukupnog trajanja prijelaza. I nisu uvijek korisne za skalabilne UI elemente koji sadrže dinamički sadržaj.

Po mom iskustvu, komuniciranje i pretvaranje suptilnosti dobre animacije u kod zahtijeva puno dijaloga. To se isplati, ali ako želite osigurati da se prijelazi reproduciraju s punom vjernošću. I tada će stvari ići dobro. Ne mogu brojati trenutke zbrke zbog jezične barijere između animatora i inženjera koji opisuju iste koncepte. Bilo da se objesi na milisekunde u odnosu na okvire ili pokušava opisati vizualni prikaz krivulja kretanja nekome tko samo želi brojeve, nitko se ne zabavlja u toj jednadžbi.

Često sam želio čarobni štapić kojim bih preskočio muke i sitnice pisanja naočala. Radije bih oprao suđe ili prašio kuću. Kad koristim Inspector Spacetime, moram samo odabrati skupinu ključnih parova i kliknuti gumb. Da. To je to. Ne računanje (izvini / ne oprosti, Newton).

Generiranje inženjerskih specifikacija iz okvira After Effects

Nakon što kliknete gumb, vrijeme, odnos između tipki i kubična Bezierova krivulja prikupljaju se kao tekst i dodaju kompu koji ga prikazujete kao referentni video. Bez obzira na to koji su podaci inženjeri potrebni, oženjen je ispisom, spajajući vaše vizualne i podatkovne reference u jedno.

Tekst se može uređivati ​​na način da se učinkovito označi koje su tipke, ali glavna metoda komunikacije vremena dolazi iz izraza na tekstnom sloju. Taj će izraz ažurirati tekst dok se glava reproducira kroz aktivne okvire ključeva, čak i ako su pomaknuti početni i krajnji markeri.

Saznajte više ili preuzmite Space Inspector

Automatizirajte bubanj za zvuk da biste mogli više vremena provoditi zabavljajući se

Sketch2AE i Inspector Spacetime poboljšali su tijek rada između timova i omogućili nam više energije da usmjerimo prema kreativnim stvarima. Sretni smo što dijelimo neke načine koji će vam pomoći da se fokusirate na posao koji volite.

Isprobajte alate i pomozite nam da ih učinimo još boljim

  • Sketch2AE
  • Prostorno vrijeme inspektora

Zainteresirani za suradnju s nama? Pošaljite svoj portfelj ili demo kolu na motiondesign@google.com

- - - -

1. Adam Plouff napustio je Google da slijedi druge napore. Njegova bivša Google-ova obitelj drži toplo mjesto u njihovim srcima. Više o Adamovim solo projektima saznajte na battleaxe.co

2. Tim za pretraživanje, korisnik i karte UX (SUMux) dizajnira proizvode kao što su Google Assistant, Google Search App i Google Maps.