Не торопись — подзаебись
Зачем нужен моушен интерфейса: проколы и выводы на примере одного проекта.
Щепотка брифа
Упал заказ на разработку макетов интерфейса сайта.
Тематика: недвижимость — компания сдаёт помещения в аренду в старинном кирпичном здании бывшей табачной фабрики.
Концепция по классике: рассказ об объекте и текущих арендаторах + схемы свободных помещений.
Этапы работы: прототипы — кейвижуал — подготовка всех макетов.
KV и макеты: процесс
Прототип закрутили, утвердили. Потом сделал первые быстрые жидкие наброски.
…/Tabachka/KV/Victor/01
Потом ещё повертел KV.
…/Tabachka/KV/Victor/02
Затем к макетам подключился Лёша.
…/Tabachka/KV/Alex/news.psd
Далее он подхватил всё моё желе и запилил конфетку с высокими требованиями к контенту, подразумевая много разных транзишенов.
…/Tabachka/Design
Всем нравятся. Макеты, переданы, принципы построения и анимации описаны. С заказчиком на связи по части консультаций, подсказок. Проходит время, приходит ссылка на сайт, а шерить её нигде не хочется. Но инициаторов устраивает. Акты подписаны, бабки получены — ну, ок.
Так что же с сайтом? Мягко говоря — совсем не то, что ожидалось. Но и просто так сохранять макеты в папке «Archive» на Дропбоксе, и наткнуться на них через пару лет—тоже не подходит, ведь проект мог бы стать показательным.
Привет, After Effects!
Решили показать User Journey (UJ) по сайту: что видит пользователь, попадая на главную, как сёрфит по разделам сайта. В процессе стало ясно, что это была не лучшая мысль, но об этом чуть дальше.
Автор макетов сидел рядом, и я всегда мог посоветоваться, как он видел переходы, когда проектировал интерфейс.
Кручу опасити туда-сюда, координаты, маски и что-то начинает вырисовываться. Сами приёмы анимирования очень просты, но секрет магии в том, что скорости должны быть нелинейны, что любой импульс ведет за собой реакцию.
cursor
В жизни вообще всё происходит нелинейно — это привычный для всех UX. И когда видишь нелинейность в моушене, то это кажется естественным и понятным, это принимаешь.
elements
Когда весь UJ был реализован и ролик был в очередной раз отрендерен, захотелось придать ему еще большего лоска. Макеты были 1440px по ширине и размер композиции в Афтэре это унаследовал. Дотянуть бы до FULL HD (1920×1080 px)? Можно сделать подложку с кирпичами (объект, для которого делался сайт, — старое кирпичное здание табачной фабрики, построенное в начале прошлого века). Белый цвет — чтобы контрастировал. Но если сохранить размер интерфейса 1440px, то остается мало воздуха вокруг.
frame: 1920 px, interface: 1440 px
Если сделать размер интерфейса меньше, то вроде как в кадре всё уравновешено, но толком не видно интерфейс, особенно если смотреть ролик на планшете или в посте, не развернув на весь экран.
frame: 1920 px, interface: 1020 px
Другие текстуры пробывал, но всё ерунда. Откатился назад с новым знанием: если надо показать интерфейс, то покажи интерфейс.
Enjoy
В итоге
Делать такой моушен UJ — скучно и неоптимально. Достаточно нескольких роликов по 3–5 секунд, которые не превращаются в UJ, но описывают основные принципы анимации. Это во много раз быстрее и сильно помогает всем: экономит время верстальщика, нервы дизайнеров, не надо играть с заказчиком в “UI-Крокодила”— все будет предельно ясно. И портфолио будет чем оформить.
Самая банальная анимация — это очень серьёзное средство выразительности. Она помогает управлять фокусом пользователя в пространстве интерфейса, подчеркивает акценты, рассказывает историю, создает атмосферу и комфорт.
Выжимка.
Вся магия начинается, когда понимаешь, что скорости должны быть нелинейны, что импульс должен вести за собой реакцию: ускорения, кульминации, затухания.
Если надо показать интерфейс, то покажи интерфейс: включи видео на дивайсе и смотри на реакцию заказчика.
Делать моушен целого User Journey нецелесообразно. Достаточно нескольких роликов по 3–5 секунд, которые описывают основные принципы анимации.
Официальная презентация проекта http://gridworks.ru/tabachka-web
Хотите поделиться мыслями? Пишите!
Facebook | Telegram | Vimeo