А что, если оставлять к сообщениям не только анимированные смайлики, но и короткие круглые видео без звука прямо в самом сообщении?
Допустим, я хочу показать эмоцию «че за бред» на определенное сообщение в чате на 10+ человек.
- Я могу написать сообщение «че за бред))» в ответе и это придет оповещением всем из чата и добавит бейджик непрочитанного сообщения. Плюс звучит немного грубо.
- Я могу поставить смайлик, например 🤔, 🥴 или 🤡. Только не один из них не показывает, что я хочу именно сказать. В первых двух нет юмора, а третий может снова обидеть.
- Я могу записать круглое видео, которое будет занимать большую часть экрана и получить уведомление, что меня выкинули из чата.
- Лучшее решение пока -- это прикрепить гифку Хардена:
Только опять же гифка – это сообщение, занимает слишком много места и все получат оповещение и бейджик о непрочитанных. Что не есть круто.
Хочешь скорчить рожу на сообщение или показать удивление, не отвлекая всех остальных в чате и не занимая много места в интерфейсе? Live emotions решает эту проблему.
Самое главное – ролики должны быть короткие максимум на 10 секунд (возможно меньше) и обязательно без звука (круглые видео со звуком раздражают многих, включая меня).
Дальше в статье будет инфа как я рисовал концепт и первый опыт аминирования в Figma (это было больно). Файл на исходник будет в конце статьи.
Идея
Сижу в Твиттере, никого не трогаю. Иногда в ленте мелькают посты на тему UI/UX дизайна, анимации интерфейсов и новые приложения (раньше был дизайнером и важно оставаться в теме).
И тут я вижу это:
Приложение для iMessage (что?), где можно добавлять короткие эмоции и драг-н-дропом прикреплять к сообщению (что?).
Не понятно, как это будет работать у клиента, которому пришло сообщение. Ведь он не установил приложение. Но сам факт того, что любой разработчик может дополнить функционал мессенджера и без бота – как минимум удивляет.
Решил попробовать. Открыл iMessage, скачиваю прилу, отправляю жене сообщение, не отправляется. Иду в настройки и понимаю, почему я никогда не использовал iMessage. Из-за смены симкарты приложение спрашивает как отправлять и принимать сообщения (что?). Можно выбрать почту, esim и симку, которая сейчас вставлена.
Ок, выбираю почту, открываю приложение, пишу сообщение, не отправляется, перехожу в настройки, apple id и почта iMessage не могут быть разными. Закрыл приложение и стер из памяти, что оно вообще существует.
Потом я подумал, что эта тема круто бы смотрелась в Telegram, который делает акцент на реакции для сообщений с помощью стикеров и бла-бла-бла.
Прототип в Figma
Отличная возможность попробовать анимацию в Figma. Я занимался дизайном еще тогда, когда мейстримом был Sketch и анимировали все во Framer (press F), Principle, Flow и чет еще и еще. Особенно жесткие типы переносили все в After Effects и делали то, что потом нереально закодить или придется потратить тонну времени. Ну а тру хай левел пацыки изучали сразу Xcode.
Сейчас же я видел, что у Figma есть нативная возможность анимировать интерфейс прямо в приложении (Sketch press F again) без отдельных плагинов с тайлайнами и прочим.
Главная проблема приложений моего времени был импорт проекта из Sketch в прогу и последующих изменений. Если у тебя анимируется бабл сообщения (например, появляется лайк внутри сообщения), то будь добр загрузить каждый элемент отдельно: бабл сообщения, текст в кривых, текст даты, стелка, аватарка, лайк и тд. То есть тебе приходится заново собирать тот же интерфейс из Sketch по новой. И спрашивается, почему я не могу делать это в том же самом приложении, где и создаю дизайн?
Короче, скачиваем интерфейс Telegram для figma и решаем, где в сообщении будет находится круг с анимацией.
Копипаст из iMessage выглядит приемлемо, но сильно забирает на себя внимание. Правда конструкция смотрится немного нелепо и не ясно как отображать, когда сообщение короткое. Также не понятно как показывать эмоции остальных людей из чата?
А что с сортировкой? Кто выше всех? Тот кто оставил видео последним или первым? И как посмотреть все видео? Доп действие с тапом и выбором видео? Короче полная хрень и пример Cutouts в iMessage работает только для чатов 1 на 1. Плюс там можно выбрать положение на сообщении самому, что круто, но в большом чате приведет к хаосу.
Вспоминаем, что у Telegram есть реализация эмоций в чатах на сообщение через смайлики. Переносим в Figma и ставим видео рядом.
Все придумано и продумано за нас командой Telegram. Это смотрится уже нативно и можно предположить, что такое обновление появится завтра.
Опять же, остается вопрос как группировать видео от 10-15 человек и куда девать видео, если смайликов на посте будет 5-6 штук?
Пишу статью и понимаю, что стоило увеличить круги в анимации на 6px как на картинке выше. Ну да ладно. В итоге, по ширине 4 круга занимают в 2 раза меньше, чем 4 смайлика + аватарка.
«Каждый пиксель имеет значение» -- я уверен, что такой плакат весит в офисе telegram (если он конечно есть). Смотря на их интерфейс по отступам и размерам, я делаю вывод, что они будут экономить пиксели настолько, насколько это возможно.
Возможно, это все дело рук Дурова и до сих пор помню критику редизайна ВК с претензиями к размерам отступов и тд. Тот факт, что интерфейс ощущается органично и я не задумывался про отступы в 3px между сообщениями одного юзера, говорит о том, что Дуров шарит в UX.
Не факт, что кейс выше прошел бы ревью Дурова, так как 4 круглых видео забирают на себя все внимание от сообщения. Я бы защищал идею так, что если сообщение вызывает у людей эмоции, которые нельзя передать анимированным смайлом, а лишь записав короткую gif с фронталки, то надо дать юзерам эту возможность (только с фронталки и без задней камеры). Иначе юзер не дай баже выложит круглое видео (или несколько) со звуком на пол экрана, которые могут затеряться в переписке.
Live эмоции можно выкладывать только в чате и без канала. Кому интересны видео эмоции людей, которых ты не знаешь? Даже, если чат на 100 человек, то можно просто ограничить эмоции до 8, чтобы занимать не более одной строки (или 16, но это надо тестировать на реальном кейсе).
В Cutouts есть фишка с сохранением эмоций и это прикольно на первый взгляд. По сути функция заменяет gif пак или стикер пак. Можно один раз записать разные эмоции и потом тупо выбирать.
Только я бы не хотел видеть эту фичу в телеграме и это одно из решений от заспамленности реакций в сообщении. А конкретно лень юзера. Если ты не готов прямо сейчас записать эмоцию на сообщение, то юзай эмоджи. В этом и суть Live реакции, то есть реальная реакция прямо сейчас.
Зачем делать фичу, которая полностью заменяет анимированные эмоджи, которые можно монетизировать? Функции должны дополнять друг друга и давать выбор юзеру, а не взаимозаменять.
Плюс, от одних и тех же паков со временем тошнит, а тут прила сама заставляет тебя записать уникальную реакцию.
Анимация в Figma
Ок, есть экран с примерным диалогом и пора начать тестировать анимацию. Жизнь слишком коротка, чтобы смотреть туториалы и будем разбираться на ходу.
Сразу же решил делать в стиле Telegram и скачал несколько референсов (это же так называется, когда крадешь чей-то стиль?)
В душе не знаю в чем они пилят анимацию, но это очевидно не запись экрана, так как есть анимация иконки в настройках канала, увеличение аватарок, плавная смена топ бара и тд. Вероятно, это After Effects или Apple Motion и тонна часов боли. Посмотрим, что предложит Figma.
Рисуем сразу квадрат, заголовок, iPhone 14 Pro и вставляем внутрь наш чат.
Дублируем фрейм, нажимаем на Prototype, соединяем оба фрейма и выбираем After delay и Smart Animate. Также есть выбор плавности анимации от линейной до spring.
Понятно, это аналог Flow или Principle здорового человека. Значит нужно держать элементы в обоих экранах, которые будут анимированны, чтобы они не появлялись через непрозрачность и имена слоев должны быть одинаковы.
Чтобы сообщение появлялось с движением, нужно элемент немного передвинуть на 10px вниз на предыдущем кадре.
Тут я сразу сделал первую серьезную ошибку – зафигачил анимацию появления всех сообщений с задержкой и не думал о том как я буду вставлять внутрь промежуточные действия.
Например, постановку лайка на сообщении:
Из-за того, что сообщение Джоуи дальше везде идет с лайками, то пришлось переделывать и сообщение и вставлять во всех остальные экраны, которых 29.
Если у тебя прямые руки, то нужно было сделать так:
1. Удалить все, что делал до этого.
2. Продумать анимацию сразу покадрово, что куда улетает и где появляется. Прорисовать все от руки в блокноте.
3. Сразу выставить все ключевые кадры -- экраны на одном фрейме, аккуратно упорядочить элементы по папкам с норм названиями и поставить прозрачность на 0%, то что надо скрыть. Дублировать только этот фрейм от начала до конца, меняя положение, формы и прозрачность элементов.
И конечно же, я это все понял после того, как все уже сделал.
Допустил ошибку раньше, будь добр поменять все на остальных экранах и это боль. Тем не менее, если все делать аккуратно, то в принципе можно добиться нормальной и плавной анимации с нужными задержками.
Только уровень Telegram будет добиться проще, я думаю, в том же After Effects. Поправьте меня плиз в комментах, если я не прав и есть способы куда проще и лучше.
Прикладываю файл на исходник в Figma.