UXPUB 🇺🇦 Дизайн-спільнота

Cover image for 5 шагов по внедрению моушен-дизайна в вашу дизайн-систему
Редакція
Редакція

Опубліковано

5 шагов по внедрению моушен-дизайна в вашу дизайн-систему

Дизайн-сообщество стало строже относиться к документированию и систематизации компонентов, как в дизайне, так и в коде, но зачастую про моушен-дизайн забывают. Тем не менее, требования использовать движение в дизайне полностью соответствуют принципам дизайн-системы: повторяемость, экономия времени и UX последовательность.

1

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

  1. Восторг пользователей: Движение может превратить стандартный опыт в запоминающееся взаимодействие.
  2. Обучение пользователей: Движение может предоставлять контекст и информацию, не требуя действий, таких как дополнительные клики.
  3. Концентрация внимания пользователей: Движение может привлечь внимание и выделить важный фрагмент данных или ключевой элемент интерфейса.

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

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

Шаг 1 – Начните с аудита

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

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

Когда вы начинаете аудит, обратите внимание на следующие паттерны:

  • Кривые синхронизации
  • Типы использования (фокус, информирование)
  • Паттерны хореографии (количество объектов в движении)
  • Паттерны эффектов (масштаб, непрозрачность и т.д.)
  • Флоу в которых отсутствует движение
  • Флоу, в которых движение слишком тяжелое

Аудит может быть таким простым. Например, в виде таблицы паттернов:

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

Шаг 2 – Создание руководящих принципов

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

Чтобы найти правильный баланс, рассмотрите принципы, которые контекстуально направляют улучшения UX: где нужны более сильные возможности и фидбек действий? Где возникают проблемы при обучении новых пользователей? Или где пользователи дезориентированы в нашей навигации?

Вот некоторые из наиболее эффективных принципов движения, которые команды масштабирования использовали для реализации движения в своих системах:

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

3

IBM считает, что движение может быть описано как выразительное или продуктивное. Это в основном относится к состояниям открытия / закрытия (например, переключатели или модальные окна), но они могут быть использованы в других случаях, когда быстрое движение более надежно, чем причудливое выразительное движение.

4

Salesforce следует аналогичному паттерну, создавая блок только для «Личности и брендинга». Вместо того, чтобы интегрировать индивидуальность бренда во все анимации, они позволяют своему брендовому моушен-дизайну быть контекстным.

5

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

Шаг 3 - Разработка строительных блоков

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

Эти блоки состоят из продолжительности, плавности, эффектов объекта (начальное / конечное состояния) и элегантной хореографии (анимация нескольких объектов).

6

Один из подходов к систематизации эффектов – сопоставление их с вашими принципами. Эта таблица показывает соотношение принципа, компонента, эффекта, продолжительности и плавности.

Продолжительность

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

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

7

Подобно тому, как вы назначаете типографику с помощью тегов h1, h2, h3, h4, h5, вы можете назначать теги следующим масштабам: t1, t2, t3, t4, t5 (t значит продолжительность). Вы также можете выбрать описательные имена, такие как: «Очень быстро», «Быстро», «Нормально», «Медленно», «Очень медленно» и т. д. Временные шкалы могут включать как продолжительность, так и плавность. Однако чаще всего продолжительность и плавность движения зависят от объекта, его размера и пройденного расстояния.

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

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

  • На основе объектов: кнопки / небольшие компоненты = 100MS - 200MS, переходы страниц = 500MS - 700MS
  • Размер и расстояние: Движение составляет 100MS на каждые 10% движения области просмотра
  • Сложность анимации: переходы, где последовательность из 2-5 объектов анимации = 300-400MS; 6-10 объектов анимации = 500-700MS

Плавность (Easing)

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

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

Постоянные вибрации движения могут быть такими же простыми, как документирование 2–3 типов плавности кривых Безье: default-ease (custom), ease-in, and ease-out

Называя тип плавности, вы можете либо назвать его по продолжительности, например, «T1-subtle-spring», либо интегрировать плавность в шкалу времени: «t1 uses cubic-ease», «t2 uses linear ease».

Другая стратегия состоит в том, чтобы исходить из компонентов или их состояний «in / out». Например, вы можете использовать Productive Easing (продуктивная плавность) для функциональных, быстрых, линейных движений и использовать Expressive Easing (экспрессивная плавность) для восхитительных движений, управляемых эмоциями.

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

Эффекты

Эффекты являются основными строительными блоками вашей системы. Они отличают компонент от статичного состояния. Когда эффекты применяются к компонентам, они становятся интерактивной системой с начальным и конечным состоянием.

Чтобы систематизировать эти эффекты, вы можете использовать имена, которое описывают их в связках или которые описывают их как состояния при появлении и исчезновении с экрана.

11

Когда вы документируете эти эффекты, используйте описательные имена, например, «Card-Fade-In» или «Card-Grow», или используйте звукоподражание. При использовании звукоподражания выразительный переход страницы может называться pop, swoosh или boom (ознакомьтесь с Keynote slide transitions или панелью эффектов After Effect).

Хореография

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

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

  • Простое и сложное: небольшое количество объектов в движении может быть основано на контейнере, что означает, что блоки содержимого внутри контейнера перемещаются в зависимости от него.
  • Основывайтесь на принципах: фокусируйте пользователей на объекте, чтобы показать контекст навигации или показать пространственный контекст, например, где найти кнопку.
  • Повествование: на разных этапах пользовательского путешествия усложните хореографию: новый пользователь видит 2-3 объекта в движении, а опытный пользователь видит 4-8 объектов.
  • Доступность: предложите настройки для уменьшения интенсивности движения или сохранения движения в контейнерах, а не в элементах.

Шаг 4 - Подготовка спецификаций перевода

Дизайнеры должны переводить файлы в соответствии с рабочим кодом. Самый простой способ документировать анимацию – это отобразить начальное и конечное состояния. Это предпосылка формирования ключевых фреймов – для интерполяции изменений между состоянием A и состоянием B.

Раскадровка, скетч или видео в формате MP4 часто дают разработчикам все, что нужно для создания прототипа. Но для масштабирования моушен-систем очень важно добавить перевод.

Существует два эффективных метода документирования концепций движения: диаграммы и текст.

Метод 1: Характеристики диаграммы

Вы обычно можете открыть панель настроек любимого приложения и сделать скриншот или вручную документировать график (так же, как диаграмму Ганта).

Графики помогают четко обозначить хореографию и продолжительность.

13

Диаграмма выше показывает длительность (мс) и перекрытие последовательностей анимации, а также:

  • Цвет: объект (цвет координирует эффект с временной шкалой)
  • Метки: тип преобразования (масштаб, перемещение, поворот и т. д.), продолжительность (мс), имя объекта
  • Формы (начало / конец): тип плавности

Метод 2: Характеристики текста

Этот второй подход похож на код, но дизайнеры не должны бояться говорить слово «код». Это может быть так же просто, как обучение:

  • Непрозрачность: определяется в процентах: 0% - 100%
  • Масштаб: определяется в единицах или процентах: 1px, 2000px, 0 - 100%
  • Высота подъема: ось Z: 0, 1, 2 и т.д.
  • Движение: x и y координаты (также может быть % высоты и ширины экрана)
  • Цвет: HEX значения

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

В After Effects есть плагин Inspector Spacetime, который переводит свойства ключевого фрейма в текстовый файл.

14

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

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

Начните использовать движение

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

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


Перевод статьи Caleb Barclay

Найновіші коментарі (0)