💡 Идеи анимаций

Бэклог идей

Анимация переходов между экранами в клиентах

Скелеты в мобильных клиентах

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

Примеры того, что скелетная анимация улучшает UX.

Скелет в ленте новостей

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

Скелет в блоке историй ленты новостей

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

Скелет для результатов поиска

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

Скелет в настройках VK Connect

Состояние нажатия (pressed) кнопок

Сейчас у кнопок состояние pressed обрабатывается просто через Opacity, но в MVK у многих кнопок анимация идёт через Scale: так фидбэк ощущается лучше.

Стрелка на кнопке «Перейти» в историях

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

Польза

Повышаем конверсию в нажатие кнопки и делаем её более заметной в историях.

Улучшить анимацию синих точек

Трубочка на аватарке диалога во время действующего звонка

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

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

Галочка (select) при выборе ячейки в списке

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

Подготовить анимацию галочки селектора

Сделать макет по переносу селектора галочки влево, перед аватаркой

Анимация иконки тортика на аватарке диалога во время дня рождения собеседника

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

Transition. Открытие глобального поиска.

Сейчас в iOS фейд со смещением, из-за чего контент накладывается друг на друга.

Android: без анимации открытия.

Предлагается: анимировать раскрытие поиска и появление фона под него, добавить скелет для контента.

Асинхронная загрузка экрана «Новости». Появление счётчика на колокольчике после скелета ленты.

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

Отображение счётчиков действий в записи, в реальном времени при фокусе на запись

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

Сейчас также есть проблема, что мы не умеем обновлять лайки на вебе (видел в плеере видео), то есть, лайков у видео N, а по ховеру показывает совсем другое в тултипе. Хочется починить этот баг, сделать запрос счётчика по ховеру на количество лайков и тем самым менять значение тут же.

Иконка Прометея (огонька) у записей

Сейчас у нас Прометей загорается на некоторых постах, это почти уникальный и редкий формат в ленте новостей, такие посты живут недолго и хочется повысить им конверсию и добавить «огня». Как идея: думаю, можно анимировать эту иконку (fire) в метках поста, тем самым такой пост будет заметнее в ленте новостей и может привлечь к себе больше внимания, что и важно для таких типов записей и автора.

Splash Screen мобильных клиентов

Анимировать наш обновлённый логотип при открытии приложения.

Splash Screen при открытии сервисов на клиентах

Текущая реализация — (*секретно*).

Движение карточек в горизонтальных каруселях ленты новостей

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

Обложка трека на Android при нажатии Pause

Сейчас такое действие есть на iOS в музыкальном плеере, хочется добавить такое же поведение на Android-клиенте. При паузе трека добавить скейл обложки анимации.

​​Бэклог идей

​​Анимация переходов между экранами в клиентах

​​Скелеты в мобильных клиентах

​​Состояние нажатия (pressed) кнопок

​​Стрелка на кнопке «Перейти» в историях

​​Улучшить анимацию синих точек

​​Трубочка на аватарке диалога во время действующего звонка

​​Галочка (select) при выборе ячейки в списке

​​Анимация иконки тортика на аватарке диалога во время дня рождения собеседника

​​Transition. Открытие глобального поиска.

​​Асинхронная загрузка экрана «Новости». Появление счётчика на колокольчике после скелета ленты.

​​Отображение счётчиков действий в записи, в реальном времени при фокусе на запись

​​Иконка Прометея (огонька) у записей

​​Splash Screen мобильных клиентов

​​Splash Screen при открытии сервисов на клиентах

​​Движение карточек в горизонтальных каруселях ленты новостей

​​Обложка трека на Android при нажатии Pause

​​Подобрать кривую для выезда бокового меню в профиле