0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#Мнения</a></p>
1
<p><a>#Мнения</a></p>
2
<ul><li>12 май 2022</li>
2
<ul><li>12 май 2022</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><h2>Спроси эксперта: что нельзя анимировать на сайте?</h2>
4
</ul><h2>Спроси эксперта: что нельзя анимировать на сайте?</h2>
5
<p>Разработчик Дмитрий Уткин о главных правилах анимации в интерфейсах: не навреди и не утоми.</p>
5
<p>Разработчик Дмитрий Уткин о главных правилах анимации в интерфейсах: не навреди и не утоми.</p>
6
<p>Иллюстрация: Dana Moskvina / Skillbox Media</p>
6
<p>Иллюстрация: Dana Moskvina / Skillbox Media</p>
7
<p><strong>Вопрос читателя</strong></p>
7
<p><strong>Вопрос читателя</strong></p>
8
<p>Какие элементы на сайте не стоит анимировать?</p>
8
<p>Какие элементы на сайте не стоит анимировать?</p>
9
<p><strong>Алексей,</strong><strong></strong>Белград</p>
9
<p><strong>Алексей,</strong><strong></strong>Белград</p>
10
<p>На этот вопрос ответил Дмитрий Уткин.</p>
10
<p>На этот вопрос ответил Дмитрий Уткин.</p>
11
Фото: из личного архива Дмитрия Уткина<p>Технолог в SuperJob.</p>
11
Фото: из личного архива Дмитрия Уткина<p>Технолог в SuperJob.</p>
12
<p>Получает от дизайнеров единицу смысла, а потом воплощает её как им надо, без переноса ошибок из макета. Кунг-фу постиг в Студии Лебедева и отточил в "Афиша Daily".</p>
12
<p>Получает от дизайнеров единицу смысла, а потом воплощает её как им надо, без переноса ошибок из макета. Кунг-фу постиг в Студии Лебедева и отточил в "Афиша Daily".</p>
13
<p>Консультирует и читает лекции.</p>
13
<p>Консультирует и читает лекции.</p>
14
<p>Анимация тратит время пользователя, но привлекает его внимание. Она как повышение тона в разговоре. Общее правило такое: там, где нужно сделать акцент для пояснения или метафоры, продемонстрировать связи или отношения, анимировать можно. В остальных случаях - противопоказано.</p>
14
<p>Анимация тратит время пользователя, но привлекает его внимание. Она как повышение тона в разговоре. Общее правило такое: там, где нужно сделать акцент для пояснения или метафоры, продемонстрировать связи или отношения, анимировать можно. В остальных случаях - противопоказано.</p>
15
<ul><li><strong>Не анимируй элементы, если они на проблемном макете.</strong></li>
15
<ul><li><strong>Не анимируй элементы, если они на проблемном макете.</strong></li>
16
</ul><p>"Скучный блок, анимация сделает его повеселее" - нет, так делать не надо. Сначала сверстай, пожалуйста, нормальный макет.</p>
16
</ul><p>"Скучный блок, анимация сделает его повеселее" - нет, так делать не надо. Сначала сверстай, пожалуйста, нормальный макет.</p>
17
<p>Постоянно вижу надоедливые фейдины на лендингах - это плохо. И кодеры реализуют идею дизайнера не всегда качественно: бывает, что видишь полупустой фон, и только через три четверти экрана появляется текст. А я мог бы уже прочитать пару слов!</p>
17
<p>Постоянно вижу надоедливые фейдины на лендингах - это плохо. И кодеры реализуют идею дизайнера не всегда качественно: бывает, что видишь полупустой фон, и только через три четверти экрана появляется текст. А я мог бы уже прочитать пару слов!</p>
18
<ul><li><strong>Не анимируй элементы, если они часто появляются или выглядят навязчиво.</strong></li>
18
<ul><li><strong>Не анимируй элементы, если они часто появляются или выглядят навязчиво.</strong></li>
19
</ul><p>Когда<strong>постоянно</strong>переключаешься между вкладками или листаешь ленту, никакой анимации переключения и появления постов видеть не захочешь. "Мне тут коробки носить надо, а вы мультики показываете!" - вот реакция на навязчивую анимацию. Анимация - это фейерверк, и запуск салюта каждый день наскучит практически сразу.</p>
19
</ul><p>Когда<strong>постоянно</strong>переключаешься между вкладками или листаешь ленту, никакой анимации переключения и появления постов видеть не захочешь. "Мне тут коробки носить надо, а вы мультики показываете!" - вот реакция на навязчивую анимацию. Анимация - это фейерверк, и запуск салюта каждый день наскучит практически сразу.</p>
20
<ul><li><strong>Анимируй, если между изменениями элемента есть связь или пространственное отношение.</strong></li>
20
<ul><li><strong>Анимируй, если между изменениями элемента есть связь или пространственное отношение.</strong></li>
21
</ul><p>"Сюда сворачивается окошко, отсюда же раскрывается" - это отношение. Значит, можно анимировать. Если не будет навязчивым.</p>
21
</ul><p>"Сюда сворачивается окошко, отсюда же раскрывается" - это отношение. Значит, можно анимировать. Если не будет навязчивым.</p>
22
<p>Ещё пример: если потянуть вбок письмо в приложении Gmail или чат в Telegram, появятся скрытые кнопки. Анимация покажет, будто чат или письмо сдвинулись, а под ними оказались кнопки.</p>
22
<p>Ещё пример: если потянуть вбок письмо в приложении Gmail или чат в Telegram, появятся скрытые кнопки. Анимация покажет, будто чат или письмо сдвинулись, а под ними оказались кнопки.</p>
23
<p>Хорошо бы анимировать, как добавляется дополнительное значение на диаграмме. Но как только данные поменялись, анимацию надо убрать. Вредно показывать таким образом связь или "преемственность".</p>
23
<p>Хорошо бы анимировать, как добавляется дополнительное значение на диаграмме. Но как только данные поменялись, анимацию надо убрать. Вредно показывать таким образом связь или "преемственность".</p>
24
<ul><li><strong>Анимируй, если состояние интерактивного элемента меняется.</strong></li>
24
<ul><li><strong>Анимируй, если состояние интерактивного элемента меняется.</strong></li>
25
</ul><p>Пример - кнопка плавно меняет цвет при ховерении. Или "перетаскиваемая" карточка отбрасывает другую тень и слегка подкручивается - изменения состояния помогают понять, что что-то произошло. Анимируй, если это не будет навязчивым.</p>
25
</ul><p>Пример - кнопка плавно меняет цвет при ховерении. Или "перетаскиваемая" карточка отбрасывает другую тень и слегка подкручивается - изменения состояния помогают понять, что что-то произошло. Анимируй, если это не будет навязчивым.</p>
26
<p><strong>Разработчикам</strong></p>
26
<p><strong>Разработчикам</strong></p>
27
<p>На интерактивные элементы по умолчанию пишите: transition: all .1s ease-in;.</p>
27
<p>На интерактивные элементы по умолчанию пишите: transition: all .1s ease-in;.</p>
28
<ul><li><strong>Анимируй, если элемент может развлечь пользователя динамикой.</strong></li>
28
<ul><li><strong>Анимируй, если элемент может развлечь пользователя динамикой.</strong></li>
29
</ul><p>Ради шоу можно анимировать появление элементов. Но осторожно: заранее подумай, кто и на чём будет этот интерфейс или страницу показывать и смотреть. Анимировать мелкие элементы для презентации с телефона гендиректору в лифте расточительно и неразумно.</p>
29
</ul><p>Ради шоу можно анимировать появление элементов. Но осторожно: заранее подумай, кто и на чём будет этот интерфейс или страницу показывать и смотреть. Анимировать мелкие элементы для презентации с телефона гендиректору в лифте расточительно и неразумно.</p>
30
<p>Анимировать можно всё, если это не будет навязчивым.</p>
30
<p>Анимировать можно всё, если это не будет навязчивым.</p>
31
<ul><li><strong>Не делай анимацию разнонаправленной.</strong></li>
31
<ul><li><strong>Не делай анимацию разнонаправленной.</strong></li>
32
</ul><p>В лекции "Интерфейсные анимации" Илья Бирман отлично прояснил, что важны синхронность и схожесть анимаций. Несогласованные анимации и одновременные движения элементов в разные стороны моментально утомляют и не приносят никакой пользы. Будто двое людей говорят на повышенных тонах одновременно - в итоге никто никого не в состоянии расслышать и понять.</p>
32
</ul><p>В лекции "Интерфейсные анимации" Илья Бирман отлично прояснил, что важны синхронность и схожесть анимаций. Несогласованные анимации и одновременные движения элементов в разные стороны моментально утомляют и не приносят никакой пользы. Будто двое людей говорят на повышенных тонах одновременно - в итоге никто никого не в состоянии расслышать и понять.</p>
33
<ul><li><strong>И никогда не делай анимацию навязчивой.</strong></li>
33
<ul><li><strong>И никогда не делай анимацию навязчивой.</strong></li>
34
</ul><p>Например, эффект сворачивания окна "Джинн" в iOS долгий, сложный и потому крайне навязчивый. Или строка поиска по iPhone (если потянуть на экране с иконками приложений), которая появляется сверху вниз, а в три раза медленнее снизу вверх выдвигается клавиатура - это некрасиво.</p>
34
</ul><p>Например, эффект сворачивания окна "Джинн" в iOS долгий, сложный и потому крайне навязчивый. Или строка поиска по iPhone (если потянуть на экране с иконками приложений), которая появляется сверху вниз, а в три раза медленнее снизу вверх выдвигается клавиатура - это некрасиво.</p>
35
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>
35
<a><b>Попробуйте бесплатно 4 топовые профессии в дизайне</b>Пройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>