В тази ожесточена конкурентна среда компаниите неистово търсят начини да привличат и задържат вниманието на хората. Докато се занимаваме с ежедневието си, безкрайният поток от визуална стимулация блика към нас от анимирани реклами на улицата, видеоклипове на мобилните ни телефони, да не говорим за нашите емисии в социалните медии, създава усещане за постоянно движение, което се надпреварва за нашето внимание.
Реакцията на част от секундата на движение в нашата среда е разработена от необходимостта да оцелее и се задейства от стимули на околната среда, възприемани като потенциално заплашителни или вредни; хората обръщат допълнително внимание на нещата, които се движат. Докато хващаме нещо, което се движи бързо с ъгъла на окото, мозъкът ни предупреждава за частица от секундата, защото подсъзнателният ни мозък вече е реагирал на опасността, преди съзнателният ни ум да е имал време да обработи информацията.
Рекламодателите знаят това и затова го знаем анимирани улични реклами на автобусните спирки и на платформите на метрото, видеореклами, които се появяват в потоците от социални медии, и електронни билбордове с видеоклип с пълно движение. Техниката е едно-два ударен ефект, предназначен да доставя маркетингови съобщения. Първо, чрез привличане на вниманието ни, и второ, с помощта на видео и анимация, за да предадем съобщението.
Ако статичната картина струва хиляда думи, колко струва анимацията?
Тук идва уеб анимацията. Уеб дизайнери се надяваме да уловим и задържим вниманието ни и може би ще добавим неочаквана радост. Уеб анимацията може да се използва за визуализиране на различни стъпки в сложен процес или идея, за илюстриране на просто маркетингово съобщение или за преместване на нещата на уеб страница по естествен и плавен начин, докато хората превъртат - отново, за да привлекат вниманието към нещо.
Как започна уеб анимацията, възходът на GIF файловете
По време на ранните дни на World Wide Web нещата бяха доста статични и скучни. Уеб страниците се основаваха предимно на графичен дизайн и оформления от света на печата. Някои дизайнери обаче положиха съгласувани усилия - въпреки техническите предизвикателства и предизвикателствата за честотната лента - да включат ранни форми на уеб анимация, за да ги направят по-динамични и привлекателни. Едно от първите добавки на GIF анимация към уебсайт беше включено Джефри Зелдман Батман завинаги през 1995 г. Посетителите бяха посрещнати от полета на Батман към тях, анимиран като последователност от картини.
Промоционалният сайт Batman Forever беше един от най-популярните сайтове по това време. Той вдъхнови други уеб дизайнери и разработчици да включат GIF уеб анимацията като странен, привличащ вниманието елемент в своите уебсайтове.
Бързо напред 20 години и анимирани GIF файлове вече са навсякъде. Те са в Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram и Facebook. GIF файловете са подходящи за анимации с кратък цикъл, последователности от изображения и дори за кратки видеоклипове. Нещастен недостатък обаче е, че GIF файловият формат няма променлива прозрачност и не поддържа алфа канал; следователно всички пиксели са или напълно непрозрачни, или напълно прозрачни.
GIF анимациите бяха началото на ренесанс през уеб дизайн , но те не бяха идеални. Особено в ранните дни на комутируеми връзки и бавни скорости на интернет, GIF файловете бяха пропускателна способност. Резултатът беше пикселирана последователност с ниска резолюция. Недостатъкът на дизайнерите, които трябва да компресират GIF файлове до възможно най-малкия размер, е ограничената 8-битова палитра, което доведе до много размиване. Това се промени с високоскоростния интернет, който стана по-често срещан в 21-ви век и в резултат на това уеб анимацията стана по-добре изглеждаща с милиони цветове и по-гладка с по-високи честоти на кадрите.
Зората на Flash уеб анимация
Големият бум на уеб анимация дойде с представянето на Flash през 1996 г., когато Macromedia обявиха своя уеб плъгин и придружаващ инструмент за анимация, базиран на рамки: Macromedia Flash (след като придобиха FutureSplash Animator , програма за векторна анимация). Flash изигра водеща роля при въвеждането на нови възможности в мрежата. От аудио и анимация до интерактивност и видео, Flash помогна да се прокара интернет напред.
Възможността за изграждане на прости, постни, базирани на вектор уеб анимации на цели сайтове, включващи взаимодействия, създаде това, което би могло да се нарече „бароков“ период на уеб дизайн с (твърде) много анимирани елементи, претъпкващи пейзажа. Независимо от това, Flash даде поглед към възможностите на динамиката уеб дизайн , освобождавайки дизайнерите да експериментират и отприщвайки период на бързо развитие на уеб дизайна.
протоколно ориентирано програмиране в swift
Flash анимациите са леки и сравнително лесни за правене. Размерът им е само няколко килобайта, те се разпространяват във формат SWF файл и файл, използващ звук с отчетлива векторна графика. Създаването на уеб анимации се превърна в рационализиран процес, който не добави много към времето за зареждане на уеб страници. Но въпреки всичко, което остана съществен недостатък, за да се стартира, беше необходим плъгин за браузър.
Освен това, сложното взаимодействие във Flash беше активирано от ActionScript (AS), обектно-ориентиран език за програмиране, подобен на JavaScript. ActionScript първоначално е проектиран да контролира прости 2D векторни анимации, но впоследствие се е превърнал в сложен инструмент.
За съжаление Flash анимацията не беше предназначена да реагира, не функционираше добре на всички устройства и в крайна сметка беше отпаднала от всички популярни мобилни устройства. Въпреки че размерът на файла беше сравнително малък, Flash не беше добре оптимизиран и в крайна сметка гладен за процесора, което също беше проблем на мобилните телефони. Краят на ерата на Flash идва след Стив Джобс реши да не поддържа Flash на мобилни устройства на Apple.
Flash е създаден по време на компютърната ера - за персонални компютри и мишки. Но мобилната ера е свързана с устройства с ниска мощност, сензорни интерфейси и отворени уеб стандарти - във всички области, където Flash не достига.
Стийв Джобс
Уеб анимация днес
Днес, тъй като Flash е остарял, имаме различни нужди от уеб анимация. Инструментите трябва да са гъвкави и леки. Уеб дизайнери трябва да създаде отзивчив и адаптивно съдържание за различни устройства (настолни, таблетни и мобилни), като се вземат предвид различни размери на екрана, браузъри, пропорции, плътност на пикселите и др. Нашите шедьоври за уеб анимация трябва да работят на 5-инчов, 720px мобилен, до 9,7-инчов QXGA таблет, до 32-инчов Retina 6K дисплей.
Технологията е узряла до такава степен, че дори недостатъчно мощните мобилни устройства имат честотна лента и мощност за обработка, за да се справят с много взискателни уеб анимации и видео съдържание с висока разделителна способност. Това не означава, че уебсайтовете трябва да са супер „заети“. Както винаги, става въпрос за постигане на правилния баланс между анимацията, динамичното взаимодействие и статичните елементи. Фактът, че днес можем да внедрим много изискана уеб анимация, не означава, че трябва.
Уеб дизайнерите / аниматорите също трябва да обмислят поддръжка на различни платформи. Преди десет години дизайнерите не трябваше да се уверяват, че техните творения ще изглеждат добре на толкова широка гама от устройства. Различни пропорции, портретни и пейзажни ориентации, както и различни плътност на пикселите и разстоянието на гледане трябва да се вземат предвид. Тази загадка представя на уеб дизайнерите набор от нови предизвикателства и потенциални клопки. Потребителско тестване консумира ценно време, повече неща могат да се объркат на множество платформи, а уеб анимациите трябва да бъдат по-подробни от всякога.
HTML5, CSS3, JavaScript и SVG (мащабируема графика) изглежда са най-добрите решения за уеб анимация. Използването на тези съвременни уеб технологии и езици ще помогне за справяне с повечето, но не с всички от горните проблеми. Но винаги е добра идея да стъпвате внимателно, особено когато сте на неизследвана територия, а задълбочените QA и тестове са задължителни.
Защо да използвам уеб анимация?
Уеб анимацията може да ангажира и задържи вниманието на хората по-дълго от статичната уеб страница и комуникира идея или концепция по-ясно и ефективно. Отличната уеб анимация предава история зад всяко малко движение. Всичко е свързано с оживяването на анимация със смисъл и душа (лат. Anima).
Уеб анимацията трябва да бъде гладка, смислена и да поддържа пътуването на посетителя. Уеб дизайнерът / аниматорът трябва да е наясно как анимацията се вписва в потребителски опит , опитайте се да предскажете вероятни потребителски потоци и след това да го поддържате по смислен начин.
Уеб дизайнерите не трябва да гледат на уеб анимацията от чисто техническа гледна точка; те трябва да гледат на него от гледна точка на потребителя.
Едно от съществените неща за анимацията е времето. Правилното синхронизиране придава физическо и емоционално значение на анимацията. Опитът трябва да бъде безпроблемен и логичен. Ако анимацията не е течна (има проблем с времето), хората биха могли да я възприемат като грешка и да загубят всякаква мотивация за по-нататъшно изследване на уебсайта.
Аниматорът трябва да използва подходящо време, за да осигури желания ефект. Колко ключови кадри трябва да се използват в анимацията? Каква динамична промяна в анимацията се дължи на взаимодействието на посетителите и колко бързо идва реакцията след взаимодействието? Капризната, сериозна, забавна ли е анимацията?
От логическа гледна точка можем да разделим уеб анимацията на два основни типа:
- Статична, неинтерактивна уеб анимация, например, a GIF анимация .
- Динамична уеб анимация с ангажираност на потребителя и интерактивност, която се променя при въвеждане от потребителя.
Най-добрият пример за динамична анимация е игра , където потребителите манипулират съдържанието на екрана. Друг прост пример би бил промяната на позицията на определени елементи като посетител на уебсайт превърта през уеб сайт с паралакс превъртане. Анимацията не е пасивна, тя варира в зависимост от действията на потребителя.
Динамичната уеб анимация често се използва за представяне на анимирани инфографики на уебсайт, така че хората обръщат повече внимание на конкретни области, докато скролират страницата - това е мощен начин за подчертаване на подходяща информация.
Плюсовете и минусите на уеб анимацията
Ето някои плюсове и минуси на техниките за уеб анимация, включително стари решения, които вече не се използват.
| Техника | Професионалисти | Минуси |
| GIF | Той е прост и достъпен за всички. Не се изисква приставка за браузър. Той дава възможност за анимация на последователността на картината, може да бъде подобен на видео. | Размерът на анимираните gif файлове може да бъде огромен. Контролът на непрозрачността не съществува, няма алфа канал. Има ниска компресия. Може да бъде пикселиран. |
| APNG | Поддържа алфа канал. | Не се поддържа в повечето уеб браузъри. |
| Flash | Изнесеният swf файл може да бъде доста малък. Той е бърз, може да бъде интерактивен и използва векторна анимация. | Вече не се поддържа на повечето платформи. |
| HTML / CSS3 | Лесно и лесно за научаване. Добър за преходи и трансформации. HTML / CSS3 анимациите работят добре на мобилни устройства. Позволява векторна или пикселна анимация. Може да манипулира и мащабируема векторна графика (SVG). | Не всички свойства на SVG могат да бъдат анимирани с CSS. Той има ограничени възможности за анимация и често изисква използване на JavaScript или SMIL. Не може да реагира на нови входове или променяща се среда (динамична анимация). |
| УСМИХНИ СЕ | Той е компактен и способен да анимира свойства, с които CSS не може да се справи. Запазва SVG, когато е вграден като изображение. | Не се поддържа във всички браузъри. |
| JavaScript | Улеснява уеб анимацията, когато използвате библиотека за анимация SVG, която генерира последователност от изображения (.png последователност) | Не запазва SVG, когато е вграден като изображение. |
Какво ще кажете за плюсовете и минусите на уеб анимацията като цяло? Добре изпълнената уеб анимация все още може да изглежда не на място, така че винаги е добра идея да зададете някои ключови въпроси (както и клиенти на викторини и други членове на екипа), преди да продължите да интегрирате анимацията в дизайна на уебсайта.
Първо, трябва да проверим как анимацията ще повлияе на потребителското изживяване. Ще го подобряване UX на уебсайта? Дизайнери трябва да:
- Разгледайте съществуващия дизайн на уебсайта (ако е наличен)
- Проверете целевата аудитория и хардуерните платформи, които използват
- Проверете времето за зареждане на сайта и натоварването на процесора
- Разгледайте други алтернативи
- Следете за използваемостта
Това е не добра идея е да използвате уеб анимация на даден сайт, за да следвате просто тенденциите.
Решението за използване на уеб анимация трябва да се третира като всяко друго дизайнерско решение; уеб дизайнери трябва да претегли плюсовете и минусите и да се увери, че потребителското изживяване не е компрометирано. Те също така трябва да работят с разработчици, за да установят изискванията на кода и да гарантират, че няма да заседнат с неефективен код, който може да се наложи да бъде променен по пътя.
Съвременната технология за уеб анимация е узряла значително през последните 20 години - производителността, наличната честотна лента и качеството на изобразяване са се увеличили. Дизайнерите обаче трябва да стъпват внимателно и да добавят анимация към уебсайт само ако това значително подобрява потребителското изживяване.
• • •Допълнително четене в блога за дизайн на ApeeScape:
- Как да създадете персонализирани зареждащи анимации, за да намалите скоростта на отпадане
- Създаване на умопомрачителни илюстрации със скица и лупер за нула време
- Ръководство стъпка по стъпка за анимация на потребителския интерфейс с принцип и скица
- Вдъхновения за анимация на лого, за да направите вашата марка по-релаксираща
- Ръководство стъпка по стъпка за създаване на видеоклипове с обяснения на анимирани продукти
Разбиране на основите
За какво се използва уеб анимацията?
Уеб анимацията се използва на всички видове уеб страници. Те могат да бъдат малки уеб анимации, които се случват, докато посетителят превърта през уеб страница, за да привлече вниманието към даден елемент, анимация, която демонстрира продукт, или промоционална уеб анимация, която показва нещо забавно и увлекателно.
Защо анимацията е важна в областта на уеб дизайна?
Уеб анимацията може да се използва, за да привлече вниманието, да ангажира хората по-добре и да общува по-ясно и ефективно. Той може да ангажира и задържи вниманието на хората по-дълго, отколкото просто статична уеб страница. Уеб анимацията трябва да бъде гладка, смислена и да поддържа пътуването на посетителя.
Кои са най-често срещаните видове основна анимация, използвани в мрежата?
Основните видове уеб анимация са CSS и JavaScript анимация, мащабируема векторна графика (SVG), SMIL, GIF, платно и видео. Всеки тип уеб анимация е най-добре да се използва за това, за което е предназначен. Например, CSS преходите и анимациите в идеалния случай трябва да се използват за потребителски интерфейс и основни преходи.
Какво представлява Flash и неговите приложения?
Flash е инструмент за анимация и приставка за браузър от Adobe. Той използва базирана на кадри времева линия за изграждане на уеб анимация и може да има интерактивност, която се постига чрез използване на скриптов език, наречен ActionScript. Повечето мобилни устройства не го поддържат и всички уеб браузъри постепенно прекратяват поддръжката за него.
