Лого vc.ru

«Ваш интерфейс — не фильм "Диснея"»

«Ваш интерфейс — не фильм "Диснея"»

Австралийский дизайнер Софи Пакстон опубликовала в своём блоге на Medium колонку о том, почему нельзя злоупотреблять анимацией, как подобрать нужный эффект, и почему между анимацией интерфейсов и «Диснеем» нет ничего общего.

Автор «Блога о дизайне и интерфейсах» Максим Шайхалов подготовил для vc.ru перевод заметки Пакстон.

Поделиться

Один из наиболее очевидных признаков компетентного дизайнера — сдержанность интерфейса. Речь идет о знании возможностей выбранной платформы, но не использовании их (пока не возникает идеальный момент для этого).

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

Надуманный пример

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

Надуманный пример

Это выглядит, как отказ от визуального скевоморфизма и замена его анимационным скевоморфизмом, в котором наши цифровые объекты ведут себя так, словно они сделаны из желе или подвешены на невидимые резинки.

Анимация — как проклятие. Если вы перестараетесь, она потеряет всё своё влияние.

Принципы анимации

Я слышал, что некоторые дизайнеры интерфейсов предлагают принципы анимации «Диснея» как обязательное чтение для своих коллег. К сожалению, это помогает продвигать идею интерфейса как развлечения. А это неизменно приводит к замедлению взаимодействия пользователя и интерфейса.

Кажется, что многие дизайнеры рассматривают интерфейсы как свое портфолио с примерам анимаций. Если вы не надеетесь получить работу в Pixar, вероятно, можно избегать таких анимационных приемов как Bounce или Ease-in-Out.

Что такое интерфейс? Поверхность раздела; граница раздела; поверхность контакта; стык, область контакта, взаимодействия; средство осуществления взаимного воздействия, взаимосвязи («Википедия»).

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

Движение в интерфейсе

Вот некоторые простые принципы, которые работали хорошо для меня, и которые я рекомендую:

  • Умейте обосновать использование каждой анимации с точки зрения пользы для пользователя. «Это выглядит прелестно» не подходит.
  • Сохраняйте продолжительность анимации меньше или равной 300 мс.
  • Избегайте линейных анимаций. Это делает движения медленными, неинтересными и механическими.
  • 99% анимации должно состоять из простых изингов Ease-In или Ease-Out.
  • Вам редко нужны более экзотические анимации, такие как Spring, Bounce и так далее.

Некоторые примеры UI

Уведомления

Уведомления. Пример 1

Простая анимация, которая длится только 300 мс. Здесь есть очень тонкий эффект наслоения. В результате чего текст сообщения появляется в течение 100 мс после начала появления красной карточки.

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

Быстрое масштабирование

Уведомления. Пример 2

Пример выше использует анимацию, увеличивающуюся от интенсивности:

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

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

Расширяющаяся карточка

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

Пример с расширяющейся карточкой

Я намеренно слегка замедлил показ значка закрытия карточки. И я использовал transition, который анимирует изменение позиции и прозрачности. Это привлекает внимание пользователя к важному элементу пользовательского интерфейса, который он должен заметить, чтобы потом закрыть карточку.

Иерархия важности

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

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

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

Функциональная анимация против эстетической анимации

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

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

Анимация ради анимации является (почти всегда) плохим дизайном.

Помните, что принцип «лучше меньше да лучше» относится к анимации. Функциональная анимация всегда превосходит чисто эстетическую.

Не позволяйте анимации мешать вашим пользователям. Это причина, почему навигационные интерфейсы самолета не использует каких бы то ни было анимаций. Добавление ненужной 300 мс анимации в интерфейс, вероятно, никого не убьет, но это будет раздражать ваших пользователей гораздо больше, чем «восхищать» их.

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Анимация должна показать широкому кругу неподготовленных пользователей, что и откуда появляется, чтобы прослеживалось логическое взаимодействие.
Самолеты - пример неудачный, ведь там специально обучают пользователя (летчика) пользоваться интерфейсом.
А вот интерфейс телевизора, встроенного в подголовник в салонах самолетов - наверняка с анимацией.
Хорошо про анимацию в интерфейсах рассказал Google в Material Design.

анимация как огонь - может греть, а может спалить все

Всё хорошо в меру.

Наркотики, массовые расстрелы, войны, изнасилования, эпидемии, стихийные бедствия, политические убийства, тоже хороши в меру?

0

Я думаю, что золотая середина это Material Design.
Там анимации не слишком много и достаточно для положительного user experience-a

0

*Кажется, что многие дизайнеры рассматривают интерфейсы как свое портфолио с примерам анимаций.*
Именно так часто и происходит.

Спасибо за идею карточек. У кого то есть ещё ещё на примете подобные не банальные решения-рецепты?

Более удачным кажется отъезжание вниз элементов списка при расширении карточки. Еще можно показать что раскрывшаяся карточка немного утоплена по сравнению с элементами списка.(очень легкие тени как в материал дизайн), это создаёт гораздо лучший эффект ориентации пользователя и понимания целостности интерфейса, чем раскрытие карточки над списком

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Илья Максимов

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

Онлайн-ритейлер Amazon показал офлайн-магазин без касс и продавцов
0
Igor Blinowski

Ох уж эти аналитики. По вашим рассчетам выходит, что каждый третий - полицейский, да?
На картинке последняя графа отражает количество полицейских на 100000 жителей.

Онлайн-ритейлер Amazon показал офлайн-магазин без касс и продавцов
0
Данислав Жуков

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

Онлайн-ритейлер Amazon показал офлайн-магазин без касс и продавцов
0
Anton Smelov

"Женщину вынули, автомат поставили" (с)

Онлайн-ритейлер Amazon показал офлайн-магазин без касс и продавцов
0
Antony Sedov

Таким темпом мобильные игры повторят судьбу консольных.

Что такое «налог на Google» и как он изменит индустрию: мнения юристов и игровых разработчиков
0
Показать еще