Въведение в анимацията в уеб дизайна
Анимацията вече не е само за анимационни филми. От движещи се изображения на цял екран до малки ефекти на задържане, навсякъде се появяват докосвания на анимация. Анимацията е модерна, забавна и удобна за потребителя.
И пречките за използването на анимация започнаха да падат. С повечето потребители на високоскоростни връзки и лекотата на създаване на нещо от прости движения или глупав gif до няколко минути на действие, анимациите са се превърнали в практични и полезни инструменти за уеб дизайн.
Разгледайте елементи Envato
Основи на анимацията
Анимацията се случва, когато нещо, създадено в неподвижна или двуизмерна форма, се „оживява“ и изглежда се движи по начин, който следва законите на физиката. Това е начинът, по който анимационният герой ходи по екрана или как иконата на приложение скача като топка, докато се зарежда на работния плот на вашия Mac.
Една от думите, която е почти синоним на анимацията, е Disney. В началото на 80-те двама от най-добрите аниматори на компанията написаха книга, в която подробно описват 12-те принципа на анимация. „Илюзията за живота: анимация на Дисни“ от Франк Томас и Оли Джонстън все още предоставя рамката за анимация и днес.
- Мачкане и разтягане
- Очакване
- постановка
- Прав напред на действие и позиция за поза
- Следвайте действие и припокриване
- Забави и забави
- Дъга
- Вторично действие
- синхронизиране
- преувеличение
- Плътно рисуване
- Обжалване
Уеб анимациите често се запазват като GIF, CSS, SVG, WebGL или видео. Те могат да бъдат всичко, от обикновено подчертаване, което се появява, когато задържите курсора на мишката върху дума до цял екран видео или фоново изображение. Както при всяка друга техника на проектиране, анимациите могат да бъдат фини или да са в лицето ви и трудно да се избегнат.
Възникваща тенденция на 2017г
Анимацията в уеб дизайна е нещо, с което започваме всеки ден. Ключът към анимацията като тенденция в дизайна е умереността. Малките, прости анимации са завладяващи и интересни; потребителят може изобщо да не мисли за това, че е анимация. Мащабните анимации могат да бъдат интересна визуализация, която да ви дърпа в дизайна. Но ако започнете да смесвате твърде много различни движещи се ефекти, това може да доведе до пълен хаос.
Това, което прави анимацията модерен, е реализмът. В днешния дизайнерски пейзаж с толкова много плоски и минимални стилови дизайни, потребителите се нуждаят от повече сигнали, за да им кажат какво да правят. Простите битове на анимация могат да ръководят потребителя, без да променят естетиката. Той помага да се добавят инструкции и ред за проектиране на схеми, които може да са твърде прости визуално, за да осигурят достатъчно насоки за потребителите. В този случай анимацията създава щастлив медиум между съкратената простота и използваемостта.
Другият фактор, който допринася за тази тенденция, е достъпът до инструменти на задната и потребителската страна на дизайна. Вече нямате нужда от Flash за по-сложни анимации. (И ако все още изграждате във Flash, време е да спрете.) Това може да се осъществи по редица други начини. Днешните анимации не заливат уебсайтове или уеб сървъри, като ефектите бързо се зареждат за потребителите и с високоскоростен анимации за достъп до интернет не пропускайте да се забиете по средата на цикъла на събитията.
Големи срещу малки анимации
Когато става въпрос за анимация за мрежата, той попада в две еднакво лесни за разбиране категории: големи и малки. (Вероятно можете да се досетите как изглеждат тези.)
Големите анимации са тези, които имат мащаб към тях. Често под формата на видео с време на изпълнение мащабните анимации запълват значителна част от екрана и са характерни за кратък филм. Тези анимации служат като фокусна точка в цялостния дизайн. Потребителите често не трябва да извършват никакви действия, за да видят анимацията в движение. Ако гледате внимателно в сайта на Студио Мета, всяко от големите изображения намалява, докато четете копието.
Малките анимации са малките битове и парчета, които откривате, когато започнете да взаимодействате с уебсайт. Тези дивоти могат да бъдат под формата на ховър състояния, малки късчета орнаменти или ръководства или инструменти за използваемост. Малките анимации са акцент, който допринася за цялостната естетика, но е малко вероятно да бъде в центъра на вниманието на дизайна. В сайта за Хенри Браун простата анимация е, че ако се вгледате внимателно, очите в илюстрацията всъщност мигат.
Кога да използваме анимация
Проблемът с всяка тенденция, включително тази, е да знаем кога да я използваме. Анимацията може да бъде чудесен малък трик за вашия комплект инструменти за дизайн, но не е за всеки проект. Анимацията трябва да е гладка и безпроблемна, а не скокове или механични. Трябва да служи на цел за потребителя, а не да пречи на съдържанието.
Основната причина за използване на анимация е да се увеличи използваемостта. Простите анимации могат да бъдат чудесни насочващи инструменти, които да помогнат на хората да разберат кои бутони да щракнат или къде да продължат в картата на уебсайт. Много дизайнери, използващи сложни ефекти на превъртане, сдвояват обикновена анимация с потребителски инструмент за превъртане или щракване. (Това включва всичко от обикновена подскачаща икона или думи, които изскачат казват „превъртете надолу“.)
Използваемостта се предлага в няколко форми:
- Комуникационна функция или как да използвате уебсайт
- Показване на промяна, като правилно попълване на формуляр или подчертаване, че елемент може да се кликва
- Създайте поток или насочете потребителите към призив за действие
Втората причина за използване на анимация е естетическа. Анимацията може да бъде чудесна „декорация“. Понякога целта на анимирания елемент е чисто визуална и това е приемливо използване. Тази декоративна анимация може да ви помогне да разкажете история или да създадете емоционална връзка между интерфейса и потребителя. Целта на анимацията може да бъде да предизвика визуален интерес и да задържи потребител, ангажиран с вашия сайт за по-дълъг период от време.
Когато създавате чисто визуална анимация, помислете какво трябва да прави. Помислете за връзката, която искате да има потребител. Трябва ли да е забавно или изненадващо? Това е малко уникално съдържание, което е предназначено за споделяне? Дори чист визуален трябва да има цел.
ресурси
Готови ли сте да започнете анимация? Ето няколко ресурса за допълнително четене и инструменти, които да ви помогнат да започнете.
- Видеото Illusion of Life показва всеки от 12-те принципа по начин, който е лесен за разбиране.
- „Уеб анимация по време на работа“ от A List Apart е чудесен ресурс за това, което кара анимацията да работи.
- „Въведение на начинаещия в CSS анимацията“ ви показва как да превърнете квадрат в кръг, използвайки CSS свойства.
- Еластични анимирани SVG елементи е урок за това как да интегрирате и анимирате SVG компонент.
- Презентацията Art of UI Animations от Марк Гейър използва анимация, за да обясни концепциите.
- „15 най-добри HTML5 инструменти за създаване на разширена анимация с“ е чудесна стъпка от следващото ниво и списък с инструменти, ако вече разбирате основите.
- Комплектът за оцеляване на Animator учи основни принципи, които се прилагат за всички форми на анимация.
заключение
Що се отнася до анимацията, правилото е: Добрата анимация ще подобри изживяването на потребителя. Това може да бъде под формата на емоционална връзка - като забавление, положително изживяване - или като направи сайт по-лесен за използване.
Анимацията е забавна техника, която става много по-стандартна за различни приложения. Ако търсите вдъхновение, не забравяйте да се върнете през тази статия и да кликнете върху връзките към визуалните примери навсякъде, посетете сайтовете и играйте с анимираните функции в тях. Забавлявай се!
