Как повысить ценность дизайна благодаря анимациям в интерфейсе
Изначальная цель написания этой статьи заключается в том, что многие дизайнеры вокруг нас полагаются на свои чувства при разработке дизайна. Несмотря на то, что финальная работа выглядит довольно хорошо, она в действительности не приносит пользы пользователю.
Итак, с целью лучшего понимания взаимодействия дизайна и его инструментов, в первую очередь давайте рассмотрим классификации, техники и специфики микровзаимодействий. Затем, мы перейдем к следующей части, сравним взаимодействия некоторых инструментов дизайна с двух сторон: дизайн и анимация.
Краткая схема того, о чем пойдет речь:
Да-да, немного длинновато и сложновато...
1.Функциональность
Рассматривая функциональность, мы можем разделить микровзаимодействие на следующие четыре категории:
1.1 Информация и иерархия
Навигационные переходы,которые позволяют пользователям понять взаимодействия между элементами или интерфейсами.
Интерфейсы либо имеют один уровень, либо находятся на уровнях родитель- ребенок. Вертикальная прокрутка- это обычно способ просматривания информации, горизонтальное перелистывание слайдов- это отражение одного и того же уровня. Изменения объема, даже 3D-переходы, часто являются способами воплощения отношений родитель-ребенок.
Music Playlist App Interaction, автор Ehsan Rahimi
1.2 Фидбэк и статус
В совокупности, статус обратной связи, операция по отмене, сообщение с подсказкой и т.д. Все это предназначено для того, чтобы предоставить пользователям своевременный фидбэк, что очень удобно для пользователей, понимание их собственного статуса или даже отмены операции.
Заполнение интерактивной формы, дизайн выполнен Yifan Ding
1.3 Гид для пользователя и обучение
Когда пользователь впервые выполняет какие-либо операции, он обычно пользуется руководством или обратной связью в качестве опоры, это позволяет пользователю понять и ознакомиться возможными функциями.
Space/Dashboard Management, by Yaroslav Zubko
1.4 Эмоциональная связь и брендовое изображение
Этот пункт включает в себя открытие, анимацию иконок, загрузку и т.д., все это делается для того, чтобы улучшить информацию, подпитывать интерес, установить брендовое изображение и увеличить лояльность пользователя.
W&W opening motion design, by Yifan Ding
2. Элементы перемещения
Material Design разделяет элементы перемещения на 4 следующих категории: элемент постоянный, элемент исходящий, элемент входящий и элемент статичный.
2.1 Постоянный элемент
Постоянный элемент всегда остается в интерфейсе, но его форма, размер или положение могут изменятся в зависимости от режима просмотра. Вариация анимации может быть общим элементом (shared elements) просмотра или анимационным (tweening).
2.2 Уходящие элементы
Уходящие элементы — это те элементы, что в следующем интерфейсе больше не появятся. Есть возможность выбрать анимацию размытия, растягивания и т.д.
2.3 Приходящие элементы
Приходящие элементы- это нововведенные элементы в новом интерфейсе. Возможно выбрать анимацию усиления четкости изображения, вылет картинки и т.д.
2.4 Статичное изображение
Статичные элементы остаются неизменными во всех интерфейсах.
3. Детерминанты (определяющие факторы) восприятия
Иногда мы замечаем некоторые нюансы, дефекты анимации, но не можем назвать конкретные причины. Давайте посмотрим на факторы, которые определяют финальный рендеринг моушена: скорость(продолжительность), трансформация, последовательность, непрерывность, контраст, логичность, случайность и частотность.
3.1 Скорость (продолжительность)
Элементарно изменяя скорость, две анимации с одинаковым коэффициентом будут иметь большое различие в их восприятии.
В среднем визуальное восприятие человека улавливает 230 мс, а у разных людей оно колеблется от 70 до 700 мс. (Вы можете получить больше информации из Википедии, посетив Human processor model.)
Вот почему короткие переходы слишком резкие, в то время как длинные заставляют пользователя ожидать. Мы должны установить оптимальную продолжительность, в зависимости от сложности анимации, для создания плавного и четкого перехода.
Слева скорость анимации 0.3 с., справа скорость немного меньше - 0.1 с.
3.2 Трансформация(движение)
3.2.1 Функция плавности
Функция плавности(изинг) противоположна линейному эффекту и может подразделяться на ease-in, ease-out, ease-both, bounce, elastic, cubic, и т.д. Сильно глубоко рассматривать функцию плавности мы здесь не будем, вы можете ознакомиться со всеми функциями плавности на easings.net.
Благодаря простым физическим знаниям, мы с легкостью сможем понять различия между анимациями:
1. Easy-in: анимация медленная в начале, к концу ускоряется (чаще используется в выходящих элементах)
2. Ease-out: быстрая в начале, к концу замедляется (в основном используется для приходящих элементов)
4. No-ease/linear: объект, который движется с постоянной скоростью.
3.2.2 Путь движения
Когда элемент движется, он рисует линию(след), которая называется траекторией движения, которая может быть линейной или дугообразной.
По умолчанию элемент движется линейно, а траектория движения образует прямую линию или диагональ. Также элемент может выполнять движение дуги, которое обычно происходит при изменении соотношения элемента.
Дугообразное движение может быть направленно вертикально (vertical out), а иногда горизонтально (horizontal out).
1. Vertical out: движение начинается в горизонтальном направлении и заканчивается в вертикальном (скорость горизонтального больше, чем скорость вертикального)
2. Horizontal out: движение начинается в вертикальном направлении, а заканчивается в горизонтальном (скорость горизонтального меньше, чем вертикального)
Material Design дает нам возможность определить направление нашей дуги: «Дуга должна соответствовать главной оси пользовательского интерфейса». Лично я, для того чтобы определить направление, предпочитаю представлять то направление, в котором палец или мышь взаимодействует с экраном.
3.2.3 Сопротивление
Сила сопротивления – это сила, направление которой противоположно скорости тела. Другими словами, объект сопротивляется движению, чтобы оставаться постоянным.
Сопротивление имитирует реальные движения, такие как выброс, колебание/пружина, растяжение, параллакс и т.д.
Использование сопротивления облегчает задачу по установлению эмоциональной связи между пользователем и продуктом, которая в свою очередь помогает сузить разрыв во взаимодействии между виртуальным и реальными мирами.
3.3 Упорядоченность
Порядок перехода помогает пользователям понять цель перехода.
Суть простой последовательности состоит в том, что все элементы движутся вместе как одно целое.
Сложная последовательность, такая как в постоянных, выходящих и входящих элементах, изменяется все вместе, идеальный порядок: во-первых, выходящий элемент исчезает, во-затем, входящий элемент входит, и переход постоянного элемента завершается на протяжении всего процесса.
В сложных последовательностях зигзагообразное распределение помогает нам понять структуру информации и улучшить ее содержание.
Слева зигзагообразное распределение с интервалом в 0.15 с., справа одновременное движение.
3.4 Непрерывность(целостность)
Для того, чтобы продемонстрировать непрерывность интерфейса, кроме «скорости», «трансформации» и «упорядоченности», крайне важно взять во внимание особенности использования общих элементов перехода (Shared Element Transition).
Общие элементы перехода хорошо известны в рамках разработок Android, которые помогают в осуществлении переходов в более широком использовании. В системе iOS это называется View Controller Transition.
Другим важным критерием непрерывности является то, что выходящие и входящие элементы движутся в одном направлении и избегают столкновений.
3.5 Контраст
Так называемый контраст описывает иерархические взаимосвязи между переходами.
Анимация всегда имеет свой основной элемент (элемент фокуса). Увеличивая продолжительность, задерживая движение и увеличивая громкость, чтобы выделить элемент фокуса, пользователи могут быстро определить цель взаимодействия.
Чтобы отразить контраст, переход элементов фокуса обычно заканчивается после других переходов, показывая своего рода визуальную растяжимость. И элементы, расположенные в шахматном порядке(зигзагообразно) должны иметь очень короткий промежуток времени, чтобы фокусировка была беспристрастной.
Как показано на рисунке, целью анимации является выделение трех опций после открытия кнопки добавления. Опции очень хорошо выделены зигзагообразным расположением в интервале 0,15–0,25 с. Однако визуальная непрерывность исчезает, когда интервал увеличивается до 0,4 с или более.
В итоге, нам нужно уменьшить количество переходных элементов, чтобы выделить элемент фокуса. Мы можем объединить элементы одного типа и использовать групповое движение вместо раздельного.
Когда элемент фокуса в контейнере(маске), направление и продолжительность перемещений иногда приводят к столкновениям. На этом этапе необходимо сократить столкновения, отказавшись от перехода общих элементов.
Слева на картинке, изображения и контейнеры не растягиваются в одном направлении, что приводит к столкновениям.
3.6 Согласованность
Должна быть обеспечена согласованность между переходами одной и той же категории.
Программное обеспечение, такое как Invision и Zeplin, может автоматически генерировать DS (систему проектирования), и включение критериев перехода в систему проектирования также является одной из будущих тенденций. DS не будет ограничен только цветом, шрифтом и компонентами.
Чтобы обеспечить рациональность анимации, нам также необходимо учитывать случайность и частоту. Чрезмерно высокая частота сложной анимации также может повлиять на работу в браузере.
4. Инструменты интерактивного дизайна
В настоящее время, Principle, Invision Studio, XD, Flinto, Framer, Anima, Marvel, Axure являются наиболее мощными инструментами интерактивного дизайна. Мы не будем рассматривать все, ниже приведено лишь краткое сравнение четырех наиболее используемых.
Конечно, некоторые люди могут сказать, что ни один из этих инструментов нельзя сравнить с After Effects, но After Effects, в конце концов, предназначен для более сложной анимации, которая действительно не подходит для интерактивного дизайна, предназначенного для взаимодействия в реальном времени, в режиме онлайн. Что еще более важно, великолепные анимации, разработанные дизайнерами, для тех, кто не особо ознакомлены с разработками, будут трудно достигаемы в процессе разработки.
Логика этих инструментов в основном однообразна, они автоматически анимируют элементы с одинаковыми названиями. Однако плавность и разнообразие этого автоматического процесса варьируются от инструмента к инструменту - каждый инструмент имеет свои преимущества и недостатки.
Сравнение различных инструментов интерактивного дизайна.
4.1 Principle
Дизайн интерфейса Principle не имеет больших преимуществ. В настоящее время в нем нет векторного пера и форма градиента не поддерживается.
Одной из самых сильных сторон Principle является его анимация компонентов, которая экономит много потраченного времени на воссоздание анимации тех же элементов.
Временная шкала Principle может не только регулировать движение и продолжительность каждого элемента, но также может устанавливать детали, такие как X центр, Y центр, поворот, непрозрачность, радиус и масштаб, что значительно увеличивает разнообразие анимации.
Principle не поддерживает анимации неправильной формы, а также 3D-переходы. Тем не менее, вы можете создавать аналогичные эффекты, такие как 3D-переходы и анимированные персонажи, используя группу прокрутки установив соответствующие драйверы.
3D-переход и анимированный персонаж сделанный в Principle.
Мои настройки в Principle для переворачивания 3D-карты.
4.2 Invision Studio
Что на счет конструктивных особенностей, Invision Studio полностью превосходит все остальные программные обеспечения и может полностью восстанавливать различные слои и пути из Sketch.
Studio в настоящее время бесплатна, версия для Windows также есть в продаже. Сейчас она не поддерживает нерегулярные пути переходов или анимацию компонентов.
Система адаптивного дизайна Studio аналогична Sketch, которая позволяет группировать элементы и реализовывать дружественный к экрану интерфейс.
4.3 Adobe XD
Унаследованный от операционной системы Adobe, дизайн интерфейса XD также очень лаконичен. Однако его маска и векторное перо еще не достигли уровня создания сложных интерфейсов или иллюстраций.
После обновления функции автоматической анимации, XD приобрела большую популярность. Интерфейс и дизайн взаимодействия интегрированы в одно программное обеспечение, что значительно облегчает синхронизацию файлов пользовательского интерфейса и анимации.
XD не имеет временной шкалы, поэтому невозможно настроить анимацию каждого элемента отдельно. Например, анимация сока на следующем рисунке немного грубовата без эффекта зигзага.
Juice animation made with XD, by Yifan Ding
Одним из больших преимуществ XD на данном этапе является поддерживание анимации нерегулярных путей. Жидкая анимация (Liquid animation) в XD была очень популярна в последнее время.
Liquid animation made with Adobe XD
4.4 Flinto
Интерфейс Flinto немного отличается от других программ, это довольно мощный инструмент PowerPoint для анимации, поддерживает инструмент «Перо», на данный момент градиент отсутствует.
Flinto также основан на авто-анимации. В отличие от других программных обеспечений, Flinto имеет конструктор переходов, предназначенный для перехода экрана, который может объединять все динамические элементы в одном интерфейсе. И режим дизайнера очень похож на анимацию компонентов.
В конструкторе переходов элементы могут быть очень хорошо разделены. Постоянные и статические элементы могут быть объединены путем соединения слоев. При установке начального и конечного состояний все элементы будут автоматически анимированы.
Ввод, загрузка и 3D-переход сделаны с помощью режима дизайнера Flinto
Следующая анимация представляет собой имитацию приложения Airbnb с использованием прокрутки, клипа и режима дизайнера.
5. Итоги
Наконец-то мы добрались до конца! Помимо всех специфик и техник, которые там написанны, еще предстоит проделать большую работу. Как применить эти анимации к конкретному проекту и создать индивидуальность бренда? Как создать свою собственную библиотеку взаимодействия?