Вы читаете перевод статьи Паскаля Д’Сильва “Transitional Interfaces”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.
При поддержке iSpring. iSpring — решение для запуска дистанционного обучения.
Дизайнеры обожают корпеть над деталями. Они проводят кучу времени, оттачивая пиксели кнопок, стили форм, шрифты, и создавая крутейшие иконки. Пятерка вам, хорошая работа, так держать, ребята!
…но стоит обратить внимание на то, как это все будет смотреться в совокупности, за пределами статичного экрана. Вы нажимаете на кнопку и форма просто … появляется? Вы проводите пальцем чтобы удалить элемент, а потом он просто исчезает? Все это очень странно и неестественно. Это раздражает, ведь в природе нет таких переходов — просто из состояния в состояние. Создается ощущение, что что-то сломалось.
Ладно, ладно, родные. Пусть даже не переходит в другое состояние — просто выплывает откуда-нибудь.
Как выплывает? Быстро? Отскакивает от края? Мягко замедляется? В статичном дизайне не виден контекст перехода между состояниями.
Про анимации и милые переходы обычно говорят: “восторг!” Ну и молодцы, что говорят. Но угадайте что? Анимации также могут быть функциональным элементом, а не просто блестящей деталькой.
Анимация задействует одно из самых недооцененных измерений дизайна — время! Невидимую материю, соединяющую пространство. Не нужно быть заученным математиком, чтобы это понимать.
Давайте посмотрим на несколько простых примеров:
Замедление
Разбивка на состояния (breakdown) в анимациях традиционно определяет движение объекта из точки А в точку Б. Она задает “траекторию” движения и определяет места остальных кадров. Возьмем эти 25 кадров и посмотрим, что будет, если 13-й (центральный) кадр поменяет свое положение:
Посмотрите-ка! Вы научились создавать эффект замедления. Компьютеры — тупицы: они заполняют пробелы линейно, потому что они ленивые клубки проводов. Хороший анимационный/ моушн-дизайнер проводит свои рабочие будни, сражаясь с компьютерами, чтобы избежать отстойного результата.
Суть анимации в расчете времени. Вы можете “поиграть” с разными временными интервалами для достижения разных результатов. Но хватит об этом. Это не тьюториал по анимациям. Суть статьи в том, чтобы заставить вас задуматься о языке времени и интервалов.
Несколько идей анимаций в контексте интерфейсов
Как я уже говорил, анимации помогают увидеть контекст. А он позволяет мозгу понять направление потока информации.
Вставляем элемент в список
Скажем, у вас есть список элементов, и вы хотите наполнить его новой информацией. Если предоставить это дело компьютеру, то получите нечто подобное:
Ой, как грубо…
Несколько кадров анимации могут смягчить этот эффект. Как насчет небольшого намека на то, что происходит со списком?:
При добавлении нового элемента, в списке должно освободиться место, где впоследствии и появится новый элемент (появится откуда-то). Это раздражает куда меньше. Движения можно немного замедлить в начале и в конце, чтобы обеспечить мягкость. Теперь все выглядит естественнее, так как мы создали контекст пространства — сымитировали процесс добавления нового элемента, происходящий в реальной жизни!
Вот еще несколько:
Подробное рассмотрение одного из элементов
Есть типичный паттерн для такого действия — провести по элементу вправо. Этот паттерн часто используется, но не имеет большого пространственного смысла:
Направление движения отображает лишь линейную цепочку экранов и не имеет никакой связи с реальным миром.
А как насчет поочередного представления каждого элемента в виде “контейнера” с подробностями?
Если ваша цель - в подробном рассмотрении элемента и полной концентрации на нем, можно даже скрыть все остальное, воспользовавшись подобной анимацей:
Хлебные>крошки>на>протяжении>всего>пути — это верный способ потеряться.
Преимущество поочередных анимаций в том, что можно не объяснять пользователю, насколько далеко он зашел в цепочке окон и подокон. В отображении иерархии нет никакого смысла, ведь пользователь видел, как попал туда, где сейчас находится.
Конечно, вышеописанные идеи не работают во всех без исключения случаях, но эта стратегия приведет вас к гораздо более элегантному соединению элементов потока.
Встроенный пример — Thinglist
У Thinglist — продукта Elepath, над которым я работаю с мистером Кайлом Брегером, — очень интересный переходный интерфейс, в который вложено много труда. Пример выше демонстрирует как мы показываем новую функцию фильтрации.
Примеры переходных интерфейсов, которые стоит заценить:
Знаете, много-то и не назовешь… На одной чаше весов — множество красивых, но ужасно статичных интерфейсов. На другой — интерфейсы, перегруженные яркими, диковинными анимациями.
На ум приходят три хороших примера:
Clear: Очень плотная, продиктованная жестами анимация
Willcall: У приложения последовательный, кинетический ритм. Никаких скачков между состояниями. Очаровательное игровое настроение.
Facebook.app: Приложение не очень последовательно, но в нем есть несколько интересных решений для привлечения внимания. Особенно… просмотр полноэкранных фоток и появляющиеся поля для комментариев в списках.
Я считаю безумным тот факт, что люди не рассматривают интерфейсы в контексте времени. Движение несет в себе столько информации! Может быть инструменты для прототипирования слишком сложны для большинства дизайнеров?
Изначально я писал эту статью как внутренний документ для работников Elepath, чтобы объяснить мою увлеченность движением. Ведь я как-никак Аниматор.
Мы решили, что было бы здорово рассказать людям об этом вопросе. Мне бы хотелось услышать мнения других дизайнеров, работающих с интерфейсами, — особенно тех, кого реально заботит, как и почему они двигаются.
Оставляйте комментарии здесь или пишите мне в Твиттере: @pasql
Можете присоединяться к обсуждению здесь: http://branch.com/b/transitional-interfaces-design-ux
Я дополнил эту статью 50-минутным рассказом, который можно посмотреть здесь>>
*Я не несу ответственности за то, что показал вам эту кроличью нору и подсадил на анимации.