Сближаване на скица и последващи ефекти заедно

Представяме ви два нови инструмента за работа на анимация от UX Motion Design от Google

Представяме Space Inspection на Space Inspector и Sketch2AE

Добрият UX движение дизайн не е просто анимиране на активи. Независимо дали влагаме наслада и игривост, определяме мащабируеми нови модели или концептуализираме луд нов продукт, движението разказва история. И когато прекарваме парчета време за пресъздаване на активи и писане на спецификации, имаме по-малко време да се съсредоточим върху разказването на истории, най-важната (и най-приятната) част от нашата работа.

Като дизайнер на UX движение в Google, гледах как верността на нашите платформи и приложения се увеличава, за да преодолее частично пропастта между взаимодействието дизайн и анимация. Google разбира съществената разлика между разказването на история и щракването през екраните. Това овластяване, съчетано с неудовлетвореност в останалите пропуски в нашия работен процес, вдъхнови Адам Плоуф, за да ни даде повече време за разказване на истории.

Инструментите за проектиране могат да бъдат болка ¯ \ _ (ツ) _ / ¯

Въпреки постигнатия напредък, много от любимите ни инструменти за дизайн на движение все още не са се хванали. Докато анимационните инструменти като Bodymovin и Lottie помагат за подобряване на нашия работен процес, вероятно всички можем да се съгласим, че части от нашия процес все още са малко, добре, пречупени.

UX дизайнерите Адам и аз работим с Sketch за използване, докато работим основно в After Effects (AE). Въпреки че тези инструменти стават индустриални стандарти, те изобщо не играят добре. Най-малко любимите ни дни са прекарани в пресъздаване на активи в Illustrator или After Effects, като често оставяме само няколко часа, за да създадем нещо смислено. И след като най-накрая създадем нещо, има още един старт на досадната работа - измисляйки как да обясним спецификациите за движение на инженерството (╯ ° □ °) ╯︵ ┻━┻. Уморен да губи време, Адам излюпи някои златни инструменти за движението SUMux² Дизайнерски екип, който не можахме да си представим да запази всичко за себе си, затова сме развълнувани да споделим:

Sketch2AE: Фъстъченото масло и желе между Sketch и AE
Инспектор Spacepace: Google Translate за инженери

Sketch2AE: Скица към After Effects минус аспирина

Sketch2AE е плъгин за Sketch и AE скрипт, който преминава на дъски от Sketch към After Effects като слоеве във форма и редактируем текст, без да се нуждаят от външни файлове. Групите и символите се запазват, докато се внасят прости форми като параметрични фигури за лесно анимиране. Сякаш някой пресъздаде и организира всички активи на Sketch за вас в рамките на After Effects за секунди. Благодаря, Адам!

За моя екип този процес е дори стъпка от желания Adobe Illustrator => AE работен процес. Когато получавам файл от Illustrator от дизайнер, все още имам много подготвителна работа, преди да започна анимация в AE, включваща много напред и назад между приложенията. Отминаха дните на отлагане на разказа.

Поставяне на активи от Sketch в After Effects

Работен процес, който всъщност тече

Sketch2AE премахва куп междинни стъпки и изгражда композиция в AE, аналогична на проекта Sketch. Sketch2AE преобразува вашите:

  • Скицирайте символите в проектите в рамките на After Effects. Актуализиране веднъж актуализации навсякъде.
  • Скицирайте Групи на слоеве с родител за мащабиране и препозициониране. С това се постига нещо като стандартната функция за групиране.
  • Скициращи маски в групи с зададени матови ефекти. Няма повече пресъздаващи маски от нулата.
  • Скица Оформя в естествени слоеве с форма на AE. Правоъгълниците остават правоъгълници, а овалите остават елипси. Анимирайте ефикасно (накрая).

Научете повече или изтеглете Sketch2AE

Инспектор Космическо време: Вземете своите спецификации до код

Inspector Spacetime също е плъгин и AE скрипт, но той влиза в игра, след като се случи магията на движението на движението. Инспектор Spacetime създава спецификации за движение за референтни видеоклипове с едно щракване, така че можете да останете извън кучешката къща на инженерния екип.

Въпреки че Bodymovin и Lottie улесняват експортирането на използваем код от AE, този кодов магьосник не е необходим за специални комуникации като забавяне във времето или обща продължителност на прехода. И не винаги е полезно за мащабируеми UI елементи, съдържащи динамично съдържание.

Според моя опит общуването и преобразуването на тънкостите на добрата анимация в код изисква диалог с лодка. Заслужава си обаче, ако искате да гарантирате, че преходите ви се възпроизвеждат с пълна вярност. И тогава нещата вървят добре. Не мога да преброя моментите на объркване поради езиковата бариера между аниматори и инженери, описващи едни и същи понятия. Независимо дали става закачено на милисекунди спрямо кадри или се опитва да опише визуалното представяне на кривите на движение на някой, който просто иска числата, никой не се забавлява в това уравнение.

Често ми се искаше вълшебна пръчица, която да прескочи мъките и досадата на писане на спецификации. Бих предпочел да мия чинии или да праша къщата си. Сега, когато използвам Inspector Spacetime, всичко, което трябва да направя, е да изберете група двойки ключови кадри и да кликнете върху бутон. Да. Това е. Без смятане (съжалявам / не съжалявам, Нютон).

Генериране на инженерна спецификация от ключови кадри на After Effects

След като щракнете върху бутона, времето, съотношението между клавишите и кубичната крива на Безие се събират като текст и се добавят към компа, който представяте като референтен видеоклип. Независимо от данните, от които инженерите се нуждаят, е омъжена за рендеринга, смесвайки вашите визуални и данни за данни в едно.

Текстът може да бъде редактиран, за да се определи ефективно кои ключове са кои, но основният метод за комуникация на времето идва от израз на текстовия слой. Този израз ще актуализира текста, докато възпроизвежданата глава се движи през активните ключови рамки, дори ако началният и крайният маркер са преместени.

Научете повече или изтеглете Инспектор пространство

Автоматизирайте барабана с гум, за да можете да прекарвате повече време в забавление

Sketch2AE и Inspector Spacetime подобриха работния процес между екипите и ни позволиха да насочим повече енергия към творчески неща. Радваме се да споделим някои начини да ви помогнем да се съсредоточите върху работата, която обичате.

Изпробвайте инструментите и ни помогнете да ги направим още по-добри

  • Sketch2AE
  • Инспектор пространство

Интересувате се да работите с нас? Изпратете своето портфолио или демо макара на motiondesign@google.com

- - - -

1. Адам Плуф остави Google да преследва други начинания. Бившето му семейство в Google пази топло място в сърцата им. Научете повече за соловите проекти на Адам на battleaxe.co

2. Екипът за търсене, потребител и карти UX (SUMux) проектира продукти като Google Assistant, Google Search App и Google Maps.