{"id":9132,"title":"\u041f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u043d\u0430\u0434\u0441\u043a\u0438\u0435 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0438 \u043a\u0432\u0430\u0434\u0440\u043e\u0446\u0438\u043a\u043b\u043e\u0432 \u043f\u043e\u043a\u0443\u043f\u0430\u044e\u0442 \u0437\u0430\u043f\u0447\u0430\u0441\u0442\u0438 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438","url":"\/redirect?component=advertising&id=9132&url=https:\/\/vc.ru\/pochta\/325041-kak-kanadskie-lyubiteli-snegohodov-i-kvadrociklov-otkryli-dlya-sebya-rossiyu&placeBit=1&hash=cd54543b13c8a6083dd50d5669dab69e3e15e40792f9ed69859d5c8934b50d3d","isPaidAndBannersEnabled":false}

Улучшить взаимодействие с интерфейсом с помощью анимаций Статьи редакции

Практические советы и примеры доработки дизайна.

Материал дизайнера и сооснователя Carbon Health Пабло Стэнли. Перевод подготовлен Николаем Гелларом.

Рассмотрим несколько примеров анимаций интерфейса от хороших до отличных. Благодаря небольшой доработке можно улучшить взаимодействие с интерфейсом при помощи анимаций.

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

Чтобы создать эти анимации, я следовал рекомендациям Material Motion, Animation Principles от IBM и The UX in Motion Manifesto.

Все взаимодействия были сделаны с использованием ранней версии InVision Studio. Скачать исходные файлы можно здесь.

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

Контент слева исчезает при переключении туда-сюда. Контент справа пролистывается при помощи вкладок
  • Хорошая анимация приводит к исчезновению контента при переходе из одного состояния в другое.
  • Отличная анимация демонстрирует непрерывность при переходе, перемещая контент между состояниями.

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

Соедините общие элементы карточки

Слева контент открывает новый экран, который сдвигается вверх. Карточка справа расширяется и заполняет экран
  • Хорошая анимация использует сдвиг вверх для отображения содержимого на карточке.
  • Отличная анимация устанавливает связь между двумя состояниями, анимируя общий контент.

При анимации перехода между различными состояниями посмотрите, есть ли между ними общие элементы и их соединение. С InVision Studio компоненты, которые повторяются на двух связанных экранах, автоматически соединяются при создании перехода движения (Motion transition). Это делает анимацию прототипирования лёгкой.

Ознакомьтесь с Motion Manifesto, чтобы просмотреть типы анимаций, которые можно применить. В приведённом выше примере используется комбинация принципов Masking, Transformation, Parenting и Easing.

Используйте каскадный эффект в контенте

Карточки слева отображаются с помощью скольжения и затухания. Карточки справа используют одну и ту же анимацию, но каждая карточка показывается с небольшой задержкой
  • Хорошая анимация изменяет положение и непрозрачность материала при открытии экрана.
  • Отличная анимация быстро располагает каскадом все группы или элементы.

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

Не делайте каскад для каждого маленького элемента, но анимируйте группы контента. Следите, чтобы анимация была быстрой. Google рекомендует, чтобы каждый элемент появлялся с задержкой не более чем 20 милисекунд. Ознакомьтесь с принципом хореографии в Material Motion, чтобы увидеть больше примеров.

Заставьте контент отодвигать другие элементы

Анимация слева реализуется поверх другого контента. Анимация справа выталкивает контент, когда он растет
  • Хорошие анимации перемещают и отображают элементы в контексте.
  • Отличные анимации показывают элементы, влияя на их окружение, когда они меняются.

Сделайте элементы в контенте чувствительными к окружению. Так контент привлекает или отталкивает элементы вокруг себя. Для получения дополнительных примеров ознакомьтесь с принципом Aware motion от Material Design.

Делайте появление меню контекстным

Меню слева выплывает снизу. Меню справа раскрывается из действия, создавшего его
  • Хорошо анимированные меню показывают содержимое, появляющееся со стороны кнопки, которая открыла их.
  • Отлично анимированные меню, появляются из действия, которое их создало, вырастая из точки соприкосновения.

Используйте кнопки для показа разных состояний

Кнопка слева показывает состояния с помощью текста. Кнопка справа использует контейнер для отображения разных событий
  • Хорошие взаимодействия отображают события рядом с кнопкой.
  • Отличные взаимодействия используют саму кнопку, чтобы показать разные состояния.

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

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

Привлекайте внимание к чему-то важному

Пример слева использует цвет и расположение для выделения элемента. Пример справа использует ненавязчивую анимацию для привлечения внимания пользователя
  • Хороший дизайн использует цвет, размер и расположение элементов для выделения важного действия — если нужно, чтобы пользователь заметил или совершил его.
  • Отличный дизайн использует анимацию, чтобы привлечь внимание к важному действию, не создавая при этом проблем.

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

Я надеюсь, что эти примеры помогут принять правильные решения при добавлении анимаций в интерфейсы. Благодаря новым инструментам анимации и прототипирования, таким как Studio от InVision, я предсказываю, что скоро начнётся период ренессанса креативных взаимодействий. Мы просто должны помнить, что не нужно ими злоупотреблять.

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

0
14 комментариев
Популярные
По порядку
Написать комментарий...
Алексей Петрик

— Делайте появление меню контекстным
→ Сразу вспомнил эту корявенькую выезжающую штуку из бутстрапа

— Привлекайте внимание к чему-то важному
→ Ага, чертова мигющая трубка «перезвоним за 10 секунд»

Ответить
7
Развернуть ветку
timursh

Анимации это хорошо. Прям старый добрый веб 1.0

Ответить
5
Развернуть ветку
Pixel Lens

Я всё жду, когда этот тёплый ламповый колхоз объявят ретро-стилем и затрендят на него моду. В западном мире. На востоке, я подозреваю, такие сайты еще из моды-то не вышли.

Ответить
0
Развернуть ветку

Комментарий удален

Развернуть ветку
timursh

Это надо писать фреймворк для отключения анимации в популярных фреймворках.

Ответить
0
Развернуть ветку
Saucedo Puetz

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

Ответить
4
Развернуть ветку
Pixel Lens

К сожалению, там, где анимации активно используются во взаимодействии с интерфейсом, - они призваны прикрыть недостачу пользы и смысла продукта. А там, где тонна функционала и приложение по факту являет собой инструмент профессионала - анимаций почти нет, а те, которые таки есть, - существенно увеличивают лаги даже на мощных машинах, и лично я сразу лезу в настройки, пытаясь всё отключить нахрен и сэкономить по 1-2 секунды на отклике интерфейса.

Не говоря уже про анимации в операционной системе. Отключить все рюшки-погремушки = +20fps в играх и +20% быстродействия тяжелых приложений.

Ответить
1
Развернуть ветку
Владислав Козуля

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

Ответить
3
Развернуть ветку
Vadim Korolchuk

Почему подобные статьи - это перевод? Почему наши дизайнеры такое не пишут?

Ответить
1
Развернуть ветку
Сергей Артёменко

Потому-то на практике это не применимо

Ответить
1
Развернуть ветку
Сергей Артёменко

Так чисто для дрибла

Ответить
0
Развернуть ветку
Иван Ломаев

весна, дизайнерские темы активизировались. совпадение?

Ответить
0
Развернуть ветку
Denis Novikov

Я надеюсь в кружке свежий горячий кофе?

Ответить
0
Развернуть ветку
Илья Снеговской

Спасибо за статью. Много чего интересного для себя подчеркнул.

Ответить
0
Развернуть ветку
Андрей Маркевич

Примеров с реальным использованием не хватает.

Ответить
0
Развернуть ветку

Комментарий удален

Развернуть ветку
Читать все 14 комментариев
«Купи сейчас, плати потом»: новая классика или мимолетная мода

Сервис рассрочек рассказывает о новом финтех-тренде.

Как сделать работу компаний и фрилансеров удобной

С помощью сервиса «Рокет Ворк».

Как производственной компании обучить всех онлайн, увеличить прибыль и повысить лояльность. Часть 2

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

Как выпустить заменитель соли на Boomstarter.ru и попасть в список Forbes

Сёстры из Астрахани запустили на Boomstarter.ru продажи нового продукта — зеленой соли. После этого их продукцию начали продавать в сетевых магазинах, а само бизнес-начинение журнал Forbes включил в список лучших стартапов.

«Если клиенты видят халяльный логотип, это придаёт им уверенности в продукте»: как устроен исламский банкинг в Индонезии Статьи редакции

Местные финтех-стартапы могут развиваться только после одобрения представителей исламского духовенства. Какие сложности преодолевают предприниматели, чтобы создать приложение по законам шариата, — в пересказе Rest of World.

«Комитет» объявил о планах продать сервис коротких видео Coub Статьи редакции

Компания, владеющая vc.ru, dtf.ru и tjournal.ru, планирует в ближайшее время найти нового владельца для проекта, сообщил на своей странице в Facebook сооснователь «Комитета» Влад Цыплухин.

Как слабоумие и отвага, доширак и донорство крови помогли нам сделать платформу для ИИ-роботов и поднять раунд 50 млн

Tomoru.ru — платформа для создания умных голосовых роботов для бизнеса. Мы начинали как AR/VR-студия, а теперь создаем цифровых помощников для СберМаркета, Skillbox и других клиентов. Бизнес может собрать себе робота сам или заказать готового у сертифицированных партнеров Tomoru.

Кейс: увеличили аудиторию коммерческого аккаунта в Instagram в 4 раза с минимальным бюджетом

И помогли вывести на рынок новый продукт пест-контроля

Скриншот слева показывает как выглядел аккаунт до работы с нами, скриншот справа - после.
Новый дизайн «Секрета фирмы» учтёт пользовательские сценарии потребления и поиска контента

О трендах бизнеса и экономики можно прочесть коротко и ясно в удобных форматах

Весь кофе подорожает, капучино за 250 рублей будет нормой: почему рынок штормит не первый месяц и чего ждать в 2022 году Статьи редакции

Основные причины — проблемы у ключевых стран-экспортёров и подорожание морских перевозок.

null