Спроси эксперта: что нельзя анимировать на сайте?

На этот вопрос ответил Дмитрий Уткин.

Дмитрий Уткин

---

Технолог в SuperJob.

Получает от дизайнеров единицу смысла, а потом воплощает её как им надо, без переноса ошибок из макета. Кунг-фу постиг в Студии Лебедева и отточил в «Афиша Daily».

Консультирует и читает лекции.

---

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

Нельзя

• Не анимируй элементы, если они на проблемном макете.

«Скучный блок, анимация сделает его повеселее» — нет, так делать не надо. Сначала сверстай, пожалуйста, нормальный макет.

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

• Не анимируй элементы, если они часто появляются или выглядят навязчиво.

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

Можно, но с одним важным условием

• Анимируй, если между изменениями элемента есть связь или пространственное отношение.

«Сюда сворачивается окошко, отсюда же раскрывается» — это отношение. Значит, можно анимировать. Если не будет навязчивым.

Ещё пример: если потянуть вбок письмо в приложении Gmail или чат в Telegram, появятся скрытые кнопки. Анимация покажет, будто чат или письмо сдвинулись, а под ними оказались кнопки.

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

• Анимируй, если состояние интерактивного элемента меняется.

Пример — кнопка плавно меняет цвет при ховерении. Или «перетаскиваемая» карточка отбрасывает другую тень и слегка подкручивается — изменения состояния помогают понять, что что-то произошло. Анимируй, если это не будет навязчивым.

• Анимируй, если элемент может развлечь пользователя динамикой.

Ради шоу можно анимировать появление элементов. Но осторожно: заранее подумай, кто и на чём будет этот интерфейс или страницу показывать и смотреть. Анимировать мелкие элементы для презентации с телефона гендиректору в лифте расточительно и неразумно.

Анимировать можно всё, если это не будет навязчивым.

Главные принципы

• Не делай анимацию разнонаправленной.

В лекции «Интерфейсные анимации» Илья Бирман отлично прояснил, что важны синхронность и схожесть анимаций. Несогласованные анимации и одновременные движения элементов в разные стороны моментально утомляют и не приносят никакой пользы. Будто двое людей говорят на повышенных тонах одновременно — в итоге никто никого не в состоянии расслышать и понять.

• И никогда не делай анимацию навязчивой.

Например, эффект сворачивания окна «Джинн» в iOS долгий, сложный и потому крайне навязчивый. Или строка поиска по iPhone (если потянуть на экране с иконками приложений), которая появляется сверху вниз, а в три раза медленнее снизу вверх выдвигается клавиатура — это некрасиво.