Сообщество дизайнеров начало строже относиться к документированию и систематизации компонентов как в дизайне, так и в коде. Однако анимация часто упускается из виду. Тем не менее, требование использовать движение в дизайне полностью соответствуют принципам дизайн-системы: повторяемость, экономия времени и UX-согласованность.
Исключая анимации из своей дизайн-системы, вы потенциально ослабляете ее назначение. Если у дизайнеров есть необходимые строительные блоки для всего, кроме анимации, у них не будет иного выбора, кроме как создавать специальные фрагменты, которые могут не соответствовать правилам и руководству по стилю, лежащим в основе дизайн-системы. Кроме того, вы лишаете свою команду, продукт и, в конечном итоге, своих пользователей преимуществ более глубокого измерения дизайна. Анимация в дизайне не просто выглядит круто, оно напрямую влияет на пользовательский опыт следующими способами:
- Восхищает пользователей: движение может превратить опыт в незабываемое взаимодействие.
- Обучает пользователей: движение может предоставлять контекст и информацию, не требуя таких действий, как дополнительные клики.
- Направляет внимание пользователей: движение может привлечь внимание и выделить важный фрагмент данных или ключевой элемент интерфейса.
В приведенном выше примере анимация появления (слева) информирует пользователя о направлении навигации, то есть скролле влево и вправо. Фокусная анимация (в центре) привлекает внимание к новому контенту и обучает пользователей эфемерному характеру контента. Анимация восторга (справа) усиливает игривость бренда с помощью зацикленной анимации персонажа.
Преимущества анимации слишком убедительны, чтобы их игнорировать. Чтобы добавить движение в вашу дизайн-систему, выполните следующие действия:
Шаг 1 – Начните с аудита
Прежде чем создавать что-то новое, взгляните на то, что уже существует. Подобно тому, как вы проводите аудит паттернов интерфейса, вы можете сделать то же самое для паттернов движения.
Это может занять много времени, но вы увидите, где вы неоднократно использовали один и тот же элемент, который должен быть добавлен в дизайн-систему. В то время, как единожды использовавшиеся элементы, вероятно, не предоставляют универсальных решений.
Когда вы начинаете аудит, обратите внимание на следующие паттерны:
- Временные кривые
- Типы использования (экспресс, фокус, информирование)
- Паттерны хореографии (количество объектов в движении)
- Паттерны эффектов (масштаб, непрозрачность и т.д.)
- Юзерфлоу, где движение отсутствует
- Юзерфлоу, где движение слишком тяжелое
Аудит может быть представлен в виде таблицы паттернов:
Используйте аналогичную стратегию с анимацией, как, если бы вы проводили аудит, чтобы уменьшить количество или размеры используемых шрифтов. Сосредоточив внимание на согласованности всей системы анимации, вы можете создать удобную и предсказуемую для пользователя среду.
Шаг 2 – Формирование руководящих принципов
Неоднозначные принципы использования анимации, могут серьезно угрожать целостности продукта. И наоборот, чрезмерная нормативность может подавлять инновации и не допустить появления новых паттернов.
Чтобы найти правильный баланс, рассмотрите принципы, которые контекстуально направляют улучшения UX. Где нам нужны более сильные аффордансы и обратная связь? Где возникают проблемы во время обучения новых пользователей? Где пользователи дезориентированы в нашей навигации?
Ниже приведены некоторые из наиболее эффективных принципов анимации, которые команды масштабирования использовали для реализации движения в своих системах:
В попытке стандартизации Material Design определил три принципа анимации: информативный (informative), сфокусированный (focused) и выразительный (expressive). Затем команда определила четыре варианта использования для каждого из трех принципов: иерархия, обратная связь, статус и анимация персонажа.
IBM предполагает, что движение может быть описано, как выразительное или продуктивное. Эти два варианта в основном относятся к состояниям открытия / закрытия (например, переключатели или модальные окна), но могут использоваться в других случаях, когда быстрое движение более надежно, чем причудливое выразительное.
Источник: IBM
Salesforce следует схожему паттерну, создавая его только для «Индивидуальности и брендинга». Вместо того, чтобы интегрировать индивидуальность бренда во время и плавность каждой анимации, они позволяют движению быть контекстным.
Источник: Salesforce Lightning
Из этих примеров мы видим, что принципы в конечном итоге подпадают под два подхода: движение для удовольствия и движение для юзабилити. Команды должны найти уровень детализации, который не является слишком узким или слишком широким. Правильные руководящие принципы позволят командам быть креативными и последовательными.
Шаг 3 – Разработка строительных блоков
Основополагающий состав движения связан с отношениями между объектом, временем и эффектом. Определив принципы, команды могут начать процесс определения библиотеки строительных блоков движения.
Эти блоки состоят из продолжительности, плавности, эффектов объекта (начальное / конечное состояния) и элегантного танца хореографии (анимация нескольких объектов).
Одним из подходов к систематизации эффектов является сопоставление их с вашими принципами. В этом табличном представлении показана взаимосвязь принципа, компонента, эффекта, продолжительности и плавности.
Продолжительность (временные шкалы)
Концепция шкал (или ступеней) в дизайн-системах допускает разнообразие выбора в определенных пределах. Мы видим это в типографике, сетках и даже цветах. Эти шкалы позволяют принимать решения на основе дизайна быстрее и последовательнее.
Вы можете использовать аналогичный фреймворк масштабирования для управления вашей библиотекой движения.
Подобно тому, как вы определяете типографику с помощью тегов h1, h2, h3, h4, h5, вы можете назначать теги следующим масштабам: t1, t2, t3, t4, t5 (t значит тайминг). Вы также можете выбрать описательные имена, такие как: «Очень быстро», «Быстро», «Нормально», «Медленно», «Очень медленно» и т. д. Шкалы времени могут включать как продолжительность, так и плавность. Однако чаще всего продолжительность и плавность зависят от объекта, его размера и пройденного расстояния.
Динамическая продолжительность описывает соотношение размера объекта и расстояния под воздействием силы тяжести, по отношению ко времени. Например, когда вы определяете шкалу движения, обратите внимание, как быстрые движения лучше всего подходят для коротких расстояний и небольших объектов.
Попробуйте создать формулу для динамической продолжительности, которая включает компонент, пройденное расстояние, время, плавность или даже сложность анимации. Рассмотрим эти разные подходы:
- На основе объектов: кнопки / небольшие компоненты = 100 мс - 200 мс, переходы страниц = 500 мс - 700 мс
- Размер и расстояние: Движение составляет 100 мс на каждые 10% движения области просмотра.
- Сложность анимации: переходы, где последовательность из 2-5 объектов анимации = 300-400 мс; где анимация 6-10 объектов = 500-700 мс
Плавность
Плавность оживляет движение, обеспечивая естественный отдых, а также настраиваемое ускорение и замедление. Она может углубить индивидуальность вашего бренда до такой степени, что некоторые команды даже включают «атмосферу бренда» в качестве руководящего принципа.
Существует множество способов создать «атмосферу» в движении, манипулируя средствами управления плавности и продолжительностью, от игривых пружинящих до мягких тонких движений. Например, в инструменте выставления счетов для юристов вы захотите сбалансированных и быстрых движений. А для приложения социальных сетей вам могут понадобиться упругие движения.
Постоянные вибрации движения могут быть такими же простыми, как и документирование 2–3 типов кривых Безье: default-ease (custom), ease-in и ease-out.
Указывая тип плавности, вы можете либо назвать его по продолжительности, например, «T1-subtle-spring», либо интегрировать плавность в шкалу времени: «t1 uses cubic-ease», «t2 uses linear ease».
Другая стратегия состоит в том, чтобы исходить из компонентов или их состояний «in / out». Например, вы можете использовать Productive Easing для функциональных, быстрых, линейных движений, и использовать Expressive Easing для восхитительных движений, управляемых эмоциями.
Часто бывает, что выразительный тайминг наиболее целесообразен для «animate-in», а продуктивный для «animate-out». Модальные всплывающие окна, тумблеры, карты и переходы часто используют как экспрессивный, так и продуктивный тайминг.
Эффекты
Эффекты являются основными строительными блоками вашей системы. Они отличают компонент от статичности. Когда эффекты применяются к компонентам, они становятся интерактивной системой с начальным и конечным состоянием.
Чтобы систематизировать эти эффекты, вы можете использовать соглашение об именах, которое описывает их в пакетах, или соглашение, которое описывает их, как состояния «animate-in» и «animate-out».
Источник: Salesforce Lightning
Когда вы документируете эти эффекты, используйте описательные имена, такие как «Card-Fade-In» или «Card-Grow», или используйте звукоподражания. При использовании звукоподражания выразительный переход страницы может называться pop, swoosh или boom (ознакомьтесь с панелью эффектов After Effect для идей наименования).
Хореография
Хореография – это когда несколько объектов одновременно находятся в движении во время перехода. Хореография может сфокусировать пользователя во время переходного состояния, обеспечить пространственный контекст или придать индивидуальность и восторг.
Вот несколько подходов к систематизации этих паттернов, но вы должны найти тот, что лучше всего подойдет для вашего продукта:
- Сложный и простой: небольшое количество объектов в движении может быть основано на контейнере. Это означает, что блоки контента внутри контейнера перемещаются в зависимости от контейнера.
- Основанный на принципах: фокусируйте пользователей на объекте, чтобы показать контекст навигации или показать пространственный контекст. Например, где найти кнопку.
- Повествование: на разных этапах пользовательского пути усложните хореографию: новый пользователь видит 2-3 объекта в движении, а опытный пользователь видит 4-8 объектов.
- Доступность: Предложите настройки для уменьшения интенсивности движения или сохранения движения в контейнерах вместо элементов.
Шаг 4 - Подготовка спецификаций перевода
В целях адаптации разработчикам необходимо перевести файлы презентаций в соответствии с рабочим кодом. Самый простой способ документировать движение – это отобразить начальное и конечное состояния. Это предпосылка формирования ключевых фреймов – для интерполяции изменений между состоянием A и состоянием B.
Раскадровка, скетч или видео в формате MP4 часто дают разработчикам все необходимое для создания прототипа. Но для масштабирования систем движения важно добавить перевод.
Существует два эффективных метода документирования концепций движения: диаграммы и текст.
Метод 1: Диаграммы
Используя любимое программное обеспечение, вы можете открыть панель настроек и сделать скриншот или вручную задокументировать диаграмму (так же, как диаграмму Ганта).
Графики помогают четко описать хореографию и продолжительность.
Диаграмма выше показывает длительность (мс) и перекрытие последовательностей анимации, а также:
- Цвет: объект (цвет координирует эффект с временной шкалой)
- Метки: тип преобразования (масштаб, перемещение, поворот и т. д.), продолжительность (мс), имя объекта
- Формы (начало / конец): тип плавности
Метод 2: Текст
Этот второй подход похож на код, но дизайнеры не должны бояться говорить слово «код». Это может быть так же просто, как обучение:
- Непрозрачность: определяется в процентах: 0% - 100%.
- Масштаб: определяется в единицах или процентах: 1px, 2000px, 0 - 100%.
- Высота: ось Z: 0, 1, 2 и т. д.
- Перемещение: координаты x и y (также может быть % от ширины и высоты экрана)
- Цвет: HEX значения
Преимущество этого подхода заключается в том, что текст легко редактируется, и эти точки данных легче переводить в рабочий код.
В After Effects есть плагин Inspector Spacetime, который переводит свойства ключевого фрейма в текстовый файл.
Для продвинутых концепций движения, таких как физика, акселерометры, системы частиц или 3D модели, требуется ручной процесс, чтобы найти перевод 1: 1. Дискуссия, чтобы понять параметры кода, даст правильную стратегию проектирования.
Совет: Создание библиотеки шаблонов систем движения чрезвычайно ценно для согласованности и эффективности (кривые плавности, длительности, компоненты).
Начните использовать движение
На первый взгляд, движение в дизайне может показаться слишком сложным для разбивки на строительные блоки, соответствующие дизайн-системе. Но с помощью этих методов мы можем начать устранять паралич движения и создавать системы, которые обеспечивают более быстрые и инновационные способы разработки продукта.
Внедрение движения в наши дизайн-системы означает лучшие кодовые базы, согласованность UX на всей платформе и больше радости для ваших пользователей.
Благодарность: Эта статья написана на основе материалов Alla Kholmatova, Gleb Kuznetsov, Zhenya Rynzhuk, Aristide Benoist и Issara Willenskomer
Перевод статьи designsystems.com
Найновіші коментарі (0)