Eskiisi ja järelmõjude lähendamine lähemale

Tutvustame UX Motion Designis kahte uut animatsiooni töövoo tööriista

Tutvustame inspektorit Spacetime ja Sketch2AE

Hea UX-i liikumise kujundus ei ole lihtsalt vara animeerimine. Ükskõik, kas süstime veetlust ja mängulisust, määratleme skaleeritavaid uusi mustreid või kontseptualiseerime hullu uut toodet, jutustab motion lugu. Ja kui me kulutame tükkideks aega varade taasloomiseks ja spetsifikatsioonide kirjutamiseks, on meil vähem aega keskenduda jutuvestmisele, mis on meie töö kõige olulisem (ja kõige nauditavam) osa.

Google'is UX-i liikumiskujundajana olen jälginud, kuidas meie platvormide ja rakenduste usaldusväärsus suureneb, et osaliselt täita lõhe interaktsiooni kujundamise ja animatsiooni vahel. Google mõistab loo rääkimise ja ekraanide kaudu klõpsamise olulist erinevust. See volitamine koos pettumusega meie töövoo järelejäänud lünkades innustas Adam Plouff¹ andma meile rohkem aega jutuvestmiseks.

Kujundusvahendid võivad olla ¯ \ _ (ツ) _ / ¯

Hoolimata tehtud edusammudest ei ole paljud meie lemmikliikumise kujundamise tööriistad veel sellega hakkama saanud. Kuigi animatsioonitööriistad, näiteks Bodymovin ja Lottie, aitavad meie töövooge paremaks muuta, võime ilmselt kõik nõustuda, et meie protsessi osad on siiski natuke, ehkki katki.

UX-i disainerid Adam ja mina töötame Use Sketchiga, samal ajal kui töötame peamiselt After Effectsis (AE). Ehkki need tööriistad on muutumas tööstusstandarditeks, ei mängi nad üldse hästi - üldse. Meie kõige vähem lemmikpäevad kulutatakse varade taasloomisele Illustratoris või After Effectsis, jättes sageli vaid mõne tunni, et midagi tähenduslikku luua. Ja kui me lõpuks midagi loome, on käes veel üks tüütu töö - mõeldes välja, kuidas selgitada liikumisandmeid insenerile (╯ ° □ °) ╯︵ ┻━┻. Väsinud aja raiskamise, kooris Adam SUMux² Motioni jaoks mõned kuldsed tööriistad. Kujundusmeeskond, mida me ei osanud ette kujutada, et hoiame kõik enda käes, nii et jagame rõõmuga:

Sketch2AE: eskiisi ja AE vaheline maapähklivõi ja tarretis
Inspector Spacetime: Google'i tõlge inseneridele

Sketch2AE: visand After Effectsi miinus aspiriin

Sketch2AE on Sketchi pistikprogramm ja AE-skript, mis edastab joonistused eskiisilt After Effectsile kuju kihtide ja redigeeritava tekstina, ilma et oleks vaja väliseid faile. Rühmad ja sümbolid säilitatakse, samas kui lihtsad kujundid imporditakse parameetriliste kujunditena hõlpsaks animeerimiseks. See on nii, nagu keegi taaslooks ja korraldaks sekundi jooksul kõik eskiisivarad teie eest, loomulikult After Effectsis. Aitäh, Adam!

Minu meeskonna jaoks on see protsess isegi samm edasi ihaldatud Adobe Illustrator => AE töövooga. Kui saan disainerilt illustraatorifaili, on mul enne AE-s animatsiooni alustamist veel palju ettevalmistustöid, hõlmates rakenduste vahel palju edasi-tagasi tööd. Möödas on jutuvestmise edasilükkamise päevad.

Vara skitseerimine eskiisilt After Effectsisse

Töövoog, mis tegelikult voolab

Sketch2AE eemaldab hulga vaheetappe ja loob AE-s kompositsiooni, mis on analoogne projektiga Sketch. Sketch2AE teisendab teie:

  • Visandisümbolid kogu projekti hõlmavatesse eelkomplektidesse jaotises After Effects. Üks kord värskendamine värskendab kõikjal.
  • Visandage rühmad vanematega kihtideks mõõtmete muutmiseks ja ümberpaigutamiseks. See saavutab midagi tavalise rühmitusfunktsiooni sarnast.
  • Visandage maskid rühmadesse koos matt-efektidega. Enam pole vaja maskide taasloomist nullist.
  • Visandvormid loomulike AE-kihtidena. Ristkülikud jäävad ristkülikuteks ja ovaalsed jäävad ellipsideks. Animeerige tõhusalt (lõpuks).

Lisateave või laadige alla Sketch2AE

Inspector Spacetime: saate oma andmed koodini viia

Inspector Spacetime on ka pistikprogramm ja AE-skript, kuid see tuleb mängu pärast seda, kui liikumisprojekti võlujõud juhtub. Inspector Spacetime loob ühe klõpsuga viidete videote jaoks spetsifikatsioonid, et saaksite eemale insenerimeeskonna koertehoonest.

Ehkki Bodymovin ja Lottie muudavad kasutatava koodi eksportimise AE-st lihtsamaks, pole see koodimõistmine spetsiifiliste kommunikatsioonide jaoks vajalik, nagu näiteks viivitus või kogu üleminekuaeg. Ja see pole alati abiks dünaamilist sisu sisaldavate mastabeeritavate kasutajaliidese elementide jaoks.

Minu kogemuste kohaselt eeldab hea animatsiooni edastamine ja peenteks koodideks muutmine dialoogi. See on siiski seda väärt, kui soovite kindlustada, et teie üleminekuid korratakse täie truudusega. Ja siis lähevad asjad hästi. Ma ei saa arvestada segadushetki, mis tuleneb animaatorite ja inseneride keelebarjäärist, mis kirjeldavad samu mõisteid. Ükskõik, kas see riputatakse millisekunditesse või raamidesse või üritatakse kirjeldada liikumiskõverate visuaalset kujundust kellelegi, kes lihtsalt soovib numbreid, pole kellelgi selles võrrandis nalja.

Olen tihti soovinud, et võlukepiga vahele jääks spetsifikatsioonide kirjutamise piin ja tüütus. Ma pigem peseksin nõusid või tolmu oma maja. Nüüd, kui kasutan inspektorit Spacetime, pean vaid valima võtmekaadrite paari rühma ja klõpsama nuppu. Jah. See selleks. Puudub arvutus (vabandust / pole kahju, Newton).

Insener-tehniliste andmete genereerimine After Effectsi võtmekaadritest

Pärast nupule klõpsamist kogutakse ajastus, klahvide vaheline suhe ja Bezieri kõvera tekst tekstina ning lisatakse arvutisse, mille renderdate võrdlusvideona. Ükskõik, milliseid andmeid insenerid vajavad, on renderdamisega abielus, sulandades teie visuaalsed ja andmete viited ühte.

Teksti võib redigeerida selleks, et sildistada, millised klahvid millised on, kuid ajastuse edastamise peamine meetod tuleneb teksti kihi avaldusest. See avaldis värskendab teksti, kui esituspea liigub üle aktiivsete võtmekaadrite, isegi kui alguse ja lõpu markerid on teisaldatud.

Lisateave või laadige alla Inspector Spacetime

Automatiseerige hum drum, et saaksite rohkem aega lõbutseda

Sketch2AE ja Inspector Spacetime on parandanud meeskondadevahelist töövoogu ja võimaldanud meil suunata rohkem energiat loominguliste asjade juurde. Jagame hea meelega mõned viisid, mis aitavad teil keskenduda oma armastatud tööle.

Proovige tööriistu ja aidake meil neid veelgi paremaks muuta

  • Sketch2AE
  • Inspektor Spacetime

Kas soovite meiega koostööd teha? Saatke oma portfell või esitlusrull aadressile [email protected]

- - - -

1. Adam Plouff lahkus Google'ist muude ettevõtmiste nimel. Tema endine Google'i perekond hoiab nende südames sooja kohta. Lisateavet Adami sooloprojektide kohta leiate aadressilt battleaxe.co

2. Otsingu-, kasutaja- ja Maps UX-i meeskond (SUMux) kujundab selliseid tooteid nagu Google Assistent, Google Search App ja Google Maps.