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

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

 

Основное предназначение анимации — сделать интерфейс удобнее.

Да, не «красивее», «стильнее», «прикольнее» …. а именно «удобнее».
Удобнее для клиентов, посетителей сайтов, пользователей приложений. Если задуматься — на правильно размещенную анимацию внимания никто не обращает. Она кажется абсолютно логичной и правильной частью целого.
Когда ты наводишь мышку на кнопку, кнопка темнеет ( как ближайший аналог — тень от пальца, ага?), а при нажатии вдавливается слегка внутрь (ближайший аналог — нажатие кнопок … ну, на пульте, например) — для нас это логично. Это правильный и грамотный перенос реального в виртуальное. Мозг радуется — он получает абсолютно ожидаемые эффекты и не напрягается, теряясь в предположениях — что там дальше.
Если бы кнопка просто меняла цвет на нажатии — или ничего бы не происходило — ты был бы слегка разочарован. Так, чуть-чуть. Незаметно глазу, но осадок бы в общей массе остался.

Если ты нажимаешь на меню гамбургера (свернутые такие полоски, чаще всего в мобильных версиях встречаются) и оно выезжает плавно с нужного места — это логично и правильно. Оно же свернуто было? вот и разворачивается. Если бы оно внезапно появлялось сразу в развернутом виде — мозг не успел бы перейти из одного состояния в другое, перестроиться на то, что вот — без разворачивания — меню появилось вдруг и сразу. Опять же, об этом не задумываются, но осадок при отсутствии таких банальных вещей остается.

То есть задача анимации — не развеселить посетителя — а создать реалистичную ( более-менее) физическую модель, знакомую пользователю по реальному миру.

______________________________________________________

 

Отвлечемся на пример из жизни.

Ты решаешь почитать книгу перед сном. Обычную бумажную книгу. Что ты делаешь, когда прочитаешь весь текст разворота? Скорее всего, просто берешь и переворачиваешь страницу. Процесс перелистывания — это пауза в чтении. Хорошо это или плохо?
С позиции полезного действия книги — это плохо, с позиции человека — это привычно. Для дизайнера интерфейса «хорошо», зачастую, означает «удобно». Но полезное действие не отменяется, оно всегда на первом месте. Перелистывание страницы — это привычное действие, позволяющее видеть связь между страницами.
Плохо, если в конце страницы тебе нужно нажать на кнопку и страница мгновенно изменится на другую. Без связи и процесса перелистывания сложнее понять, что происходит и почему.

Мгновенное изменение состояния невозможно встретить в жизни.

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

______________________________________________________

 

Имитация реального мира

Свойства css анимации позволяют имитировать ситуации из реального мира. Но, почему-то, на такие вещи мало кто обращает внимание. На лэндингах, простигосспади, умельцы добавляют всякую и любую анимацию, до которой только могут дотянуться. Текст падает сверху, всплывает справа-слева, подскакивает и подпрыгивает с приподвыподвертом или без него. То же самое касается картинок. На ум приходит устойчивое выражение про обезьяну с очками … или с гранатой — а ведь стоит только подумать, для чего логично эту анимацию использовать?
Мы можем сымитировать инерцию, нажатие, тени, всплытие или угасание — но делать это нужно только в тех моментах, в которых надо. Черт, мы можем создать имитацию наплыва, листания и переворачивания страниц на сайтах! да, правильно, это когда страница не обновляется через пустой экран, а перелистывается, или наплывает из глубины, тем самым увеличивая сходство с реальным миром и юзабилити для людей, которые смотрят на сайт .

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

__________________________________________

 

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

Добавить комментарий

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

Отправить