Mobile Mockup
Pon las capturas de tu app en la pantalla de un teléfono 3D. Los visitantes desplazan cada captura dentro de la pantalla y pasan de una a otra con la barra de navegación o con las flechas del teclado.
Crear un Mobile Mockup¿Qué es un Mobile Mockup?
Un proyecto de Mobile Mockup muestra tus capturas en un teléfono 3D. Una imagen es una pantalla. Las capturas altas no se reducen para que entren: el visitante las desplaza dentro del display, igual que desplazaría la app real. Si subes cinco capturas, obtienes cinco pantallas que el visitante recorre de a una. El teléfono es un modelo real con su propia malla de display, 645 KB en total, así que la Dynamic Island es geometría modelada y no una forma dibujada encima de tu captura.
- Una captura alta por pantalla, desplazable dentro del display del teléfono
- Rueda del mouse, trackpad o un arrastre vertical sobre el dispositivo para desplazar la pantalla actual
- La barra de navegación y las flechas del teclado para pasar de una pantalla a otra
- Arrastra el fondo para girar el teléfono, y activa los botones de zoom de la barra para leer el texto pequeño
- Hotspots clicables en cualquier parte de la captura, incluidas las zonas a las que hay que bajar
- Un contador de pantallas que también muestra el título de cada una, además de la barra de enlaces
- Funciona en teléfonos y tablets, donde el arrastre reemplaza a la rueda
Mejores casos de uso
Demos de apps
Muestra una app móvil pantalla por pantalla sin mandar a nadie a una tienda de aplicaciones
Flujos de onboarding
Un paso por pantalla, en el orden en que los encontraría alguien que recién llega
Revisión de prototipos
Comparte exportaciones de diseño con un cliente y deja que recorra cada pantalla completa
Presentaciones a clientes
Presenta la versión móvil dentro de una propuesta o un caso de estudio
Portafolios de diseño móvil
Reúne las apps y los sitios móviles que diseñaste, uno por pantalla
Vistas responsive
Muestra la versión de teléfono de un sitio, junto a la de escritorio o por su cuenta
Creando un Mobile Mockup
Paso 1: Sube tus capturas
En el editor del proyecto, abre la pestaña Contenido y agrega una imagen por pantalla:
- Cualquier formato de imagen que abra tu navegador, JPG, PNG y WebP incluidos. Un PDF también sirve, y cada página se convierte en una pantalla
- Una imagen es una pantalla, así que una captura de largo completo entra tal cual, sin recortar
- Sube varios archivos a la vez, o importa uno desde una URL
- Un PDF admite hasta 200 páginas y 50 MB por archivo, y los links que tenga adentro se convierten en hotspots sobre la pantalla en la que estaban
- Las capturas se optimizan automáticamente para cargar rápido
Captura en vertical, cerca de 1200px de ancho, y deja que la imagen sea tan alta como la pantalla realmente es. El ancho se ajusta al display y el alto es lo que desplaza el visitante.
Paso 2: Ordena y nombra las pantallas
El orden en la pestaña Contenido es el orden en que los visitantes las recorren:
- Arrastra una pantalla para moverla
- Ponle un título a cada pantalla: se muestra en el contador, así que el contador tiene que quedar encendido para que se vea
- Elimina la pantalla que ya no quieras, o borra todas de una vez desde el menú de Contenido
- Agrega más pantallas en cualquier momento
Paso 3: Ajusta la pantalla y el desplazamiento
Define cómo se ve el display y cómo se mueve desde la pestaña Configuración:
- Color del dispositivo: tiñe el cuerpo del teléfono, y el blanco es el modelo tal como se construyó
- Fondo de pantalla: el color detrás de tu captura
- Brillo, contraste y saturación de pantalla: los tres arrancan en 1, que es la imagen exactamente como la subiste
- Contador de pantallas: muestra u oculta la posición y el título
- Velocidad y amortiguación del desplazamiento: cuánto avanza cada golpe de rueda y qué tan rápido se detiene
Paso 4: Agrega hotspots
Coloca hotspots sobre una captura para abrir un enlace, saltar a otra pantalla o mostrar una nota. El hotspot se ancla a la imagen completa y no a la parte visible, así que se queda en la sección a la que pertenece mientras el visitante se desplaza. Los dos mockups los dibujan en el display, y se pueden tocar también desde un teléfono, que es la forma en que se recorre un flujo.
Configuración del Mobile Mockup
El display y el desplazamiento tienen sus propias secciones en la pestaña Configuración. Los fondos, la barra de enlaces, el zoom y la rotación usan los mismos paneles que los otros tipos de proyecto.
Color del dispositivo
Tiñe el cuerpo del teléfono. Arranca en blanco puro, que es el modelo exactamente como se construyó, y cualquier otro color tiñe ese acabado en vez de repintarlo.
Fondo de pantalla
El color que se pinta detrás de tu captura. También rellena el espacio de arriba y de abajo cuando la imagen es más corta que el display, así que elige algo cercano al fondo de tu app.
Brillo de pantalla
Qué tan encendido se ve el display, de 0.2 a 1.6. Arranca en 1, que son exactamente los píxeles que subiste: por debajo el display se apaga y por encima se satura, como un teléfono al máximo de brillo.
Contraste de pantalla
Se aplica a la captura al dibujarla, de 0.5 a 2, y arranca en 1 con la imagen sin tocar. Súbelo un poco cuando un diseño plano pierde sus bordes en un display chico.
Saturación de pantalla
La misma idea para el color, de 0 a 2 y arrancando en 1. En 0 la captura se ve en escala de grises, que es una forma rápida de mostrar un wireframe sin exportar uno.
Contador de pantallas
Una insignia pequeña con el título de la pantalla adelante y la posición después, por ejemplo Precios · 2 / 5, o sólo 2 / 5 cuando la pantalla no tiene título. Es donde aparecen los títulos, así que apagarlo también los oculta, que es lo que quieres con una sola captura.
Velocidad de desplazamiento
Cuánto avanza el contenido con cada golpe de rueda. Bájala en pantallas muy largas para que el visitante pueda detenerse donde quiere.
Amortiguación del desplazamiento
Qué tan rápido el contenido alcanza a la rueda. Los valores bajos frenan suave, los altos se sienten inmediatos.
Fondo de la escena
El telón detrás del teléfono: un color sólido, un degradado, un patrón o una imagen tuya.
Cómo navegan los visitantes
Hay dos movimientos separados. El contenido se mueve dentro de la pantalla, y las pantallas cambian de a una. Ninguno dispara al otro.
Desplazarse dentro de la pantalla
La rueda, el trackpad o un arrastre vertical que empieza sobre el teléfono mueven la captura actual hacia arriba y hacia abajo. Las flechas Arriba y Abajo y las teclas Página arriba y Página abajo hacen lo mismo.
Cambiar de pantalla
Los botones de la barra de navegación pasan de una pantalla a otra, y también las flechas Izquierda y Derecha, con Inicio y Fin para saltar a la primera y a la última. Llegar al final de una pantalla no avanza a la siguiente, y cada pantalla abre desde arriba.
Girar el teléfono
Un arrastre que empieza en el fondo gira el dispositivo hasta 75 grados a izquierda y derecha y 40 grados hacia arriba y hacia abajo, y al soltarlo vuelve a quedar de frente. Un arrastre que empieza sobre el teléfono se desplaza en lugar de girar.
Zoom
Los botones de zoom acercan la cámara, que es la forma en que un visitante lee el texto pequeño de una captura. Vienen apagados hasta que los activas en la pestaña Menú. La rueda siempre desplaza la captura, nunca hace zoom.
Lo que no hace
Parte de esto es a propósito y parte todavía no está construida. En cualquier caso conviene saberlo antes de grabar una demo:
- Una página de PDF casi nunca se desplaza en un teléfono. Ajustada al ancho de este display, la página no llega a su altura, así que queda centrada con franjas arriba y abajo. Las capturas de largo completo son las que se desplazan acá.
- Llegar al final de una pantalla no pasa a la siguiente. Cambiar de pantalla siempre es una acción deliberada.
- Hay una sola pantalla en el display a la vez. Las demás no se ven alrededor.
- La sección Pantalla tiñe la carcasa del teléfono, pero el blanco puro significa el acabado de fábrica, así que elige #fefefe para una carcasa blanca.
- Hay un solo equipo, un teléfono de gama alta. Todavía no hay otro modelo ni tablet.
Consejos para buenos Mobile Mockups
- Exporta una captura de largo completo por pantalla en lugar de unir secciones
- Captura en vertical: el display es mucho más alto que ancho, y una imagen horizontal deja franjas arriba y abajo
- Mantén todas las capturas con el mismo ancho para que el contenido no cambie de tamaño entre pantallas
- Iguala el fondo de pantalla al fondo de tu app para que una captura corta no quede sobre una franja blanca
- Nombra las pantallas por lo que muestran, no Pantalla 1 y Pantalla 2
- Pon los hotspots donde el usuario tocaría en la app real
- Baja la velocidad de desplazamiento cuando una pantalla es muy larga