book-open 1 test
Анимация интерфейсов

Микровзаимодействия и микроподсказки в интерфейсе

Анимации помогают увидеть контекст. А он позволяет мозгу понять направление потока информации. Но как это работает в деталях?
Иллюстрация Andrew Pons: https://dribbble.com/shots/8958203-M-is-For-Motion-Dark-Mode

Вы читаете перевод статьи Паскаля Д’СильваTransitional Interfaces”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

При поддержке iSpring. iSpring — решение для запуска дистанционного обучения.

Дизайнеры обожают корпеть над деталями. Они проводят кучу времени, оттачивая пиксели кнопок, стили форм, шрифты, и создавая крутейшие иконки. Пятерка вам, хорошая работа, так держать, ребята!

…но стоит обратить внимание на то, как это все будет смотреться в совокупности, за пределами статичного экрана. Вы нажимаете на кнопку и форма просто … появляется? Вы проводите пальцем чтобы удалить элемент, а потом он просто исчезает? Все это очень странно и неестественно. Это раздражает, ведь в природе нет таких переходов — просто из состояния в состояние. Создается ощущение, что что-то сломалось.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

Ладно, ладно, родные. Пусть даже не переходит в другое состояние — просто выплывает откуда-нибудь.

Как выплывает? Быстро? Отскакивает от края? Мягко замедляется? В статичном дизайне не виден контекст перехода между состояниями.

Про анимации и милые переходы обычно говорят: “восторг!” Ну и молодцы, что говорят. Но угадайте что? Анимации также могут быть функциональным элементом, а не просто блестящей деталькой.

Анимация задействует одно из самых недооцененных измерений дизайна — время! Невидимую материю, соединяющую пространство. Не нужно быть заученным математиком, чтобы это понимать.

Давайте посмотрим на несколько простых примеров:

Замедление

Разбивка на состояния (breakdown) в анимациях традиционно определяет движение объекта из точки А в точку Б. Она задает “траекторию” движения и определяет места остальных кадров. Возьмем эти 25 кадров и посмотрим, что будет, если 13-й (центральный) кадр поменяет свое положение:

Посмотрите-ка! Вы научились создавать эффект замедления. Компьютеры — тупицы: они заполняют пробелы линейно, потому что они ленивые клубки проводов. Хороший анимационный/ моушн-дизайнер проводит свои рабочие будни, сражаясь с компьютерами, чтобы избежать отстойного результата.

Суть анимации в расчете времени. Вы можете “поиграть” с разными временными интервалами для достижения разных результатов. Но хватит об этом. Это не тьюториал по анимациям. Суть статьи в том, чтобы заставить вас задуматься о языке времени и интервалов.

Несколько идей анимаций в контексте интерфейсов

Как я уже говорил, анимации помогают увидеть контекст. А он позволяет мозгу понять направление потока информации.

Вставляем элемент в список

Скажем, у вас есть список элементов, и вы хотите наполнить его новой информацией. Если предоставить это дело компьютеру, то получите нечто подобное:

Ой, как грубо…

Несколько кадров анимации могут смягчить этот эффект. Как насчет небольшого намека на то, что происходит со списком?:

При добавлении нового элемента, в списке должно освободиться место, где впоследствии и появится новый элемент (появится откуда-то). Это раздражает куда меньше. Движения можно немного замедлить в начале и в конце, чтобы обеспечить мягкость. Теперь все выглядит естественнее, так как мы создали контекст пространства — сымитировали процесс добавления нового элемента, происходящий в реальной жизни!

Вот еще несколько:

Подробное рассмотрение одного из элементов

Есть типичный паттерн для такого действия — провести по элементу вправо. Этот паттерн часто используется, но не имеет большого пространственного смысла:

Направление движения отображает лишь линейную цепочку экранов и не имеет никакой связи с реальным миром.

А как насчет поочередного представления каждого элемента в виде “контейнера” с подробностями?

Если ваша цель - в подробном рассмотрении элемента и полной концентрации на нем, можно даже скрыть все остальное, воспользовавшись подобной анимацей:

Хлебные>крошки>на>протяжении>всего>пути — это верный способ потеряться.

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

Конечно, вышеописанные идеи не работают во всех без исключения случаях, но эта стратегия приведет вас к гораздо более элегантному соединению элементов потока.

Встроенный пример — Thinglist

У Thinglist — продукта Elepath, над которым я работаю с мистером Кайлом Брегером, — очень интересный переходный интерфейс, в который вложено много труда. Пример выше демонстрирует как мы показываем новую функцию фильтрации.

Примеры переходных интерфейсов, которые стоит заценить:

Знаете, много-то и не назовешь… На одной чаше весов — множество красивых, но ужасно статичных интерфейсов. На другой — интерфейсы, перегруженные яркими, диковинными анимациями.

На ум приходят три хороших примера:

Clear: Очень плотная, продиктованная жестами анимация

Willcall: У приложения последовательный, кинетический ритм. Никаких скачков между состояниями. Очаровательное игровое настроение.

Facebook.app: Приложение не очень последовательно, но в нем есть несколько интересных решений для привлечения внимания. Особенно… просмотр полноэкранных фоток и появляющиеся поля для комментариев в списках.

Я считаю безумным тот факт, что люди не рассматривают интерфейсы в контексте времени. Движение несет в себе столько информации! Может быть инструменты для прототипирования слишком сложны для большинства дизайнеров?

Изначально я писал эту статью как внутренний документ для работников Elepath, чтобы объяснить мою увлеченность движением. Ведь я как-никак Аниматор.

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

Оставляйте комментарии здесь или пишите мне в Твиттере: @pasql

Можете присоединяться к обсуждению здесь: http://branch.com/b/transitional-interfaces-design-ux

Я дополнил эту статью 50-минутным рассказом, который можно посмотреть здесь>>

*Я не несу ответственности за то, что показал вам эту кроличью нору и подсадил на анимации.