Что разберём
- Переход объясняет, что изменилосьдо и после
- Длительность: мелкое быстрее, крупное дольшепроигрыватель
- Плавное начало и плавный конецпроигрыватель
- Что не анимироватьпоиск
- Как описать анимацию для разработки
- Какую кривую взятьтренажёр
1Переход объясняет, что изменилось
Изменение без перехода легко пропустить: число в углу стало другим, а взгляд был на кнопке.
Человек нажимает «В корзину» и смотрит на кнопку. Счётчик корзины — в шапке, в другом конце экрана.
Без перехода число меняется молча. С переходом старое число уходит вверх, новое приходит снизу, а внизу появляется плашка «Добавлено в корзину».
Нажмите «Проиграть» под каждым экраном и сравните.
Без перехода
С переходом
Подсказка или украшение
Переход подсказывает: что изменилось, откуда появился элемент, куда он делся.
Украшение ничего не объясняет, оно только двигается.
| Переход объясняет | Украшение |
|---|---|
| Шторка выезжает снизу: видно, откуда она взялась и куда её убрать | Логотип крутится при каждом открытии приложения |
| Удалённый товар уезжает, список смыкается: видно, что пропало | Карточки товаров подпрыгивают при прокрутке |
| Число в счётчике сменяется с движением: видно, что оно новое | Кнопка «Оформить» переливается, чтобы на неё нажали |
2Длительность: мелкое быстрее, крупное дольше
Чем больше элемент и чем дальше он едет, тем больше времени нужно глазу, чтобы проследить путь.
Ручка переключателя проезжает пару сантиметров, и ей хватает десятой доли секунды.
Шторка фильтров выезжает на полэкрана — за то же время она только мелькнёт.
Выберите длительность и сравните оба элемента.
Переключатель: едет на ширину ручки
Шторка: выезжает на полэкрана
Точной формулы нет, но есть ориентиры. Их дают Nielsen Norman Group и руководство Material Design:
| Что меняется | Пример | Длительность |
|---|---|---|
| Мелкое изменение на месте | Переключатель, флажок, число в счётчике | около 100 мс |
| Небольшой элемент появляется или уходит | Подсказка, меню, плашка «Добавлено» | 150–250 мс |
| Крупный элемент | Шторка, диалог | 200–300 мс |
| Смена всего экрана | Переход к оформлению заказа | 300–400 мс |
Уход короче появления
Появившийся элемент человек рассматривает, а на уходящий уже не смотрит. Плашка из примера выше появляется за 250 мс, а уходит за 200.
3Плавное начало и плавный конец
Кривая говорит, как меняется скорость по дороге. В жизни ничто не трогается и не останавливается мгновенно.
Длительность отвечает на вопрос «сколько», кривая — «как».
Вот четыре основные кривые. Точки проходят дорожку за одно и то же время.
| Кривая | Как движется | Для чего |
|---|---|---|
| Плавный конец ease-out | Сразу срывается с места и мягко тормозит | Появление: элемент сразу откликается и аккуратно встаёт на место |
| Плавное начало ease-in | Медленно трогается и разгоняется к концу | Уход с экрана: резкого конца не видно, элемент уже за краем |
| Разгон и торможение ease-in-out | Трогается, разгоняется, тормозит | Перемещение внутри экрана, когда видны и старт, и финиш |
| Равномерно linear | Одна скорость от начала до конца | То, что движется без остановки: вращение индикатора загрузки, полоса прогресса |
Почему не наоборот
Это видно на шторке. Слева она появляется с плавным концом, справа с плавным началом. Длительность одна, 300 мс.
Плавный конец, ease-out
Плавное начало, ease-in
В CSS эти кривые так и называются: ease-out, ease-in, ease-in-out, linear. В прототипе Figma — Ease out, Ease in, Ease in and out, Linear. Кривая по умолчанию в CSS — ease: быстрый старт и долгое торможение.
4Что не анимировать
То, что человек делает по сто раз в день, должно происходить сразу.
Переход в 300 мс незаметен, если увидеть его один раз.
Если переключать вкладки сорок раз за вечер, это уже двенадцать секунд ожидания и ощущение, что приложение тормозит.
Второе, что не нужно анимировать, — движение без изменения: оно ничего не объясняет и отвлекает от дела.
Найдите лишние анимации
Ниже анимации, которые команда магазина собрала в одном списке. Пять из них мешают.
Нажимайте на строки, которые убрали бы или переделали: в разборе будет, что с ними не так.
- Заставка с логотипом
- Шторка фильтров выезжает снизу
- Вкладки «Кофе / Чай / Посуда» перелистываются вбок
- Удалённый товар уезжает влево, список смыкается
- Карточки каталога въезжают по одной
- Отметка «✓ Оплачен» проявляется
- Кнопка «Оформить» мягко пульсирует
- Ручка переключателя «Автоповтор»
- Число в счётчике корзины сменяется
- Меню профиля раскрывается
- Заставка с логотипом, 2 секунды при каждом запуске.Убрать. Каждое открытие начинается с ожидания, хотя человек пришёл за кофе. Если приложению нужно время на загрузку, заставка держится ровно столько, сколько идёт загрузка, а не лишние секунды.
- Шторка фильтров выезжает снизу, 250 мс.Оставить. Шторку открывают не каждую минуту, а движение показывает, откуда она взялась и куда её убрать. Длительность подходит крупному элементу.
- Вкладки перелистываются вбок, 400 мс.Переделать. Вкладки переключают постоянно, и каждый раз приходится ждать. Содержимое вкладки показывайте сразу, в крайнем случае с короткой сменой прозрачности. Двигаться может только полоска под выбранной вкладкой.
- Удалённый товар уезжает влево, список смыкается, 250 мс.Оставить. Без движения строка просто пропадёт, и человек не сразу поймёт, что именно удалилось. Движение это показывает.
- Карточки каталога въезжают по одной.Убрать. Двенадцать карточек по очереди — больше секунды до того, как видна вся витрина, и так при каждом открытии раздела. Это украшение в самом частом месте приложения.
- Отметка «Оплачен» проявляется, 150 мс.Оставить. Статус сменился не по нажатию, а сам, и короткое проявление помогает это заметить.
- Кнопка «Оформить» всё время пульсирует.Убрать. Ничего не изменилось, а кнопка двигается: это отвлекает от чтения и ничего не объясняет. Бесконечное движение к тому же мешает людям, которым трудно сосредоточиться.
- Ручка переключателя, 100 мс.Оставить. Переключают часто, но 100 мс не заставляют ждать, а движение ручки показывает новое положение.
- Число в счётчике корзины сменяется, 200 мс.Оставить. Это тот самый переход из начала урока: без него добавление в корзину легко пропустить.
- Меню профиля раскрывается, 600 мс.Сократить. Меню — небольшой элемент, ему хватает 150–200 мс. 600 мс — втрое дольше, и меню открывают часто.
Все пять найдены. Лишними оказались украшения и медленные переходы там, где человек бывает чаще всего. Полезные переходы остались, и все они короче трети секунды.
5Как описать анимацию для разработки
Разработке нужна не гифка, а ответы на пять вопросов: что, откуда, куда, сколько и по какой кривой.
Прототип показывает, как это выглядит, но числа из него приходится угадывать.
Опишите каждую анимацию таблицей. Вот плашка «Добавлено в корзину» из начала урока:
| Вопрос | Плашка «Добавлено в корзину» |
|---|---|
| Когда | Товар добавлен в корзину после нажатия «В корзину» |
| Что | Плашка с текстом «Добавлено в корзину» |
| Откуда | Из-за нижнего края экрана, прозрачная |
| Куда | На 16 px выше нижнего края, непрозрачная |
| Сколько | 250 мс |
| Кривая | Плавный конец, ease-out |
| Уход | Через 3 секунды: вниз за край, 200 мс, плавное начало, ease-in |
В Figma длительность и кривая задаются в панели прототипа у каждого перехода, длительность — в миллисекундах. Перенесите эти числа в описание, а не отправляйте ссылку со словами «как в прототипе».
6Какую кривую взять
Сначала решите, что делает элемент: появляется, уходит, едет по экрану или крутится. Кривая следует из ответа.
Шторка фильтров выезжает снизу.
Плавный конецШторка появляется: пусть сразу откликнется на нажатие и мягко встанет на место.
Плашка «Добавлено в корзину» уезжает вниз и исчезает.
Плавное началоПлашка уходит насовсем. Разгон к концу выглядит естественно, а резкую остановку за краем никто не увидит.
Полоска под выбранной вкладкой переезжает с «Кофе» на «Чай».
Разгон и торможениеПолоска едет внутри экрана, и видны оба конца пути: и где она тронулась, и где встала.
Индикатор загрузки крутится, пока приходит список заказов.
РавномерноВращение без остановки. Разгон и торможение на каждом обороте выглядели бы как рывки.
Содержимое вкладок «Кофе» и «Чай», которые переключают десятки раз за визит.
Без анимацииЧастое действие должно происходить сразу. Движение здесь — только ожидание.
Подсказка «Можно оплатить частями» появляется над кнопкой.
Плавный конецПоявление. Короткое, около 150 мс: подсказка маленькая.
Диалог «Удалить товар?» закрывается после нажатия «Отмена».
Плавное началоДиалог уходит. И уход короче появления: человек уже решил и ждать не хочет.
Полоса отправки фотографии для отзыва заполняется слева направо.
РавномерноПолоса показывает, сколько уже сделано. Разгон и торможение исказили бы эту долю.
7Задание
Возьмите три перехода своего экрана и соберите их с осмысленными длительностями. Напишите по строке на каждый: что он объясняет.
Часть 1 · Найти переходы, 15 минут
- Выберите экран или короткий сценарий, где что-то появляется, уходит или меняется: корзина, фильтры, форма.
- Выпишите все изменения на этом экране, даже те, что сейчас происходят без движения.
- Про каждое спросите, что человек должен понять. Отметьте, как часто это изменение случается.
- Выберите три, где движение объясняет больше всего.
ЭКРАН: ______________________ Дата: __.__.____ ПЕРЕХОД 1: ______________________ он показывает, что ______________________________ когда: ______________ как часто: редко / часто / постоянно откуда: ______________ куда: ______________ длительность: ___ мс кривая: плавный конец / плавное начало / разгон и торможение / равномерно уход: ___ мс, кривая: ______________ ПЕРЕХОД 2: ______________________ он показывает, что ______________________________ когда: ______________ как часто: редко / часто / постоянно откуда: ______________ куда: ______________ длительность: ___ мс кривая: ______________ уход: ___ мс, кривая: ______________ ПЕРЕХОД 3: ______________________ он показывает, что ______________________________ когда: ______________ как часто: редко / часто / постоянно откуда: ______________ куда: ______________ длительность: ___ мс кривая: ______________ уход: ___ мс, кривая: ______________ УБРАЛ (украшения и частые действия): ______________________
Часть 2 · Собрать в прототипе, 40 минут
- Соберите три перехода в прототипе: в Figma через Smart animate или в Jitter.
- Подберите длительность по таблице из урока: мелкое — около 100 мс, крупное — до 300 мс.
- Проверьте кривые: появление — плавный конец, уход — плавное начало, перемещение — разгон и торможение.
- Посмотрите на телефоне, а не только в редакторе. Если ждёте конца анимации — сократите. Если не успели понять, что произошло, — удлините.
Часть 3 · Описать, 15 минут
- Заполните шаблон по каждому переходу.
- Перечитайте строки «он показывает, что …». Если какая-то звучит как «чтобы было красиво», уберите этот переход.
- Отдайте описание разработчику и спросите, всё ли понятно без прототипа.
Что должно получиться
- Прототип с тремя переходами.
- Заполненный шаблон по каждому.
- Список убранного: украшения и переходы в частых действиях.
План работы: 15 минут на поиск переходов, 40 на прототип, 15 на описание. Всего — чуть больше часа.
Частые сложности
- «В редакторе уже стоит длительность по умолчанию». Число по умолчанию — не решение. Проверьте его по размеру изменения: переключателю и шторке оно не может подойти одновременно.
- «Без анимации экран выглядит мёртвым». Живым его делает отклик на действие: нажал — что-то ответило. Движение ради движения этого не даёт.
- «Разработка скажет, что это долго делать». Переход по прозрачности или сдвигу с длительностью и кривой — одна строка кода. Долго делать то, что описано словами «как в прототипе».
- «Не знаю, какая длительность правильная». Начните с таблицы из урока и смотрите на телефоне. Правильная та, при которой успеваешь понять, что произошло, и не успеваешь заскучать.
8Чек-лист и ошибки
Переход готов, если
- Про него можно закончить фразу «он показывает, что …»
- Длительность соответствует размеру: мелкое быстрее, крупное дольше
- Переход длиннее полусекунды — только с причиной
- Появление с плавным концом, уход с плавным началом
- Уход короче появления
- Частые действия происходят сразу
- Записаны когда, что, откуда, куда, сколько и кривая
- Переход посмотрен на телефоне, а не только в редакторе
Что мешает
- Движение ради живости. Кнопка пульсирует, логотип крутится, а объяснять нечего.
- Одна длительность на всё. Переключатель тянется, шторка мелькает.
- Равномерное появление. Элемент едет как по рельсам и встаёт с ударом.
- Долгий переход в частом действии. Человек ждёт анимацию каждый раз.
- «Смотрите в прототипе». Разработка угадывает числа и угадывает не те.
9Три ступени темы
В этом уроке учимся добавлять переходы и подбирать им длительность. На следующих ступенях — связывать движением состояния, работать с общим набором параметров и настройкой «уменьшить движение», а потом описывать правила движения для всей команды.
| Ступень | Что нужно уметь | Как проверить результат |
|---|---|---|
| Junior — этот урок | Отличать переход, который объясняет, от украшения; подбирать длительность под размер; выбирать кривую; не анимировать частое; описывать анимацию для разработки | Для каждого перехода можно назвать, что он помогает понять, переходов «для красоты» не осталось |
| Middle | Показывать движением, откуда появилось и куда исчезло; брать длительности и кривые из общего набора; учитывать «уменьшить движение»; помнить про медленную сеть и слабые телефоны | При включённой системной настройке интерфейс остаётся полностью работающим и понятным без движения |
| Senior | Описать правила движения продукта: что анимируем и зачем, токены длительностей и кривых, что при «уменьшить движение», как проверяем производительность | Спор об анимации в команде закрыт ссылкой на правило |
Что почитать дальше
- Executing UX Animations: Duration and Motion CharacteristicsСколько миллисекунд давать переключателю и модальному окну, с какой длительности анимация начинает мешать, почему на вход берут плавный конец, а на выход плавное начало, и как описать анимацию для разработки. Статья 2020 года.
- The Role of Animation and Motion in UXЧетыре задачи движения — отклик на действие, смена состояния, направление в навигации, подсказка жеста — и где движение уже перехватывает внимание. Пример со счётчиком корзины, который без анимации не замечают, тот же, что в начале урока. Статья 2020 года.
- SpeedДлительности на примерах компонентов — переключатель, боковая панель, карточка, — почему уход короче появления и какие кривые брать на вход и на выход. Архивная вторая версия Material.
- Prototype easing and spring animationsСемь готовых кривых прототипа Figma и когда какая уместна, своя кривая с числами для CSS cubic-bezier и четыре пружины с настройками жёсткости, затухания и массы. Свою кривую не сохранить: числа переносят вручную.
- JitterСобрать переходы из задания с точными длительностями и кривыми и скопировать кривую для разработки в CSS. Результат — видео, GIF или Lottie, а не кликабельный прототип; бесплатно — три файла и выгрузка 720p с водяным знаком.