En el proceso de trabajar en el diseño de interfaz de usuario de la versión móvil del sitio o aplicación móvil, probé diferentes formas de presentarlo a los clientes. Hasta ahora he elegido Invision, pero hay varios puntos.



En primer lugar, el costo. Para los profesionales, esto no es un problema, pero para muchos diseñadores novatos, el mínimo de $ 13 por mes es una cantidad bastante decente.

En segundo lugar, por alguna razón, el problema de deslizar el mouse sobre los botones activos aún no se resuelve. En pocas palabras: desplazarse hacia abajo sobre el botón activo funciona como un clic. Y esto es muy inconveniente en interfaces bastante complejas.

Otra opción, Figma, aún no se ha dominado, y el hecho de que se convertirá en un estándar de la industria. Por lo tanto, algunos diseñadores también lo omitirán.

Realizar una presentación del diseño de una aplicación móvil en Axure

La opción más simple y asequible sigue siendo Axure junto con Axshare. Y aquí Invision comienza a carecer de agudeza: los clientes no siempre pueden presentar en detalle el trabajo con la aplicación en sus mentes.

Entonces, comencemos a desarrollar nuestras propias herramientas. Y el primer paso es hacer una plantilla para Axure con el marco de un teléfono móvil condicional. Para hacer esto, necesitamos un marco de teléfono en PNG con un "agujero" en la pantalla y la estructura de las pantallas.

Al principio, todo es simple: colocamos la imagen del teléfono hacia abajo, encima colocamos el Marco en línea en el tamaño del agujero de la pantalla. Pero hay un momento desagradable. Está relacionado con las características del elemento Marco en línea.
Este elemento crea una ventana en el prototipo para cargar diversa información: un marco. En él, puede configurar la salida de otra pantalla desde la estructura o insertar un enlace al sitio.

El problema surge en las barras de desplazamiento. Se pueden mostrar u ocultar. Pero con las barras de desplazamiento ocultas, el rebobinado está desactivado, por lo que las pantallas largas de la aplicación no se muestran en dinámica. No es una orden

Para resolver el problema, utilizamos una técnica de máscara (gracias al crackjack ).

1. Convertir marco en línea a panel dinámico. Encienda la visualización de barras de desplazamiento (si está apagado).
2. Traducimos el marco y el marco del teléfono una vez más al panel dinámico, en el que apagamos las barras de desplazamiento. También cambiamos el tamaño de nuestra máscara a 360x640 para que las barras de desplazamiento del marco no se asoman.

El resto ya es más fácil: en la pantalla principal todavía tenemos el marco del teléfono en un marco y un maniquí. En el marco, cargamos la salida de la siguiente pantalla en la lista, establecemos la navegación y eso es todo. No olvide combinar los elementos de la primera pantalla en un grupo y crear un panel dinámico a partir de él.

El panel en sí se puede alinear en el medio del navegador. En la configuración de Anclar al navegador, marque los parámetros Centro y Superior. Publicamos todo en Axshare y enviamos el enlace al cliente.

Atajo Plantilla lista para Axure

Subí el resultado como un archivo terminado. Puede descargar la plantilla de Axure de forma gratuita aquí .

Punto importante

La plantilla está diseñada para 360 diseños de ancho. Esto se hace a propósito. Los diseños en 320 de ancho parecen demasiado pequeños para la vista en la pantalla de la computadora de escritorio, y los diseños en el tamaño original - 1080 (e incluso 640), por el contrario - demasiado grandes.

PD : No escribiré instrucciones estándar sobre qué y dónde. Quiero dar cosas más prácticas para mejorar el trabajo de los diseñadores de ux / ui.

¡Estaré encantado de responder preguntas y estaré contento con sugerencias para la optimización!