Анимация интерфейсов. Микровзаимодействия для макрорезультата

Nancy Pong
Dec 15, 2015 · 6 min read

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

Читайте также перевод другой статьи этого же автора: “Пространственные интерфейсы

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


Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.


Все 557+ статей по дизайну читайте на сайте ux-journal.ru


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

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

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

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

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

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

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

Замедление

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



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

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


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

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


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

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


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

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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


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


Если вам понравилась статья и перевод, дайте нам знать — нажмите кнопку Recommend

А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.


Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи как привлечь, удержать и направить внимание пользователя

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

Скачать приложение в Appstore

UI animations

Применение эффектов анимации в пользовательских интерфейсах

Translated from original by Nancy Pong.

Nancy Pong

Written by

Ольга Жолудова. Копирайтер и переводчик. Про копирайтинг: https://vk.com/copywriter.blog Про жизнь: https://www.instagram.com/nancypong4/

UI animations

Применение эффектов анимации в пользовательских интерфейсах

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade