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 el panel o con las flechas del teclado.
Crear un Mobile Mockup¿Qué es un Mobile Mockup?
Un proyecto 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 una por una.
- 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
- El panel 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 del panel para leer el texto pequeño
- Hotspots en cualquier parte de una captura, incluidas las zonas a las que hay que bajar para llegar
- Una pantalla en vivo: pega un enlace y la página real carga dentro del display
- Un contador de pantallas que también muestra el título de cada una, además de un panel de enlaces
Ideal para
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
Archivos y límites
- Imágenes o PDFs. Una imagen es una pantalla, y cada página de un PDF se convierte en una pantalla.
- Un PDF puede tener hasta 200 páginas y pesar hasta 50 MB. Los enlaces que tenga se convierten en hotspots en las pantallas donde estaban: un enlace web abre la página, y un enlace interno del documento lleva a esa pantalla.
- Las capturas se ajustan al ancho del display. Una captura muy grande se reduce en proporción y nunca se recorta, así que una captura de largo completo conserva todo su largo.
- Sube varios archivos a la vez, o usa Importar desde URL para traer una imagen desde una dirección web.
- Agrega una pantalla en vivo para cargar una página web real en el display en lugar de una imagen de ella. La página tiene que permitir que la inserten; el editor lo comprueba cuando la agregas.
- Lo que subes cuenta para el almacenamiento de tu espacio de trabajo: 50 MB en Free, 10 GB en Pro y 25 GB en Business.
Crea un Mobile Mockup
1. Sube tus capturas
Abre la pestaña Contenido y agrega una captura de largo completo por pantalla, en vertical.
- Deja que cada imagen sea tan alta como la pantalla realmente es: el ancho se ajusta al display y el alto es lo que desplaza el visitante
- O agrega una pantalla en vivo con el enlace a una página
2. Ordena y nombra las pantallas
Arrastra una pantalla para moverla. Ponle un título a cada una: los títulos aparecen en el contador de pantallas, así que deja el contador activado si quieres que se vean.
3. Agrega hotspots
En la pestaña Hotspots, coloca puntos clicables sobre una captura para abrir un enlace, saltar a otra pantalla, mostrar información emergente o abrir una ventana modal. Un hotspot se fija a la imagen completa, así que se desplaza junto con la parte de la pantalla a la que pertenece.
4. Configura el dispositivo y la pantalla
En Configuración, dentro de General, elige el color del teléfono, ajusta la pantalla y regula el desplazamiento.
5. Compártelo
Guarda y luego copia el enlace o el código para insertar desde la pestaña Compartir.
Configuración
Todo lo que sigue está en la pestaña Configuración del editor, ordenado según la subpestaña donde lo encuentras: General, Escena o Cámara.
General
Arriba de todo, en cualquier tipo, está Información básica (el título y la descripción del proyecto). Debajo vienen los ajustes del objeto en sí.
Dispositivo
Color del dispositivo: el blanco conserva el acabado original del teléfono, y cualquier otro color reemplaza el color del cuerpo, nunca el de la pantalla.
Pantalla
Fondo de pantalla llena el display detrás de tu captura, y también las franjas de arriba y de abajo de una captura corta. Brillo (0.2 a 1.6), contraste (0.5 a 2) y saturación (0 a 2) arrancan en 1, que es la imagen exactamente como la subiste; con saturación en 0 se ve en escala de grises. Mostrar contador de pantallas, activado por defecto, muestra el título y la posición, por ejemplo Precios · 2 / 5.
Desplazamiento
Velocidad de desplazamiento (0.25 a 3, 1 por defecto) es cuánto avanza la captura con cada giro de la rueda. Suavizado del desplazamiento (0.02 a 0.5, 0.12 por defecto) es qué tan rápido la alcanza: con valores altos sigue de cerca a la rueda, con valores bajos se desliza hasta frenar.
Escena
Lo que rodea al objeto y el acabado de Realismo sobre todo el cuadro.
Fondo
Un color sólido, un degradado o una imagen propia (con desenfoque opcional), más un patrón opcional encima.
Realismo
Grano de película sobre el cuadro (de 0 a 100, 15 por defecto) y cuánto de ese grano cae sobre la pantalla, grano fijo o animado, una viñeta, la sombra que el teléfono deja sobre la superficie (con su oscuridad y su suavidad) y Reflejo de la pantalla, cuánto refleja el vidrio (0 es mate, 40 por defecto).
Cámara
Desde dónde arranca la vista y cuánto pueden moverla los visitantes.
Cámara
Zoom inicial, de 0.5 a 2, aunque la vista nunca se abre tan cerca que el dispositivo salga del encuadre. Zoom mínimo (0.3 a 1) y Zoom máximo (1 a 3) limitan los botones de zoom del panel, así que solo aparecen mientras esos botones están activados. Rotación horizontal (hasta 75 grados hacia cada lado) e Inclinación vertical (hasta 40) apuntan la cámara. Arrastrar para rotar, activado por defecto, permite a los visitantes girar el teléfono arrastrando el fondo. Restablecer valores devuelve el zoom, sus límites y los dos ángulos a su estado original, y deja Arrastrar para rotar como está.
Hotspots, menú y sonido
Junto a Archivos, la pestaña Contenido tiene tres subpestañas más: Hotspots, Menú y Sounds.
Hotspots
Los hotspots van en cualquier parte de una captura. Se fijan a la imagen completa, así que se desplazan con la pantalla, y se pueden tocar también desde un teléfono, que es como se recorre un flujo.
Un hotspot puede llevar a otra página, abrir un enlace, mostrar información emergente o abrir una ventana modal. Cómo funcionan los hotspots
Sonido
Cualquier tipo de proyecto puede tener música de fondo. Agrega pistas en MP3, M4A, WAV, OGG o FLAC, de hasta 20 minutos cada una. Se comprimen a cerca de 1 MB por minuto y cuentan para el almacenamiento de tu espacio de trabajo. Puedes repetir la lista, ajustar el volumen y mostrar un pequeño reproductor junto al panel. La reproducción automática empieza con el primer toque o la primera tecla del visitante, porque los navegadores bloquean el sonido hasta ese momento.
Fílmalo en Studio
Cualquier tipo de proyecto se puede filmar en Studio. Abre la pestaña Studio del proyecto, elige movimientos de cámara pensados para este tipo y convierte el proyecto en un video, un GIF, una imagen fija o una página propia para compartir. Studio lee los archivos y la configuración de este proyecto, así que lo que ajustes aquí se mantiene. Lee la documentación de Studio · Mira los movimientos de cámara de cada tipo
Límites actuales
- Una página de PDF casi nunca se desplaza en un teléfono: ajustada al ancho de este display, sigue siendo más corta que el display, así que queda centrada con franjas arriba y abajo. Las que se desplazan aquí son las capturas de largo completo.
- Llegar al final de una pantalla no pasa a la siguiente. Cambiar de pantalla siempre es una acción deliberada.
- Hay un solo modelo de teléfono. Para una laptop, crea un Desktop Mockup. No hay tablet.
- En una pantalla en vivo, los visitantes desplazan la página real dentro del display, y los hotspots se quedan donde los pusiste en lugar de desplazarse con la página.
- En Studio, una pantalla en vivo se ve como un fondo de pantalla liso, porque la página real no se puede grabar.
Consejos
- 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.
- Pon los hotspots donde un usuario tocaría en la app real.
- Baja la velocidad de desplazamiento cuando una pantalla es muy larga.