Полировка анимаций и звука в вашем UWP приложении

Есть множество качественно разработанных приложений. Часто то, что отличает отличное приложение на универсальной платформе Windows (UWP) от просто хорошего — это небольшие штрихи, такие как анимация и звук. В этой публикации будут даны указания на некоторые тонкие нюансы, которые могут помочь вам поднять ваше приложение на следующий уровень. Также мы затронем некоторые из тем, которые уже были охвачены в этой серии публикаций, такие как цвет, навигация, визуальная коммуникация и визуальные подсказки.
Применяя анимацию и звук в вашем приложении, важно не забывать, что эти элементы более не являются факультативными. Современные пользователи приложений ожидают регулярной обратной связи, чтобы им сообщали, что их приложение работает и находится в постоянном движении. Приложение, в котором не хватает визуальных и аудио сигналов часто рассматривается как не реагирующее или заторможенное.

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

Анимация Нужна полировка/доводка Нормально Переборщили
Simple Button Click Сдвиг в цвете или небольшие вариации со светом/тенью Скевоморфическое (воспроизводящее аналог из физического мира) нажатие/отпускание кнопки Специальные эффекты с мелкими частицами или световыми эффектами
Нажатие на карточки и запуск Карточка поднимается с поверхности и показывает лёгкое движение в направлении выбранного действия, а потом переворачивается, чтобы показать результат Карточка увеличивается для отображения содержимого Карточка выполняет эффект, который привлекает внимание к себе, а не к содержимому

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

В видео выше табло использует анимации в приложении с перелистыванием каждой страницы. Когда пользователь перемещается от одной страницы к другой, страницы переворачиваются, как если бы они были в бумажном журнале. Анимации не должны ограничиваться реакциями на действия пользователя. Они могут быть использованы для отправки уведомлений, подтверждений и отображения индикаторов. Например:
— Приложение запускается или закрывается
— Действие производимое приложением начинается или завершается
— Когда получено уведомление, например, сообщение из вашего или другого приложения

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

Как долго должна длиться анимация?
Как и хорошая шутка, анимация — это и о времени и о темпе. Движение, которое длится слишком долго сделает ваших пользователей нетерпеливыми. Движение, которое слишком быстрое, может раздражать или даже подстёгивать пользователей. Цель тонко настроенной анимации найти золотую середину между слишком быстрой и слишком медленной.
К счастью, дизайнеры анимированных движений фактически нашли эту золотую середину. Хорошая анимация или аудио сигнал будет длиться от 150 до 350 миллисекунд, другими словами, около одной шестой до одной трети секунды. Как только вы найдете интервал, который работает в вашем случае, попробуйте использовать его последовательно во всём вашем приложении.

Анимированные переходы
Навигация в приложении акцентируется за счёт использования эффектов перехода. Когда одна страница исчезает, а другая занимает её место — это просто слишком резко. Вместо этого, одна страница должна либо исчезать или плавно соскальзывать, в то время как другая проявляться или наезжать.
Вы уже знаете, что вам нужно, чтобы анимация длилась от 150 мс до 350 мс. Так как переходы фактически объединяю два движения, одно уходящее и одно входящее, полный переход будет длиться от 300 мс до 700 мс. Для того, чтобы ваши переходы были более приятным, вы должны изменять скорость, с которой происходят переходы, добавляя эффект ускорения/замедления.
Ускорение/замедление отражает то, как движение происходит в реальном мире. Объекты обычно не переходят моментально из состояния покоя до постоянной скорости, а затем обратно в состояние покоя. Вместо этого они ускоряются в движении, движение происходит сначала медленно, а затем ускоряется до достижения желаемой скорости. Добавление ускорения в ваши переходы делает анимацию более естественной и органичной.
Есть множество математических формул, отражающих эффекты ускорения. Как и со многими вещами, самый простой подход часто является лучшим. Если вы понимаете разницу между ускорением и замедлением, это большая часть пути к овладению анимациями перехода.

Эффект ускорения (Ease-in) начинается с медленной скорости, а потом происходит ускорение. Это упрощённая схема придания движения объекту.

Замедление (Ease-out) является диаметрально противоположным ускорению (Ease-in). В основе быстрое движение, которое замедляется. Если вы сомневаетесь, замедление должно быть там, где действительно нужно притормозить. Ускорение-замедление (Ease-in Ease-out), как вы уже догадались, представляет собой эффект изменения скорости низкая-высокая-низкая. Он имитирует движение транспортного средства, такого как поезд или автомобиль, и может давать очень насыщенный эффект.

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

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

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

Рекомендации по звуковому оформлению
Как только модели взаимодействия с пользователем проникли в дизайн приложений, звуковые эффекты стали простыми, эффектными и целенаправленными. Нажатие клавиши клавиатуры, включение/выключение устройства, уведомление об электронной почте / текстовом сообщении, обновление приложения. Когда дело доходит до звукового дизайна пользовательского интерфейса, всегда разумно спросить себя что принесёт этот звук в приложение?
В игровом дизайне, например, звуковые эффекты и фоновая музыка помогут создать богатый игровой опыт и рассказать историю. Однако в других типах приложений многочисленные звуковые эффекты могут отвлечь пользователя от выполнения своих задач. Используйте звуковые эффекты благоразумно для приложений, те что подходит к характеру вашего приложения, и убедитесь, что они уместны.
В некоторых случаях, вы можете также рассмотреть вопрос о включении тонкой тактильной обратной связи. Это очевидный вариант для приложений, которые предназначены для спокойной обстановки, но также может быть полезным обеспечение тактильного опыта там, где пользователь в противном случае может что-то упустить. Например, едва уловимый импульс для подтверждения нажатия кнопки, успешного перетаскивания, или даже при появлении чего-то важного в списке чтения. Различные шаблоны тактильного взаимодействия могут быть использованы для передачи различной обратной связи.

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

Для более подробной информации советуем прочитать:
Анимации и переходы
Покадровые анимации в платформе UWP
10 советов для эффективного звукового дизайна
Звук

Начните работу с  Windows Visual Studio!

Перевод оригинальной публикации Polishing Your App with Animations and Audio Cues
Автор: Michael Crump
Перевод: Сергей Урусов

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *