Когда вы слышите слово «анимация», вы можете подумать о мультфильмах или видеоиграх. На самом деле анимация окружает нас повсюду, особенно в приложениях и на веб-сайтах, которые мы используем.
От прокрутки экрана вниз до получения уведомления — анимация не только помогает вашим пользователям перемещаться по сайту, но и жизненно важна для рассказывания историй и создания повествования о бренде. Короче говоря, анимация предоставляет «живой» элемент чему-то, что в противном случае было бы статичным.
Если вы дизайнер пользовательского интерфейса и хотите добавить в свой арсенал больше навыков, считайте эту публикацию в блоге своим официальным введением в захватывающий, инновационный мир пользовательской анимации. Мы расскажем вам об основных принципах, инструментах, которые вам следует иметь под рукой, и о том, с чего начать. К концу этой статьи вы уже будете на пути к созданию потрясающих анимаций, которые поднимут ваши интерфейсы на новый уровень.
1. Что такое анимация пользовательского интерфейса?
Анимация пользовательского интерфейса — это процесс добавления движения к элементам пользовательского интерфейса с целью повышения интерактивности продукта. Дизайнеры UX и UI используют анимацию, чтобы направлять их по интерфейсу, предупреждать пользователей об изменениях, влиять на решения пользователей и указывать взаимосвязь между элементами — помимо прочего. Анимация пользовательского интерфейса также уменьшает ощущение механичности веб-сайта или приложения, создавая гораздо более естественный и интуитивно понятный интерфейс.
На заре цифровой эпохи дизайнеры были обычным явлением перегружать свои интерфейсы анимированными подарками и яркими, сверкающими цветами. Но когда мы начали больше узнавать о психологии взаимодействия пользователей с цифровыми интерфейсами, стало ясно, что чрезмерное использование декоративной анимации снижает качество сайта и даже приводит к потере пользователей.
Со временем дизайнеры открыли глаза на функциональные преимущества анимации, превратив ее из декоративного дополнения в нечто, что может улучшить взаимодействие с пользователем. Поворотным моментом в эволюции анимации пользовательского интерфейса стал переход от линейного движения к взаимодействиям , имитирующим свойства реального мира, такие как скорость, гравитация и вес. Этот прогресс привел к созданию реалистичной анимации пользовательского интерфейса, которую мы имеем сегодня.
В дизайне пользовательского интерфейса анимация может быть функциональной или декоративной . Функциональная анимация направляет и информирует пользователя в режиме реального времени, тогда как декоративная анимация является важным инструментом рассказывания историй и брендинга.
Анимация против анимированной графики
Если вы новичок в мире пользовательской анимации, вам, вероятно, интересно, в чем разница между анимацией и анимированной графикой. Быстрый поиск в Google покажет вам, что эти термины часто используются как взаимозаменяемые, так в чем же разница?
Анимация — это общий термин, обозначающий практику добавления движения к изображениям. Хотя это часть дизайна UX/UI, он также охватывает и другие области, такие как кино, игры и виртуальная реальность. Анимационная графика, с другой стороны, относится к процессу добавления движения к элементам графического дизайна . Проще говоря, анимационная графика — это разновидность анимации. В отличие от других типов анимации, анимационная графика, как правило, уделяет меньше внимания повествованию.
2. Почему важна анимация пользовательского интерфейса?
Поскольку количество веб-сайтов и приложений ежедневно увеличивается в десять раз, пользователи ожидают мощных, функциональных и уникальных интерфейсов, в которых легко ориентироваться. Сегодняшние цифровые продукты должны быть ориентированы на человека, интуитивно понятны и быстро реагируют. Один из способов, с помощью которого дизайнеры достигают всего вышеперечисленного (и даже большего), — это анимация.
Анимация добавляет жизненно важный человеческий контакт к цифровым интерфейсам, имитируя опыт взаимодействия с физическим объектом в реальной жизни. Это делает работу пользователя более простой и естественной и снижает когнитивную нагрузку. От точки А к точке Б анимация пользовательского интерфейса действует как указатели — часто настолько незаметные, что вы даже не заметите, что они там находятся. Анимация также снижает стресс, предоставляя обновления и обратную связь в режиме реального времени, постоянно информируя пользователя.
С другой стороны, анимация может сделать интерфейс интересным и интересным. Наличие визуально привлекательного интерфейса жизненно важно, и включение нужного количества анимации может выделить вас из толпы. Думайте об анимации как о подставке для специй, а о своем цифровом продукте — как о рагу. Добавление только одной специи может привести к тому, что рагу станет пресным и непривлекательным. С другой стороны, перегрузка тушеного мяса слишком большим количеством различных специй может придать ему подавляющий и сбивающий с толку вкус. Вам нужно научиться добавлять нужное количество специй, чтобы рагу получилось вкусным и сытным.
3. Какие существуют виды анимации пользовательского интерфейса?
Хотя многие дизайнеры имеют свои собственные способы классификации анимации, наиболее распространенные типы анимации пользовательского интерфейса, как правило, попадают в эти четыре группы:
- Микровзаимодействия
- Загрузка и прогресс
- Навигация
- Рассказывание историй и брендинг
Давайте посмотрим на них немного повнимательнее.
Микровзаимодействия
Микроанимация — пожалуй, наиболее часто используемый тип анимации пользовательского интерфейса. Они информируют пользователей, когда действие успешно выполнено или когда операция не удалась, по сути помогая пользователям визуализировать результат каждого действия. Нажатие кнопки, перемещение переключателя, прокрутка страницы вниз или появление значка «без звука» при включении телефона в беззвучный режим — все это примеры микроанимации. Как и многие элементы хорошего пользовательского интерфейса, микровзаимодействия остаются практически незамеченными, но их важность становится очевидной, когда что-то идет не так.
Загрузка и прогресс
Анимации загрузки и прогресса помогают держать пользователей в курсе, демонстрируя процесс выполнения действия или сообщая им, сколько времени пройдет до завершения действия. Никто не любит ждать, пока что-то загрузится, особенно без понимания того, как долго придется ждать. Индикаторы выполнения, временные шкалы и функции обновления вниз снимают стресс и усиливают ощущение того, что пользователь движется вперед.
Навигация
Навигационная анимация направляет пользователя по интерфейсу. Чем сложнее или комплекснее веб-сайт, тем более важную роль в его интуитивности играет навигационная анимация.
Предлагая подсказки, такие как стрелки, анимацию при наведении или элементы макета, которые можно перелистывать, визуальная иерархия становится более понятной, и пользователь может чувствовать уверенность в том, куда идти дальше.
Рассказывание историй и брендинг
Декоративная анимация, часто встречающаяся на экранах приветствия, является фантастическим способом усилить индивидуальность бренда и рассказать историю за считанные секунды.
Анимацию можно использовать для привлечения пользователей к определенным элементам бренда, а также для демонстрации продукта в увлекательной и увлекательной форме. Классическим примером анимации рассказывания историй и брендинга может быть анимированный логотип, который мгновенно дает людям понять, какой у вас бренд.
4. Принципы анимации пользовательского интерфейса
В 1981 году аниматоры Диснея Олли Джонстон и Фрэнк Томас выпустили книгу «Иллюзия жизни», в которой изложены 12 основных принципов анимации.
Хотя эти принципы были предназначены для использования в фильмах и мультфильмах, с тех пор они стали бесценным ресурсом для дизайнеров UX и UI, обеспечивая полезную основу для внедрения функциональной, комплексной анимации в цифровые интерфейсы.
Давайте углубимся в то, что они собой представляют.
1. Сжимайте и растягивайте
Некоторые объекты, в зависимости от их состава, могут менять форму при контакте с другими объектами, сжимаясь и растягиваясь при взаимодействии с окружающим миром.
Например, когда мяч ударяется о землю, его масса, вес и центр тяжести не меняются, но его форма может исказиться.
В дизайне пользовательского интерфейса сжимание и растягивание могут быть связаны с кнопками; когда вы нажимаете кнопку, она переходит в «сжатое состояние». Эта концепция означает, что мы можем назначать интерактивные символы любому элементу пользовательского интерфейса, позволяя им менять состояние в результате определенных действий.
2. Ожидание
Предвкушение относится к предшествующему предстоящему действию или, другими словами, к микроанимациям, ведущим к более масштабным действиям.
Отличным примером ожидания являются состояния при наведении. Если вы наводите курсор на кнопку, и она меняет цвет, это означает, что что-то произойдет, когда вы нажмете на кнопку.
3. Постановка
Постановка, как вы уже могли догадаться, означает подготовку сцены для действия. Это способ повлиять на пользователя, чтобы он нажал определенную кнопку или выполнил определенное действие путем «постановки» и организации элементов определенным образом.
Например, если вы добавите функцию «Вам это может понравиться» на страницу оформления заказа на сайте электронной коммерции, вы можете добавить кнопку «Добавить в корзину», которая находится отдельно от других элементов, что делает ее очевидным нажатием кнопки. .
4. Последующие и дублирующие действия
Представьте себе кошку, готовящуюся наброситься на мышь. Прежде чем он даже прыгнет, его уши могут двигаться первыми, затем передние ноги, чтобы оторвать его от земли, и, наконец, задние ноги, когда импульс наберется.
Даже после приземления части тела кошки могут все еще находиться в движении, причем перекрывающиеся движения происходят одновременно. Подражая этому, элементы пользовательского интерфейса можно заставить двигаться с разной скоростью или даже превышать свое действие, прежде чем прийти в положение покоя. Незначительная разница в скорости и ускорении каждого элемента делает страницу более естественной.
5. Ослабление
Ослабление, также известное как медленное вход и выход, относится к медленному, постепенному перемещению элементов пользовательского интерфейса.
Если вы думаете об объектах в реальной жизни, они не движутся резко, как и элементы пользовательского интерфейса. Небольшое появление изображения гораздо естественнее и приятнее, чем появление его из ниоткуда.
6. Дуги
В реальной жизни вещи редко движутся по прямым линиям, а скорее по кривым или дугам.
Хотя интерфейсы обычно проектируются на основе сеток, при создании адаптивного дизайна для выделения пути элемента можно использовать дуги . Например, при переключении с настольного компьютера на мобильный телефон кнопка может свернуться в шарик по изогнутой линии, а не по прямой.
7. Вторичное действие
Вторичные действия — это действия, которые поддерживают и усиливают первичные действия, например, движение шнурков вверх и вниз во время прогулки персонажа в мультфильме. Большинство микроанимаций можно отнести к второстепенным действиям, например, «пульсация» кнопки после ее нажатия.
8. Выбор времени
Время относится к порядку, в котором анимируются элементы пользовательского интерфейса, а также к последовательности, в которой они следуют.
В зависимости от функции элемента время перемещения напрямую влияет на настроение и характер интерфейса. Слишком медленная анимация может расстроить пользователей, тогда как слишком быстрая анимация может привести к тому, что они пропустят что-то важное. Выбор времени, пожалуй, один из самых важных принципов в этом списке, поскольку он влияет на внимание пользователей.
9. Преувеличение
В пользовательском интерфейсе некоторые анимации можно преувеличить, чтобы привлечь внимание пользователей и добавить на страницу стилизованный элемент. В то время как другие принципы в этом списке имитируют реализм реальных объектов, преувеличение — это шанс проявить творческий подход.
10. Обжалование
Даже микроанимация должна быть привлекательной для пользователя, чтобы служить своей цели. Добавление очарования к вашей анимации с помощью цвета — верный способ сделать даже самую незаметную анимацию привлекательной.
11 и 12. Сплошной рисунок и движение прямо, а не поза в позу.
Это два чуть менее важных принципа для анимации пользовательского интерфейса. Сплошной рисунок относится к трехмерной анимации.
Если рассматривать третье измерение как недосмотр, симметрия двухмерной анимации может развеять иллюзию трехмерного объекта. Вот почему часто бывает шоком увидеть героев мультфильмов лицом к лицу.
Принцип «прямо вперед» и «поза в позу» относится к разнице между запуском анимации с позы и созданием последующих кадров и заполнением кадров между ключевыми позами.
5. Инструменты анимации для дизайнеров пользовательского интерфейса.
Итак, что на самом деле используют дизайнеры пользовательского интерфейса для создания этих потрясающих функциональных анимаций? К счастью, в настоящее время нет недостатка в комплексных инструментах и программном обеспечении для анимации пользовательского интерфейса . Вот обзор трех самых популярных инструментов анимации пользовательского интерфейса для начинающих:
Adobe After Effects
Adobe After Effects — один из самых популярных инструментов анимации пользовательского интерфейса и, возможно, самый мощный. After Effects, признанный стандартным в отрасли инструментом анимации и программным обеспечением для создания визуальных эффектов, предлагает сотни эффектов, которые помогут вам добиться желаемого результата.
С этим программным обеспечением возможно все: от анимированных логотипов до анимированной графики — вы даже можете добавить звук. Лучшая часть? Он прекрасно работает с другими инструментами Adobe, такими как Adobe Portfolio и Adobe Fonts.
Motion UI
Motion UI — это новинка в области инструментов анимации пользовательского интерфейса. С помощью Motion UI вы можете быстро и легко создавать анимацию, используя более 20 готовых анимаций и переходов, или, конечно же, у вас есть возможность создать свою собственную с нуля. Он также предоставляет учебное пособие по коду для анимации, что упрощает создание прототипов.
Flinto
Инструмент прототипирования и анимации Flinto отлично подходит для создания быстрых интерактивных анимаций на основе переходов для приложений и веб-сайтов.
Интегрированный со Sketch и Figma, это отличный инструмент для начинающих, а также предлагающий полезные предварительные просмотры, позволяющие оценить, как ваши анимации будут выглядеть для конечного пользователя на ранних этапах их создания.
6. Как мне изучить анимацию дизайна пользовательского интерфейса?
Анимация в дизайне пользовательского интерфейса все больше превращается из «приятной вещи» в то, чего ожидают пользователи, и в результате спрос на более сложную анимацию пользовательского интерфейса стремительно растет. Если вы уже являетесь дизайнером пользовательского интерфейса, возможно, вам кажется, что анимация пользовательского интерфейса — это следующий шаг в вашей карьере, но с таким большим количеством информации легко почувствовать себя ошеломленным. Так как же на самом деле начать? Какие ключевые навыки вам нужны для работы в анимационном дизайне ?
Прежде чем вы с головой броситесь покупать дорогие инструменты и записываться на дорогие курсы, отличный способ встать на ноги — это вдохновиться. Нет недостатка в веб-сайтах с креативным дизайном пользовательского интерфейса , учетных записях Instagram и сайтах-портфолио, таких как Behance или Dribbble, которые подпитывают ваше творчество, и вы, несомненно, будете в восторге от безграничных возможностей, которые могут открыть вам навыки анимации пользовательского интерфейса!
Ознакомившись с этой областью, вы можете ознакомиться с некоторыми онлайн-руководствами. Существует также множество доступных коротких курсов , которые помогут вам освоить соответствующие инструменты и применить на практике некоторые из вышеупомянутых принципов проектирования. В этом посте мы собрали некоторые из лучших уроков по анимации для начинающих .
7. Заключительные мысли
Итак, вот оно: все, что вам нужно знать, чтобы начать работу с анимацией пользовательского интерфейса. Хотя легко увлечься заманчивыми творческими возможностями анимации пользовательского интерфейса, имейте в виду, что успешное включение анимации в пользовательский интерфейс в конечном итоге зависит от удобства использования.
Дизайнер пользовательского интерфейса должен тщательно продумать ценность каждой анимации — независимо от того, насколько она тонкая или привлекательная — и что она означает для конечного пользователя. Анимация — один из наиболее эффективных инструментов взаимодействия с пользователем, и к ней нельзя относиться легкомысленно. Однако сделайте это хорошо, и вы получите уникальный, привлекательный цифровой продукт, который понравится как пользователям, так и заинтересованным сторонам.