Хорошо UX дизайнер может легко объяснить логику каждого решения в концепции дизайна.Это включает в себя информационную архитектуру, иерархию содержимого страницы, поток и предположения, сделанные .
Рано или поздно, анимация будет представлена концепция каркасном, а затем принятия проектных решений или объяснения им становится все труднее.Причины, такие как “Это будет здорово!” Или “Это модно” или “интересной” точно области, где дизайн начинает терять свою силу.Анимации заслуживают гораздо лучше позиции в наших конструктивных соображений.Мы должны быть оправданы в определении анимации и объясняя их назначения — только так же, как мы объясняем все остальные элементы в конструкции .
Что такое функциональная Анимация
Функциональная анимация тонкую анимацию, что мы встраивания в дизайне пользовательского интерфейса в рамках нашего процесса .
В отличие от анимации сделанные Disney Studios или анимации из компьютерных игр, функциональный анимация имеет четкую, логическую цель.Их целью является, чтобы служить концепция дизайна, поддерживая решение, мы пытаемся донести.Функциональная анимация еще один инструмент в нашем арсенале дизайна UX .
В идеальном мире, мы должны быть в состоянии проверить функциональную анимацию с хорошо определенным набором логических целей.Если уверены, анимация в нашем проекте следующим логическим цель, то это действует функциональная анимации и ее существование в нашей конструкции, вероятно, оправдано.Но если это не соответствует никакой цели, то это может быть излишним и должны быть пересмотрены .
В прошлом году или около того, во время работы над различными проектами, я собрал семью из девяти логических целей, которые сегодня помогают мне проверить функциональную анимацию.Я понял, что, исследуя четкую анимации, я могу легко вписать его в одну или несколько групп в этой семье .
Она также работает наоборот: Когда анимация не вписывается функциональное назначение, как правило, также чувствует себя неловко или раздражает.Ниже семейные группы я, собранные до сих пор.Я надеюсь, что вы найдете их полезными в подтверждение собственной дизайн анимацию .
Orientation
Направление освещает структуру.В этой группе мы находим анимации, который играет важную роль в нашей навигация, литье свет на информационной архитектуре сайта.Логика этого типа анимации для поддержания чувства пользователя ориентации и помочь пользователю понять изменения, которые только что произошло в макет страницы, то, что вызвало изменение и как инициировать изменение снова позже, если необходимо .
Классическим примером является кнопка, которая включает скрытое содержание.При ее нажатии появляется скрытая панель.И когда вы закроете панель, она сжимается в кнопке действия .
Первый раз, пользователь не может предсказать, взаимодействие, которое вот-вот произойдет.Открытие анимация скрытой панели растущей в размере помогает пользователю пребывание ориентированных и не чувствуют, что они оставили страницу или, что содержание вдруг исчез.Они остаются под контролемвсе, что происходит.Закрытие анимация помогает пользователю связать сокращается панель с кнопкой действия — так, в следующий раз они будут помнить, как, чтобы открыть панель снова .
Логические Цель: Избегайте удивительное переход, и ориентировать пользователя .
Examples
То же местоположение, Нью-Action
Известное правило юзабилити, чтобы быть последовательным в обоих дизайна и содержания сайта.Согласуется сайт предсказуем и, следовательно, можно научиться.Это правило относится и к кнопкам действий, среди прочего .
В некоторых случаях, мы вынуждены разрабатывать кнопку действия, о функциональности изменения при определенных условиях.Обычно мы видим это в конструкциях, где общая площадь ограничена.Таким образом, пользователь, который узнал функциональность кнопки действий, возможно, потребуется, чтобы узнать новые функциональные .
“Сохранить” и кнопки “Редактировать”, вероятно, наиболее распространенным примером переключаемых кнопок.Но это так, потому что легко, в то время как действия противоречивы, они имеют тот же контекст.В других ситуациях, когда эти два действия не имеют отношения непосредственно очевидной, мы сталкиваемся с проблемой юзабилити.Вот где функциональная анимация может помочь .
Логические Цель: Подчеркните функциональный изменение в кнопке действия .
Examples
Увеличить In
Третья семья имеет некоторые сходства с группой ориентации мы видели ранее.В этих анимаций, пользователь выбирает элемент в списке, чтобы увеличить в своем подробном зрения (которая настигает вид списка) и в состоянии вернуться к полному виде списка .
Мы обычно видим это в галереи изображений, карт и элементов селекторов.Пользователь выберет пункт и сразу же увидеть подробную экран, связанный с этой селекции .
Проблема здесь, чтобы убедиться, пользователь чувствует, что они по-прежнему под контролем и оставаться в данном контексте.Функциональная анимация, как правило, обязательным в данной ситуации .
При рассмотрении многочисленных функциональных анимации в этом семейной группы, я заметил, что общий шаблон, при реализации точно, повышает эффективность анимации в:
- Начальное состояние первоначальный список элементов .
- Каждый элемент обозначается уникальным визуального сигнала, например, доминирующего цвета, символ, смелый названии или уменьшенного изображения .
- Когда пользователь делает выбор, новая страница создается и выбирается визуальный сигнал перемещается на видном, доминирующее положение.Например, вся страница может быть окрашен уникальным цветом в котором расположен элемент;Символ элемента будет расширяться и располагаться в заголовке страницы;имя элемента будет получить больше и появляются в заголовке страницы .
- Заметно кнопку действия, чтобы уволить появится в новой странице, такие как “Отменить”, “Закрыть”, “Назад” или “х”.
Логические Цель: Свяжите картинку с подробной зрения .
Examples
Видео Hint
Визуальные подсказки помочь пользователям лучшепонять, как взаимодействовать с интерфейсом продукта.Это особенно необходимо в конструкциях, которые содержат нетрадиционный объект или уникальный метод навигации .
Этот вид функционального анимации легко обнаруживается, когда мы открываем страницу и быстро один раз анимация вдруг срабатывает, что показывает, как определенная функциональность в дизайне работает .
Логические Цель: Совет проявлять нетрадиционный функциональность или скрытый меры .