← Назад | Продолжение (Глава 4) →
(Перед вами бесплатный курс от InVision Studio «Анимация интерфейсов». В курсе 4 главы. Если вы здесь впервые, то лучше начните сначала)
Когда анимация в интерфейсе работает правильно, мы воспринимаем ее как нечто естественное и само собой разумеющееся.
Однако на практике, чтобы сделать цифровое движение органичной частью реального мира, потребуется слаженная работа дизайнеров и разработчиков. Только если разработчики и дизайнеры говорят на одном языке и обладают единым видением, они могут добиться выдающегося результата.
Как и во многих творческих дисциплинах, в анимации каждый художник видит по-своему. В этой главе мы рассмотрим четыре продукта, насквозь пронизанных анимацией, и разберем принципы и алгоритмы работы их создателей.
Принцип 1: Продумывайте анимации на старте
При разработке динамичной интерфейсной анимации, пригодится как инженерное, так и дизайн-мышление. У каждого типа мышления есть свои особенности (преимущества и ограничения), которые отлично дополняют друг друга. Как смешать два подхода и получить хороший результат? Это умеет и практикует Zova Fitness.
Zova Fitness — это небольшой австралийский стартап. Их приложение подкупает отличным контентом и тщательно продуманным пользовательским опытом. За это ребята даже получили Apple Design Award.
Анимация — ключевая часть пользовательского опыта Zova Fitness. Директор по дизайну Дэвид Фамбергер немного рассказал нам о процессе проработки анимаций в компании. Он включает 4 важных шага:
- Первый шаг — заложить анимации на уровне лейаута. Команда Zova Fitness продумывает движение в интерфейсе с самого начала — еще на этапе проработки статичных экранов и лейаутов.
- Второй шаг — наметить анимацию на временной шкале. Статичные экраны загружаются в инструмент для создания анимаций, чтобы проверить, работает ли концепция в сборке. Макет, который получается в результате этого шага, можно показать разработчикам или другим членам команды, чтобы быстро показать задумку по анимациям.
- Третий шаг — прототип анимации. Дэвид садится рядом с разработчиком и собирает подробный прототип, со всеми экранами и анимациями. Этот прототип не пойдет в продукт: он нужен, чтобы выверить скорость и продолжительность анимаций и отточить все переходы.
- Четвертый и последний шаг — сборка продукта. Когда прототип готов, разработчик добавляет все в продукт. К этому моменту все вопросы по дизайну уже должны быть решены.
Дэвид и его команда закладывают про анимацию на самых ранних этапах проекта. Благодаря этому, анимация решает задачи наравне с другими элементами интерфейса. Она становится важной частью продукта, а не бантиком, который повесили в конце и который хочется снять, чтобы не мешал.
По мнению Дэвида, дизайнеры должны понимать, какие ограничения есть у разработчиков, и учитывать это при создании анимаций. Разработчики тоже должны идти навстречу и подсказывать дизайнерам неочевидные нюансы: например, специфику данных или ограничения той или иной платформы.
Совет профи. Советы небольшой команде
Вот несколько уроков, которые вынесла для себя команда Zova Fitness в процессе работы:
1. Продумывайте анимации на самых ранних этапах проекта
2. Собирайте макеты и прототипы, чтобы синхронизировать видение по проекту
3. Прорабатывайте детали на прототипах
Принцип 2: Поддерживайте пользователей в процессе взаимодействия с интерфейсом
Чтобы сделать классную анимацию, недостаточно просто отрисовать иллюстрации, настроить переходы и собирать прототипы. Команда должна говорить на едином языке, разделять видение результата, использовать подходящие инструменты и методы. Команда Headspace при создании своих классных анимаций всегда ориентируется на свою путеводную звезду: обеспечить пользователю идеальное путешествие по продукту.
Если вы когда-нибудь пользовались Headspace, но знаете, как классно работают их обучающие анимации. Они магическим образом визуализируют и объясняют абстрактные практики осознанности и снимают тревожность и депрессию — и все это под соусом легкой и увлекательной игры.
Команда дизайнеров Headspace использует интерфейсную анимацию, чтобы поддерживать пользователей в процессе работы. О процессе создания анимаций в компании нам рассказали Джон Бреннан, старший продуктовый дизайнер и Кристин Ча, продуктовый дизайнер:
В Headspace мы рассматриваем анимацию в контексте четырех ключевых параметров (некоторые из них мы рассмотрели в Главе 2 этой книги):
- Поведение: что делает объект или где он появляется на экране;
- Смягчение: с какой скоростью объект движется из точки А в точку Б;
- Продолжительность: как долго длится анимация
- Последовательность: порядок осуществления движений
Бывают ситуации, когда при переходе между экранами или состояниями движется несколько объектов сразу. Параметры, перечисленные выше, помогают описать, как происходит движение каждого объекта. Когда пользователь работает в приложении Headspace, анимации постоянно его сопровождают: объясняют что происходит, откуда это взялось и что будет дальше. Анимации помогают связать отдельные эпизоды в единую историю.
Поскольку анимация играет такую важную роль в продукте, прорабатывать ее начинают сразу после пользовательских исследований. Поскольку дизайнеры продумывают анимации еще на этапе вайрфреймов, им проще пробовать и развивать свои концепции.
Совет профи — Проработать доступность на старте
Когда анимации закладываются в дизайн на самых ранних этапах, у команды остается достаточно времени, чтобы проработать и протестировать доступность продукта — или заложить альтернативные пользовательские сценарии для людей с ограниченными возможностями.
К примеру, при разработке анимации “потяните, чтобы обновить”, не помешает добавить какие-то подсказки для слабовидящих и маломобильных людей, чтобы они могли обновить страницу как-то по-другому.
Возьмем, например, сон. С точки зрения пользователя, приложение для засыпания должно быть плавным и умиротворяющим, чтобы не возбуждать психику. Поэтому мы не только используем темные и приглушенные цвета, но и информацию на экран выводим плавно, небольшим порциями, без резких движений.
Задача команда Headspace — создать спокойную безмятежную среду, в которой каждое движение и взаимодействие настраивает на спокойствие и медитацию.
Как лучше выстроить маршрут пользователя с учетом анимации
Есть несколько практических тонкостей, которые помогают команде Headspace создавать ту самую спокойную среду в приложении:
- Все детали дизайна (в том числе анимации) должны поддерживать то настроение и среду, которые вы создаете в приложении
- Определитесь с набором инструментов для создания анимаций — и расскажите о нем команде
- Закладывайте анимации на старте
Принцип 3: Грамотно масштабировать анимации
По мере того, как компания растет, становится все сложнее обеспечивать классный пользовательский опыт во всех продуктах и линейках. К тому же, появляется риск двойной работы когда несколько команд независимо друг от друга прорабатывают одни и те же взаимодействия. В связи с этим, набирает популярность такая штука как дизайн-системы. Дизайн-система помогает дизайнерам и разработчикам более эффективно проектировать пользовательских опыт и функции продукта.
Как и хороший интерфейс, дизайн система должна помогать найти лучший ответ на вопрос или решение проблемы. Важно, чтобы дизайн система жила: ее нужно постоянно обновлять, пополнять популярными сценариями взаимодействия, распространенными ошибками и проблемными ситуациями.
В последнее время анимации в дизайне интерфейсов становятся все популярнее, поэтому их тоже стоит включить в дизайн-систему. И не упомянуть между делом где-то в конце, а оформить как полагается: ведь это важный ингредиент дизайна. Дизайнеры и разработчики Google, например, сделали движение одним из основополагающих компонентов своей дизайн-системы Material.
Директор по UX команды Material design Ричард Фулчер, и старший UI дизайнер Эрик Генри рассказали, что в дизайн-системе Material есть три ключевых принципа работы с анимациями: (1)движение должно быть информативным, (2)прицельным и (2)экспрессивным.
Согласно дизайн-системе Material, информативное движение “отражает пространственные и иерархические связи между элементами, и показывает, что произойдет, если совершить то или иное действие”. Примерно то же самое имели в виду ребята из Headspace, когда говорили о “поведении анимации”.
Прицельное движение обращает внимание пользователя на то, что важно. Экспрессивное движение делает дизайн живым, ярким, стильным и индивидуальным. Если рассматривать в контексте принципов дизайна, здесь работает принцип привлекательности из второй главы.
Дизайн-система Material объясняет, как правильно использовать движение в интерфейсе и как с его помощью установить иерархию и связи между элементами. Команда дизайнеров Google продумала все сценарии использования анимации: от ненавязчивой просьбы оставить фидбэк до своевременных подсказок в интерфейсе.
Совет профи — документируйте всё
В такой крупной компании как Google, одному человеку (и даже команде специалистов) не справиться с обеспечением согласованности дизайна. Поэтому дизайн-система Material — это такая полезная штука.
1. Создайте единый свод правил, которыми смогут руководствоваться моушн-дизайнеры при принятии решений. И позаботьтесь, чтобы у всех был к нему доступ.
2. Сформулируйте ряд ключевых принципов, которые будут путеводной звездой для всех дизайнеров в компании.
3. В деталях пропишите каждое взаимодействие, чтобы пользователям дизайн-системы было понятно, как правильно использовать те или иные анимационные эффекты.
Принцип 4: Выделяться и заботиться
Дизайн-система Material — незаменимая штука для такой крупной организации как Google. Тем не менее, дизайн-система здорово выручает и на этапе активного роста. В контексте переполненного рынка, очень важно иметь сильный образ и стиль в дизайне.
Компания Lyft, например, делает в своем дизайне упор на положительные эмоции. Однажды они украсили все свои каршеринговые машины огромными розовыми усами, а в другой раз посадили за руль такси рэпера по имени Chance the Rapper. Не удивительно, что анимации — это ключевая часть их дизайн-процесса.
Линда Донг, дизайн-менеджер в Lyft, раскрыла их основополагающие принципы анимации, рассказала, как они делают анимации доступными, а также пояснила, почему анимации — неотъемлемая часть их дизайн-системы.
В Lyft есть три простых принципа моушн-дизайна. Анимации должны быть осознанными, отзывчивыми и яркими:
- Принцип осознанности: у каждой анимации в Lyft есть конкретная цель: показать пассажиру где водитель, привлечь внимание водителя к изменениям в заказе, подсказать, как работает навигация и т.п.
- Принцип отзывчивости: продукт должен быстро реагировать на действия пользователей и не тормозить процесс. А ещё он должен создавать ощущение быстрой загрузки, чтобы пользователи было проще ждать.
- Принцип яркости: движение должно отражать образ бренда Lyft: уверенный, простой и немного бунтарский.
В совокупности эти принципы складываются в систему анимаций, которая «сдруживает» яркий голос бренда (Приветик, мы Lyft!) и их глубокое понимание реальных пользовательских сценариев, которые команда Lyft пытается оптимизировать за счет анимации.
Типовой сценарий для Lyft — это когда водитель едет по заказу или когда пассажир ищет машину. При этом ребята активно работают над доступностью. Возьмем, к примеру, всплывающее уведомление на экране, когда водитель приехал: “Машина ждет вас, выходите!”. Здоровому человеку достаточно секунды, чтобы увидеть и прочитать уведомление, а вот люди с ограниченными возможностями пользуются устройствами чтения экрана, которым нужно больше времени, чтобы обработать текст. Команда Lyft учитывает это при проектировании анимаций и устанавливает правильный тайминг.
Этот и другие сценарии зафиксированы в системе моушн-дизайна Lyft под названием “Lyft Product Language” (“Продуктовый язык Lyft”). Причем там изложены не только принципы анимации, но и характер, который закладывается в каждую анимацию. Благодаря такому подходу, дизайнеры глубже понимают язык анимаций, а новички и ребята из других команд быстрее погружаются в курс.
Сотрудникам, хорошо знакомым с продуктами Lyft с точки зрения пользователя, дизайн-система помогает упорядочить принципы использованиями анимаций и отвечает на важные вопросы, например: отличается ли дизайн Lyft для водителей и пассажиров? В каких случаях полагается использовать анимации, чтобы скрасить пользователям ожидание? Когда стоит добавить экспрессивности?
Когда команда начинает проектировать что-то в интерфейсе — например, уведомление о прибытии машины — они сразу планируют хореографию движения. В этом процессе очень важно, чтобы дизайнеры и разработчики активно общались, обменивались информацией и делили ответственность. Так проектируются самые успешные решения: нешаблонные и качественно проработанные.
Основная цель дизайн-системы Lyft — сформуливать принципы и на их основе собрать компоненты, которые можно использовать в дизайне повторно. Это облегчает работу дизайнерам и разработчикам: не надо постоянно принимать важные ответственные решения (например, какой длительности должна быть анимация, по какой траектории движется объект и т.п.). Все ключевые параметры уже рассчитаны с учетом характера бренда и реальных сценариев использования.
Совет профи — продуманный и уместный дизайн
Команда дизайна Lyft старается протаскивать яркую айдентику бренда через все сценарии использования. Для этого они упаковали принципы моушн-дизайна в готовые компоненты, которые можно использовать в дизайне повторно. Вот чем ребята руководтсвуются в работе:
1. Сформулировать ключевые принципы моушн-дизайна, которые применимы к целому ряду сценариев
2. Внедрять моушн-дизайн с самого начала, причем дизайнеры и разработчики должны работать сообща
3. Не забывать о доступности — во всех сценариях
Советы для команд любого размера
Как вы, наверное, поняли из историй Zova Fitness, Headspace, Google и Lyft, анимации стоит закладывать на самых первых этапах проектирования. И по сути не важно, большая у вас компания или нет — это окупится. Когда анимации продуманы с самого начала, пользовательский опыт становится ощутимо лучше, интерфейс кажется более простым, а продукт в целом — более притягательным. А если пойти дальше и упаковать все принципы анимации в единую дизайн-систему, можно добиться правильного баланса качества, характера и доступности.
← Назад | Продолжение (Глава 4) →