Tutorial de Axure (1): producción de prototipos de alta fidelidad y estructuras alámbricas

Anteriormente aprendimos las habilidades para crear páginas web. De aquí en adelante aprendemos las habilidades de front-end necesarias, que es usar Axure para hacer prototipos. Por un lado, podemos dibujar las páginas que necesitamos con anticipación, lo que puede ahorrar un Mucho dinero cuando desarrollamos tiempo, por otro lado, podemos descubrir problemas del producto brindando experiencia a los usuarios y resolver los problemas antes de que el producto esté en línea, en lugar de gastar mucha energía para mejorar y optimizar continuamente el producto después. va en línea.
Después de este artículo, publicaré un tutorial de JavaScript con notas de estudio para compartir con todos de forma gratuita.

Tipos de prototipos

Estructuras alámbricas

• Produzca soluciones de descripción rápidas y de bajo costo, brindando más espacio para el diseño

Prototipo de alta fidelidad

• Producción que requiere mucho tiempo, alto grado de restauración, efecto de diseño garantizado.

• Elementos de producción

1. Forma y tamaño: siga estrictamente las proporciones y líneas de referencia de la captura de pantalla
2. Color: use color absorbente, preste atención al color degradado
3. Textura: busque objetos de referencia, copie imágenes, intercepte, cubra, etc.
4. Acciones interactivas: cambio de página, rango de respuesta, animación de clic, etc.
5. Efecto de demostración: demostración de teléfono móvil, alojamiento de prototipos, adaptación de pantalla.

• Habilidades de producción

1. Ser capaz de tomar capturas de pantalla, seleccionar objetos de referencia apropiados para cortar y no reinventar la rueda.
2. Utilice motores de búsqueda: iconfont, Baidu

Documento de requisitos

• Más lógica y descripciones comerciales para guiar la investigación y el desarrollo.

Ejemplo de producción

Ejemplo de estructura alámbrica

Representaciones de la interfaz de descubrimiento de WeChat

Habilidades de producción

1. Se debe cargar la imagen original, de lo contrario se distorsionará, si la imagen es demasiado grande, simplemente hazla más pequeña, para que los espacios en muchos lugares desaparezcan.

2. Es mejor establecer el color de fondo en gris (#dddddd) para que el efecto sea más obvio.

3. Aprenda a elegir los gráficos adecuados para construir

4. Si necesita distribuirlo uniformemente, mantenga presionada la tecla Ctrl + clic con el mouse para seleccionar una distribución uniforme horizontal.
   

Ejemplos de prototipos de alta fidelidad

Representación de cómo agregar una función de escucha a WeChat

Habilidades de producción

1. Aprenda a utilizar gráficos divididos para dividir una imagen en dos partes
   
2. Arrastre la imagen, haga un espacio adecuado, insértela en el cuadro y ajústela
3. Encuentra el ícono correcto en iconfont

Agregue funciones interactivas a varias imágenes

pasos interactivos

1. Agregar punto de acceso en el área de clic

2. Para agregar un evento de clic, simplemente seleccione la página a la que desea saltar. Si desea agregar una página de retorno, simplemente seleccione Volver a... en la esquina inferior derecha.

3. Deja que el disco gire

   • registro de captura
     

   • Cubre la parte del disco con un rectángulo.
     

   • Mantenga presionado el pequeño triángulo amarillo y tire directamente hacia la derecha para cubrir el área de registro de la imagen original con la imagen resultante.
     

   • Configure el evento de rotación de clic de la zona activa (rotar) y configure los parámetros como se muestra (establezca ninguno en lineal, es decir, rotación lineal, 1080 son tres círculos)
     

   • Seleccione la página de inicio y haga clic en vista previa en la esquina superior derecha para comenzar a obtener una vista previa.

Demostración del producto