Как мы готовили новый видеоредактор «Яндекс.Дзена»

Объясняем в формате дизайн-рассказа.

Привет, меня зовут Андрей Сербуль, я продуктовый дизайнер в команде «Видео» в «Яндекс.Дзене». В августе мы запустили «Ролики» в приложении «Яндекса», а в конце сентября — редактор для коротких видео. Рассказываю, как мы продумывали и готовили новый редактор и что его ждёт в будущем.

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

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

Перед началом работы мы понимали — блогеры не создают видео сразу в редакторе площадки, на которую выкладывают контент. В нём они только добавляют финальные штрихи: например, текст или эффекты. А само видео делают в отдельных видеоредакторах. Чтобы создать по-настоящему удобный инструмент, мы обратились за советом к самим блогерам. Некоторые их идеи мы реализовали в редакторе.

Летом мы приобрели редактор Hypee, который позволяет накладывать визуальные и звуковые эффекты на видео. С ним мы в короткие сроки смогли сделать каркас: макеты Hypee сильно помогли в проектировании базовых экранов и структуры MVP-версии нашего видеоредактора.

Камера

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

Выбор видео

Сейчас готовим к выпуску специфичные механики и мелочи. Например, на Android-версии видео из избранного будут помечаться сердечком в левом углу превью. Пользователю не нужно будет переходить в соответствующую папку в галерее, чтобы выбрать удачный ролик из 10 отснятых. А порядок фрагментов можно будет поменять через drag-and-drop, не сбрасывая отмеченные варианты.

Монтаж

Добавили трим, поворот, реверс, формат. И ещё несколько удобных механик: удаление фрагментов по вертикальному свайпу, изменение порядка через drag-and-drop, стейт при захвате контролла перемотки. В разработке на ближайшее время — возможность изменять скорость фрагментов и вибрация телефона при захвате жёлтых краев, «ушей», трима.

Стартовый экран редактора

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

Меню развёрнуто и автоматически сворачивается через 5 секунд. В свёрнутом состоянии выводятся пять самых востребованных функций. В развёрнутом — фокус переносится: под меню увеличивается насыщенность fade, а к иконкам добавляется текст. После применения любой функции иконка в меню меняется с версии, отрисованной линиями, на залитую.

Стикеры

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

Текст

Ввод и выбор стилистики текста — по классике. Можно менять шрифт, цвет и заливку. Взаимодействовать с текстом после добавления на видео можно так же, как и со стикерами: менять размер, поворачивать, перемещать и устанавливать тайминг для его отображения. Для типографики используем фирменный шрифт Yandex Sans и дополнительные разноплановые шрифты. А для заливки — палитру из фирменного стиля «Яндекс.Дзена».

Эффекты. Пресеты. Коррекция

С этими разделами помог опыт Hypee. Эффекты по умолчанию добавляются на всю дорожку, можно настроить силу и изменить область отображения. Переходы работают также, но имеют ограничение тайминга — от 0,3 до 1 секунды.

Ещё мы добавили пресеты — сочетание эффектов и музыки. Пресеты помогают быстро делать классные видео. Они уже реализованы на iOS-версии.

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

Музыка

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

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

Для всех акцентных элементов, управления камерой и редактора мы выбрали цвета «Яндекса» — желтый и красный.

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

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

При работе над визуалом камеры и редактора мы отталкивались от логотипа Роликов. Команда дизайна создала самодостаточный символ, который будет узнаваемым в коммуникации и продукте.

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

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

Поэтому даже в рамках MVP мы старались сделать анимации интерактивных элементов и «бесшовные» переходы между разделами редактора. Большинство анимаций в черновую прикидывались в Principle — софте для прототипирования анимаций, а затем прорабатывались вместе с разработчиками «наживую».

Камеру и редактор можно найти в приложении «Яндекс» — в режим съёмки можно попасть, если кликнуть на значок камеры в правом верхнем углу в ленте роликов Дзена.

В наших планах — работа над скоростью редактора, библиотекой музыкальных треков, обложками, фирменными стикерами, интерфейсом таймера в iOS-версии, настройкой звука и разрезанием фрагментов в Android.

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

Автомонтаж

Бьютифайр

Запись голоса

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

#дизайн #интерфейс #яндексдзен