Tuomalla luonnos ja jälkivaikutukset lähelle toisiaan

Esittelyssä kaksi uutta animaation työnkulun työkalua UX Motion Designilta Googlelta

Esittelyssä Inspector Spacetime ja Sketch2AE

Hyvä UX-liikesuunnittelu ei ole vain animoida sisältöä. Liikkeessä kerrotaan tarina, olipa sitten kyseessä ilahduttavaa ja leikkisää, määrittelemässä uusia skaalattavia kuvioita tai käsitteellistämällä hullu uusi tuote. Ja kun vietämme palasia aikoja luomalla varoja ja kirjoittamalla tietoja, meillä on vähemmän aikaa keskittyä tarinankerrontaan, joka on työmme tärkein (ja nautinnollisin) osa.

Googlen UX-liikkeen suunnittelijana olen seurannut, että alustamme ja sovelluksiemme uskollisuus lisääntyy vuorovaikutussuunnittelun ja animaation välille. Google ymmärtää tärkeän eron tarinan kertomisen ja näytöllä napsauttamisen välillä. Tämä voimaantuminen yhdistettynä turhautumiseen jäljellä oleviin aukkoihin työnkulussa inspiroi Adam Plouffia¹ antamaan meille enemmän aikaa tarinankerrontaan.

Suunnittelutyökalut voivat olla kipuja ¯ \ _ (ツ) _ / ¯

Edistyksestä huolimatta monet suosituimmista liikesuunnittelutyökaluistamme eivät ole vielä kiinni. Vaikka animaatiotyökalut, kuten Bodymovin ja Lottie, auttavat parantamaan työnkulkuamme, voimme todennäköisesti kaikki olla yhtä mieltä siitä, että prosessimme osat ovat vielä vähän, hyvin, rikki.

UX-suunnittelijat Adam ja minä työskentelemme Sketchillä, kun työskentelemme pääasiassa After Effects (AE) -sivustolla. Vaikka näistä työkaluista on tulossa alan standardeja, ne eivät pelaa hyvin yhdessä - ollenkaan. Vähiten suosikkipäiväämme vietetään varojen uudelleen luomiseen Illustratorissa tai After Effectsissä, jättäen usein vain muutaman tunnin luoda jotain merkityksellistä. Ja kun olemme lopulta luoneet jotain, on toinen työläs työ - selvittää, kuinka selittää liiketiedot spesifikaatiolle (╯ ° □ °) ╯︵ ┻━┻. Väsynyt ajanhukkaan, Adam hautasi joitain kultaisia ​​työkaluja SUMux²-liikkeelle. Suunnittelutiimi, jota emme voineet kuvitella pitävän kaikkia itseämme, joten voimme kertoa mielellämme:

Sketch2AE: Maapähkinävoi ja hyytelö Sketchin ja AE: n välillä
Tarkastaja Spacetime: Google Translate insinööreille

Sketch2AE: Luonnos After Effectsiin vähennettynä aspiriinilla

Sketch2AE on Sketch-laajennus ja AE-skripti, joka siirtää piirrosta Sketchistä After Effectsiin muodotasoina ja muokattavana tekstinä ilman ulkoisten tiedostojen käyttöä. Ryhmät ja symbolit säilyvät, kun taas yksinkertaiset muodot tuodaan parametrimuodoina helppoa animointia varten. Vaikuttaa siltä, ​​että joku olisi luonut ja järjestänyt sinulle kaikki luonnosresurssit alkuperäisesti After Effectsissä muutamassa sekunnissa. Kiitos, Adam!

Ryhmälleni tämä prosessi on jopa vaihe vaiheessa halutulle Adobe Illustrator => AE -työprosessille. Kun saan Illustrator-tiedoston suunnittelijalta, minulla on silti tonni valmistelutyötä ennen kuin aloitan animointia AE: ssä, ja siihen sisältyy paljon edestakaisin sovellusten välillä. Menevät ovat kertomuksen lykkäämisen päivät.

Omaisuuden liittäminen Sketchistä After Effectsiin

Työnkulku, joka todella kulkee

Sketch2AE poistaa joukon välivaiheita ja rakentaa AE: hen koostumuksen, joka on analoginen Sketch-projektin kanssa. Sketch2AE muuntaa:

  • Luonnostele Symbolit koko projektin edeltäviksi esikuvaksi After Effects -sivustossa. Päivitetään kerran päivitykset kaikkialla.
  • Piirrä ryhmät tasoiksi vanhemman kanssa skaalaamiseksi ja uudelleensijoittamiseksi. Tämä saavuttaa jotain tavanomaista ryhmittelytoimintoa.
  • Luonnostele naamarit ryhmiin, joissa on asetettu matte-tehosteita. Ei enää uusintamaskeja tyhjästä.
  • Piirrä muodot alkuperäisiksi AE-muotokerroiksi. Suorakulmat pysyvät suorakulmioina ja soikeat pysyvät ellipsinä. Animoi tehokkaasti (viimeinkin).

Lisätietoja tai lataa Sketch2AE

Tarkastaja Spacetime: Hanki tietosi koodiin

Inspector Spacetime on myös laajennus ja AE-skripti, mutta se tulee peliin sen jälkeen kun liikkeen suunnittelutaika tapahtuu. Inspector Spacetime luo liiketiedot spec-videoita yhdellä napsautuksella, joten voit pysyä poissa suunnittelutiimin koirankopista.

Vaikka Bodymovin ja Lottie helpottavat käytettävän koodin vientiä AE: stä, tämä koodin noituus ei ole tarpeen erikoisviestinnälle, kuten aikaviive tai kokonainen siirtymäaika. Ja se ei ole aina hyödyllinen dynaamista sisältöä sisältävissä skaalautuvissa käyttöliittymäelementeissä.

Kokemukseni mukaan hyvän animaation viestintä ja muuntaminen koodiksi vaatii veneen vuoropuhelun. Se on kuitenkin sen arvoista, jos haluat varmistaa, että siirtymäsi toistetaan täysin uskollisesti. Ja silloin asiat sujuvat hyvin. En osaa lukea sekaannushetkiä, jotka johtuvat animaattoreiden ja insinöörien välisistä kielestä, jotka kuvaavat samoja käsitteitä. Riippumatta siitä, ripustetaanko millisekuntia tai kehystä tai yritetään kuvailla liikekäyrien visuaalinen esitys jollekin, joka haluaa vain numerot, kukaan ei pidä hauskaa tässä yhtälössä.

Olen usein toivonut taikasauvan ohittavan eritelmien kirjoittamisen kiusan ja tylsyyden. Haluaisin mieluummin pestä astiat tai pölyä taloni. Nyt, kun käytän Inspector Spacetime -aikaa, minun on tehtävä vain valita avainryhmäparien ryhmä ja napsauttaa painiketta. Joo. Se siitä. Ei laskua (anteeksi / ei pahoillani, Newton).

Teknisten tietojen luominen After Effects -kehyksistä

Kun olet napsauttanut painiketta, ajoitus, näppäinten välinen suhde ja kuutio Bezier-käyrä kerätään tekstinä ja lisätään pakkaukseen, jonka annat viitevideona. Mitä tietoja insinöörit tarvitsevat, on avioitu renderöinnin kanssa, sekoittamalla visuaaliset ja tietoviitteet yhdeksi.

Tekstiä voidaan muokata merkitsemään tehokkaasti, mitkä avaimet ovat, mutta tärkein menetelmä ajoituksen kommunikoimiseksi tulee lauseesta tekstikerroksessa. Lause päivittää tekstin, kun toistopää siirtyy aktiivisten näppäinkehysten läpi, vaikka aloitus- ja lopetusmerkkejä siirretään.

Lisätietoja tai lataa Inspector Spacetime

Automatisoi hum rumpu, jotta voit viettää enemmän aikaa hauskanpitoon

Sketch2AE ja Inspector Spacetime ovat parantaneet ryhmien välistä työnkulkua ja antaneet meille mahdollisuuden ohjata enemmän energiaa luoviin juttuihin. Olemme iloisia voidessamme jakaa joitain tapoja auttaa sinua keskittymään rakastamaasi työhön.

Kokeile työkaluja ja auta meitä tekemään niistä vielä parempia

  • Sketch2AE
  • Tarkastaja Spacetime

Oletko kiinnostunut työskentelemään kanssamme? Lähetä portfoliosi tai esittelykela osoitteeseen motiondesign@google.com

- - - -

1. Adam Plouff jätti Googlen jatkamaan muita pyrkimyksiään. Hänen entinen Google-perhe pitää lämpimän paikan heidän sydämessään. Lisätietoja Adamin sooloprojekteista osoitteessa battleaxe.co

2. Search, User ja Maps UX -tiimi (SUMux) suunnittelee tuotteita, kuten Google Assistant, Google Search App ja Google Maps.