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

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

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

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

Зачем нам всё это?

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

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

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

Сделали стартовые функции: камеру, монтаж и эффекты

Летом мы приобрели редактор 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.

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

Автомонтаж

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

Бьютифайр

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

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

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

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

2727
21 комментарий

Бесполезный и вредный сервис.
Смотрю видео ровно до просмотра рекламы.
В итоге автор контента создает контент, который не досматривают, рекламодатель платит за рекламу, которую не смотрят и только яндекс в плюсе

15
Ответить

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

3
Ответить

Необходимо создать расширение для всех браузеров, автоматически отсекающее Яндекс.Дзен.

8
Ответить

Огонь!🔥🔥🔥

4
Ответить

Теперь статейки вида "Жители Верхней Пышмы были обеспокоены этим природным явлением, но правда повергла в шок даже бывалых скептиков" ещё и с красивым видео, ура! :)

3
Ответить

Россиянам показали новый контент-редактор дзена

2
Ответить

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

2
Ответить