¿Cómo crea Axure un prototipo de producto Taobao con efecto de vista previa ampliada?
El Pasos para que Axure cree un prototipo con efecto de vista previa ampliada de las imágenes de productos Taobao:
(1) Prepare los materiales. Tomando a Taobao como ejemplo, este artículo ha preparado tres imágenes para mostrar, con el margen izquierdo establecido en 50 y el tamaño de la imagen establecido en 500 * 500. La imagen pequeña en la esquina inferior izquierda tiene un tamaño reducido de tres imágenes de 150*150. La página de diseño específica es la siguiente.
(2) Convierta las tres imágenes grandes de la izquierda en un panel dinámico, asígnele el nombre "Panel izquierdo 1", establezca tres estados, una imagen para cada estado, el orden de las imágenes debe ser el mismo como el de la esquina inferior izquierda. El orden de las miniaturas es el mismo. La situación específica es la siguiente
(3) Cree un área de vista previa, extraiga un componente rectangular y asígnele el nombre "Área de vista previa", establezca el tamaño en 200*200 y rellénelo con un color. Ajusta la transparencia al 50% y colócala en la imagen grande de la izquierda.
Conviértalo en un panel dinámico junto con el panel dinámico del panel izquierdo 1 y asígnele el nombre "panel izquierdo 2". Después de ingresar a este estado, el área de vista previa del marco rectangular se establece como oculta.
(4) Cree contenido de imagen en el área ampliada del área de vista previa, luego abra un panel dinámico llamado "Panel derecho 1", establezca tres estados y coloque una de las tres imágenes en cada uno. estado, el orden es el mismo que el de la imagen pequeña anterior en la esquina inferior izquierda. Haga clic derecho en el panel para configurar Contenido adaptable.
Puntos clave: establezca el tamaño de la foto en cada estado, porque el área ampliada muestra la imagen ampliada del área de vista previa, es decir, tamaño del cuadro de vista previa izquierda/tamaño de imagen izquierda = tamaño del panel derecho/derecha tamaño de imagen, imagen derecha El tamaño es 1250 * 1250
(5) Haga un área de visualización ampliada, extraiga un componente rectangular y asígnele el nombre "panel derecho 2", establezca el tamaño en 500*500 y conviértalo en un panel dinámico. Coloque el panel dinámico "Panel derecho 1" anterior en el panel dinámico "Panel derecho 2" y colóquelo en el lado derecho correspondiente al panel izquierdo. Establecido como oculto de forma predeterminada.
(6) Además, necesitamos un panel dinámico. Extraiga un panel dinámico y asígnele el nombre "Estado de bucle" y establezca al menos dos estados. Asegúrese de que nuestras acciones puedan ejecutarse. Colócalo como quieras. Lo puse en el margen izquierdo.
(7) Una vez preparados todos los materiales, estamos listos para ingresar al proceso de producción interactivo. Imagine el efecto mencionado en mi mapa mental anterior. Primero realice el primer efecto, es decir, haga clic en las tres imágenes pequeñas de la izquierda "Panel izquierdo 2" para mostrar el contenido de la imagen grande correspondiente al "Panel izquierdo 1". y "El contenido correspondiente a 2" en el panel derecho se mostrará en el área ampliada.
(8) A continuación, realice el efecto interactivo después del segundo movimiento del mouse.
Es decir, cuando el mouse ingresa a la imagen grande, se muestran el área de vista previa y el área de ampliación, y cuando se aleja el mouse, el área de vista previa y el área de ampliación se ocultan. Haga clic en "Panel izquierdo 2" para configurar la interacción cuando el mouse entra y sale. Anteriormente, habíamos configurado ambos en un estado oculto y obtuvimos una vista previa de los efectos de depuración cuando todo estuvo hecho.
(9) A continuación, ingrese el tercer efecto más importante, que es mostrar el área de vista previa al ingresar al panel izquierdo y mostrar el efecto de ampliación de la imagen del área de vista previa en el área de amplificación. Dejemos que el panel dinámico cree un "estado de bucle" antes de ejecutarse como se muestra a continuación.
(10) A continuación, establezca el "estado de bucle" del panel dinámico e interactúe cuando el estado cambie. En este momento, debes verlo en dos pasos. Primero implementemos el efecto de que el área de vista previa en el panel izquierdo puede moverse cuando cambia el estado, agreguemos una interacción y seleccionemos "Cuando cambie el estado".
(11) A continuación, cuando cambie el estado, agregue interacción y seleccione interacción móvil. Esto garantizará que el área de vista previa se mueva dentro de la imagen grande, por lo que es necesario establecer el límite. El límite es el rango de tamaño de 500*500 del área del panel izquierdo.
Aquí necesitamos utilizar la función cursor del ratón.
Para garantizar que el movimiento corresponda al centro del área de vista previa,
Mueva el borde de vista previa, valor x: [[cursor.x - coordenada x del panel izquierdo 65438 + 0 - la mitad del tamaño x del borde de vista previa]], valor y El método de configuración es el mismo;
Lo que configuro aquí es [[Cursor.x-150]] (porque mi margen es 5la mitad del área de vista previa completa de 200*200 100=150).
(12) Finalmente, configure el área de vista previa móvil y luego el área de ampliación muestra la imagen ampliada en la misma posición en el área de vista previa. También necesitamos establecer los límites del panel derecho al movernos. Principalmente cómo calcular el valor X y el valor Y del movimiento.
De manera similar, podemos concluir que al mover el panel derecho 2, el valor de x es [[-(cursor.x-150)*2.5]] y el valor de y es el mismo.
Algunos estudiantes pueden preguntarse por qué hay un signo negativo. Es principalmente para garantizar la posición relativa, es decir, cuando el área de vista previa se mueve a la esquina superior izquierda, el área ampliada en realidad equivale a moverse hacia. la esquina inferior derecha, lo que garantiza que la posición permanezca sin cambios.
Pregunta: ¿Por qué hay que multiplicarlo por 2,5? Los estudiantes que sepan la respuesta pueden enviarme un mensaje privado o comentar a continuación.
(13) Los pasos anteriores han logrado el efecto de ampliar la imagen en el área de vista previa. Necesitamos una vista previa y una depuración constantes para determinar el efecto.
Bien, sobre "¿Cómo crea Axure un prototipo del efecto de vista previa ampliada de las imágenes de productos Taobao?", Lo compartiré aquí hoy. ¡Espero que puedas ganar algo con ello! ¡El aprendizaje de Axure, los artículos relacionados con Axure y los cursos en vídeo de autoaprendizaje de Axure son buenas opciones! Si tiene una gran capacidad para comprender palabras, personalmente recomiendo aprender de los artículos de Axure, pero si desea aprender Axure de manera profesional, aún así le recomiendo que elija el sistema de cursos de video de autoaprendizaje de Axure. ¡No sólo puede ser más claro y organizado, sino que todos pueden usar su propio tiempo fragmentado para estudiar!