Яндекс Дзен

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

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

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

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

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

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

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

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

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

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

Автомонтаж

Бьютифайр

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

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

0
20 комментариев
Написать комментарий...
Michael Nick

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

Ответить
Развернуть ветку
Shari Minnich

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

Ответить
Развернуть ветку
Юрий Б.

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

Ответить
Развернуть ветку
Татьяна Колесова

Огонь!🔥🔥🔥

Ответить
Развернуть ветку
Рождественский Алексей

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

Ответить
Развернуть ветку
Олег Павлов

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

Ответить
Развернуть ветку
Евгения Евгения

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

Ответить
Развернуть ветку
Gre Li

Дзен и раньше был сомнительной лентой, а видео сделали его вообще непригодным, вдобавок к общему ухудшению качества. Сколько не дизлайкал, всё равно показывал, хотя поначалу скрывались. Если я хочу посмотреть видео, я иду на Ютуб, там рекомендации работают гораздо лучше, хотя тоже не идеально. Лучшее что можно сделать — убрать оттуда видео из Дзена совсем, им там не место.

Ответить
Развернуть ветку
Слабый хот-дог

Тот, кто рисовал Дзену стикеры, знай, что

Ответить
Развернуть ветку
Николай Кузнецов

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

Ответить
Развернуть ветку
Скрипач не нужен

У Яндекса есть все шансы сделать аналог тиктоке или ютьюба из дзена. Жж он уже победил

Ответить
Развернуть ветку
Николай Кузнецов

Дзенну до ЖЖ, как до Луны, другой вопрос аудитория ЖЖ подразбежалась по фейсбукам и телеграмам.

Ответить
Развернуть ветку
Viktor Mann
Ответить
Развернуть ветку
Максим Фоменко

Верим!

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Миша Магадан
как мы продумывали и готовили новый редактор

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

Ответить
Развернуть ветку
Евгений Смирнов

Дзен = спам, мусор, желтуха, алчность

Ответить
Развернуть ветку
Serge Demichev

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Serge Demichev

Так в этом и смысл, а потом Яндекс разработает цифровую систему слежки и наказаний или рейтинга, как в Чёрном зеркале) А на условном Нюрнбергском процессе будут говорить: «Но это не мы, мы просто хотели сделать мир лучше», как те модели из конкурса Мисс 2***

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Тим Иванов

Крутота

Ответить
Развернуть ветку
Читать все 20 комментариев
null