Как делать анимации для мобильных приложений
При создании содержимого Animate для мобильных устройств следует придерживаться некоторых основных правил. Например, разработчики содержимого для Animate стараются не использовать графические объекты повышенной сложности, а также лишние промежуточные кадры и эффекты прозрачности.
Дополнительные сложности для разработчиков, создающих содержимое в приложении Flash Lite , связаны с тем, что мобильные устройства сильно различаются по производительности. Если содержимое предназначено для публикации на большом количестве различных устройств, разработчикам иногда приходится создавать его в расчете на устройство с наименьшими возможностями.
Оптимизация мобильного содержимого требует компромиссов. Например, одни методы позволяют улучшить внешний вид содержимого, тогда как другие — повысить производительность. При оценке этих компромиссов приходится неоднократно переходить от проверки содержимого в эмуляторе к проверке на целевом устройстве, и наоборот. Содержимое необходимо просматривать на реальном устройстве, чтобы оценить достоверность цветопередачи, легкость чтения текста, физическое взаимодействие, правильность работы пользовательского интерфейса и другие характеристики реальной работы на мобильном устройстве.
Содержимое, посвященное Flash Lite, неприменимо к Flash CC и более поздним версиям.
При создании анимации для мобильных устройств следует учитывать, что возможности процессоров этих устройств ограниченны. Соблюдение приведенных ниже рекомендаций позволит предотвратить замедление обработки содержимого, созданного в программе Flash Lite .
При создании файла Flash Lite необходимо проверить правильность настройки документа. Хотя файлы Animate поддерживают плавное масштабирование, производительность может падать при работе в рабочей области, размеры которой не являются оригинальными, и необходимости масштабирования файла в проигрывателе. Стремитесь, чтобы размер рабочей области документа совпадал с разрешением целевого устройства. Также выберите в Flash Player правильную версию Flash Lite .
Программа Flash Lite обеспечивает визуализацию векторных изображений с низким, средним и высоким качеством. Чем выше качество визуализации, тем более плавно и точно программа Flash Lite отображает векторные изображения и тем выше будет нагрузка на процессор устройства. Чтобы обеспечить воспроизведение сложной анимации, поэкспериментируйте со сменой параметров качества проигрывателя и тщательно протестируйте SWF-файл. Качество визуализации SWF-файла задается с помощью свойства _quality или команды SetQuality . Допустимыми значениями для свойства _quality являются LOW , MEDIUM и HIGH .
Ограничивайте количество одновременных промежуточных кадров. Уменьшите количество промежуточных кадров или расположите их таким образом, чтобы каждый следующий начинался после окончания предыдущего.
Эффекты прозрачности (альфа-эффекты) следует применять к символам экономно, поскольку они требуют больших вычислительных ресурсов. Особенно следует избегать применения промежуточных кадров, содержащих символы с неполностью прозрачными альфа-уровнями (с прозрачностью менее 100 %).
Не следует использовать визуальные эффекты, требующие больших вычислительных ресурсов, например крупные маски, большое количество движения, альфа-наложение, большое количество градиентов и сложные векторы.
Наиболее эффективные результаты могут получиться в результате экспериментов с сочетаниями промежуточных кадров, анимации ключевых кадров и движения на основе ActionScript.
Для визуализации векторных овалов и окружностей требуется намного больше памяти, чем для визуализации четырехугольников. Кроме того, использование круглых и овальных обводок приводит к значительному увеличению загрузки процессора.
Старайтесь чаще тестировать анимацию на реальных целевых устройствах.
При выводе области анимации программа Animate определяет прямоугольную ограничительную рамку вокруг этой области. Чтобы оптимизировать вывод, нужно сделать эту рамку как можно меньше. Избегайте наложения промежуточных кадров, поскольку Animate воспринимает области слияния как один прямоугольник, что приводит к созданию более крупной общей области. Оптимизировать анимацию можно с помощью функции «Показать область перерисовки» приложения Animate.
Не следует скрывать видеоролики на экране с помощью параметра _alpha = 0 или _visible = false . Если просто сделать видеоролик невидимым или задать для него нулевую альфа-прозрачность, то ролик будет по-прежнему обрабатываться при вычислениях линейной визуализации, что может привести к снижению производительности.
Аналогичным образом, не пытайтесь скрыть видеоролик путем наложения на него других графических объектов. Он все равно будет обрабатываться при вычислениях проигрывателя. Вместо этого следует перемещать видеоролики за пределы рабочей области или удалять их путем вызова функции removeMovieClip .
В приложении Flash Lite предусмотрена визуализация как векторных, так и растровых изображений. У каждого из этих типов изображений есть свои преимущества и недостатки. Решение использовать векторные изображения вместо растровых не всегда очевидно и часто зависит от нескольких факторов.
Векторные изображения компактно представлены в SWF-файлах в виде математических уравнений, а проигрыватель Flash Lite производит их рендеринг во время выполнения. Растровые изображения, наоборот, представляются в виде массивов элементов изображения (пикселей), что требует больше байт данных. Таким образом, использование векторных изображений в файле позволяет уменьшить объем используемой памяти и размер файла.
Кроме того, векторные изображения сохраняют гладкие контуры при масштабировании. Растровые изображения при масштабировании могут становиться угловатыми, и их качество может заметно снижаться.
Для визуализации векторных изображений требуется большая вычислительная мощность по сравнению с растровыми, особенно если речь идет о векторных изображениях с большим количеством сложных фигур и заливки. Следовательно, производительность при работе с файлами может иногда падать, если используется много векторных фигур. Визуализация растровых изображений требует меньше времени обработки, чем векторных, поэтому растровые изображения лучше подходят для некоторых типов файлов, например, для сложных дорожных карт, предназначенных для анимации и прокрутки на мобильном телефоне.
При разработке учитывайте следующие моменты.
Старайтесь не использовать контуры в векторных фигурах. Контуры имеют внутренний и внешний край (заливки имеют только один), поэтому для их визуализации требуется вдвое больше работы.
Визуализация углов проще, чем кривых. По возможности используйте плоские края, особенно в сочетании с очень маленькими векторными фигурами.
Наибольший эффект от оптимизации достигается при использовании таких небольших векторных фигур, как значки. При визуализации сложных значков отдельные детали могут теряться, и работа по их визуализации будет потрачена впустую.
Как правило, небольшие сложные изображения (например, значки) следует делать растровыми, а более крупные и простые — векторными.
Следует импортировать растровые изображения необходимого размера. Не импортируйте большие изображения для последующего масштабирования в приложении Animate, поскольку при этом впустую тратится файловая и оперативная память.
Проигрыватель Flash Lite не поддерживает сглаживание растровых изображений. Качество растровых изображений при масштабировании или повороте ухудшается. Если изображение необходимо масштабировать или поворачивать, постарайтесь сделать его векторным.
Текст в конечном итоге можно представить как чрезвычайно сложную векторную фигуру. Конечно, текст часто бывает крайне важен, поэтому редко удается полностью обойтись без него. При использовании текста старайтесь не применять к нему анимацию и не помещайте его поверх анимации. Постарайтесь сделать текст растровым. Для многострочного динамического текста и текста ввода символ конца текстовой строки не кэшируется. В приложении Animate текст разбивается на строки во время выполнения, а повторное вычисление позиций символов конца строки происходит каждый раз при перерисовывании текстового поля. Вывод статических текстовых полей не вызывает сложностей, поскольку разбивка на строки выполняется предварительно, во время компиляции. При работе с динамическим содержимым невозможно обойтись без динамических текстовых полей, однако, по возможности, вместо них следует использовать статические поля.
Следует как можно меньше использовать прозрачность в PNG-файлах. При перерисовке приложению Animate приходится выполнять вычисления даже для прозрачных частей растрового изображения. Например, при использовании PNG-файла с прозрачным изображением, которое представляет элемент переднего плана, не следует экспортировать прозрачный PNG-файл полноэкранного размера. Вместо этого экспортируйте файл реального размера элемента переднего плана.
Старайтесь группировать растровые слои отдельно от векторных слоев. В приложении Animate для растрового и векторного содержимого используются разные средства визуализации, переключение между которыми занимает определенное время.
При использовании растровых изображений можно установить параметры сжатия изображения (отдельно для каждого изображения или глобально для всех растровых изображений), что позволяет уменьшить размер SWF-файла.
Анимацию в основном создают при помощи сложных программ для компьютера вроде After Effects или Maya. В них получаются максимально качественные ролики, но для работы с ними требуется много практики и знаний.
Animation Desk
В Animation Desk можно добавить анимацию к изображениям, видео, слоям PSD или нарисовать все покадрово с нуля. Здесь есть все базовые инструменты, в том числе набор из 46 кистей и шрифтов, видеоинструкция по раскадровке и красивые штампы, а также несколько карандашей с регулируемой толщиной и прозрачностью линии.
Найдется и много других функций – анимированные фрагменты можно отобразить в виде раскадровки, указать тег или комментарий к каждому кадру, импортировать/экспортировать слои Photoshop и сохранить работу в разных форматах. Для работы доступно до девяти слоев.
RoughAnimator
RoughAnimator подойдет и новичкам и профессионалам. Здесь есть всё, что нужно для создания классической покадровой анимации. Но есть небольшой минус — приложение стоит 5 долларов.
Все элементы интерфейса расположены идеально. Поэтому с приложением довольно легко разобраться. С ходу доступны таймлайн и неограниченное количество слоев, легко регулируются настройки кистей и время экспонирования каждого рисунка, есть функция синхронизации губ персонажа с речью.
Stick Nodes
Stick Nodes позволяет мгновенно создавать мультфильмы на основе схематических рисунков и сохранять их в виде гифок или в формате MP4. Приложение автоматически достраивает промежуточные кадры, делая анимацию более плавной. Виртуальная камера перемещениями и наездами добавляет кинематографичности, а еще здесь есть широкий выбор шейпов и оттенков цветов.
Плюс ко всему на сайте бесплатно выложены тысячи моделей, которые можно редактировать на свой вкус. Отлично подойдет новичкам. В то же время приложение достаточно мощное, чтобы продвинутые пользователи могли продемонстрировать свой талант.
Draw Cartoons
В Draw Cartoons у вас запросто получится создать мультик, контролируя каждый штришок. Можете начать с персонажей и предметов из коллекции приложения, а можете нарисовать собственный мультфильм с нуля. Для работы доступно любое количество слоев, есть возможность озвучки. Готовый проект можно сохранить в формате MP4.
Доступно только для Android.
Stop Motion Studio
С помощью Stop Motion Studio можно создать анимацию в стиле историй про Уоллеса и Громита или прикольных короткометражек Lego на YouTube. За обманчивой простотой интерфейса скрываются мощные инструменты.
PicsArt Animator
С помощью PicsArt Animator можно без труда сделать простую анимацию. Забавные каракули, движущиеся стикеры и гифки делаются за пару секунд – никаких особых знаний не нужно. А возможность дублирования кадров, поддержка множества слоев и контроль скорости позволяют создавать более сложную анимацию. Готовый ролик можно сохранить в GIF или видео.
Toontastic 3D
С помощью этого приложения от Google, дети могут создавать собственные мультфильмы. Делать это в Toontastic 3D очень легко – нужно просто нажать кнопку «запись» и передвигать персонажа по экрану. Среди персонажей есть лихие пираты, коварные злодеи, принцессы, трансформеры и многие другие, которые пробудят детское воображение.
Можно выбрать одну из трех опций: классическая история, короткая история или научный доклад. В каждой будет оригинальная завязка, кульминация и развязка. После того, как будет завершен последний этап, Toontastic 3D всё обработает и покажет созданный мультфильм. Его можно выложить в интернет и показать родственникам.
FlipaClip: Cartoon Animation
В FlipaClip есть всё необходимое для создания набросков, раскадровок и анимации. Можно анимировать несколько слоев, есть таймлайн, режим просмотра кадров, сетка и множество инструментов – кисти, лассо и готовые шейпы. А еще видео можно ротоскопировать и добавить до шести звуковых дорожек.
Если хотите сделать собственный мультфильм, FlipaClip вам определенно поможет. Нарисуйте необходимое количество изображений и приложение автоматически создаст из них мультфильм.
Stick Fighter
Stick Fighter – простенькое приложение для создания такой же простой анимации. Несложными инструментами можно создавать битвы на палках, пистолетах, топорах и ножах. Результат – почти как в флипбуке. Так что, если будете в настроении сочинить покадровую анимацию – попробуйте Stick Fighter!
Animate it
Приложение во многом похоже на Toontastic. Клипы, сцены и персонажи редактируются как угодно. В сцене можно разместить несколько действующих лиц и заставить их двигаться. Персонажи, честно говоря, выглядят странновато и ничего серьезного не сделаешь, но если хотите повеселиться – сгодится в самый раз.
Animation Desk Classic
Интерфейс в Animation Desk Classic устроен в точности как рабочее место аниматора. Всё интуитивно понятно и оформлено под альбом для зарисовок.
Все нужные инструменты выбираются нажатием – заливка, карандаш, перьевая ручка, три вида кистей и ластик. У каждого можно отрегулировать толщину линии, прозрачность и жесткость. Еще здесь можно изменять частоту кадров и накладывать соседние кадры друг на друга. В общем, есть всё, чтобы создавать замечательную анимацию.
Bot3D Editor
Bot3D позволяет создавать трехмерных персонажей, которые умеют говорить и танцевать. Можно одеть свою модель с ног до головы. Функция FaceEditor добавит ей эмоций, а HandEditor заставит руки и ноги двигаться. Можно даже задать движения пальцев, вплоть до едва различимых движений суставов. Есть также опция синхронизации речи в реальном времени: вы говорите в микрофон, а ваш персонаж повторяет ту же мимику.
Сегодня редкое приложение обходится без использования анимаций. Даже самые простые и не сразу заметные пользователю анимированные элементы позволяют буквально «потрогать» приложение.
Качественно выполненная анимация способна определить успех разработки мобильного приложения, выделить его среди конкурентов и привлечь большую армию подписчиков. Это повышает удобство использования и лояльность пользователей. Большинство создателей приложений уже почувствовали новую тенденцию и стараются использовать все её преимущества.
Концепция Material design, представленная Google на конференции Google I/O 2014, продолжает активно развиваться и набирать обороты в дизайне мобильных приложений. В основе material design заложены понятная и правильная физика движения объектов и отзывчивая анимация.
По большому счёту, анимация в приложениях выполняет следующие задачи:
- Обеспечивает обратную связь в ответ на действия пользователя в приложении
- Помогает пользователю освоиться: учит его использовать приложение
- Отображает состояние приложения
Добавление анимации в мобильное приложение – это по-настоящему ювелирная работа. Один неверно сделанный элемент может испортить всё впечатление от пользовательского интерфейса. Для того чтобы анимация правильно решала поставленные задачи, необходимо следовать определенным принципам, которые подскажут, как улучшить UX дизайн мобильного приложения.
Прежде чем приступать к разработке мобильного приложения с анимацией, следует проверить, насколько ваша идея согласуется с основными принципами использования анимации в приложениях. Многие не уделяют этому должного внимания при создании приложений и в результате получают совсем не то, что ожидали.
Проверьте наш чек-лист с основными параметрами правильно сделанной анимации:
1. Анимация должна соответствовать стандартным требованиям ОС, для которой разрабатывается приложение
Для каждой мобильной платформы написаны специальные рекомендации по дизайну и добавлению анимации, чтобы все разработки вписывались в общую концепцию платформы и смотрелись нативно. Обычно их можно легко найти на официальных страницах, например, для iOS и для Android.
Совет от разработчика:
Не надо изобретать велосипед. Пользователи любой из мобильных платформ (и iOS, и Android, и Windows Phone) успели привыкнуть к определенной логике действий, заложенной в устройствах на базе этих платформ. Поэтому начните с решения тех задач анимации, в которых можно использовать привычные пользователю приёмы.
2. Анимация должна быть понятной и интуитивной. Ее цель – помогать пользователю, а не отвлекать его от основного содержания мобильного приложения
Анимация служит для пользователя визуальным подтверждением, что приложение реагирует на команды. Т.е. пользователь должен понимать, как соотносятся его действия с реакцией приложения. Например, пользователь нажал кнопку меню – появляется список.
Если какая-то деталь в интерфейсе приложения будет жить своей жизнью или выполнять нестандартные действия, это может сбивать с толку и даже иногда раздражать. Пользователи знают, как объекты движутся в реальном мире, и подсознательно ожидают увидеть сходное поведение на экране смартфона.
Пример 1:
Однажды, в рамках одного из проектов по мобильной разработке под Android, мы решали задачу открытия отдельных элементов в списке и использовали элегантный ход. Мы анимировали открытие картинок на экране в виде разворота обычной бумажной папки:
Пример 2:
Хорошим примером из нашей практики является приложение Wallet One, разработанное для международного платежного сервиса. Мы реализовали интересную анимацию с распознаванием цифр на банковской карте в виде эффекта крутящегося барабана. Этот пример показывает, как успешно сочетать кастомизированную анимацию с интуитивно понятной:
Совет от разработчика:
Соблюдайте баланс между оригинальными приемами в анимации и реальностью. Авторам приложений часто хочется добавить в интерфейс что-то новое, «своё». Анимация – отличная возможность для этого. С помощью оригинальных анимированных эффектов можно управлять вниманием пользователя, побуждать его к определенным действиям в приложении. Важно не переборщить.
3. Анимация должна быть осмысленной и целенаправленной
Все действия, которые осуществляются с помощью анимированных эффектов, должны быть продуманными. То есть анимацию нужно использовать для целевого перемещения пользователя по приложению: между навигационными элементами, для отображения изменений в приложении при переходе между его различными разделами, для построения иерархии (изображений, музыкальных треков, списков и т.п.).
Используя анимацию, вы переключаете внимание пользователя с одного элемента приложения на другой, вырабатываете у него определенные пользовательские привычки.
Пример:
Не так давно мы выполнили проект по разработке мобильного приложения для подбора бизнес-контактов на международных конференциях. Здесь мы реализовали интересный функционал с анимационным эффектом перелистывания списка, который упрощает навигацию в приложении. Вы можете посмотреть его подробное описание.
Совет от разработчика:
Используйте обдуманные переходы. Не пренебрегайте общепринятой иерархической структурой приложений, которая означает, что пользователи при переходе к подразделам перемещаются внутрь подраздела и обратно. Это можно реализовать с помощью простых анимаций. К примеру, в iOS при переходе к подразделу настроек передвигаешься слева направо, а при возвращении — справа налево. Пользователь усваивает и применяет этот приём перехода в других разделах.
4. Анимация должна быть пластичной и выполняться в едином ритме для всего приложения
Анимационные элементы должны подчиняться общей концепции приложения и быть примерно одинаковыми по скорости. Это значит, что одновременное сочетание плавных и резких движений может негативно сказываться на восприятии приложения.
Вместе с тем, здесь тоже не стоит увлекаться в стремлении свести всю анимацию к одинаковому темпу. Скажем, нажатие кнопки не должно быть столь же плавным, как перелистывание списка подразделов в приложении.
Пример:
Мы разработали мобильное приложение для крупной строительной компании, в которое были включены два оригинальных анимационных эффекта: анимированная загрузка логотипа при входе в приложение и эффект ожидания при переходе по разделам. Оба элемента были выполнены с примерно одинаковой скоростью анимации:
Совет от разработчика:
Следите за временем. Поддерживать единообразие в анимированных действиях поможет тайминг. Настройте частоту смены кадров в каждом действии с примерно равными интервалами. Это позволяет сглаживать анимированные элементы. Взгляд привыкает к единому ритму движения элементов в приложении, и пользователи воспринимают их интуитивно, что к тому же работает в пользу второго правила.
Пользователи смартфонов уже настолько привыкли к анимации в интерфейсе мобильных приложений, что дизайн без анимации кажется им скучным и устаревшим. Поэтому спрос на создание анимированных приложений продолжает расти. Однако авторы приложений далеко не всегда задумываются над тем, как и когда необходимо задействовать анимацию. В этом случае лучше придерживаться принципа «Всё хорошо в меру». Если анимация сделана по правилам, это формирует у подписчиков положительное восприятие пользовательского интерфейса и побуждает их возвращаться к приложению снова и снова.
Подпишитесь
Оставьте адрес, и каждый месяц мы будем высылать свежую статью
о новых трендах в разработке програмного обеспечения.
Главная задача анимации – объяснять логику приложения пользователю.
Анимации в мобильном приложении занимают все более важное место. UI/UX дизайнер Анатолий Нестеров делится своими представлениями об идеальной анимации в приложении.
Вероятно вы слышали выражение «Хороший дизайн виден сразу. Отличный дизайн незаметен». Этот же принцип можно применить к анимациям в мобильных приложениях: действительно, удачная анимация делает приложение удобным и привлекает внимание, но не отвлекает пользователя от самого приложения. Главная задача анимации – объяснять логику приложения пользователю.
Типы анимации в мобильном приложении
Чтобы оптимизировать использование анимаций, вам нужно определить их место и функции внутри вашего приложения. Давайте узнаем, какие типы анимаций существуют.
Визуальный фидбек
Визуальный фидбек крайне важен для любого UI. В физическом мире объекты отвечают на наше взаимодействие с ними. Люди ожидают того же и от элементов приложения. Визуальный фидбек, также как и звуковой и тактильный, дает пользователю чувство уверенности. Визуальный фидбек также служит и одной простой функции: он свидетельствует о том, что ваше приложение работает правильно! Когда иконка увеличивается или «свайпнутые» изображения двигаются в определенном направлении, становится ясно, что приложение «что-то делает», отвечая на ввод информации пользователем. В примере ниже, когда пользователь ставит галочку, что задание выполнено, поле сужается и меняет цвет на зеленый.
Знакомый подход Tinder «свайп-влево-для-лайка-вправо-чтобы-пропустить», тоже является визуальным фидбеком. Мы внедрили эту анимацию в Koloda, нашу открытую библиотеку:
Функциональное изменение
Этот тип анимации в мобильном приложении показывает, как меняется элемент, когда пользователь взаимодействует с ним. Он лучше всего подходит, если вы хотите проиллюстрировать то, как меняются функции элементов. Чаще всего используется в кнопках, иконках и других небольших элементах дизайна.
На первом примере вы можете увидеть кнопку, которая меняется от «гамбургер»-иконки до «Х», что означает, что функция кнопки изменилась.
На втором примере меняется как иконка, так и контент.
Ориентация в пространстве
Большинство мобильных приложений имеют сложную структуру. Задача дизайнера в таком случае – максимально упростить навигацию. Для выполнения этой задачи анимация может быть крайне полезной. Если она покажет где прячется элемент, то в следующий раз пользователю будет проще его найти. На этом примере мы видим меню на панели навигации. Оно переворачивается, когда пользователь нажимает кнопку:
Иерархия элементов и их взаимодействие
Анимация идеально подходит для описания частей интерфейса и иллюстрирования их взаимодействия. Каждый элемент обладает собственным назначением и местом внутри анимации. Например, если кнопка активирует всплывающее меню, то лучше, чтобы меню появлялось из кнопки, а не просто выплывало из какого-то угла экрана: она покажет пользователю результат нажатия. Это поможет пользователю понять, что эти два элемента (кнопка и всплывающее меню) связаны.
Все анимации в мобильном приложении должны иллюстрировать как соединены элементы. Эта иерархия и взаимодействие элементов очень важны для интуитивного интерфейса. В первом примере, где после нажатия на иконку появляется меню, с точки зрения пользователя меню это тот же элемент, только увеличенный.
Во втором примере информация о элементе увеличивается при нажатии, пользователь осознает, что этот тот же элемент, разница только в величине.
Визуальная подсказка
Анимации в мобильном приложении подсказывают как взаимодействовать с элементами. Особенно важно предлагать визуальные подсказки в том случае, когда в приложении есть непредсказуемый паттерн взаимодействия между элементами. В этом примере, когда пользователь открывает блог, таблички с записями появляются по правому краю экрана, и пользователю нужно свайпнуть горизонтально, чтобы их пролистать.
Во втором примере используется похожая техника, но только для иконок соцсетей.
Состояние системы
Внутри вашего приложения всегда происходят некоторые процессы: информация загружается с сервера, производятся вычисления и так далее.
Ваша задача – дать пользователю понять, что ваше приложение не зависло и не сломалось, и проинформировать его о статусе текущего процесса. В идеале, каждый процесс в приложении должен сопровождаться отдельной анимацией. Например, когда происходит запись звука, экран приложения должен показывать динамику звуковой дорожки. Анимированная звуковая волна может показывать громкость звука.
Один из наиболее распространенных примеров анимации этого типа это «потяните чтобы обновить».
Забавные анимации
Забавные анимации могут быть плохими или хорошими. Зачастую они используются бессмысленно, и могут существенно усложнять разработку приложения. Но действительно уникальная анимация может оказаться весьма привлекательной для пользователей и выделить ваше приложение среди других. Это один из тайных инструментов, которые используют дизайнеры для того, чтобы пользователи влюбились в их продукт. Уникальные анимации могут помочь вам создать узнаваемый бренд.
На нашем примере движущиеся круги выглядят очень необычно и привлекают внимание пользователя. Возможность двигать эти кружки по экрану приносит радость и «геймифицирует» процесс. Это легко и забавно.
Я точно уверен, что функция «потяните чтобы обновить», представленная в виде кипящей кастрюльки, не оставит вас равнодушным!
Создавая забавную анимацию нужно помнить о двух вещах: 1) убедитесь, что она не затмевает или скрывает функции приложения; 2) она не должна занимать много времени.
Главные принципы дизайна
Мы рассмотрели основные типы и функции анимации. Для создания действительно эффективных анимаций, помните о 9 принципах, которые изначально сформулированы Уолтом Диснеем, но могут быть применены и к UI дизайну.
1. Материал
Покажите из чего состоит ваш элемент: это что-то легкое или тяжелое, неподвижное или гибкое, плоское или объемное? Дайте пользователям понять, как этот UI элемент будет взаимодействовать с другими.
2. Траектория движения
Вам нужно определить природу движений. Основные принципы диктуют, что неживые механические объекты обычно обладают прямой траекторией движения, а живые имеют гибкую и не такую прямую траекторию. Вам придется решить, какое впечатление должен производить ваш UI, и затем придерживаться этого.
3. Тайминг
Тайминг, вероятно, один из важнейших вопросов при создании анимации. В реальном мире физические объекты не двигаются согласно правилам прямолинейного движения, потому что им нужно время на ускорение и замедление. Используйте кривые, чтобы ваши объекты двигались более естественно.
4. Фокус анимации
Привлеките внимание к контентной области экрана. Например, мигающая иконка предупредить пользователя о том, что ему нужно нажать для просмотра уведомления. Этот тип анимации используется в интерфейсах с большим количеством деталей и элементов, когда нет другого способа выделить определенный элемент.
5. Продолжение действия и наложение
Продолжение действия — это завершающая часть. Объекты обычно не начинают быстро двигаться или останавливаются мгновенно, каждое движение может быть представлено серией небольших действий, где кажая часть объекта движется со своей собственной скоростью. Например, когда вы бросаете мяч, ваша рука еще продолжается двигаться даже после того, как вы его выпустили.
Наложение означает, что второе действие начинается до завершения первого. Это удерживает интерес пользователя, поскольку между действиями нет никакой паузы.
6. Дополнительные действия
Принцип дополнительных действий очень похож на предыдущий. Если коротко, то главная анимация может сопровождаться дополнительными действиями. Они делают дизайн более ярким, но если не уделить им должного внимания, они могут оказаться отвлекающими.
7. Плавное начало и конец
Это фундаментальный принцип дизайна, важный для анимации в целом и UI анимации в мобильной разработке в частности. Объекты в реальном мире не могут начать двигаться или остановиться мгновенно. Каждому из них нужно некоторое время на ускорение и торможение.
Прежде чем анимация проявит себя, дайте пользователю время угадать, что же произойдет.
8. Ритм
Ритм в анимациях выполняет ту же функцию, что в музыке и танцах: он выстраивает движение. Используйте ритм в своих анимациях, чтобы они выглядели более естественно.
9. Преувеличение
Преувеличение часто используется дизайнерами, но оно не может быть легко проиллюстрировано, потому что оно основано на идее преувеличения ожидаемого действия или эффекта.
Читайте также: