Pular para o conteúdo principal
/Documentação

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 pelo dock ou com as setas do teclado.

Criar um Mobile Mockup
Abrir a versão interativa

O 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 a imagem dentro do display, do mesmo jeito que rolaria o app real. Envie cinco capturas e você tem cinco telas, que o visitante percorre uma por vez.

  • Uma captura alta por tela, rolada dentro do display do celular
  • Roda do mouse, trackpad ou um arrastar vertical sobre o dispositivo para rolar a tela atual
  • O dock 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 do dock para ler textos pequenos
  • Hotspots em qualquer lugar da captura, inclusive nas partes que o visitante só alcança rolando
  • Uma tela ao vivo: cole um link e a página real carrega dentro do display
  • Um contador de telas que também mostra o título da tela, mais um painel de links

Ideal para

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

Arquivos e limites

  • Imagens ou PDFs. Uma imagem é uma tela, e cada página de um PDF vira uma tela.
  • Um PDF pode ter até 200 páginas e até 50 MB. Os links dentro dele viram hotspots nas telas em que estavam: um link da web abre a página, e um link interno do documento leva para aquela tela.
  • As capturas são ajustadas à largura do display. Uma captura muito grande é reduzida na proporção e nunca recortada, então uma captura de altura inteira mantém todo o comprimento.
  • Envie vários arquivos de uma vez, ou use Importar de URL para trazer uma imagem de um endereço da web.
  • Adicione uma tela ao vivo para carregar uma página real da web no display, em vez de uma imagem dela. A página precisa permitir ser incorporada; o editor verifica isso quando você a adiciona.
  • Os envios contam no armazenamento do seu workspace: 50 MB no Free, 10 GB no Pro e 25 GB no Business.

Crie um Mobile Mockup

  1. 1. Envie suas capturas

    Abra a aba Conteúdo e adicione uma captura de altura inteira por tela, na vertical.

    • Deixe cada imagem tão alta quanto a tela realmente é: a largura é ajustada ao display e a altura é o que o visitante rola
    • Ou adicione uma tela ao vivo com o link de uma página

  2. 2. Ordene e nomeie as telas

    Arraste uma tela para movê-la. Dê um título a cada uma: os títulos aparecem no contador de telas, então deixe o contador ligado se quiser que eles sejam vistos.

  3. 3. Adicione hotspots

    Na aba Hotspots, coloque pontos clicáveis sobre uma captura para abrir um link, ir para outra tela, mostrar uma dica ou abrir um pop-up. O hotspot fica preso à imagem inteira, então ele rola junto com a parte da tela a que pertence.

  4. 4. Defina o dispositivo e a tela

    Em Configurações, na sub-aba Geral, escolha a cor do celular, ajuste a tela e regule a rolagem.

  5. 5. Compartilhe

    Salve e depois copie o link ou o código de incorporação na aba Compartilhar.

Configurações

Tudo o que está abaixo fica na aba Configurações do editor, organizado pela sub-aba onde você encontra cada item: Geral, Cena ou Câmera.

Geral

As informações básicas (o título e a descrição do projeto) ficam no topo em todos os tipos. Logo abaixo vêm as configurações do próprio objeto.

Dispositivo

Cor do dispositivo: o branco mantém o acabamento original do celular, e qualquer outra cor substitui a cor do corpo, nunca a da tela.

Tela

Fundo da tela preenche o display atrás da sua captura, e também as faixas acima e abaixo de uma captura curta. Brilho (0,2 a 1,6), contraste (0,5 a 2) e saturação (0 a 2) começam todos em 1, que é a imagem exatamente como foi enviada; saturação 0 mostra a imagem em escala de cinza. Mostrar contador de telas, ligado por padrão, mostra o título e a posição, como Preços · 2 / 5.

Rolagem

Velocidade da rolagem (0,25 a 3, 1 por padrão) é quanto um giro da roda move a captura. Suavização da rolagem (0,02 a 0,5, 0,12 por padrão) é a rapidez com que ela alcança a roda: valores mais altos acompanham a roda de perto, valores mais baixos deslizam até parar.

Cena

O que fica ao redor do objeto, e o acabamento de Realismo sobre todo o quadro.

Fundo

Uma cor sólida, um gradiente ou uma imagem sua (com desfoque opcional), mais um padrão opcional por cima.

Realismo

Grão de filme sobre o quadro (de 0 a 100, 15 por padrão) e quanto dele cai sobre a tela, grão parado ou animado, uma vinheta, a sombra que o celular deixa na superfície (com a escuridão e a suavidade dela), e Reflexo da tela, o quanto o vidro reflete (0 é fosco, 40 por padrão).

Câmera

Onde a vista começa e quanto os visitantes podem movê-la.

Câmera

Zoom inicial, de 0,5 a 2, mas a vista nunca abre tão perto que o dispositivo saia do enquadramento. Zoom mínimo (0,3 a 1) e Zoom máximo (1 a 3) limitam os botões de zoom do dock, por isso só aparecem enquanto esses botões estão ligados. Rotação horizontal (até 75 graus para cada lado) e Inclinação vertical (até 40) apontam a câmera. Arrastar para girar, ligado por padrão, deixa os visitantes girarem o celular arrastando o fundo. Restaurar padrão volta o zoom, os limites e os dois ângulos ao valor inicial, e mantém Arrastar para girar como está.

Hotspots, menu e sons

Ao lado de Arquivos, a aba Conteúdo tem mais três sub-abas: Hotspots, Menu e Sounds.

Hotspots

Os hotspots vão em qualquer lugar de uma captura. Eles ficam presos à imagem inteira, então rolam junto com a tela, e continuam tocáveis no celular, que é como se percorre um fluxo.

Um hotspot pode levar a outra página, abrir um link, mostrar uma dica ou abrir um pop-up. Como funcionam os hotspots

Sounds

Todo tipo de projeto pode ter música de fundo. Adicione faixas em MP3, M4A, WAV, OGG ou FLAC, de até 20 minutos cada. Elas são comprimidas para cerca de 1 MB por minuto e contam no armazenamento do seu workspace. Você pode repetir a lista, ajustar o volume e mostrar um pequeno player ao lado do dock. A reprodução automática começa no primeiro toque ou tecla do visitante, porque os navegadores bloqueiam o som até esse momento.

Filme no Studio

Todo tipo de projeto pode ser filmado no Studio. Abra a aba Studio do projeto, escolha movimentos de câmera feitos para este tipo e transforme o projeto em um vídeo, um GIF, uma imagem estática ou uma página própria para compartilhar. O Studio lê os arquivos e as configurações deste projeto, então o que você define aqui vale lá também. Leia a documentação do Studio · Veja os movimentos de câmera de cada tipo

Limites atuais

  • Uma página de PDF quase nunca rola em um celular: ajustada à largura deste display, ela continua mais baixa que o display, então fica centralizada com faixas acima e abaixo. O que rola aqui são capturas de altura inteira.
  • Chegar ao fim de uma tela não passa para a próxima. Trocar de tela é sempre uma ação deliberada.
  • Há um único modelo de celular. Para um notebook, crie um Desktop Mockup. Não há tablet.
  • Em uma tela ao vivo, os visitantes rolam a página real dentro do display, e os hotspots ficam onde você os colocou em vez de rolar com a página.
  • No Studio, uma tela ao vivo aparece como um fundo de tela liso, porque a página real não pode ser gravada.

Dicas

  • Exporte uma captura de altura inteira por tela em vez de juntar pedaços.
  • Capture na vertical: 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.
  • Coloque os hotspots onde o usuário tocaria no app real.
  • Reduza a velocidade da rolagem quando a tela for muito longa.