Sketch va keyingi effektlarni bir-biriga yaqinlashtirish

Google-da UX Motion Design-dan ikkita yangi ish animatsiyasi vositalari bilan tanishtirish

Spacetime inspektori va Sketch2AE bilan tanishtirish

Yaxshi UX harakati dizayni shunchaki jonlantiruvchi vositalar emas. Biz zavq va o'yin-kulgini singdiryapmizmi, keng miqyosdagi yangi naqshlarni aniqlayapmizmi yoki aqldan ozgan yangi mahsulotni tushunamizmi, harakat hikoya qiladi. Va aktivlarni qayta qurish va o'ziga xos xususiyatlarni yozish uchun ko'p vaqt sarflaganimizda, ishimizning eng muhim (va eng yoqimli) qismi bo'lgan voqealarni hikoya qilishga e'tiborimiz kamroq bo'ladi.

Google-da UX harakat dizayneri sifatida men o'zaro ta'sir dizayni va animatsiya o'rtasidagi bo'shliqni qisman yo'q qilish uchun platformalarimiz va ilovalarimizning ishonchliligini oshishini ko'rdim. Google hikoya qilish va ekranlarni bosish o'rtasidagi muhim farqni tushunadi. Ushbu vakolat, ish jarayonida qolgan bo'shliqlardagi umidsizlik bilan birga, Adam Plouffni hikoyalarni hikoya qilish uchun ko'proq vaqt berishimizga ilhomlantirdi.

Dizayn vositalari og'riq bo'lishi mumkin ¯ \ _ (ツ) _ / ¯

Erishilgan yutuqlarga qaramay, bizning eng sevimli harakatga keltiradigan vositalarimiz hali ishga tushmadi. Bodymovin va Lotti kabi animatsion vositalar bizning ish oqimimizni oshirishga yordam beradi, ammo biz ehtimol jarayonning qismlari hali ham biroz, yaxshi va buzilganligiga rozi bo'lishimiz mumkin.

UX dizaynerlari Adam va men Sketch-dan foydalanamiz, biz asosan After Effects (AE) da ishlaymiz. Ushbu vositalar sanoat standartlariga aylanayotgan bo'lsa ham, ular bir-biri bilan yaxshi o'ynashmaydi - umuman. Illustratorda yoki After Effects-da aktivlarni qayta tiklash uchun bizning eng yaxshi ko'rgan kunlarimiz ko'pincha mazmunli narsalarni yaratish uchun bir necha soat vaqtni sarflaydi. Va nihoyat, biror narsa yaratganimizdan so'ng, yana bir zerikarli ish kitobi paydo bo'ldi - muhandislikka harakat xususiyatlarini qanday tushuntirishni o'rganish (□ ° □ °) ╯︵ ┻━┻) Vaqtni yo'qotishdan charchagan Adam, SUMux² Motion uchun bir nechta oltin vositalarni qo'liga oldi. O'zimiz uchun hamma narsani saqlashni tasavvur qila olmaydigan dizaynerlar jamoasi, shuning uchun biz bilan bo'lishishdan juda xursandmiz:

Sketch2AE: Sketch va AE o'rtasidagi yerfıstığı yog'i va jele
Inspektor Spacetime: muhandislar uchun Google Translate

Sketch2AE: Effektlardan keyingi eskiz aspirinni olib tashlagan holda

Sketch2AE - bu Sketch plagini va tashqi fayllarga ehtiyoj sezmasdan shakli qatlamlari va tahrirlanadigan matn sifatida Sketch-dan keyin effektlarga artbordlarni o'tkazadigan AE skript. Guruhlar va belgilar saqlanib qoladi, sodda shakllar esa animatsiyani osonlashtirish uchun parametrik shakl sifatida import qilinadi. Go'yo kimdir bir necha soniya ichida After Effects ichida siz uchun yaratilgan barcha Sketch aktivlarini qayta yaratdi va tuzdi. Rahmat, Odam!

Mening jamoam uchun bu jarayon hatto xayoliy Adobe Illustrator => AE ish oqimidan bir qadamdir. Dizaynerdan Illustrator faylini olganimda, men AE-da animatsiya qilishni boshlashdan oldin, bir necha tonna tayyorgarlik ko'raman, bu dasturlar orasida juda ko'p orqaga va oldinga suriladi. Hikoyalarni tarqatish kunlari tugadi.

Sketch-dan keyingi effektlarga aktivlarni joylashtirish

Aslida oqadigan ish oqimi

Sketch2AE oraliq zinapoyalarni olib tashlaydi va AEda Sketch loyihasiga o'xshash kompozitsiyani yaratadi. Sketch2AE quyidagilarni o'zgartiradi:

  • "Effektlardan keyin eskizlar" loyihadagi keng qamrovli prekompslarga. Bir marta yangilanish hamma joyda yangilanadi.
  • Sketch kattalashtirish va joylashtirish uchun ota-ona yordamida qatlamlarga guruhlanadi. Bu standart guruhlash funktsiyasi kabi biror narsaga erishadi.
  • Sketch niqoblari matli effektlarga ega guruhlarga bo'linadi. Qayta tiklanadigan niqoblar noldan boshqa bo'lmaydi.
  • Sketch shakllari AE shaklidagi tub qatlamlarga. To'rtburchaklar to'rtburchaklar shaklida, ovals esa ellipsda qoladi. Samarali jonlantiring (oxirida).

Ko'proq ma'lumot oling yoki Sketch2AE-ni yuklab oling

Spacetime inspektori: Ma'lumotlaringizni kodga qadar to'plang

Inspacer Spacetime ham plagin va AE skriptidir, ammo u harakatlanish sehrining paydo bo'lishidan keyin kuchga kiradi. Inspacer Spacetime bir marta bosish bilan ma'lumot videolari uchun harakat spesifikatsiyalarini yaratadi, shunda siz muhandislik guruhining it uyidan tashqarida qolishingiz mumkin.

Bodymovin va Lotti foydalanish mumkin bo'lgan kodni AEdan tashqariga chiqarishni osonlashtirsa ham, ushbu kod sehrlari vaqtni kechiktirish yoki o'tishning umumiy davomiyligi kabi maxsus aloqa uchun zarur emas. Dinamik tarkibni o'z ichiga olgan kengaytiriladigan foydalanuvchi interfeysi elementlari uchun har doim ham yordam beravermaydi.

Mening tajribamda muloqot qilish va yaxshi animatsiyaning nozik tomonlarini kodga aylantirish muloqot uchun katta yukni talab qiladi. Shunga arziydi, agar siz sug'urta qilishni to'liq kafolatlashni istasangiz, unda sizning transferlaringiz to'liq sodiqlik bilan takrorlanadi. Va ishlar yaxshi bo'lganda. Xuddi shu tushunchalarni tavsiflovchi animator va muhandislar o'rtasidagi til to'sig'i tufayli men chalkashliklarni eslay olmayman. Bu millisekundlarda va freymlarda osib qo'yiladimi yoki raqamlarni istagan kishiga harakat chiziqlarining vizual tasvirini tasvirlashga harakat qiladimi, hech kim bu tenglamadan zavqlanmaydi.

Men tez-tez sehrli tayoqchadan azob-uqubatlar va bezovtalikni o'tkazib yubormoqchi edim. Men idish yuvaman yoki uyimni chang qilaman. Endi, Inspektor Spacetime-dan foydalanganda, faqat bitta asosiy kadr juftligini tanlang va tugmani bosing. Ha. Bo'ldi shu. Hisoblash yo'q (uzr yoki uzr so'ramang, Nyuton).

After Effects asosiy kadrlaridan muhandislik xususiyatlarini yaratish

Tugmani bosgandan so'ng, vaqt, tugmachalar orasidagi o'zaro bog'liqlik va kub Bezier egri matn sifatida yig'iladi va ma'lumotnoma video sifatida taqdim etadigan komp ga qo'shiladi. Muhandislarga kerak bo'lgan barcha ma'lumotlar vizual va ma'lumotlar havolalarini bir-biriga aralashtirib, renderga uylanadi.

Matnni qaysi tugmalarni samarali yorliqlash uchun tahrirlash mumkin, ammo vaqtni bog'lashning asosiy usuli matn qatlamidagi ifodadan kelib chiqadi. Ushbu ibora matnni yangilaydi, chunki boshlovchi va tugash belgilari boshqa joyga ko'chirilgan bo'lsa ham, ijro etuvchi bosh faol kadrlarda harakatlanadi.

Ko'proq ma'lumot oling yoki yuklab oling Inspektor Spacetime

O'yin-kulgiga ko'proq vaqt sarflashingiz uchun nog' barabanni avtomatlashtirish

Sketch2AE va Inspector Spacetime jamoalar o'rtasidagi ish oqimini yaxshiladi va bizga ko'proq quvvatni ijodiy narsalarga yo'naltirishga imkon berdi. Sizga o'zingiz yoqtirgan ish haqida o'ylashga yordam beradigan ba'zi usullarni aytib berishdan xursandmiz.

Asboblarni sinab ko'ring va ularni yanada yaxshilashimizga yordam bering

  • Sketch2AE
  • Tekshirish joyi inspektori

Biz bilan ishlashga qiziqasizmi? Portfelingiz yoki ko'rgazma g'altakni хөдөлгөөн[email protected] manziliga yuboring

- - - -

1. Adam Plouff boshqa ishlarni davom ettirish uchun Google'dan ketdi. Uning sobiq Google oilasi ularning qalbida iliq joyni saqlaydi. Adamning yakka loyihalari haqida batafsil ma'lumotni urushaxe.co saytidan olishingiz mumkin

2. Search, User va Maps UX guruhi (SUMux) Google Assistant, Google Search App va Google Maps kabi mahsulotlarni loyihalashtiradi.