Connect with us

Дизайн и прототипирование

7 типов анимации в мобильном приложении

Главная задача анимации – объяснять логику приложения пользователю.

Ксения

Опубликовано

/

     
     

UI/UX дизайнер Анатолий Нестеров делится своими представлениями об идеальной анимации в приложении.

XPiYKj-0BOA

Вероятно вы слышали выражение «Хороший дизайн виден сразу. Отличный дизайн незаметен». Этот же принцип можно применить к анимациям в мобильных приложениях: действительно, удачная анимация делает приложение удобным и привлекает внимание, но не отвлекает пользователя от самого приложения. Главная задача анимации – объяснять логику приложения пользователю.

Типы анимаций

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

Визуальный фидбек

Визуальный фидбек крайне важен для любого UI. В физическом мире объекты отвечают на наше взаимодействие с ними. Люди ожидают того же и от элементов приложения. Визуальный фидбек, также как и звуковой и тактильный, дает пользователю чувство уверенности. Визуальный фидбек также служит и одной простой функции: он свидетельствует о том, что ваше приложение работает правильно! Когда иконка увеличивается или «свайпнутые» изображения двигаются в определенном направлении, становится ясно, что приложение «что-то делает», отвечая на ввод информации пользователем. В примере ниже, когда пользователь ставит галочку, что задание выполнено, поле сужается и меняет цвет на зеленый.

0-6AKkbmdZdhEE8Dmz

Знакомый подход Tinder «свайп-влево-для-лайка-вправо-чтобы-пропустить», тоже является визуальным фидбеком. Мы внедрили эту анимацию в Koloda, нашу открытую библиотеку:

0-4Cb1fK5HsBhnGpRN

Функциональное изменение

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

На первом примере вы можете увидеть кнопку, которая меняется от «гамбургер»-иконки до «Х», что означает, что функция кнопки изменилась.

0-fx8gbsa77_R_2K2C

На втором примере меняется как иконка, так и контент.

0-sJ8zoaQSBWZHYm_R

Ориентация в пространстве

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

0-NOOs13X8hC5ycbKm

На этом примере мы видим, как снизу экрана появляются дополнительные кнопки – там же, где находятся и другие опции.

0-4nvxPy34QLKLWJtj

Иерархия элементов и их взаимодействие

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

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

0-vXawVUorA2RGNdWu

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

111

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

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

0-w6CIeAO6nFV5o1OT

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

open-uri20150609-11-10hm03q

Состояние системы

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

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

1-Zl3J_h0v0ObL_Y4kuf-Jmw

Один из наиболее распространенных примеров анимации этого типа это «потяните чтобы обновить».

0-n0eT7jVTDnm7vrJ2

Забавные анимации

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

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

0-SpdEq5mrqKsLr8bh

Я точно уверен, что функция «потяните чтобы обновить», представленная в виде кипящей кастрюльки, не оставит вас равнодушным!

0-9EHIu2yDOstN8dXZ

Создавая забавную анимацию нужно помнить о двух вещах: 1) убедитесь, что она не затмевает или скрывает функции приложения; 2) она не должна занимать много времени.

Главные принципы дизайна

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

1. Материал

Покажите из чего состоит ваш элемент: это что-то легкое или тяжелое, неподвижное или гибкое, плоское или объемное? Дайте пользователям понять, как этот UI элемент будет взаимодействовать с другими.

content_Material

2. Траектория движения

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

content_Trajectory

3. Тайминг

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

content_Timing

4. Фокус анимации

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

content_Focus

5. Продолжение действия и наложение

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

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

content_Follow

6. Дополнительные действия

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

content_Second_action

7. Плавное начало и конец

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

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

content_EasyIn-Out

8. Ритм

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

content_Anticipation

9. Преувеличение

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

content_Rhythm

Самое важное:

  • Помните, кто ваша целевая аудитория и создавайте свой прототип как решение их проблем.
  • Убедитесь, что каждый элемент вашей анимации рационален. (Почему он? Почему так? Почему сейчас?)
  • Чтобы выделить свой продукт, стремитесь к естественно выглядящим анимациям, которые напоминают реальные паттерны движения.
  • Консультируйтесь с разработчиками на каждой стадии своего проекта.
  • Не жадничайте – делитесь своими компонентами на GitHub .
Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
1 Comment

1 Comment

  1. Михаил Иванников

    09.03.2016 at 15:45

    Отличная статья!!! Спасибо! Беру на заметку.

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

Hyperion

Hyperion – встраиваемый в iOS-приложения плагин, помогающий контролировать верстку.

Леонид Боголюбов

Опубликовано

/

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

  

 

 

Комментарии
Продолжить чтение

Дизайн и прототипирование

Flawless

Леонид Боголюбов

Опубликовано

/

Flawless – система для сравнения макета и получившегося iOS-приложения.

Фактически это плагин для эмулятора iOS, в котором запускается ваше приложение. Он берет внешний sketch, jpeg, png, tiff или gif и накладывает его (прозрачно поверх или разделяя экран) на реальное приложение.

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

Google исправил бургер и пиво в Android 8.1

В Android 8.1 действительно станет с едой получше – теперь эмодзи бургера в нем соответствует всем канонам.

Леонид Боголюбов

Опубликовано

/

Помните недавнюю историю с эмодзи бургеров? Тогда все еще определяли правильную версию – сыр должен быть над или под котлетой и где по правилам должен находиться салат. Глава Google Сундар Пичаи обещал, дословно, «бросить все» и заняться составлением меню – и вот результат его работы на лицо.

В Android 8.1 с едой действительно станет получше – теперь эмодзи бургера в нем соответствует всем канонам:

Заодно поправят и пиво – раньше оно выглядело как минимум странно:

Теперь заживем!

Emoji: больше, чем смайлики

Комментарии
Продолжить чтение

Дизайн и прототипирование

Как потерять доверие пользователей к продукту и чем это чревато?

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

AppTractor

Опубликовано

/

Автор:

Изображение с сайта Kayako.com

Когда я была маленькая, родители сдавали меня на лето на дачу к бабушке. Дама она была очень строгая и не разрешала мне включать телевизор, потому, что не доверяла ему (или мне :)) Аргумент был простой – «у телевизора даже экран бьет током, возьмешься за вилку – тебя убьет!». Ну как тут поспоришь?

Доверие – либо полное, либо его нет. Ощущением доверия измеряется человеческое счастье. Громко звучит? Тем не менее, так и есть. Человек не может чувствовать себя счастливым, если тревожится, что дверь могла не закрыться, утюг не выключился, будильник не прозвенит, календарь не сообщит о мероприятии, изменения не сохранятся и др.

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

Кривизна, кустарщина

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

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

Страница статистики сервиса товарных рекомендаций Retail Rocket

– Оля, ты – дизайнер, ты это видишь, а нормальным людям на такое плевать!

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

God is in the detail, – народная мудрость

Непонятный нейминг

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

Пример ниже – кусочек «Настроек поведения» CallbackHunter – сервиса колл-трекинга. Не поняла, что означают загадочные цифры и что будет, если я их поменяю. При наведении на знаки вопроса всплывают подсказки, но ясности они не добавляют.

Фрагмент настроек сервиса колл-трекинга CallbackHunter

Например, подсказка у первого пункта Mouse motion speed гласит Average mouse motion speed analysis. Почему оно равно 9.8, осталось для меня тайной, в чем это 9.8 измеряется – тоже. Если вы понимаете что это все значит – напишите в комментариях, пожалуйста.

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

Сообщения об ошибках

Хотела тут недавно купить биткоины через приложение Coinbase. Вместо того, чтобы провести транзакцию оно сообщило мне «It looks like an unknown error occurred while processing the buy…». Гайз, если вы сами не знаете, что за ошибка у вас произошла – как мне вам доверять свои деньги и криптовалютный кошелек? В поддержку они мне, кстати, тоже не ответили :(

Сообщение об ошибке в мобильном клиенте криптовалютной биржи Coinbase

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

Попап ошибки в системе аренды недвижимости RentLinx

Отображение состояний

Если пользователь не понимает, что происходит прямо сейчас и что с этим можно сделать, он будет нервничать.

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

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

Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.

Экран «Спасибо за заказ» в приложении доставки еды Just Eat

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

Интерфейс PlayStation. Иконки с обозначениями кнопок в самом низу экрана.

Статусы заказа и интерактивная карта сервиса доставки Glovo

Защита от дурака

Часто слышу от программистов «А зачем пользователь туда полез? Сам виноват». А вот и не так! Если продукт разрешил пользователю «туда полезть» и накосячить, то виноват продукт, вернее, команда, которая его сделала.

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

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

Функция отмены отправки письма в Gmail

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

Раньше у меня был ноутбук Sharp, у него тоже была кнопка на клавиатуре и она работала мгновенно. Поверьте мне, когда в процессе работы ты случайно промахиваешься мимо Backspace, тыкаешь в Power и теряешь контроль над ноутбуком минут на 10 – это боль.

Платежи и все, что с ними связано

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

На скрине выше форма оплаты в сервисе покупки авиабилетов Southwest Airlines. Выбран радиобатон Credit Card. Но над формой мы видим пункт PayPal, да еще такой заметный с суммой и иконкой. Зачем? К чему он относится? Ну и вообще всего много и как-то кривовато.

Итого

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

Дальше у сервиса есть два пути – либо оправдать ожидания, либо разочаровать пользователя. Каждая нестыковка съедает часть доверия. Если их много – клиент раздражается, начинает чувствовать себя неуверенно, ждать подвоха и сомневаться во всем.

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

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

Источник: https://olgashavrina.com/.

Комментарии
Продолжить чтение

Наша рассылка

Каждому подписавшемуся - "1 час на UI аудит": бесплатный ускоренный курс для разработчиков веб и мобильных приложений!

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

Популярное

X

Спасибо!

Теперь редакторы в курсе.