Функциональная анимация в ux дизайне

Posted on by riasevastopol

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

Непременно, анимация будет представлена ??концепции варфрейма, а после этого принятие проектных ответов либо объяснение их делается все тяжелее. Обстоятельства, такие как “Это будет здорово!” либо “Это модно&на данный момент;, либо “Весьма интересно” – те области, где дизайнер начинает терять собственную силу. Анимация заслуживает значительно лучших позиций в отечественных дизайнерских мыслях.

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

Что такое функциональная анимация?

Функциональная анимация – анимация, которую мы вкладываем в дизайн интерфейса пользователя как часть отечественного процесса.

В отличие от анимации, созданной Disney Studios либо анимации из компьютерных игр, функциональная анимация имеет четкую, логическую цель. Ее целью есть помогать концепции дизайна, поддерживая ответ, которое мы пробуем донести. Функциональная анимация – еще один инструмент в отечественном арсенале UX дизайна.

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

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

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

Ориентация

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

Хорошим примером есть кнопка, которая показывает скрытое содержание. При ее нажатии появляется скрытая панель. И в то время, когда вы закроете панель, она сжимается в кнопку действия.

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

Закрывающаяся анимация оказывает помощь пользователю ассоциировать сжимающуюся панель с кнопкой действия – так, в следующий раз они отыщут в памяти, как открыть панель опять.

Логическая цель: избегайте неожиданных переходов, и направляйте пользователя.

Видео примеры

То же размещение, новое воздействие

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

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

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

Вот где функциональная анимация может оказать помощь.

Логическая цель: выделите функциональное изменение в кнопке действия.

Видео примеры

Повышение

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

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

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

При рассмотрении бессчётных функциональных анимаций данной группы, я увидел неспециализированный шаблон, что при верной реализации, повышает эффективность анимации:

  1. Начальное состояние – начальный перечень элементов.
  2. Любой элемент обозначается неповторимой визуальной подсказкой, к примеру, выделяющимся цветом, знаком, выделенным заглавием либо мелким изображением.
  3. В то время, когда пользователь делает выбор, появляется новая страница и выбранная визуальная подсказка перемещается на видное, главное положение. К примеру, вся страница возможно окрашена неповторимым цветом элемента; знак элемента будет расширяться и расположится в заголовке страницы; наименование элемента увеличиться и покажется в заголовке страницы.
  4. Заметная кнопка выхода, такая как “Отменить”, “Закрыть”, “Назад” либо “х” появляется на новой странице.

Логическая цель: связать уменьшенную картину с детальным обзором.

Видео примеры

Визуальная подсказка

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

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

Логическая цель: подсказка для обнаружения непривычной функциональности либо скрытого действия.

Видео примеры

Видео представлено Michael Martinho

Видео представлено www.buildinamsterdam.com

Видео представлено Dejan Markovic

Выделение

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

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

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

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

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

Логическая цель: привлеките внимание пользователя и затмите переполненный макет.

Видео примеры

Видео предоставлено Monterosa

br /

Визуальная обратная сообщение

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

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

Логическая цель: принимать действия пользователя.

Видео примеры

Видео предоставлено Гугл material design

Состояние совокупности

Это несколько о контроле. Для пользователя управление свидетельствует знать и осознавать текущее состояние совокупности в любую секунду времени.

Функциональная анимация снабжает мониторинг состояния совокупности в реальном времени, что разрешает пользователю скоро осознать, в то время, когда началось воздействие, оставшееся время и в то время, когда совершенно верно оно закончилось. Быть может, самая первая функциональная анимация, которая делала эту роль в HTML веб-сайтах – spinner GIF, что до сих пор употребляется во многих интерфейсах, дабы продемонстрировать исполнение действия.

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

  1. Показывают четкую обратную сообщение, дабы указать, что процесс начат.
  2. Воображают постоянную обратную сообщение в течение процесса.
  3. Оценивают завершение процесса (кстати, тут spinner терпит неудачу).
  4. Показывают четкую обратную сообщение, дабы указать, что процесс завершился.

Узнаваемая анимация в данной группе “потяните вниз, дабы обновить”, которая инициирует процесс обновления контента на мобильных устройствах. Изучите осуществления этих анимаций в разных приложениях, и вы увидите, что анимации, каковые не полностью соответствуют четырем пунктам, изложенным выше – недоработаны. К примеру, неопределенность, появляющаяся из-за отсутствия четкой обратной связи, что процесс закончился, может посоветовать пользователю начать обновление опять.

Логическая цель: придать чувство контроля в линейном ходе.

Видео примеры

br /

Видео предоставлено Yik Yak App

Инструмент маркетинга

Это несколько о маркетинге – тут имеется забавные анимации! Тогда как прошлые восемь групп отечественных анимаций в полной мере логичны, это несколько чувств!

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

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

Логическая цель: помощь бренда компании либо выделение сильных сторон продукта.

Видео примеры

Видео предоставлено Creativedash

Видео предоставлено www.Bellroy.com

Результат

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

Аарон Уолтер из MailChimp пишет об иерархии потребностей пользователей в собственной книге Designing for Emotion. Это похоже на иерархию потребностей Маслоу. Иерархия Уолтера позиционирует функциональную необходимость как базу пирамиды, а необходимость приятных чувств на первом замысле и она применима, лишь в случае если база всецело выполнена.

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

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

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

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

Случайные статьи:

Дизайн-четверг с aic. Principle: Анимация для дизайнера


Подборка похожих статей:

riasevastopol

More Posts