Как добавить ui-анимацию в дизайн-систему: обогащаем движением uikit | Глава 3

О культуре командой работы дизайнеров и разработчиков объединенных целью сделать чувственный и функциональный дизайн интерфейса.
Иллюстрация Jack Daly: https://dribbble.com/shots/3474087-Curated-Living

← Назад | Продолжение (Глава 4) →

(Перед вами бесплатный курс от InVision Studio «Анимация интерфейсов». В курсе 4 главы. Если вы здесь впервые, то лучше начните сначала)

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

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

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

Принцип 1: Продумывать анимации с самого начала

При разработке динамичной интерфейсной анимации, пригодится как инженерное, так и дизайнерское мышление. У каждого типа мышления есть свои особенности (преимущества и ограничения), которые отлично дополняют друг друга. Как смешать два подхода и получить хороший результат? Это умеет и практикует Zova Fitness.

Zova Fitness  — это небольшой австралийский стартап. Их приложение подкупает отличным контентом и тщательно продуманным пользовательским опытом. За это ребята даже получили Apple Design Award.

Анимация — ключевая часть пользовательского опыта Zova Fitness. Директор по дизайну Дэвид Фамбергер немного рассказал нам о процессе проработки анимаций в компании. Он включает 4 важных шага:

  1. Первый шаг — заложить анимации на уровне лейаута. Команда Zova Fitness продумывает движение в интерфейсе с самого начала — еще на этапе проработки статичных экранов и лейаутов. 
  2. Второй шаг — наметить анимацию на временной шкале. Статичные экраны загружаются в инструмент для создания анимаций, чтобы проверить, работает ли концепция в сборке. Макет, который получается в результате этого шага, можно показать разработчикам или другим членам команды, чтобы быстро показать задумку по анимациям. 
  3. Третий шаг — прототип анимации. Дэвид садится рядом с разработчиком и собирает подробный прототип, со всеми экранами и анимациями. Этот прототип не пойдет в продукт: он нужен, чтобы выверить скорость и продолжительность анимаций и отточить все переходы. 
  4. Четвертый и последний шаг — сборка продукта. Когда прототип готов, разработчик добавляет все в продукт. К этому моменту все вопросы по дизайну уже должны быть решены. 

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

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

Профессиональная хитрость. Советы небольшой команде 

Вот несколько уроков, которые вынесла для себя команда Zova Fitness в процессе работы:

1. Продумывайте анимации на самых ранних этапах проекта

2. Собирайте макеты и прототипы, чтобы синхронизировать видение по проекту

3. Прорабатывайте детали на прототипах 

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

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

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

Команда дизайнеров Headspace использует интерфейсную анимацию, чтобы поддерживать пользователей в процессе работы. О процессе создания анимаций в компании нам рассказали Джон Бреннан, старший продуктовый дизайнер и Кристин Ча, продуктовый дизайнер: 

В Headspace мы рассматриваем анимацию в контексте четырех ключевых параметров (некоторые из них мы рассмотрели в Главе 2 этой книги): 

  • Поведение: что делает объект или где он появляется на экране;
  • Смягчение: с какой скоростью объект движется из точки А в точку Б; 
  • Продолжительность: как долго длится анимация 
  • Последовательность: порядок осуществления движений

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

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

Профессиональная хитрость — Проработать доступность на старте 

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

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

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

Задача команда Headspace — создать спокойную безмятежную среду, в которой каждое движение и взаимодействие настраивает на спокойствие и медитацию. 

Как правильно выстроить путешествие пользователя 

Есть несколько практических хитростей, которые помогают команде Headspace создавать ту самую спокойную среду в приложении:

  • Все детали дизайна (в том числе анимации) должны поддерживать то настроение и среду, которые вы создаете в приложении
  • Определитесь с набором инструментов для создания анимаций — и расскажите о нем команде
  • Закладывайте анимации на старте 

Принцип 3: Грамотно масштабировать анимации

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

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

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

Директор по UX команды Material design Ричард Фулчер, и старший UI дизайнер Эрик Генри рассказали, что в дизайн-системе Material есть три ключевых принципа работы с анимациями: движение должно быть информативным, прицельным и экспрессивным. 

Согласно дизайн-системе 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) →

Курс «Анимация интерфейсов»

Посты в категории Анимация интерфейсов

Будущее моушн-дизайна в интерфейсах | Глава 4

Ольга Жолудова

4 июля 2020

Посты в категории Анимация интерфейсов

Анимация в интерфейсах: 7 фундаметальных принципов UX-анимации | Глава 2

Ольга Жолудова

4 июля 2020

Посты в категории Анимация интерфейсов

Как анимация влияет на восприятие: применяем ui-анимации для улучшения интерфейсов | Глава 1

Ольга Жолудова

4 июля 2020

18 000+ участников – здесь ваши друзья, напарники и новые идеи

Присоединиться

Продуктовые дизайнеры
Продакты
UX/UI-дизайнеры
UX-аналитики
Веб-дизайнеры
Менеджеры проектов
Продуктовые аналитики
Бренд-менеджеры
Digital-стратеги
Арт-директора
Аналитики данных
UX-исследователи
Графические дизайнеры
Веб-разработчики
Дизайнеры интерфейсов