Design de app de edição de vídeo: o redesign de uma tela de editor, antes e depois

Um editor de vídeo tem uma única função: deixar alguém moldar um vídeo enquanto olha para ele. O primeiro rascunho abaixo tem todas as ferramentas que um criador poderia pedir, mas o plano fica pequeno entre barras pretas, quatorze ferramentas minúsculas brigam pelo polegar, as trilhas não têm nome e uma tab bar ocupa espaço numa tela da qual ninguém quer sair.

A correção mantém todas as funções e devolve o espaço ao vídeo. Ela segue o editor do app Edits do Instagram, e cada mudança abaixo é uma que você pode copiar.

A tela inteira, antes e depois

Rascunho júnior

Corrigida

À esquerda, o vídeo é a menor coisa da tela. O plano é uma faixa de 164 px de largura entre barras pretas, e quase todo o resto é controle: quatro dropdowns, quatorze ferramentas, cinco botões, cinco sliders, uma linha de mídia e um banner de upgrade.

À direita, a tela se lê de cima para baixo na ordem em que o criador trabalha: sair ou exportar, olhar o plano, mover o playhead, escolher um clipe, agir sobre ele. A prévia tem 390 por 404, o texto vai de 11 a 17 px contra os 7 a 11 px do rascunho, e não há tab bar.

O que mudou, medido

Correção 1: reduza a barra superior ao necessário

Antes

Depois

Uma seta de voltar, o logotipo Cutline, o nome Untitled Project 1 (editado), depois ícones de desfazer, refazer, ajuda e configurações e um pequeno botão laranja EXPORTAR 1080P. Contra um simples ícone de fechar, o nome Road trip com uma seta, 1080p e um botão Exportar coral maior.

A barra do rascunho tem oito itens em 26 px de altura, e o nome do projeto é espremido por um logotipo que ninguém precisa dentro do próprio editor. Exportar é o botão mais importante da tela, e também um dos menores, uma pílula minúscula no canto extremo.

A barra corrigida mantém quatro coisas: fechar, o nome, a qualidade e Exportar. Exportar tem 33 px de altura com um único preenchimento coral, então é o único objeto barulhento no topo. A seta ao lado do nome abre o menu do projeto, onde agora vivem ajuda, configurações, loop e upgrade. Desfazer e refazer desceram para ficar perto do playhead, onde a mão já está.

Regra para reutilizar: a barra superior responde "onde estou e como termino". Todo o resto vai atrás do nome.

Correção 2: dê ao vídeo a largura inteira

Antes

Depois

Um quadro baixo com barras pretas dos dois lados e um plano vertical de uma van laranja no meio, com 164 px de largura. Contra o mesmo plano preenchendo toda a largura, com 390 px de largura e 404 de altura, cantos retos e nenhum controle por cima.

Um editor de vídeo que mostra o vídeo pequeno entendeu mal o próprio trabalho. No rascunho o quadro é 16:9 e o plano é vertical, então as barras pretas comem mais da metade da largura. O quadro ainda tem borda, cantos arredondados e uma marca d'água e uma pílula de timecode desenhadas sobre a imagem.

A correção deixa a prévia preencher a largura da tela, sem cantos, sem borda e sem nada por cima. Você vê o quadro que está cortando, num tamanho em que dá para julgar foco e enquadramento. O timecode foi para baixo da prévia, e a marca d'água saiu do editor.

Regra para reutilizar: o que o usuário veio mudar deve ser a maior coisa da tela, sem nada pintado por cima.

Correção 3: mostre as ferramentas do clipe escolhido

Antes

Depois

Quatro dropdowns de Proporção 16:9, Qualidade 1080p, FPS 30 e Cor Rec.709, depois quatorze ferramentas pequenas em duas linhas de sete com rótulos de 8 px: Cortar, Dividir, Velocidade, Volume, Filtros, Ajustar, Recortar, Texto, Stickers, Efeitos, Música, Voz, Máscara e Girar, e um rótulo Clipe 2 com Excluir, Duplicar, Copiar, Substituir e Reverter. Contra uma linha plana de cinco ferramentas grandes, Dividir, Volume, Velocidade, Efeitos e Excluir, com uma seta de voltar à esquerda, saindo pela borda direita.

O rascunho coloca todas as ferramentas na tela de uma vez, sirvam ou não para o que você escolheu. Quatorze ícones de 16 px com rótulos de 8 px são muito para ler e um alvo menor para acertar, e os botões do clipe ficam numa linha separada embaixo.

A correção tem dois estados. Com um clipe escolhido, uma linha plana mostra o que você pode fazer com ele: Dividir, Volume, Velocidade, Efeitos, Excluir e Ajustar, com a linha saindo pela borda para você saber que dá para deslizar. A seta à esquerda volta para a linha principal com Texto, Stickers, Música, Voz, Filtros, Recortar, Girar e Máscara. Os ícones crescem para 22 px no peso bold e os rótulos para 12 px.

Nada foi cortado. Cortar agora é a alça amarela no próprio clipe, as propriedades do clipe ficam atrás de Ajustar, e proporção, taxa de quadros e cor ficam atrás do botão de qualidade na barra superior.

Regra para reutilizar: mostre ferramentas para o que está selecionado. Uma ferramenta que não age sobre a seleção é ruído.

Correção 4: deixe a timeline legível

Antes

Depois

Uma régua de 00:00 a 00:40, uma pequena tira de filme com cinco quadros, uma trilha roxa, uma trilha verde e uma forma de onda verde, nenhuma com nome, e um playhead vermelho de 1 px. Contra uma régua com zoom mais fino, uma faixa Film Grain com nome, uma faixa de texto coral chamada Road trip, uma faixa de música magenta chamada Golden Hour com forma de onda, uma tira de filme que sai pelas duas bordas com uma alça amarela e uma etiqueta 10.0s no clipe escolhido, e um playhead branco de 3 px cruzando todas as faixas.

É aqui que um editor vive, e o rascunho trata isso como decoração. As quatro trilhas têm 18 px de altura e nenhum rótulo, então você não sabe qual é texto, qual é música e qual é efeito sem tocar em cada uma. O playhead tem 1 px de largura, e a tira de filme tem miniaturas arredondadas com espaços que a fazem parecer uma fileira de adesivos.

A timeline corrigida tem faixas nomeadas: Film Grain, uma faixa de texto chamada Road trip e uma faixa de música chamada Golden Hour. Cada uma tem de 24 a 36 px de altura e vai de ponta a ponta, sem cantos arredondados e com 4 px entre elas.

A tira de filme tem 58 px de altura e se lê como um único pedaço de filmagem. O clipe escolhido ganha uma alça amarela com uma seta e uma etiqueta de duração, e um playhead branco de 3 px cruza tudo.

O tempo também é honesto. O zoom é de 153 pt por segundo, então o playhead descansa logo depois dos 12 segundos, e o tempo em duas linhas mostra 00:12 sobre 00:48.

Regra para reutilizar: uma faixa sem nome é um mistério. Rotule toda trilha e dê à seleção uma cor bem alta.

As correções menores

• Sem tab bar. Um editor é um lugar onde você fica, então Início, Projetos, Editor, Modelos e Perfil gastavam 72 px numa barra que ninguém toca enquanto corta.
• Um destaque por função. Coral marca Exportar e a faixa de texto, amarelo marca o clipe escolhido. O rascunho gasta laranja, roxo, verde e vermelho em trilhas que não dizem o que são.
• Controles simples. Os círculos atrás de play, desfazer e refazer sumiram. Ícones simples ficam mais limpos sobre fundo escuro.
• Marca d'água e pílula de timecode fora da prévia. O tempo vive embaixo do plano, e a mensagem da marca d'água foi para o menu do projeto com o link de upgrade.
• Zoom é um pinch. O slider de zoom e seus botões de mais e menos ocupavam uma linha inteira, e um pinch na timeline faz o mesmo trabalho.
• Pular é um arrasto. Os botões de pular sumiram porque arrastar a timeline move o playhead.
• Adicionar mídia é um mais na tira. Aparece quando nenhum clipe está escolhido.
• Escala tipográfica. O texto vai de 11 a 17 px em vez de 7 a 11 px, e a régua da timeline usa monoespaçada a 11 px para os números não pularem.

Audite o seu próprio editor

Pegue o arquivo do Figma

O arquivo grátis tem o rascunho júnior, a tela corrigida e cada parte como componente.

Arquivo Figma grátis

Redesign de tela de editor de vídeo, antes e depois

As duas telas e cada parte como componente do Figma. Grátis, somente visualização, duplique para os seus rascunhos.

Abrir no Figma

FAQ

Como deve ser projetada a tela de um editor de vídeo mobile?

Dê à prévia a largura total da tela, mantenha a barra superior em um botão de fechar, o nome do projeto, a qualidade e um botão Exportar, e coloque as ferramentas do clipe escolhido em uma linha plana. Adicione uma timeline com faixas nomeadas e um único playhead.

Qual deve ser o tamanho da prévia em um app de edição de vídeo?

Tão grande quanto a tela permitir, de preferência a largura total, sem cantos e sem nada desenhado por cima. Um plano pequeno entre barras pretas dificulta julgar enquadramento e foco.

Um editor de vídeo deve ter tab bar?

Normalmente não. Quem está cortando um vídeo não quer sair, então uma tab bar gasta cerca de 72 px com uma navegação que não usa. Coloque Início, Projetos e Modelos atrás do nome do projeto ou do botão de fechar.

Como mostrar ferramentas em um editor de vídeo sem poluição?

Mostre só as ferramentas que se aplicam ao que está selecionado. Com um clipe escolhido, uma linha com Dividir, Volume, Velocidade, Efeitos, Excluir e Ajustar basta, e uma seta volta para a linha principal de Texto, Stickers, Música, Voz e Filtros.

Como deve ser a interface de uma timeline de vídeo?

Uma régua com rótulos de tempo, faixas nomeadas para texto, música e efeitos, uma tira de filme de ponta a ponta, uma alça no clipe escolhido e um playhead largo cruzando todas as faixas.

Fontes

• As duas telas são nossas, desenhadas e medidas no Figma. O app, Cutline, o projeto e as trilhas são inventados. A timeline segue duas capturas reais de iPhone do editor do app Edits do Instagram, no zoom original de 153 pt por segundo.
• Os ícones são do Phosphor (MIT). A barra de status foi desenhada a partir de uma captura real de iPhone medida.
• As fotos são do Pexels: Roman Odintsov, Hector Perez, Thang-Nhat Tran, Airam Dato-on e Sokil.
• Publicado originalmente como carrossel no App Brainy.