Кредит: Неизплащане

Как да изравните дизайнерските си умения

Част 4: Основи в интерфейсната анимация

Съвременната мрежа позволява на дизайнерите да играят с широк спектър от дизайн на движение. Ето някои ръководни принципи за работа с анимация на интерфейса.

Принцип 1: Върнете се към традиционната анимация

Един ресурс за аниматори се намира в 12-те основни принципа на анимацията, представени за първи път в книгата „Илюзията на живота: анимация на Дисни“. Той е автор на аниматорите от Дисни Оли Джонстън и Франк Томас, двама от екип от основни аниматори, посочени от Уолт Дисни като „Деветте старци“, които създадоха най-известните анимационни карикатури на Дисни.

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

Принцип 2: Движението трябва да бъде обвързано с целта на потребителя

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

UI Motion, допълващ взаимодействието, е добър пример за движение, извършено правилно.

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

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

Какво може да постигне ефективен дизайн на движение?

1. Осигурете контекст

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

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

2. Комуникира (състояние, какво ще се случи след това и т.н.)

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

Например екранът за вход за macOS видимо ще се разклати, ако въведете грешка в паролата си. Това показва грешка в полето за формуляр, което се пренася в екрана за вход в iPhone. Това съобщава за грешка във валидирането на формата, която подтиква потребителите да опитат отново.

3. Промяна на възприятието

Добре поставеният детайл за движение при взаимодействие може да създаде впечатление за бързина и плавност.

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

Дизайнът на движение може да ви помогне да направите шевовете / преходите по-приятни, тъй като да имате истинско "безпроблемно" преживяване често не е възможно.

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

Принцип 3: Разрешава се за отказ от движение

Не всеки ще може да се наслаждава на дизайн на движение. Тези, които имат зрителни увреждания или имат проблеми, предизвикани от движение, може да не могат да оценят визуалните сигнали, намерени във вашия интерактивен потребителски интерфейс. Ето защо е важно да използвате alt-текст вместо визуални сигнали или да имате някаква друга опция за отказване, ако цялото ви дизайнерско произведение използва много движение. За вашите потребители на екранни четци, алт текста може да бъде единственият начин те да извлекат значение от вашите изображения или детайли за движение (ако те са обвързани с действия / ключови задачи) и ще направят вашия дизайн по-приобщаващ за всички.

заключение

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