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

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

2759
просмотров

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

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

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

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

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

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

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

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

Автомонтаж

Бьютифайр

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

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

как войти с телефона и где полная версия

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

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

Как войти с мобильного или компьютера?

Вход в Редактор Яндекс Дзен с мобильного телефона и с компьютера пока возможен только одним способом — через браузер.

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

Итак, чтобы открыть режим редактирования, потребуется:

Перейти на сайт Яндекс.Дзен

• На компьютере в любом браузере открыть https://zen.yandex.ru, или же перейти по кнопке выше.
• Чтобы войти в «Редактор Яндекс Дзен» с телефона, потребуется сделать то же самое — открыть мобильный браузер и перейти на страницу. Но перед этим надо в настройках мобильного браузера поставить флажок «Полная версия».

• Войти в свой профиль Яндекс, если это не произошло автоматически.

• Далее потребуется в правом верхнем угле нажать на кнопку «Профиль» и выбрать «Редактор Дзен» (войти в аккаунт канала без авторизации в профиле не получится).

После входа в режим редактирования пользователь увидит стартовый экран.

Основные возможности Редактора Яндекс Дзен

Стартовый экран состоит из нескольких блоков:

1. Верхняя панель имеет небольшие кнопки «Статистика», «Карма» и «Баланс», а также две крупные кнопки «Добавить публикацию» (пиктограмма в виде плюса) и «Информация о канале».
2. В центральной части экрана в виде плиток расположены черновики. При первом входе у пользователя уже будет один черновик — в таком формате оформлена ознакомительная статья Яндекс о сервисе «Редактор Дзен».
3. Справа наверху можно увидеть кнопку «Профиль», а внизу можно увидеть кнопку для чата с техподдержкой.

После нажатия на плюс («Создать публикацию»), откроется меню с выбором: статья, видео/gif или нарратив.

На самом деле форматов не три, а четыре, есть ещё «Пост», но он должен публиковаться через мобильное приложение. И тут кроется первый подводный камень — не все заявленные возможности Редактора Zen Yandex пока работают.

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

#1 Создание статьи в Редакторе Яндекс Дзен

При создании статьи рабочее пространство состоит из двух полей: для заголовка (до 129 знаков) и для текста. Тут есть подводный камень — странные настройки форматирования при копировании текста, поэтому лучше набирать непосредственно в Редакторе, а для форматирования в окне надо просто выделить нужный кусок текста и выбрать настройки.

Также слева есть кнопка «Вставить картинку», а в правом верхнем углу «Опубликовать».

Советуем вам уделить время для придумывания цепляющего подзаголовка — ведь именно он определяет, заинтересуются читатели материалом или нет.

#2 Создание нарратива в Редакторе Яндекс Дзен

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

Не надо бояться работать в Редакторе Яндекс Дзен — автосохранение работает очень хорошо, поэтому пользователь не потеряет ни одного слова и ни одной настройки.

Дополнительные элементы: оформление

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

#1 Ссылки

В нарративе ссылки добавляются с помощью плюсика справа от блока, а в статье — непосредственно в текст с помощью треугольных скобок слева от текста.

И тут притаился ещё один подводный камень: если в процессе написания статьи добавить линк в текст, то остаток публикации будет выделяться как ссылка. Поэтому все ссылки в статью надо добавлять после того, как весь текст готов.

Также надо учитывать, что Яндекс Дзен разрешает линки на форму для сбора денег, посты в соц. сетях, Яндекс Музыку и Яндекс Карты, какие-либо другие ссылки могут стать причиной блокировки.

#2 Картинки

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

Редактор Дзен предложит добавить ссылку на картинку или загрузить изображение с ПК. Требование к картинкам минимальные — не больше 400*400 пикселей, но при вставке часто появляются дополнительные строки. Изображения можно передвигать в тексте, а также подписывать.

В нарративе требованиям к картинкам другие: имеет значение не размер, а соотношение сторон, рекомендуется 9:14.

Для добавления изображения потребуется:

• Нажать плюсик справа от блока.

• Нажать «Добавить элемент», далее выбрать «Картинка».

• Загрузить картинку с компьютера или указать ссылку.

При нажатии на изображение откроется меню из трёх кнопок:

1. «во всю карточку»;
2. ползунок прозрачности;
3. крестик для удаления.

Используя в Дзен режим редактора, авторам надо учитывать, что читатели видят сначала только плитку с предпросмотром, на которой картинка является важным элементом. По этой причине стоит расположить первую картинку ближе к началу и подобрать так, чтобы привлечь внимание читателей.

#3 Видео

В статью для Яндекс Дзен видеоролик вставляется как ссылка на Youtube или ВКонтакте, для этого потребуется:

• После написания статьи поставить курсор в нужном месте (строка должна быть пустой) и нажать на кнопку «Добавить ссылку» (треугольные скобки слева от текстового поля).

• Вставить ссылку и видео автоматически загрузится.

Для нарративов видеоролик или гифку можно загрузить только с компьютера, при этом ролик должен длиться не дольше 10 секунд и иметь объём не больше 30 Мб. Чтобы добавить ролик в нарратив, потребуется:

• Нажать плюсик справа от нужного экрана.
• Выбрать «Видео или Gif».

• Нажать кнопку «Загрузить» и в проводнике выбрать файл.

• После загрузки можно нажатием на видео вызвать меню, которое содержит три кнопки: «адаптировать под экран», «включить/отключить звук», «удалить».

#4 Списки и эмодзи

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

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

Что делать, если редактор не работает?

Если у пользователя не работает Редактор Yandex Dzen, то в первую очередь стоит перезагрузить браузер.

Если и это не помогло, тогда потребуется обновить или вовсе переустановить браузер. В целом, Редактор Яндекс Дзен работает стабильно и хорошо, сохраняя любые изменения в черновике, главное — разобраться с интерфейсом и функционалом.

Zen — элегантный браузерный текстовый редактор для минималистов

Рассказ

Микс

История

Смешивание

Бывший писатель ТНВ

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

(показать все)

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

Я ужасно делаю заметки. Я настолько плох, что часто открываю черновик письма в Gmail, чтобы записать идеи (которые я, скорее всего, забуду или никогда не вернусь), напоминания и все остальное, что сочту важным. Но я наконец наткнулся на приложение, которое могло бы избавить меня от этой вредной привычки. Войдите в Zen, минималистичный текстовый редактор на основе браузера.

Самое лучшее в этом то, что дзен означает бизнес. Во-первых, он хранит ваши данные только локально — ничего не загружается на удаленный сервер. Кроме того, на нем почти нет беспорядка или необычных функций, которые могли бы отвлечь вас от текущей задачи, но при этом он обладает эстетически приятным дизайном.

Тем не менее, функции, которые у него есть, имеют смысл — например, кнопка в виде капли для изменения цветовой схемы, чтобы она лучше подходила вашим глазам. У него есть пара светлых и темных тем, так что все должно быть в порядке. О, и вы можете делать свои заметки к файлу .txt , когда закончите печатать.

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

Присоединяйтесь к нам на конференции TNW 15 и 16 июня в Амстердаме

Получите скидку 20% на билет прямо сейчас! Ограниченное по времени предложение.

Присоединяйтесь

Вы также можете переключаться между тремя разными шрифтами на тот случай, если шрифт по умолчанию не будет достаточно стимулирующим для вашего письма. В настоящее время редактор поддерживает Serif, Sans Serif и Monospace. Его минималистский подход означает отсутствие индикатора, показывающего, какой шрифт вы используете, но вы можете прибегнуть к функции Inspect в своем браузере, чтобы выяснить это.

Поскольку Zen — это практически веб-сайт, это означает, что вы можете получить к нему доступ из любого браузера без необходимости установки расширений.

«Пару лет назад мы создали Дзен для себя, чтобы легко писать и редактировать тексты [не выходя] из браузера», — пишет один из создателей Дзен Назир Даштиев. «Дзен не является чем-то совершенно уникальным, он вдохновлен такими приложениями, как a5.gg, Zenpen и Writer. Мы объединили функции, которые нам нравятся, а также добавили новые, которых нам не хватало».

Теперь стоит отметить, что лучшие качества Zen также являются его недостатками.

Во-первых, хранение данных локально в вашем браузере означает, что вы не сможете легко получить к ним доступ с других устройств. Для этого вы можете попробовать Evernote или Dropbox Paper, о которых ранее писал мой коллега Абхиманью Гошал.

Проверьте Zen, нажав здесь.

Получайте информационный бюллетень TNW

Получайте самые важные технические новости в свой почтовый ящик каждую неделю.

Также отмечен тегом

Обзор

Focused 2.2: текстовый редактор с полезными инструментами Markdown и режимом Zen, которые помогут вам сфокусироваться

Отзывы

Ранее известное как Typed, есть ли у этого приложения для письма на Mac то, что нужно, чтобы выделиться из толпы?

Кирк МакЭлхерн

Автор, Macworld 19 декабря 2016 г., 22:00 PST

at a Glance

Эксперт.

больше возможностей по более низкой цене

Наш вердикт

Лучшие цены на сегодняшний день: Focused 2.2

Для Mac доступно множество текстовых редакторов для «ориентированного письма». Пару лет назад я просмотрел некоторые из этих инструментов, и
выбрал то, что я считал лучшим. Одним из таких приложений, которого не было в то время, является метко названное
Сосредоточенный (36 долларов). Это приложение начиналось как Typed от Realmac, а в этом году было приобретено компанией Codebots, которая сменила название.

Стандартный набор функций для этого типа минимального текстового редактора. Все они предлагают среду без отвлекающих факторов, полноэкранный режим и, как правило, предлагают поддержку
Уценка. Многие также предлагают статистику документов, и все предлагают несколько форматов экспорта, включая HTML. Некоторые даже идут дальше, пытаясь помочь вам проявить творческий подход, когда вы пишете.

Focused имеет все вышеперечисленное, а также привлекательный дисплей с тремя темами: черный на белом по умолчанию, ночная тема и тема сепии. Как и многие из этих приложений, он предлагает только ограниченное количество шрифтов; есть шесть вариантов, включая шрифты с засечками, без засечек и моноширинные шрифты.

Эффекты Markdown

Некоторые текстовые редакторы отображают только специальные символы, используемые для Markdown, такие как * и #, но некоторые также показывают, как эти символы форматируют текст. Например, Focused показывает, когда вы выделили текст полужирным или курсивом, отображая текст внутри этих управляющих символов в этом формате. Он также выделяет заголовки жирным шрифтом и затемняет ссылки, чтобы они не выделялись.

Вот пример того, как Focused отображает форматирование с использованием Markdown.

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

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

Вот режим предварительного просмотра Focused.

Все в стиле дзен

Отличительной чертой Focused является так называемый «режим дзен». Когда вы входите в режим Zen, приложение разворачивается в полноэкранный режим и начинает воспроизводить звуковую дорожку. Это мягкие, эмбиентные саундтреки, с медленной гитарной (или это кото?) музыкой, или с колокольчиками, или с атмосферными звуками, такими как дождь или ветер. Вы можете выбрать саундтрек, который хотите услышать, в настройках приложения.

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

Я нашел несколько ошибок в Focused. Встроенное форматирование Markdown не работает с Helevetica Neue, а функция отмены в приложении немного шаткая. Если я применю, скажем, полужирный шрифт к какому-то тексту, а затем нажму Command-Z, чтобы отменить эту операцию, жирный шрифт останется, и приложение отменит последний введенный мной текст. Если я выделю текст жирным шрифтом и снова нажму Command-B (который должен выделить его жирным шрифтом), он просто добавит больше звездочек вокруг текста, а не удалит жирное форматирование. Разработчик сказал, что собирается исправить это как можно скорее.

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

This entry was posted in Продвижение