Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading…
Transcript

Анимацията в дизайна на Мобилните приложения

Анимацията в дизайна на Мобилните приложения

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

Действията на хората са движени основно от визуалните им перцепции, а когато едно изображение, което „струва повече от хиляди думи“, е задвижено, то става изключително мощен инструмент за взаимодействието на потребителите с мобилното приложение. Чрез анимацията процесът буквално оживява. Ценността ѝ става още по-голяма, като се имат предвид ограниченията в размерите на екраните на таблетите и смартфоните.

Защо анимацията е важна за потребителското преживяване?

Що се отнася до страхотния UX дизайн, анимацията може да бъде многофункционална. Първо, той може да демонстрира или изведе функционалност. В известен смисъл той действа като мини-борд. В допълнение, той може да добави слой наслада и забавление. Той също така може да осигури увереност и смисъл на взаимодействията.

UX дизайн

UX дизайн

Пример за добър ux дизайн

Основни цели на анимациите

Нека видим предимствата на анимацията на потребителския интерфейс и как тя може да превърне страхотните концепции на приложенията в изключителни персонализирани решения.

1. Обяснява логиката.

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

22

12:25

2. Осигурява ангажираноста на потребителя

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

3. Осигурява уникално преживяване

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

В рамките на тази статия споделяме нашите експертни познания за проектиране на красиви и полезни анимации. Всички принципи, които описваме, работят за интерфейсите на iOS, Android и уеб приложения, цифрови часовници, домакински уреди и други продукти. За да проектираме и оптимизираме полезни анимации, нека разберем тяхното място и функция във вашето приложение.

Основни видове анимации

В дизайна на мобилни приложения се използват два основни вида анимация: функционална и удовлетворяваща. Функционалната е съвсем лека, като често се интегрира в други компоненти на интерфейса. Нейната цел е да помогне на потребителя да се ориентира в мобилното приложение и да го използва по-ефективно. Удовлетворяващата анимация служи за създаване на емоции у хората, като ги забавлява и/или умилява, представяйки ценностите на бранда.

Основни видове анимация

Удовлетворяваща

Удовлетворяваща анимация

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

Демонстрация на изисканост - Чрез анимацията преживяването може да стане по-модерно и уникално, което искрено радва хората.

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

Показване на човешкото лице на бранда - Идеята е да се създаде лична връзка между бранда и потребителя, която естествено включва емоции. 

За забавление – Анимациите имат силата да накарат потребителите да взаимодействат с апликацията, като трансформират обикновени действия в нещо по-забавно.

Функционална анимация

Функционална анимация

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

- Създаване на логични преходи

- Предоставяне на визуална обратна връзка

- Показване на статуса на системата

- Помощ при първото използване на приложението

Как се използва анимацията в мобилните приложения

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

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

Кои са най -използваните видове UX анимация?

Анимациите на потребителския преживяване (UX), понякога наричани анимационни движения, могат да бъдат разделени на три типа:

Микровзаимодействия, подобни на тези, свързани с подобни бутони в Twitter и Instagram.

Преходи, които променят съдържанието на екрана или преместват потребителите на друг екран.

Графични анимации като в приложението Uber Eats.

Ако процесът на взаимодействие е малко по -дълъг и потребителите трябва да изчакат, те биха предпочели да разберат какво се случва и какъв е напредъкът. Най -голямото предимство на това анимирано взаимодействие е осигуряването на сигурност за потребителите, като ги прави наясно и уверени в процеса на използване на продукта. Анимацията на ленти за напредък, времеви линии и други динамични елементи може да убие няколко птици с един камък:

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

Как да използвате анимацията за подобряване на мобилното потребителско изживяване

Feedback Animation

Анимацията за обратна връзка(Feedback Animation) информира потребителя, че определено действие е извършено или неуспешно. Анимацията от този вид поддържа линията на комуникация между потребителя и приложението дори при основни операции. По някакъв начин имитира взаимодействие с реални обекти във физическия свят. Например, когато натиснете истински бутон, усещате силата, вложена в това действие, и съпротивлението на бутона. В мобилно приложение това е невъзможно: просто докосвате екрана и нямате физическа обратна връзка от този вид. Ето защо, взаимодействайки със сензорни екрани, ние се справяме с вибрациите и визуалните знаци, за да получим отговора от приложението.Анимацията за обратна връзка(Feedback Animation) информира потребителя, че определено действие е извършено или неуспешно. Анимацията от този вид поддържа линията на комуникация между потребителя и приложението дори при основни операции. По някакъв начин имитира взаимодействие с реални обекти във физическия свят. Например, когато натиснете истински бутон, усещате силата, вложена в това действие, и съпротивлението на бутона. В мобилно приложение това е невъзможно: просто докосвате екрана и нямате физическа обратна връзка от този вид. Ето защо, взаимодействайки със сензорни екрани, ние се справяме с вибрациите и визуалните знаци, за да получим отговора от приложението.

Анимация за обратна връзка

Прогрес анимация(Progress animation)

Ако процесът на взаимодействие е малко по -дълъг и потребителите трябва да изчакат, те биха предпочели да разберат какво се случва и какъв е напредъкът. Най -голямото предимство на това анимирано взаимодействие е осигуряването на сигурност за потребителите, като ги прави наясно и уверени в процеса на използване на продукта. Анимацията на ленти за напредък, времеви линии и други динамични елементи може да убие няколко птици с един камък:

информира потребителя за нивото на напредък

осигуряват забавен елемент, притъпяващ възможното негативно преживяване на чакане

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

Progress Animation(Анимация за прогрес)

Зареждане на анимации

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

Зареждане на анимации

Анимация за привличне на внимание

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

Анимация за привличане на внимание

Разказване на история и геймификация

Още една причина да използвате анимацията в мобилните приложения е да я направите част от история или игра. Анимирани стикери, значки, награди, талисмани - това са само няколко начина да направите интерфейса на приложението интересен и оживен. Например тук можете да видите анимирани стикери за Mood Messenger, отразяващи различни чувства: използването им добавя силна емоционална привлекателност към потребителското изживяване.

Разказване на истории и геймификация

Използвана литература

https://design4users.com/animation-mobile-user-experience/

https://yalantis.com/blog/how-to-create-mobile-ui-animations-that-meet-users-needs/

https://yalantis.com/blog/-seven-types-of-animations-for-mobile-apps/

https://galaxy-weblinks.medium.com/animation-and-motion-design-top-5-trends-that-will-rule-the-year-2022-90234bf1c547

https://uxplanet.org/animation-in-ui-design-from-concept-to-reality-85c49907b19d

https://www.invisionapp.com/inside-design/importance-good-animation-ux/

https://uxplanet.org/mobile-motion-20-creative-concepts-of-ui-animation-b7c0f550a754

https://www.newgenapps.com/bg/blogs/mobile-app-design-dos-and-donts-2/

Благодаря ви на вниманието!

Learn more about creating dynamic, engaging presentations with Prezi