UI animatsion tamoyillari: Disney o'likdir

Fotosurat rasmning o'limi deb taxmin qilingan (erta Daguerreotip)

(Agar siz UI animatsiyasidagi maqolalarimni elektron pochta orqali olishni va mening xabarnomamga qo'shishni xohlasangiz, shu erni bosing.)

Yangi vosita

Pol Delarox taxminan 1839 yilda Daguerreotipga duch kelganida, u mashhur ravishda shunday dedi: "Bugungi kundan boshlab rasm o'ladi!"

O'sha vaqtga qadar tashqi dunyoni vizual ravishda hujjatlashtirishning yagona usuli bu sirtga qo'l bilan qo'llaniladigan vositadan foydalanish edi. Asrlar davomida turli xil fanlar bo'yicha hunarmandchilik turli xil ommaviy axborot vositalarida ko'plab printsiplar va usullarning kashf etilishiga olib keldi. Madaniyat va asrlar davomida vizual vositalarning "ko'rinishi" kerak bo'lgan uslubi va vizual tili - o'ziga xos dizayn naqshlari.

Ilk suratkashlar o'zlarining rasmlarini bugungi kunning eng mashhur rasmlariga o'xshatishga harakat qilib, tasvirlarni yumshatish va badiiy qiyofa yaratish uchun ko'pincha yorug'lik va bosib chiqarish usullaridan foydalanganlar. Ularning fotografiya vositasi nimaga qodirligini tushunishlari, chambarchas bog'liq bo'lgan, ta'sirlangan va rasm dunyosi haqidagi tushunchalari bilan cheklangan.

Bu "F / 64" guruhidagi Ansel Adams, Imogen Kanningem, Edvard Ueston va boshqalar kabi fotograflar vizual tilda muhim qadam tashladilar, bu esa fotografiyani o'ziga xos vosita sifatida emas, balki o'ziga xos ingl. tili va tamoyillari va shu bilan ular fotografiya sohasida inqilob qildilar.

Edvard Ueston, Imogen Kanningem, Ansel Adams

Disney boshqa muammoni hal qildi

Baxtimizga, biz UI animatsiyasida bunday inqilobga duch kelmoqdamiz.

1981 yilda Olli Jonston va Frank Tomas Disney Animation: Hayotning Illasyonini chiqazdilar va hozirda "12 asosiy animatsiya tamoyillari" deb nomlanuvchi narsalarni taqdim etdilar. Ushbu printsiplar organik jismlar paydo bo'lganda paydo bo'ladigan "real harakatni" yaratish muammosini hal qildi. jismoniy bo'shliqda harakat qilish va reaktsiya qilish (printsiplar shuningdek hissiy vaqt va xarakterga murojaat qilish kabi narsalarni ham qamrab oladi).

UI animatsiyasi, foydalanuvchi tajribasining bir qismi sifatida 20 yoshda va u hali go'dakligidadir. UI animatsiyasining domeni paydo bo'lganda, foydalanuvchi interfeysining o'z vaqtida qanday harakat qilishini ko'rsatadigan yagona vosita 12 animatsiya tamoyillari edi. Erta fotosuratchilar fotosuratni rasm qoidalari bilan tushunishga qanchalik urinishgan bo'lsa, dizaynerlar UI animatsiyasini Disney animatsiyasi qoidalari orqali tushunishga harakat qilishdi.

Sirtda bu tushunarli, chunki ma'lum darajada bir-biriga o'xshashliklar mavjud. Sekinlashtiruvchi harakat, animatsiya 12 tamoyilidan biri, foydalanuvchi tajribasi uchun juda muhim bo'lgan harakat orqali "to'g'rilik" tuyg'usini kuchaytiradi. UI animatsiyasi oson va g'alati tuyuladi.

Foydalanuvchi interfeysi kontekstida 12 tamoyilni diqqat bilan o'rganib chiqqanda, to'liq taqsimot aniq bo'ladi.

Squash va Stretch moslamalarga og'irlik va moslashuvchanlikni beradi, bu foydalanuvchi interfeyslaridagi qoidadan ko'ra istisno.

Oldindan kutib olish, biron bir narsa yuz berishini his qiladi va foydalanuvchi tajribasi haqida gap ketganda deyarli foydasiz bo'ladi. Bu tanlangan mikro shovqinlar va tugmalar holatini cheklash uchun ishlaydi.

Sahna qurilishi Disney multfilmi uchun mantiqiy ma'noga ega, chunki qahramonlar doimiy harakatda, lekin foydalanuvchi tajribasida bu "dizayn" deb o'ylashadi.

Straight Ahead Action va Pose Pozitsiyasi haqiqiy rasm chizish / animatsiya jarayoniga nisbatan kamroq printsipga ega: agar siz doimiy freymlar chizsangiz, ko'proq suzuvchi animatsiya yaratishingiz mumkin yoki pozitsiyadan foydalanib, bir necha kalit ramkalarni o'rnatishingiz va bo'shliqlarni to'ldirishingiz mumkin. . Foydalanuvchi tajribasida bu jarayon hatto tarjima qilinmaydi, agar freym animatsiyasi bo'yicha haqiqiy kadr bo'lmasa. Odatiy bo'lib, ishlatilayotgan vositadan qat'i nazar, deyarli barcha UI animatsiyalari asosiy kadrlar yordamida yaratiladi.

Ortiqcha va ustma-ust harakatni bajarish fizika va inertsiya qonunlariga rioya qilish bilan bog'liq bo'lib, ikkalasi ham foydalanuvchi interfeyslari bilan deyarli bog'liq bo'lmagan jismoniy tanalar qanday munosabatda bo'lishlari kerak, agar siz guruhda eng foydali bo'lgan keyingi printsipga ishonmasangiz. .

Slow In va Slow Out ob'ektlarning tezlashishi va sekinlashishi uchun vaqt kerakligini aytadi. Bu juda dolzarb, chunki 100% UI animatsiyasi ushbu printsipdan foydalanishi kerak. Odatda bu "yumshatish" deb nomlanadi va juda muhimdir.

Ark (jismoniy harakatni takrorlash uchun zarur) UI animatsiyasi uchun deyarli foydasiz va qoidadan tashqari istisno hisoblanadi.

Ikkilamchi harakatlar foydalidir va ekranga o'tish va vizual ierarxiyani o'rnatish uchun juda yaxshi.

Belgilarni chizishda vaqtni aniqlash juda muhim, ammo harakatni sezgir qilish uchun harakat aniq bo'lishi kerak bo'lgan interfeysda, men davomiylikni emas, balki o'zaro ta'sirni loyihalashtirishga ishongan ma'qul.

Mubolag'a, realizm yoki karikatura darajasiga, yana UI animatsiyasiga deyarli bog'liq emas, chunki dizayn oldindan aniqlangan.

Qattiq rasm chizish ham shunga o'xshash tarzda siljiydi, chunki UI animatsiyasi ob'ektlarning o'ziga xos dizayni bilan emas, balki vaqt o'tishi bilan interfeys ob'ektlarining harakati bilan shug'ullanadi.

Appelyatsiya, shuningdek, interfeys vaqt o'tishi bilan qanday aloqasi borligiga bog'liq bo'lmagan vizual davolash bilan ham bog'liq.

Xulosa

Shunday qilib savol tug'iladi: nima uchun animatsiyaning 12 asosiy printsipi UI animatsiyasini aniq tasvirlay olmaydi?

Buzilishni oddiy kuzatish orqali yaxshi tushunish mumkin: UI animatsiyasi bir xil qoidalarga bo'ysunmaydi va jismoniy kosmosda harakatlanadigan organik jismlar kabi bir xil printsiplarga ega emas. UI animatsiyasi o'ziga xos vositadir, chunki fotografiya rasmdan farqli o'laroq - bir-biriga o'xshash xususiyatlarga ega (fotosurat ham, rasm ham yorug'lik va kompozitsiyaga suyanadigan statik vizual kompozitsiyalardir), ammo tubdan farq qiladi.

Oddiy qilib aytganda, animatsiyaning 12 asosiy printsipi UI animatsiyasiga taalluqli emas, chunki ular boshqa muammoni hal qilishmoqda.

Keyingi bir nechta maqolalarda men ushbu UI animatsiya printsipi nima ekanligini, UI animatsiya tamoyillari qanday muammolarni hal qilishini, printsiplar texnikadan qanday farq qilishini va mavjud va kelajakdagi loyihalaringizda UI animatsiyasini qanday yaratishni va ishlatishni o'rganib chiqaman. yanada ta'sirchan va samarali foydalanuvchi tajribasini yaratish.