Дизайн приложения для видеомонтажа: редизайн экрана редактора, до и после

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

Исправление сохраняет все функции и возвращает место видео. Оно опирается на редактор в приложении Edits от Instagram, и каждое изменение ниже можно скопировать.

Весь экран, до и после

Черновик джуниора

Исправлено

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

Справа экран читается сверху вниз в том порядке, в котором работает автор: выйти или экспортировать, посмотреть кадр, подвинуть плейхед, выбрать клип, применить действие. Превью 390 на 404, текст от 11 до 17 px против 7 до 11 px в черновике, панели вкладок нет.

Что изменилось, в цифрах

Правка 1: сократите верхнюю панель до необходимого

До

После

Стрелка назад, логотип Cutline, название Untitled Project 1 (edited), затем иконки отмены, повтора, помощи и настроек и маленькая оранжевая кнопка EXPORT 1080P. Против простой иконки закрытия, названия Road trip со стрелкой, 1080p и более крупной коралловой кнопки Export.

Панель в черновике вмещает восемь элементов в 26 px высоты, а название проекта сжато логотипом, который никому не нужен внутри собственного редактора. Export самая важная кнопка на экране, и при этом одна из самых маленьких: крошечная таблетка в дальнем углу.

Исправленная панель оставляет четыре вещи: закрыть, название, качество и Export. Export высотой 33 px с одной коралловой заливкой, так что это единственный громкий объект сверху. Стрелка рядом с названием открывает меню проекта, где теперь живут помощь, настройки, зацикливание и апгрейд. Отмена и повтор переехали вниз, к плейхеду, туда, где уже лежит рука.

Правило для повторного использования: верхняя панель отвечает на вопрос «где я и как закончить». Всё остальное прячется за названием.

Правка 2: отдайте видео всю ширину

До

После

Низкий кадр с чёрными полосами с обеих сторон и вертикальным кадром с оранжевым фургоном посередине, шириной 164 px. Против того же кадра на всю ширину, 390 px в ширину и 404 в высоту, с прямыми углами и без элементов управления поверх.

Видеоредактор, который показывает видео мелко, неверно понял собственную работу. В черновике кадр 16:9, а ролик вертикальный, поэтому чёрные полосы съедают больше половины ширины. У кадра ещё есть рамка, скруглённые углы, а поверх картинки нарисованы водяной знак и таблетка с таймкодом.

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

Правило для повторного использования: то, ради чего пользователь пришёл, должно быть самым большим на экране, и ничего не должно быть нарисовано поверх.

Правка 3: показывайте инструменты для выбранного клипа

До

После

Четыре выпадающих списка: Aspect 16:9, Quality 1080p, FPS 30 и Color Rec.709, затем четырнадцать мелких инструментов в двух рядах по семь с подписями 8 px: Trim, Split, Speed, Volume, Filters, Adjust, Crop, Text, Stickers, Effects, Music, Voice, Mask и Rotate, и подпись Clip 2 с Delete, Duplicate, Copy, Replace и Reverse. Против одного плоского ряда из пяти крупных инструментов, Split, Volume, Speed, Effects и Delete, со стрелкой назад слева, уходящего за правый край.

Черновик выставляет все инструменты на экран сразу, относятся они к выбранному или нет. Четырнадцать иконок по 16 px с подписями 8 px трудно читать и ещё труднее попадать, а кнопки клипа лежат отдельной строкой под ними.

У исправления два состояния. Когда клип выбран, один плоский ряд показывает, что можно сделать с этим клипом: Split, Volume, Speed, Effects, Delete и Adjust, причём ряд уходит за край, чтобы было понятно, что его можно свайпнуть. Стрелка слева возвращает к главному ряду с Text, Stickers, Music, Voice, Filters, Crop, Rotate и Mask. Иконки выросли до 22 px жирного начертания, подписи до 12 px.

Ничего не вырезано. Trim теперь жёлтая ручка на самом клипе, свойства клипа лежат за Adjust, а формат, частота кадров и цвет спрятаны за кнопкой качества в верхней панели.

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

Правка 4: сделайте таймлайн читаемым

До

После

Линейка от 00:00 до 00:40, маленькая плёнка из пяти кадров, фиолетовая дорожка, зелёная дорожка и зелёная звуковая волна, ни у одной нет названия, и красный плейхед 1 px. Против линейки с более мелким масштабом, подписанной дорожки Film Grain, коралловой текстовой дорожки Road trip, пурпурной музыкальной дорожки Golden Hour со звуковой волной, плёнки, уходящей за оба края, с жёлтой ручкой и меткой 10.0s на выбранном клипе, и одного белого плейхеда 3 px через все дорожки.

Именно здесь живёт редактор, а черновик обращается с таймлайном как с украшением. Четыре дорожки высотой по 18 px без подписей, так что нельзя понять, где текст, где музыка, а где эффект, не нажав на каждую. Плейхед шириной 1 px, а у плёнки скруглённые миниатюры с промежутками, из-за чего она похожа на ряд стикеров.

У исправленного таймлайна подписанные дорожки: Film Grain, текстовая дорожка Road trip и музыкальная дорожка Golden Hour. Каждая высотой от 24 до 36 px, идёт от края до края без скруглений и с отступом 4 px между ними.

Плёнка высотой 58 px читается как один кусок материала. Выбранный клип получает жёлтую ручку со стрелкой и меткой длительности, а один белый плейхед 3 px пересекает всё.

Время тоже честное. Масштаб 153 pt в секунду, поэтому плейхед стоит чуть дальше 12 секунд, а двухстрочное время показывает 00:12 над 00:48.

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

Мелкие правки

• Нет панели вкладок. Редактор это место, где остаются, поэтому Home, Projects, Editor, Templates и Profile отдали 72 px панели, на которую никто не нажимает во время монтажа.
• Один акцент на одну задачу. Коралловый отмечает Export и текстовую дорожку, жёлтый выбранный клип. Черновик тратит оранжевый, фиолетовый, зелёный и красный на дорожки, которые не говорят, что они такое.
• Простые элементы управления. Кружки за кнопками воспроизведения, отмены и повтора убраны. Простые иконки лучше читаются на тёмном фоне.
• Водяной знак и таблетка таймкода убраны с превью. Время живёт под кадром, а сообщение о водяном знаке переехало в меню проекта вместе со ссылкой на апгрейд.
• Масштаб это щипок. Ползунок масштаба с плюсом и минусом занимал целый ряд, а щипок по таймлайну делает то же самое.
• Перемотка это перетаскивание. Кнопок пропуска нет, потому что перетаскивание таймлайна двигает плейхед.
• Добавление медиа это плюс на плёнке. Он появляется, когда клип не выбран.
• Типографическая шкала. Текст от 11 до 17 px вместо 7 до 11 px, а линейка таймлайна набрана моноширинным шрифтом 11 px, чтобы цифры не прыгали.

Проверьте свой редактор

Скачайте файл Figma

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

Бесплатный файл Figma

Редизайн экрана видеоредактора, до и после

Оба экрана и каждая часть как компонент Figma. Бесплатно, только просмотр, скопируйте в свои черновики.

Открыть в Figma

FAQ

Как проектировать экран мобильного видеоредактора?

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

Насколько большим должно быть превью в приложении для видеомонтажа?

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

Нужна ли видеоредактору панель вкладок?

Обычно нет. Люди, которые монтируют видео, не пытаются уйти, поэтому панель вкладок тратит около 72 px на навигацию, которой они не пользуются. Спрячьте Home, Projects и Templates за названием проекта или кнопкой закрытия.

Как показать инструменты в видеоредакторе без хаоса?

Показывайте только те инструменты, которые относятся к выделенному. Когда клип выбран, хватит ряда Split, Volume, Speed, Effects, Delete и Adjust, а стрелка возвращает к главному ряду Text, Stickers, Music, Voice и Filters.

Как должен выглядеть интерфейс видеотаймлайна?

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

Источники

• Оба экрана наши собственные, спроектированы и измерены в Figma. Приложение Cutline, проект и дорожки выдуманы. Таймлайн повторяет два реальных скриншота с iPhone редактора в приложении Edits от Instagram, в его собственном масштабе 153 pt в секунду.
• Иконки из Phosphor (MIT). Строка состояния нарисована по измеренному реальному скриншоту iPhone.
• Фото с Pexels: Roman Odintsov, Hector Perez, Thang-Nhat Tran, Airam Dato-on и Sokil.
• Впервые опубликовано как карусель в App Brainy.