Mobile Mockup
Coloque as capturas do seu app na tela de um celular 3D. Os visitantes rolam cada captura dentro da tela e passam de uma para outra pela barra de navegação ou com as setas do teclado.
Criar um Mobile MockupO que é um Mobile Mockup?
Um projeto Mobile Mockup mostra suas capturas em um celular 3D. Uma imagem é uma tela. Capturas altas não são reduzidas para caber: o visitante rola dentro do display, do mesmo jeito que rolaria o app real. Cinco capturas viram cinco telas, percorridas uma por vez. O celular é um modelo real com a própria malha de display, 645 KB no total, então a Dynamic Island é geometria modelada e não uma forma desenhada sobre a sua captura.
- Uma captura alta por tela, rolando dentro do display do celular
- Roda do mouse, trackpad ou um arrastar vertical sobre o dispositivo para rolar a tela atual
- A barra de navegação e as setas do teclado para passar de uma tela para outra
- Arraste o fundo para girar o celular e ligue os botões de zoom da barra para ler textos pequenos
- Hotspots clicáveis em qualquer lugar da captura, inclusive nas áreas que só aparecem ao rolar
- Um contador de telas que também mostra o título da tela, além da barra de links
- Funciona em celulares e tablets, onde o arrastar substitui a roda do mouse
Melhores casos de uso
Demos de apps
Mostre um app mobile tela por tela sem mandar ninguém para uma loja de aplicativos
Fluxos de onboarding
Um passo por tela, na ordem em que um usuário novo encontraria
Revisão de protótipos
Compartilhe exportações de design com o cliente e deixe ele rolar cada tela inteira
Apresentações para clientes
Apresente a versão mobile dentro de uma proposta ou de um estudo de caso
Portfólios de design mobile
Reúna os apps e sites mobile que você desenhou, um por tela
Visões responsivas
Mostre a versão de celular de um site, ao lado da de desktop ou sozinha
Criando um Mobile Mockup
Passo 1: Envie suas capturas
No editor do projeto, abra a aba Conteúdo e adicione uma imagem por tela:
- Qualquer formato de imagem que seu navegador abra, JPG, PNG e WebP inclusos. Um PDF também serve, e cada página vira uma tela
- Uma imagem é uma tela, então uma captura de altura inteira entra como está, sem recorte
- Envie vários arquivos de uma vez, ou importe um a partir de uma URL
- Um PDF aceita até 200 páginas e 50 MB por arquivo, e os links dentro dele viram hotspots na tela em que estavam
- As capturas são otimizadas automaticamente para carregar rápido
Capture em retrato, perto de 1200px de largura, e deixe a imagem tão alta quanto a tela realmente é. A largura é ajustada ao display e a altura é o que o visitante rola.
Passo 2: Ordene e nomeie as telas
A ordem na aba Conteúdo é a ordem em que os visitantes percorrem:
- Arraste uma tela para movê-la
- Dê um título a cada tela: ele aparece no contador, então o contador precisa ficar ligado para o título ser visto
- Apague a tela que não quiser mais, ou limpe todas de uma vez pelo menu de Conteúdo
- Adicione mais telas a qualquer momento
Passo 3: Ajuste a tela e a rolagem
Defina como o display aparece e como ele se move na aba Configurações:
- Cor do dispositivo: tinge o corpo do celular, sendo o branco o modelo como foi construído
- Fundo da tela: a cor atrás da sua captura
- Brilho, contraste e saturação da tela: os três começam em 1, que é a imagem exatamente como você subiu
- Contador de telas: mostra ou esconde a posição e o título
- Velocidade e amortecimento da rolagem: quanto cada giro da roda avança e com que rapidez ele para
Passo 4: Adicione hotspots
Coloque hotspots sobre uma captura para abrir um link, ir para outra tela ou mostrar uma nota. O hotspot fica ancorado na imagem inteira e não na parte visível, então ele continua na seção a que pertence enquanto o visitante rola. Os dois mockups os desenham no display, e eles continuam clicáveis em celulares, que é como se percorre um fluxo.
Configurações do Mobile Mockup
O display e a rolagem têm seções próprias na aba Configurações. Fundos, barra de links, zoom e rotação usam os mesmos painéis dos outros tipos de projeto.
Cor do dispositivo
Tinge o corpo do celular. Começa em branco puro, que é o modelo exatamente como foi construído, e qualquer outra cor tinge esse acabamento em vez de repintá-lo.
Fundo da tela
A cor pintada atrás da sua captura. Ela também preenche o espaço acima e abaixo quando a imagem é mais curta que o display, então escolha algo próximo do fundo do seu app.
Brilho da tela
Quanto o display parece ligado, de 0,2 a 1,6. Começa em 1, que são exatamente os pixels que você subiu: abaixo disso a tela escurece e acima ela estoura, como um celular no brilho máximo.
Contraste da tela
Aplicado à captura na hora de desenhar, de 0,5 a 2, começando em 1 com a imagem intacta. Suba um pouco quando um design plano perde as bordas no display pequeno.
Saturação da tela
A mesma ideia para a cor, de 0 a 2 e começando em 1. Em 0 a captura fica em escala de cinza, um jeito rápido de mostrar um wireframe sem exportar um.
Contador de telas
Um selo pequeno com o título da tela na frente e a posição depois, por exemplo Preços · 2 / 5, ou só 2 / 5 quando a tela não tem título. É onde os títulos aparecem, então desligar também esconde os títulos, o que faz sentido com uma única captura.
Velocidade da rolagem
Quanto o conteúdo avança a cada giro da roda. Diminua em telas muito longas para o visitante conseguir parar onde quer.
Amortecimento da rolagem
Com que rapidez o conteúdo alcança a roda. Valores baixos freiam suave, valores altos respondem na hora.
Fundo da cena
O cenário atrás do celular: uma cor sólida, um gradiente, um padrão ou uma imagem sua.
Como os visitantes navegam
São dois movimentos separados. O conteúdo se move dentro da tela, e as telas mudam uma por vez. Um não dispara o outro.
Rolar dentro da tela
A roda do mouse, o trackpad ou um arrastar vertical que começa sobre o celular movem a captura atual para cima e para baixo. As setas para cima e para baixo e as teclas Page Up e Page Down fazem o mesmo.
Trocar de tela
Os botões da barra de navegação passam de uma tela para outra, e as setas Esquerda e Direita também, com Home e End indo para a primeira e para a última. Chegar ao fim de uma tela não avança para a próxima, e toda tela abre no topo.
Girar o celular
Um arrastar que começa no fundo gira o dispositivo até 75 graus para a esquerda e para a direita e 40 graus para cima e para baixo, e ao soltar ele volta a ficar de frente. Um arrastar que começa sobre o celular rola em vez de girar.
Zoom
Os botões de zoom aproximam a câmera, que é como o visitante lê os textos pequenos de uma captura. Eles vêm desligados até você ligá-los na aba Menu. A roda sempre rola a captura, ela nunca dá zoom.
O que ele não faz
Parte disso é de propósito e parte ainda não foi construída. De qualquer forma, é melhor saber antes de gravar uma demo:
- Uma página de PDF quase nunca rola em um celular. Ajustada à largura desta tela, a página não alcança a altura dela, então fica centralizada com faixas acima e abaixo. As capturas de comprimento total é que rolam aqui.
- Chegar ao fim de uma tela não passa para a próxima. Trocar de tela é sempre uma ação deliberada.
- Há uma tela no display por vez. As outras não ficam visíveis em volta.
- A seção Tela pinta a carcaça do celular, mas branco puro significa o acabamento de fábrica, então escolha #fefefe para uma carcaça branca.
- Há um único aparelho, um celular topo de linha. Ainda não há outro modelo nem tablet.
Dicas para bons Mobile Mockups
- Exporte uma captura de altura inteira por tela em vez de juntar pedaços
- Capture em retrato: o display é muito mais alto que largo, e uma imagem na horizontal deixa faixas acima e abaixo
- Mantenha todas as capturas na mesma largura para o conteúdo não mudar de tamanho entre telas
- Iguale o fundo da tela ao fundo do seu app para que uma captura curta não fique sobre uma faixa branca
- Nomeie as telas pelo que elas mostram, não Tela 1 e Tela 2
- Coloque os hotspots onde o usuário tocaria no app real
- Reduza a velocidade da rolagem quando a tela for muito longa