Полное руководство по правильному использованию анимации в UX

Полное руководство по правильному использованию анимации в UX

18-10-2020 09:35:58
В настоящее время сложно поразить или даже удивить интерфейсной анимацией. Он показывает взаимодействие между экранами, объясняет, как использовать приложение или просто направляет внимание пользователя. Исследуя статьи об анимации, я обнаружил, что почти все они описывают только конкретные варианты использования или общие факты об анимации, но я не встречал ни одной статьи, где бы все правила, касающиеся анимации интерфейсов, были бы понятны и практически описаны. Ну, в этой статье я не буду писать ничего нового, я просто хочу собрать все основные принципы и правила в одном месте, чтобы другие дизайнеры, которые хотят запустить анимацию интерфейсов, не искали дополнительную информацию.

Продолжительность и скорость анимации


Когда элементы меняют свое состояние или положение, продолжительность анимации должна быть достаточно медленной, чтобы дать пользователям возможность заметить это изменение, но в то же время достаточно быстрой, чтобы не вызывать ожидания.

Используйте правильную продолжительность в вашей анимации. Не делайте это слишком быстро и не оставляйте пользователю достаточно времени, чтобы зевать.

Многочисленные исследования показали, что оптимальная скорость анимации интерфейса составляет от 200 до 500 мс . Эти цифры основаны на конкретных качествах человеческого мозга. Любая анимация короче 100 мс является мгновенной и не распознается вообще. Принимая во внимание, что анимация продолжительностью более 1 секунды передаст ощущение задержки и, таким образом, будет скучной для пользователя.

Длительность анимации


На мобильных устройствах Рекомендации по проектированию материалов также предлагают ограничить продолжительность анимации до 200–300 мс. Что касается таблеток, продолжительность должна быть больше на 30% - около 400–450 мс. Причина проста: размер экрана больше, поэтому объекты преодолевают более длинный путь при изменении положения. На носимых устройствах продолжительность должна быть соответственно на 30% короче - около 150–200 мс, потому что на меньшем экране расстояние для перемещения короче.


Размер мобильных устройств влияет на продолжительность анимации


Веб-анимация трактуется по-другому. Так как мы привыкли к почти мгновенному открытию веб-страниц в браузере, мы ожидаем также быстрого перехода между различными состояниями. Таким образом, продолжительность веб-переходов должна длиться примерно в 2 раза короче, чем на мобильных устройствах - от 150 до 200 мс. В других случаях пользователь неизбежно будет думать, что компьютер зависает или имеет проблемы с подключением к Интернету.
Но. Забудьте об этих правилах, если вы создаете декоративную анимацию на своем сайте или пытаетесь привлечь внимание пользователя к определенным элементам. В этих случаях анимация может быть длиннее.

Большой экран компьютера = Медленная анимация? Ни за что!


Необходимо помнить, что независимо от платформы продолжительность анимации должна зависеть не только от пройденного расстояния, но и от размера объекта. Меньшие элементы или анимация с небольшими изменениями должны двигаться быстрее. Соответственно, анимация с большими и сложными элементами выглядит лучше, когда она длится немного дольше.

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

Маленькие объекты по сравнению с большими объектами движутся медленнее, поскольку они имеют большие смещения.

Продолжительность анимации различается в зависимости от размера объекта и пройденного расстояния.


Когда объекты сталкиваются, энергия столкновения должна быть равномерно распределена между ними согласно физическим законам. Итак, лучше исключить эффект отказов. Используйте его только в исключительных случаях, когда это имеет смысл.


Избегайте использования подпрыгивающего эффекта, так как он отвлекает внимание


Движение объектов должно быть четким и резким, поэтому не используйте размытие в движении (да, пользователи After Effects, не в этот раз). Сложно воспроизвести эффект даже на современных мобильных устройствах, и он вообще не используется в интерфейсной анимации.

Не используйте эффект размытия в вашей анимации


Элементы списка (новостные карточки, списки адресов электронной почты и т. Д.) Должны иметь очень короткую задержку между их появлением. Каждое появление нового элемента должно длиться от 20 до 25 мс. Более медленное появление элементов может раздражать пользователя.


смягчение


Ослабление помогает сделать движение объекта более естественным. Это один из основных принципов анимации , который подробно описан в книге «Иллюзия жизни: анимация Диснея» , написанной двумя ключевыми аниматорами Диснея - Олли Джонстоном и Фрэнком Томасом.

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

Анимация с замедлением выглядит более естественной по сравнению с линейной


Объекты, на которые не воздействует какая-либо физическая сила, движутся линейно, другими словами, с постоянной скоростью. И именно из-за этого они выглядят очень неестественно и искусственно для человеческого глаза.

Все приложения для анимации используют анимационные кривые. Я постараюсь объяснить, как их читать и что они значат. Кривая показывает, как (y axis)изменяется положение объекта за те же интервалы времени (x axis). В текущем случае движение является линейным, поэтому объект проходит одно и то же расстояние в одно и то же время.

Кривая замедления или ускорения


На кривой видно, что в начале положение объекта медленно меняется, а скорость постепенно увеличивается. Это означает, что объект движется с определенным ускорением.

Эта кривая должна использоваться, когда объекты вылетают из экрана на полной скорости. Это могут быть системные уведомления или просто карты интерфейса. Но имейте в виду, что такой тип кривой следует использовать только тогда, когда объекты покидают экран навсегда, и мы не можем их вспомнить или вернуть.

Кривая ускорения выброса карты за пределы экрана


Кривая анимации помогает выразить правильное настроение. В приведенном ниже примере мы видим, что продолжительность перемещения и расстояние для всех объектов одинаковы, но даже небольшие изменения в кривой дают вам возможность влиять на настроение анимации.

И, конечно же, изменяя кривые, вы можете перемещать объект как можно ближе к реальному миру.

Кривая ослабления или замедления


Это противоположно кривой замедления, поэтому объект быстро преодолевает большие расстояния, а затем медленно снижает скорость до полной остановки.


Кривая замедления


Этот тип кривой следует использовать, когда элемент появляется на экране - он всплывает на экране на полной скорости, постепенно замедляется до полной остановки. Это также может быть применено к различным картам или объектам, которые появляются снаружи экрана.

Ease-in-out или стандартная кривая


Согласно Руководству по дизайну материалов , лучше использовать асимметричную кривую, чтобы движение выглядело более естественным и реалистичным. Конец кривой должен быть более подчеркнутым, чем ее начало, чтобы продолжительность ускорения была меньше, чем продолжительность замедления. В этом случае пользователь будет уделять больше внимания окончательному перемещению элемента и, следовательно, его новому состоянию.

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

Смотрите разницу между симметричной и асимметричной стандартной кривой


Ease-in-out используется, когда объекты перемещаются из одной части экрана в другую. В таком случае анимация избегает эффектного и драматического эффекта.

Движение карты на экране и соответствующая асимметричная кривая


Тот же тип движения должен использоваться, когда элемент исчезает с экрана, но пользователь может в любое время вернуть его на прежнее место. Это касается навигационного ящика, среди прочего.

Панель навигации скрывается от экрана со стандартной кривой


Из этих примеров следует фундаментальное правило, которым пренебрегают многие начинающие - начальная анимация не равна конечной анимации. Как и в случае с навигационным блоком - он отображается с кривой замедления и исчезает со стандартной кривой. Кроме того, согласно Google Material Design , время появления объекта должно быть больше, чтобы привлечь больше внимания.

Появление и исчезновение бокового меню выполняется с замедлением и стандартной кривой соответственно


Функция cubic-bezier()используется для описания кривых. Он называется кубическим, потому что основан на четырех точках. Первая точка с координатами 0;0(внизу слева), а последняя с координатами 1;1(вверху справа) уже определены на графике.

Исходя из этого, нам нужно описать только две точки на графике, которые задаются четырьмя аргументами функции cubic-bezier(): первые две являются координатами xи yпервой точки, вторые две являются координатами xи yвторой точки.

Для упрощения работы с кривыми я предлагаю использовать сайты easings.net и cubic-bezier.com . Первая содержит список наиболее часто используемых кривых, параметры которых вы можете скопировать в инструмент создания прототипов. Второй источник дает вам возможность поиграть с различными параметрами кривой и сразу увидеть, как будут двигаться объекты.

Различные типы кривых и их параметры для функции cubic-bezier ()

Хореография в анимации интерфейсов


Как и в балетной хореографии, основная идея заключается в том, чтобы направлять внимание пользователя в одном направлении движения при переходе из одного состояния в другое.

Существует два типа хореографии - равноправное и подчиненное взаимодействие.

Равное взаимодействие


Равное взаимодействие означает, что внешний вид всех объектов подчиняется одному конкретному правилу.

В этом случае внешний вид всех карт воспринимается как один поток, который направляет внимание пользователя в одном направлении, а именно сверху вниз. Если мы не будем следовать порядку, внимание пользователя будет рассеяно. Внешний вид всех элементов сразу выглядел бы также плохо.

Диагональный вид для табличного вида карт


Что касается табличного представления, это немного сложнее. Здесь фокус пользователя должен быть направлен по диагонали, поэтому показ элементов по одному - плохая идея. Раскрытие каждого элемента по одному сделает анимацию чрезмерно долгой, а внимание пользователя будет зигзагообразным, что неправильно.

Подчиненное взаимодействие



Подчиненное взаимодействие означает, что у нас есть один центральный объект, который привлекает все внимание пользователя, а все остальные элементы подчиняются ему. Этот тип анимации дает ощущение порядка и привлекает больше внимания к основному содержанию.

В других случаях пользователю будет очень трудно узнать, за каким объектом следует следовать, чтобы его внимание было рассеяно. Поэтому, если у вас есть несколько элементов, которые вы хотите анимировать, вам нужно четко определить последовательность их движения и анимировать как можно меньше объектов за один раз.

Согласно Material Design


Согласно Material Design , когда движущиеся объекты изменяют свой размер непропорционально, они должны двигаться по дуге, а не по прямой линии. Это помогает сделать движение более естественным. Под «непропорционально» я подразумеваю, что изменение высоты и ширины объекта путем увеличения / уменьшения выполняется асимметрично, то есть с разной скоростью (например, квадратная карта превращается в прямоугольник).

Движение по линии


Движение по линии используется, когда объект пропорционально меняет свой размер. Поскольку осуществление такого движения намного проще, правилом диспропорционального движения дуги часто пренебрегают. Глядя на реальные примеры приложений, вы увидите доминирование линейного движения.


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


Если пути движущихся объектов пересекаются друг с другом, они не могут двигаться друг через друга. Объекты должны оставлять достаточно места для движения другого объекта, замедляя или ускоряя собственную скорость. Другой вариант - они просто отталкивают другие объекты. Почему так? Поскольку мы предполагаем, что все объекты в интерфейсе лежат в одной плоскости.

В другом случае движущийся объект может подняться над другими объектами. Но опять же нет растворения или движения через другие объекты. Зачем? Поскольку мы считаем, что элементы интерфейса ведут себя в соответствии с законами физики, и никакие твердые объекты в реальном мире не способны на это.

Выводы


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

Если анимация построена правильно, то она ненавязчива и не отвлекает пользователей от их целей. Если это произойдет, вам нужно либо смягчить его, либо вообще удалить. Это означает, что анимация не должна замедлять пользователя или препятствовать выполнению задачи.

Но не забывайте, что анимация - это больше искусство, чем наука, поэтому лучше экспериментировать и проверять свои решения на пользователях.


САМОЕ ОБСУЖДАЕМОЕ

...
Титан в воздухе
18-10-2020 09:35:58
Это не самолет – это Мрия!!!...
...
Лучшие бюджетные ноутбуки на 2020 год
18-10-2020 09:35:59
Как выбрать лучший ноутбук в 2020 году...
...
Технологические тенденции в 2020 году
18-10-2020 09:35:59
Технологи будущего уже сегодня...
...
Самостоятельная поездка автомобиля под управлением искусственного интеллекта
18-10-2020 09:35:58
Самый далекий перезд без водителя в истории искуственного интеллекта....
...
Ford Bronco наконец дебютирует 9 июля
18-10-2020 09:35:58
После задержек, связанных с коронавирусом, у долгожданной Бронко Форда официально объявлена ​​дата....
...
Tesla Semi готова к «массовому производству»
18-10-2020 09:35:58
Но генеральный директор не указал точные сроки начала производства электрического грузовика....
...
25 самых продаваемых легковых автомобилей, грузовиков и внедорожников 2020 года (пока)
18-10-2020 09:35:58
Хотя пандемия коронавируса привела к хаосу в продажах автомобилей, мы подсчитали рейтинг самых продаваемых в первом квартале....
...
Электрический Mustang
18-10-2020 09:35:58
Ford представляет электрический Mustang с «потрясающим» ускорением...
...
Cамые большие дизайнерские моменты 2018 года
18-10-2020 09:35:59
Мы попросили дизайнеров рассказать нам, что они считают самой важной вещью, которая произошла в отрасли в этом году....
...
Airtable
18-10-2020 09:35:59
Простая в использовании система управления реляционными базами данных...

НАШИ РЕКОМЕНДАЦИИ

Toyota Supra в 2021 году
Toyota Supra в 2021 году
Toyota Supra 2020 года не получит дооснащения, чтобы соответствовать увеличению мощности в 2021 году...
9 различных вариантов использования console log
9 различных вариантов использования console log
Каждый из нас использовал console.logдля отладки больше, чем нам хотелось бы признать....
Расслабление, снятие стресса и развитие сознания
Расслабление, снятие стресса и развитие сознания
Иногда в жизни бывают дни.......
Послушай других и сделай наооборот
Послушай других и сделай наооборот
Основатель Tesla и SpaceX воплотил в жизнь одну идею, противоречащую общепринятому мнению, и это помогло ему заработать миллиарды....
Красный флаг или работа не Вашей мечты.
Красный флаг или работа не Вашей мечты.
В последнее время развелось (были всегда) много организаций на рынке - которые надо обходить стороной....


ИНТЕРЕСНОЕ

Понимание карты и набора в JavaScript
Понимание карты и набора в JavaScript
Эта статья была изначально написана для DigitalOcean ....
Lazareth Wazuma от Феррари
Lazareth Wazuma от Феррари
Lazareth Wazuma V8F Quad – Engine By Ferrari...
20 самых важных секретов настоящих отношений
20 самых важных секретов настоящих отношений
Не простые отношения между женщинами и мужчинами...
Работа в Швеции
Работа в Швеции
Компании в Швеции переходят на 6-часовые рабочие дни и добиваются удивительных результатов...


ЛУЧШИЕ РЕЙТИНГИ

Набор массы
Набор массы
Базовые принципы для новичков
Ежедневные 15-минутные прогулки способны кардинально изменить ваше тело
Ежедневные 15-минутные прогулки способны кардинально изменить ваше тело
Всем известно, как положительно влияют на организм...
Правила для наращивания мышечной массы
Правила для наращивания мышечной массы
Зная интенсивность физических упражнений...
Раскачать грудь
Раскачать грудь
Обычно грудные растут хорошо у тех...

АКТУАЛЬНОЕ

Будущее уже с нами Galaxy Fold
CEO продвижение
Отношения с мужчинами
Раздевалка
Лишь плохие начальники ожидают от своих подчиненных постоянной занятости
Как научиться читать быстрее
Выбирай того, кто ежедневно пишет тебе «С добрым утром»
США скрывают правду о пришельцах
Свечение от ракеты SpaceX американцы приняли за НЛО
Путешествие из Австрии в Италию

ЧИТАЙТЕ ТАКЖЕ

18-10-2020 09:35:59 (120052)
Какую одежду носят манхэттенские модницы летом
Возможно эта новость тебе еще неизвестна
18-10-2020 09:35:59 (120050)
Время сгибаемых смартфонов еще не пришло
Эксперт по технологиям издания Mashable Стэн Шредер написал колонку...
18-10-2020 09:35:59 (120049)
Успешные стартапы, которые начинали как сторонние проекты
Apple, Facebook, Google, SpaceX ...
18-10-2020 09:35:59 (120051)
Надо стараться быть с теми, кто к нам хорошо относится
Маленький гимназист очень плохо учился...
18-10-2020 09:35:59 (120044)
Стопроцентная диета для похудения или питание наоборот
Сделай все наоборот....
18-10-2020 09:35:59 (120046)
Невероятная 12-месячная трансформацией тела
Звезда фитнеса из Сиднея Софи Аллен рассказывает о своей трансформации..