Introducción a la generación de prototipos en Axure 9

1. Introducción: Hola ahí. Mi nombre es Fred Beecher, y quiero darte la bienvenida a mi clase introducción al prototipado y noche de actor Un poco sobre mí para empezar. En realidad he estado entrenando a la gente como usar real desde 2007 pero esta es mi primera oportunidad de hacer un curso en video y de hacer un curso en línea también, así que realmente no podría estar más emocionada. Ahora. Este curso está dirigido principalmente a personas que son nuevas en, en realidad. Pero si eres un usuario experimentado y te gustaría ver algunas de las características y funcionalidades de la versión nueve en acción, este es el lugar para hacerlo. No vamos a repasar todo, pero mucho de lo realmente importante cubrirá aquí. Entonces la forma que comenzará es trabajando juntos para construir el prototipo más simple del mundo. Esto te ayudará a obtener una sensación de los actores flujo de trabajo básico, y luego vamos a repasar rápidamente las acciones. Tú, yo y estas dos cosas juntas te daremos la base que necesitas para el resto del curso. El resto del curso se divide en cinco secciones diferentes. En la primera sección se aprenderá sobre cómo enmarcar alambre y fracturar la segunda sección, que es mi favorita. Aprenderemos sobre cómo hacer interacciones, que es mi parte favorita de la creación de prototipos. la tercera sección se aprenderá sobre los maestros que nos ayudan a reutilizar los componentes de diseño y funcionalidad a lo largo del prototipo. Y luego nos enfocaremos en cómo hacer prototipos de manera responsable. Y luego terminaremos hablando de documentación y colaboración en actores. Nuevo servicio, nube real. Entonces estoy muy emocionado por empezar. Espero que tú también lo estés . Adelante y otra vez. 2. El prototipo más simple del mundo: Muy bien, empecemos aprendiendo sobre actores. Flujo de trabajo básico. Afortunadamente, es bastante sencillo. Todo lo que haces es agregar objetos a una página. haces interactivos. Después obtienes una vista previa de tu prototipo en el navegador. Y si realizas algún cambio, solo refrescas la ventana del navegador con tu prototipo en ella, y esos cambios aparecerán ahí mismo. Ahora la forma en que vamos a aprender de esto es construyendo lo que es literalmente el prototipo más simple del mundo. Para sacar el máximo provecho de esto, te animo encarecidamente a que sigas conmigo. Así que adelante y aprieta mi ventana hacia arriba y luego trae real hacia arriba en otra ventana junto a ella y sigue a lo largo mientras voy. Esto te ayudará a obtener la sensación de los actores flujo de trabajo básico. Está bien, sigamos adelante y empecemos. Hola a todos. Vamos a comenzar esta clase real construyendo el prototipo más rápido y simple del mundo . Entonces empecemos por abrir actor. Cuando abramos actor, nos va a presentar este diálogo introductorio. Vamos a seguir adelante y hacer clic en nuevo archivo y luego real nos mostrará su valor predeterminado. Tú, por qué sólo nos vamos a centrar en las partes de la U. I en esta lección que necesitamos crear este sencillo prototipo. Bueno, mira la U. I y detalle en una lección posterior. Entonces lo que queremos hacer con este prototipo rápido y sencillo es tener una página con un botón en ella, donde haces clic en ese botón y te lleva a otra página. Entonces, primero centrémonos en asegurarnos de que tengamos páginas que necesitamos. Entonces la forma en que hacemos que una actriz vaya aquí en estas páginas dolor, y podemos ver que actor ya ha creado la primera página para nosotros. Entonces sigamos adelante y creemos esa segunda página haciendo clic en el botón de la página de anuncios. Ahí vamos. Ahora puedes elegir cambiarle el nombre si quieres. Voy a dejarlo con nombre Página dos. Ahora lo que tenemos que hacer es poner un botón en la página uno. Se puede ver que seguimos en la página uno por aquí y por aquí. Ahora, la forma más común de agregar objetos a una página. Un actor es a través de la biblioteca. Una biblioteca es una colección de lo que realmente llama widgets que puedes poner en una página. Voy a elegir este sencillo aquí y simplemente arrástrelo a la página. Entonces arrastrando widgets de la biblioteca Forma muy, muy simple de agregar cosas a la página para en realidad, voy a puños de DoubleClick que cambian el texto para ir a la página. Muy bien, entonces ahora tenemos una página con un botón en ella y otra página a la que podemos ir, pero todavía no podemos hacer nada en realidad con esto. Entonces lo que tenemos que hacer es seleccionar el botón y agregar lo que real llama una interacción. Ahora, en la versión nueve, han simplificado enormemente cómo se crean interacciones y actor. Entonces, por ejemplo, nos presenta interacciones comunes para este tipo de objetos. Por lo que cuando hago clic en este botón, quiero abrir un enlace a otra página. Entonces voy a seguir adelante y elegir esta interacción común. Ahora me está diciendo que seleccione la página, así que obviamente quiero ir a la página dos, así que sólo voy a dar clic en eso, y entonces eso es todo lo que necesito hacer. Entonces voy a pegarle. Está bien. Muy bien, Así que ahora tenemos las dos páginas. Tenemos el botón. El botón es interactivo. Ahora lo que tenemos que hacer es poner esto en un navegador y la forma en que lo hacemos un actor es simplemente pulsando este botón de vista previa aquí para que se abra en una nueva pestaña del navegador y tenemos nuestro botón. Y si hacemos clic en este botón, parece desaparecer. Pero, ¿qué está pasando en realidad? Si hacemos clic aquí, podemos ver la jerarquía de páginas estaban en realidad en la página dos. Y si hacemos clic de nuevo a la Página uno, vuelve a hacer clic en este botón, vamos a la página dos. Eso es todo. Has creado tu primer prototipo Felicidades. 3. Tour UI de Axure: la interfaz de usuario real se compone de un montón entero de diferentes áreas, barras de herramientas y dolores. Ahora bien, esto es solo un recorrido rápido, así que solo voy a orientarte a lo que confinaste en cada una de estas áreas. medida que continuemos, el ejercicio se meterá en algunas de las funcionalidades detalladas que está presente en todas y cada una de estas pequeñas áreas. Entonces empecemos con el área del marco de alambre. Esta es la principal área en la que vas a estar trabajando un actor, ya que estás arrastrando widgets por aquí para hacer tu marco de alambre. Ahora, por aquí y las páginas dolor. Aquí es donde tienes una lista de todas tus páginas y en realidad puedes hacer doble clic en estas. Y eso abre todas tus páginas en las que haces clic en pestañas, lo cual es muy conveniente. Ahora. Ya hemos visto cómo podemos agregar una página aquí. También podemos agregar carpetas, lo que te ayuda a mantener las cosas limpias. Voy a llamar a esta carpeta prototipo más rápido y luego arrastré estas dos páginas ahí solo para mantener todo limpio y ordenado. Ahora, lo otro que tenemos pasando aquí es el dolor de contorno. En este dolor, tienes una lista de cada objeto en tu página actual, lo cual es muy, muy, uh, útil. Y si eres usuario de sketch, esto es algo que te hará sentir muy, muy cómodo. Entonces voy a volver aquí a las páginas. Y luego echemos un vistazo al dolor de las bibliotecas también. El dolor de la biblioteca permite elegir entre tres bibliotecas diferentes. flujo son el flujo de biblioteca predeterminado y luego un extenso conjunto de iconos, que es nuevo. Yo creo por nueve. Aquí hay mucho más de lo que ha sido en el pasado. Ah, yo Austin, guárdalo en todas las bibliotecas y luego solo usa la funcionalidad de búsqueda, que veremos más adelante. Pero vamos a ponerlo en defecto. Entonces pasemos aquí al lado derecho. Por aquí tienes el estilo, dolor, las interacciones, dolor y las notas dolor. Entonces con el dolor de estilo, esto controla todos los diferentes aspectos del formato para lo que hayas seleccionado. Ahora es altamente contextual. Entonces en este momento este es el formato que se puede hacer a un objeto de botón. Pero también puedo hacer clic en lo que parece ser espacio vacío pero en realidad es la página, y eso me da opciones de formato para la página en sí, lo cual es bastante interesante para las interacciones. Este dolor es donde podemos especificar cómo interactúa el prototipo con nuestros comportamientos. Ahora, si eres nuevo en nueve, estás de suerte porque esto es mucho más racionalizado que como era antes. Pero si llevas un tiempo usando actor, esto va a llevar algo acostumbrarse. No obstante, en realidad es más eficiente a largo plazo. Por último, esta nota dolor permite comunicar información específica sobre todos y cada uno de los objetos en su pantalla así como la propia página. Entonces esta es una herramienta de comunicación muy útil para hacerlo para que no tengas que crear prototipos cada interacción que puedas documentar Ah, un montón entero de ellos también. Entonces mirando estos dolores, hay algo que es muy nuevo en Acción nueve, que es esta habilidad para sacar los dolores, lo cual es bastante interesante. Entonces si tienes configurado un multi monitor, una buena manera de usar esto sería poner todos los dolores en tu monitor más pequeño, que los tengas todos visibles en todo momento, y luego podrás dedicar tu monitor más grande al área del marco de alambre. Ahora para recuperar esto, solo voy a ver y golpeo la vista reset. Ahora, finalmente, lo que tenemos aquí es ah, barra de herramientas aquí arriba. Aquí no hay mucho que normalmente no harías con Ah, derecha, Click o, um, um, un atajo de teclado. Pero sí tienes control sobre cómo seleccionas las cosas, y si estás construyendo un flujo, puedes conectar tus objetos juntos. Ahora, también se ve esto aquí abajo, que parece duplicar el dolor de estilo. Y tienes toda la razón. Sí lo hace. No obstante, eso aparece todo el tiempo. Entonces no importa si estás en las interacciones dolor, las notas dolor. Siempre tienes la capacidad de formatear tus objetos. Y ese es el rápido recorrido del actual tú. Espero entrar en todos los detalles de estas áreas a medida que avanzamos con el ejercicio 4. Introducción al proyecto de clase: Cuando doy clases de actor, usualmente me gusta que la gente intente recrear algo que ya existe. El motivo por el que hago esto es porque realmente ayuda si entiendes cómo debería ser tu prototipo al final. Ahora para este curso, el sitio que estará recreando es el sitio web de atletismo sunita. Por favor, adelante y ver la descripción del curso para un enlace a la página web. El motivo por el que elegí este sitio web es porque tiene un equilibrio de interacciones simples y complejas y es sensible. Los diseños son bastante sencillos ahora. En clases posteriores, seguiremos recreando el sitio sunita justo con mayores niveles de fidelidad. Ahora, no te preocupes si no puedes conseguir tu prototipo exactamente correcto. Para ser honesto, a veces podría ser difícil para mí también. Entonces lo que he hecho para ayudarte en esa situación es en los materiales de tu curso. He incluido un archivo real que tiene el estado final de todos los diferentes ejercicios extra que les estoy pidiendo que hagan ahora. Te animo a darle tu mejor oportunidad antes de abrir ese expediente. Pero si estás perplejo y simplemente no puedes seguir adelante, ese expediente tendrá las respuestas que necesitas. El sitio web estará recreando para este actor Clase es tesis Anita Atletismo sitio web Sunita Athletics es una empresa que hace prendas de fitness para mujeres. Y la razón por la que me encanta usar este sitio web en particular enseñar actor es porque es una gran mezcla de diseño simple e interacciones intrincadas para que podamos empezar aquí en la parte superior. Ya ves que tenemos esta barra de funcionalidad superior aquí arriba y luego tenemos ah bastante barra de navegación estándar aquí abajo con alguna funcionalidad de búsqueda así como, ah mega menú que es otro tipo común de interacción. Y vamos a estar prototipando este tipo de interacción en esta clase on. Entonces se puede ver esta gran imagen aquí una gran cantidad de contenido visual realmente rico que también podemos hacer un actor. Y a medida que nos desplazamos por aquí, hay ah sección aquí que tiene las categorías de productos y vemos algunos interesantes ratones sobre interacciones. Estaremos prototipando versiones simplificadas de estas interacciones en esta clase. A medida que continuamos desplazándonos hacia abajo, verás más contenido visual blocky grande. Conforme lleguemos aquí abajo, verás una cuadrícula de producto ah, que es algo común en cualquier sitio web de comercio electrónico. Y vamos a estar prototipando este tipo de interacción como parte de esta clase pero en realidad también tiene un objeto especial específicamente para este tipo de caso de uso. Ahora, usar este objeto es bastante complicado, por lo que estaremos guardando eso para otra clase a medida que seguimos desplazándonos seymour contenido de imagen grande . Um y ese es el sitio web. Más o menos. Ahora, lo otro genial de este sitio es que es receptivo para que podamos usar este sitio web para ayudarnos a disparar por algo. Cuando estamos trabajando con uso adaptativo, un actor y ese es el sitio web estará recreando para esta clase real. Estoy muy emocionado de empezar con esto y profundizar en esto contigo. 5. Introducción a el enmarcado de alambre: todo bien. En esta primera sección, vamos a aprender a construir un marco de alambre en acción. Empezaremos definiendo dimensiones de página. Continúa colocando formas, imágenes de texto e iconos en la página. Y luego terminaremos aprendiendo a navegar por capas después de las nueve, que en realidad se ha actualizado de versiones anteriores. Ahora bien, como el sitio Sunita es tan pesado de imágenes, he incluido todo un montón de imágenes pre recortadas en los materiales de su curso. Incluir animarte a usar aquellos en tu encuadre de alambre solo causa. Eso acelerará las cosas muy rápidamente. Y no te preocupes por usar esas imágenes. Los he obtenido de una serie de diferentes sitios de fotos de stock, por lo que están todos configurados para usarlos. Está bien, sigamos adelante y empecemos. 6. Trabajar con páginas: En esta breve lección, aprenderemos los fundamentos mismos de cómo comienzas a construir un prototipo en acción. Esos conceptos básicos están creando páginas y especificando su tamaño para que podamos ver por aquí que ya tenemos las pantallas prototipo más rápidas todas guardadas en su carpeta. Entonces voy a crear otra carpeta para el prototipo Sinead A, Muy bien. Y luego necesito hacer clic en agregar página para crear otra página, que solo voy a llamar a casa. Y ahora se puede ver que esto en realidad no está en esa carpeta. Entonces tengo que agarrarlo y luego arrastrarlo a esa carpeta, y ahí vamos. Ahora bien, esta página está completamente cruda. No he especificado ninguna información al respecto en absoluto. Entonces cuando lo abro, es solo que sigue yendo y yendo y yendo. Ahora, lo que quiero hacer es que este sea un tamaño muy específico. Entonces la forma en que puedes hacer eso es que puedes ir al desplegable de dimensiones de página, y en realidad puedes elegir entre cualquiera de una serie de plantillas diferentes, dependiendo de lo que estés haciendo. Ahora resulta que estoy en un Mac book pro, que realmente no veo aquí. Um, Así que voy a seguir adelante y crear dispositivo personalizado, y resulta que sé que el ancho de mi pantalla es de 1440 píxeles. Entonces especificaré eso aquí y luego elegiré no especificar un con. Entonces ahora, si nos desplazamos por aquí y luego reducimos un poco, podemos ver que tenemos un límite definido para nuestro diseño. Y ahí lo tienes. Esta es la página que utilizará para comenzar a construir nuestro prototipo del sitio web Sunita en la siguiente lección. 7. Colocación de formas y texto: en esta lección será aprender los conceptos básicos de colocar formas y texto en un marco de alambre real . Ahora hay tres formas de hacer esto. Voy a empezar con lo más común, que es arrastrar algo de la biblioteca antes de que nos metamos demasiado en esto. Echemos un vistazo al sitio de Tesis Anita y tomemos algunas decisiones sobre en qué se centrará. Así que centrémonos en esta barra superior aquí arriba y luego notemos que hay un ah ah ah, fondo de este carro por aquí que es un poco diferente. Y luego también nos enfocaremos en esta barra de gallo, y aquí tenemos esta gran imagen con algún texto sombrerero. Entonces volvamos a cambiar a realidad ahora aquí está Thebe Ox que arrastré de la biblioteca . Como pueden ver, una vez que me subo contra los bordes de la página ahí, estas líneas rojas que aparecen esto son nuevas en nueve. Aquellos de ustedes que son fanáticos del boceto grande apreciarán esto, estoy seguro. Y ahí vamos. Este es nuestro top están bien la segunda forma en que se puede agregar algo en realidad es a través este menú de inserción. Esto, también, es totalmente nuevo en la versión nueve y también debería ser algo bastante familiar para los usuarios de un sketch . Entonces voy a dar clic en rectángulo aquí, y voy a dibujar un rectángulo. Um, eso aproximadamente va a corresponder a la forma del fondo del asunto del auto. Por lo que puedes ver aquí cuando me muevo contra algo realmente puedo chasquear a esa cosa, lo cual es bastante conveniente. Entonces, uh, eso probablemente no es acuñado de la forma correcta, pero lo suficientemente cerca. No quiero una frontera, así que voy a ir aquí a cambiar la frontera a cero y hacer el relleno un poco más oscuro , así que eso se ve bien. OK, ahora, sé que necesito mover esto por aquí, y en realidad voy a ir y específicamente hacer estos 40 pixeles porque sé que esa es la altura de la, uh, barra y también hacer este 70 pixeles de ancho. Eso es muy conveniente poder hacer esto al estilo, uh, uh, pagando por aquí. Pero también puedes hacerlo aquí arriba en la barra rápida en el estilo a un bar. Muy bien, ahora tenemos esas dos cosas en la tercera vía es otra vez algo que va a ser muy familiar para bosquejar a los usuarios. Está relacionado con esto. Insertar hombres. Ya sabes, si ves algo que se parece a esto, um, no tienes esta propiedad de la que estoy a punto de hablar encendida. Pero si solo ves algo aquí que dice P o R o O o L, tienes algo encendido que es nuevo en los atajos de tecla única de código de la versión nueve. No, específicamente apagué eso porque así no me gusta trabajar. Pero si quieres asegurarte de encenderlo, puedes ir a preferencias o el equivalente en ventanas y seguir adelante e ir a la sección de lienzo y elegir habilitar accesos directos de una sola tecla. Entonces lo que puedo hacer ahora es si quiero dibujar un rectángulo, solo presiono la tecla R y luego puedo chasquear contra esas fronteras y vamos ah, ahí está mi nab nuestra otra vez voy de la frontera a cero y el relleno a algo no tan oscuro. Está bien. Y entonces esto, sé que necesita ser, uh, 70 píxeles. Así que golpea eso. Y ahí vamos. Ya hay bar. Ahora, una cosa que quiero hacer rápido es cambiar aquí al contorno. Ahora tenemos tres rectángulos en la página y todo lo que dice aquí es rectángulo, rectángulo rectángulo. Una de las cosas que es absolutamente crítica en acción es asegurarte de que estás nombrando todos los widgets que coloques. Porque si no logras hacer esto una vez que te metas a trabajar con interacciones, perderás la pista de los objetos que estás tratando de forzar a hacer algún tipo de acción. Entonces es un hábito que te recomiendo que te metas en eso cuando tocas algo, lo nombra. Voy a llamar a este carrito BG. Voy a llamar a este bar uno superior, BG. Y en realidad también puedes hacer esto bien desde el contorno mismo haciendo toques demasiado lentos en el nombre. Entonces a éste le voy a llamar nunca bar BG. Está bien, así que ahora tengo esos bares. Lo siguiente que quiero hacer es Teoh Poner esa gran imagen ahora. La mayoría de las veces cuando estoy haciendo ah, prototipo. No tengo ningún tipo de fotografía, así que uso un objeto llamado Marcador de posición. Ahora, una de las cosas divertidas que puedes hacer aquí en esta biblioteca es que en realidad puedes buscar cosas escribiendo sus nombres. Entonces sé que esto se llama canción Placeholder en un as de juego tipo. Ahí vamos. Y ahí está mi positor. El motivo por el que me gusta esto es porque me permite más bien me impide, um, um, probar Teoh desplazarse por una lista de cosas visualmente y cosas que faltan. Está bien. Esto, lo sé, necesita ser tan ancho como la página, y también tiene que tener 14 20 píxeles de altura. Muy bien, entonces este es un marcador de posición que se coloca en su lugar para la imagen, pero va a estar detrás de algún texto. Entonces una de las cosas que quiero hacer es que la quiero bloquear. Por lo que voy a la derecha, click y elegir candado, ubicación y tamaño. Esto significa que si me arrastra por esta zona, no va a pasar nada. No se va a mover, lo cual va a ser muy útil una vez que empiece a mover texto alrededor sobre él. Está bien, así que vayamos por aquí y busquemos algún texto. Uno de los principales elementos de texto de texto que usarás se llama etiqueta, así que voy a buscar una etiqueta. Ahí vamos. Y sólo voy a arrastrarlo hasta aquí porque quiero poner al menos un artículo de duende ahí arriba, Así que voy a acercar. Eso no es lo suficientemente grande. Peleó. Por lo que se llama a eso 20 puntos. Aquí vamos. Y, uh, moviéndola para que se rompa al centro ahí, y voy a llamar a esta lista de deseos, acuerdo? Y luego una de las otras cosas que también viene de Ah, la inspiración detrás del sketch es cuando tienes un objeto seleccionado y mantén presionada la tecla de opción , um, para Mac, Entonces en realidad puedes ver a qué distancia está el objeto seleccionado de otros objetos de la pantalla. Entonces esto realmente quiero estar, Ah,a Ah, 40 píxeles de distancia. Entonces voy con el dedo del pie aguanta. Turno moviéndose en línea recta por aquí. Aguanta. Opción C 34. Ok, ahora voy a usar mis teclas de flecha y sólo me voy a mover sobre seis píxeles. Entonces 123456 Y si vuelvo a presionar opción? Sí, 40 pixeles. Eso es lo que quiero. Está bien, alejar el zoom. Y la etiqueta es demasiado pequeña para algo que necesitamos poner aquí. Entonces vamos a trabajar con el otro tipo de objeto de texto en real, que es el encabezado. También hay un, um ah, tipo de párrafo. Pero hablaremos de eso un poco más tarde. Está bien, así que voy a dejar esto ahí dentro. Eso no es lo suficientemente grande. Yo llamo a eso 80 puntos y digo que realmente no necesitamos audaz para eso. De acuerdo, así que voy a centrar eso, y este es el nombre de la empresa. Está bien, así que ahora tengo eso bloqueado para poder mover esto con impunidad. Vamos a centrarnos eso con estos tipos. Ahí vamos. No tenemos tiempo para enmarcar todo este asunto, pero si abres el archivo de clase interacción completada ejercicios e ir a esta página L. Owen ser home shape. puede ver cómo se ve si fuera a llevar marco a cabo toda esta página. Y eso es lo que tengo para ti. En la siguiente lección te mostrará cómo trabajar con imágenes en tu prototipo real. 8. Trabajar con íconos e imágenes: en esta lección, vamos a aprender sobre cómo trabajar con imágenes e iconos. Un actor. En primer lugar, pasemos a la vista sunita para ver cómo están trabajando con este tipo de objetos. Por lo que parece que aquí hay un, ah, icono de lupa. Hay imágenes enormes y hermosas por todo el sitio. Ah, y también hay estas estrellas aquí como parte de la funcionalidad de valoraciones y reseñas. Así que volvamos a lo real aquí y centrémonos en la primera de Icahn Vamos a desplazarnos hacia abajo a nuestros productos. Ah, y voy a acercarme aquí para que esto sea más fácil hacer algo de diseño. Y voy a patinar esto, sosteniendo la llave del turno para hacer sitio a las estrellas. De acuerdo, Ahora, ¿de dónde sacan estas estrellas? Bueno, actor en realidad viene con ah toda la biblioteca de iconos llena de cosas buenas. Ahora, hay tantas cosas aquí que es un poco difícil navegar, Así que casi siempre, uh, escribo aquí lo que estoy buscando. Entonces voy a hacer estrella, y ahí vamos. Eso es exactamente lo que busco. Entonces voy a arrastrar esto aquí, y voy a querer que esto sea de unos 20 píxeles así que voy a mantener pulsado el turno y redimensionarlo para que sea de unos 20 píxeles. Ahí vamos. Entonces voy a asegurarme de que esté alineado horizontalmente con el texto de revisión y luego mantenga presionada mi tecla de opción de Ault. Teoh Uh uh, hacer múltiples copias y están a unos cuatro píxeles de distancia ahora mismo, lo cual está bien. Hay una más que necesito agregar aquí, y puedo elegir estrella medio vacía o estrella mitad llena para empezar medio lleno, ya que estoy tendiendo a ser más optimista y voy a cambiar eso hacia abajo Teoh del mismo tamaño. Ahí vamos, bueno, bueno, bajista para movernos en líneas rectas. Y eso se ve bastante bien por ahora. Entonces esos son los fundamentos de tratar con los iconos. Y después de ahora, echemos un vistazo a las imágenes, vamos a desplazarse hacia fuera y mover aparecer a esta imagen principal en un sitio web. Por lo general, esto se le llama la imagen del héroe. Entonces voy Teoh, borra este positor que teníamos antes y vuelve a la biblioteca. Pero esta vez busco una imagen, no un icono. Entonces voy a volver a la biblioteca por defecto y voy a arrastrar en este widget de imagen en una línea a la barra y al borde de la página aquí. Ahora esta es una de las muchas formas diferentes de conseguir imágenes en remolque. Actor. Entonces solo voy a hacer doble clic en esto, y eso va a traer un diálogo de navegador de archivos, y voy a dar clic en Hero aquí ahora en tu carpeta Materiales de clase. Sí tienes ambas carpetas Sunita Color y Cindy en una escala gris. Todas las imágenes han sido cortadas con dientes apropiados, ah especificaciones para que puedas fácilmente traer estos para tu ejercicio. Entonces solo voy a hacer doble clic en esto, y ahí aparece en el tamaño perfecto, por lo que notarás que el texto que estaba ahí parece haber desaparecido. Todo lo que tenemos que hacer es volver de cabeza, y luego vuelve el texto. Ahora bajemos aquí a estas categorías. Amplíe un poco y les voy a mostrar otra manera de conseguir una nueva imagen en remolque. Actor. Simplemente puedes arrastrarlo y soltarlo desde tu navegador de archivos. Entonces ahí vamos, y yo lo voy a online aquí y solo deshacerme de este soporte de lugar y muévelo para que sea bonito y alineado que se ve bastante bien y solo manda a la parte trasera. No está del todo alineado como necesita ser. Eso probablemente sea mejor. Todo en este momento, otra forma de conseguir imágenes en actor de remolque es simplemente hacer doble clic en cualquier imagen existente porque en realidad puedes reemplazarla por cualquier otra imagen. Entonces si yo sólo tuviera abierto ahí vamos ahora. Advertencia. Aquí es que si la imagen que estás reemplazando no es la misma altura y anchura que la imagen con la que se está reemplazando, la imagen con la que se está reemplazando se va a empujar hacia esas dimensiones originales. Muy bien, así que ahora ya sabes trabajar con iconos e imágenes y actor. Así que adelante y completa todo esto para que termine pareciéndose a esta página en particular. Las imágenes de inicio en tu archivo de ejercicios terminados y te veremos en la siguiente lección. 9. Agrupación y capas: en esta lección, aprenderemos acerca de agrupar objetos. Ahora un actor. Esto podría no parecer que es tan importante de una cosa de saber, pero es especialmente importante en actor, y eso es por lo que en realidad se conoce, que es la capacidad de crear interacciones realmente ricas. Ahora lo sorprendente de los grupos y en realidad es que se pueden asignar interacciones a un grupo de objetos. Entonces con esa emoción en mente, sigamos adelante y veamos lo que deberíamos tener al final de nuestro último ejercicio. Por lo que esta es la versión terminada del último ejercicio. Por lo que todas estas imágenes se airen aquí. Todos los iconos y cosas así están ahí. Pero si tuviéramos que tocar por aquí y llegar a nuestro contorno, debilitar, ver cada objeto en las páginas de esta lista por lo que hace que primero sea bastante difícil navegar. Entonces, centrémonos en ah, esta área de aquí. Entonces este es, uh, uh, obvia bloque de contenido. Por lo general, esto se llama héroe en el lingo de diseño Web, así que vamos a seleccionar la imagen de fondo, el titular, el subencabezado y este pequeño botón que en realidad puedes ver aquí en el contorno. Estas cosas están seleccionadas, uh, la selección se refleja aquí. También puedes seleccionar las cosas directamente del contorno si lo deseas, y solo tienes que pulsar con el botón derecho Haga clic para PC o control. Da click para Mac en ti, Congar adelante y agrupa eso o simplemente golpea Command o control G y ahí está nuestro grupo. Ahora todo lo que tenemos que hacer es nombrar al grupo. Voy a llamar a este héroe. Ahí vamos, y podemos ver por aquí a este grupo se le piensa como un objeto. Entonces si hago clic en interacciones, tengo la capacidad de crear una nueva interacción basada en este grupo, lo cual es bastante fantástico. Ahora, cambiando al archivo completado, quiero mostrarles cómo se ve cuando tienen, uh, uh, todo organizado en grupos. Entonces si miramos esto, podemos ver que todos los posts blawg, todos los productos individuales, todas las diferentes secciones de la página. Todas estas cosas diferentes están representadas como grupos individuales aquí en. Si los ampliamos ahí, podemos ver todo eso ahí. Y cada uno de estos grupos refleja esencialmente un bloque de contenido en el sitio principal. Entonces Aquí está el héroe, las categorías. Aquí está el bloque funcional, etcétera, etcétera. Entonces eso es agrupar objetos y actor. La siguiente lección de la que estoy realmente emocionado porque finalmente llegamos a entrar en la creación interacciones, mira, entonces. 10. Introducción a las interacciones: bien, Interacciones, interacciones aire mi parte favorita del prototipado. Eso es porque eso es lo que solías hacer que tu prototipo haga cosas. Y la acción tiene una funcionalidad integral alrededor de la construcción de interacciones. Esa es una de las razones por las que me encanta tanto. Ahora bien, si eres un usuario real experimentado, te animo a lavar esta lección porque las interacciones son donde hicieron algunos de los mayores cambios. La mala noticia es, es que si tienes experiencia, esto va a tomar algo de acostumbrarse. Pero la buena noticia es que, si eres nuevo en realidad er, es mucho más fácil aprender de lo que solía ser. Por lo que en acción nueve y la Interacción se compone de tres cosas. Un evento, acciones y objetivos. Un evento es algo que le puede pasar a un prototipo o algo dentro de un prototipo. Por lo que haces clic en una página, ¿ Estás haciendo clic en un enlace? Eso. El click es el evento. El accionar es lo que sucede cuando ocurre el evento. Entonces al hacer click ir a una nueva página, yendo a las nuevas páginas teatralidad en ahora necesitas especificar a qué página quieres ir, y ese es el objetivo. Entonces haga clic es el evento abierto nueva página es la acción, y la página de categoría es el objetivo. Ahora, en esta lección, vas a estar aprendiendo a hacer interacciones simples como esa, incluyendo enlaces y mouse overs básicos. Pero también llegarás a aprender a construir ricos overs de ratón así como mega menús. Entonces esto va a ser muy divertido. Adelante y empecemos. 11. Linaje a otra página: en esta lección, aprenderemos los conceptos básicos de crear interacciones en interacciones reales son lo que hacen que tu prototipo sea interactivo. Por lo que antes de empezar, debemos asegurarnos de que tu prototipo se vea algo así. Hasta ahora, has metido todo el contenido y, ah, has hecho los diseños así. Um, y luego , ah, una vez que tengas todo listo, entonces podemos seguir con esto. Entonces en esta lección, lo que vamos a hacer es que vamos a tomar este enlace de tienda aquí y hacer que eso nos lleve a otra página. Entonces primero tenemos que crear esa segunda página, así que voy a sumar página aquí arriba. Voy a llamarlo tienda. Ahí vamos. Y ahora voy a hacer doble clic en eso. Teoh, ábrelo en el desgaste desde el área aquí, Dimensiones de la página. Voy a golpear dispositivo personalizado otra vez y hacer 14. 40 y no. Con aquí vamos. Está bien. Entonces ahora todo lo que necesito hacer aquí es solo para poner algo se puede poner cualquier cosa aquí. Sólo voy a poner una caja gris. Ah, eso me comunica que esto es de hecho, la página de la tienda. Entonces voy a hacer doble clic en esto y simplemente a articular muy claramente lo que es esto. Muy bien, entonces tenemos esta página. Voy a dar click en esta X para cerrar eso. Ahora, hay una serie de formas en las que podríamos llegar realmente a este objeto. Lo que quiero hacer es que quiero crear este enlace justo en la palabra tienda en sí para poder dar click aquí, que es el grupo de barras de knave. Entonces puedo volver a hacer clic en él, que es el grupo de enlace de tienda. Y luego puedo hacer click en y de nuevo. Y ahora tengo la cosa que está en el fondo de este grupo, que es el enlace de la tienda. Pero lo que en realidad voy a hacer es ir aquí al contorno para mostrarte cómo lo navegas, navegar a él desde ahí. Entonces sé que este es el nab nuestro aunque no lo hiciera cuando hago click en su seleccionado aquí. Entonces voy a expandir eso y el mar. Ahí está el enlace de la tienda de knave. Entonces ese es todo el grupo. Y ahí está el texto de la tienda en sí. Entonces lo que voy a hacer es ir por aquí y dar click en interacciones. Entonces una de las cosas que es nuevo y actor nueve es ah, manera racionalizada de crear interacciones. Ah, la forma en que está racionalizando esto es recogiendo algunas de las interacciones comunes aquí mismo . Entonces lo que quiero hacer es cuando hago click en esto, así que al hacer click, quiero ir a otra página. Entonces eso significa que quiero abrir un enlace. Entonces todo lo que tengo que hacer es dar click en eso. Y ahora la página a la que quiero ir. Solo selecciono eso aquí mismo, pega, vale, y ya terminé. Veamos cómo funciona eso. Adelante y golpeas la vista previa para generar el prototipo. Y si puedo decir que la tienda ahora es interactiva. Entonces si hago click en eso ahí vamos. Estoy en la pagina de la tienda. Ahora, una cosa que quiero mostrarles es que en realidad se pueden crear enlaces en Mawr que solo objetos individuales. Entonces lo que voy a hacer es realmente voy a seleccionar esta interacción aquí haciendo clic en ella y voy a golpear delete, y eso se deshace de la interacción para que también puedas eliminar interacciones. Ahora voy a, uh, uh, a seleccionar la tienda knave link. Entonces este es un grupo entero, y voy a crear una nueva interacción. Ahora. No me está dando ninguna interacción común porque esto es todo un grupo. Entonces si golpeo nueva interacción, necesito elegir qué interacción usar. Ahora hay mucho de lo que se llaman eventos, por lo que los eventos son cosas que se pueden hacer a un prototipo. Por lo general son cosas que una persona puede hacer, como hacer clic en DoubleClick. Oh, nuestro presiona el ratón hacia abajo. Pero también hay un número de otras cosas . No vamos a poder mirar todos esos ahora mismo, así que sólo voy a elegir en Click. Entonces al click es mi evento. Y ahora quiero a un dedo de acción pasar durante ese evento, y el que quiero es enlace abierto. Por lo que estas acciones son las más comunes para en click. Entonces voy a golpear enlace abierto, y entonces debería empezar a parecer familiar a partir de ahora. Entonces ahí vamos. Y si vuelvo a mi prototipo y refresco, en realidad, en realidad, pasemos por aquí y naveguemos a esta página principal. Está bien. Si golpeo tienda Ahí vamos. Todavía funciona. Y lo divertido es, así que si vuelvo, eso incluso funciona. Si estoy aquí encima de esta pequeña cosa de la zanahoria, ahí vamos. Y esas son las reglas básicas para crear en una interacción un actor. 12. Hacer un mega menú: en esta lección, aprenderemos cómo administrar la visibilidad de los objetos, un actor y cómo controlar esa visibilidad dentro del prototipo usando la interacción de entrada en mouse . Entonces, antes de que empecemos, sigamos adelante y echemos un vistazo al sitio Sunita y a lo que vamos a estar tratando de hacer prototipos aquí. Entonces en este sitio, um, en este bar superior, cuando pasas el mouse sobre tienda o fax, obtienes este gran sub menú aquí. Por lo general, eso se llama mega menú y se puede ver cómo, cuando estás aquí arriba, eso no desaparece. Pero si subes aquí, sí desaparece. Ah, y también, si se desplaza de ella así, entonces se va. Vamos a hacer algo bastante similar en actor y lo que se verá es esto. Será más sencillo de lo que es en realidad en el sitio Sunita. Por lo que pasarías por encima de tienda así y luego si subes, desaparecerá. Y luego si vas ahí abajo , también desaparecerá. Está bien, sigamos adelante y empecemos. Entonces cambiando eso en realidad aquí, lo primero que tenemos que hacer es realmente crear un lugar más grande para que podamos hacerlo simplemente arrastrando un cuadro a la página. Um, sólo voy a arrastrar una gran caja gris aquí. Y como el sol Ito uno es algo transparente, en realidad voy a hacer este un poco transparente para llamar a este 60. Oye, eso parece razonable. Muy bien, ahora. Ah, también queremos asegurarnos de que sean etiquetas. Yo lo voy a llamar Mega Menú aquí y también por aquí. No. También le agreguemos un botón para que podamos ir a la página de la tienda, doble clic en eso y pulsar Ir a comprar. Muy bien, ahora necesitamos hacer todo esto invisible al mismo tiempo. Y la forma más fácil de hacer eso es como aprendimos antes a agrupar las cosas. Entonces voy a seleccionar ambos de estos objetos. Golpea el comando G en PC. Estaría controlado, g. Y ahora tenemos un grupo. Podemos verlo aquí arriba, y voy a tocar eso y llamarlo enseguida. De acuerdo, entonces ahora tenemos esto como objeto propio. Ahora podemos pensar en su visibilidad. Entonces por defecto queremos que esto sea invisible. Entonces la forma en que haríamos eso se debilita. Ponga esto un actor. Hay varias maneras diferentes. Donde quiera que veas este icono de ojo, lo verás aquí en el dolor de estilo y aquí arriba en la barra de estilo. Puedes usar eso para configurar lo que hayas seleccionado a oculto. Normalmente lo hago son derecho, haga clic y no establecer oculto. Y una vez que hayas escondido algo, puedes ver que se verá amarillo. Y eso te está diciendo en realidad que hay algo ahí. Simplemente está oculto por defecto. Entonces cuando sigamos adelante y vayamos a nuestro prototipo y lo refrescamos, veamos cómo se ve esto Así que ya puedes ver no podemos ver nada aquí en absoluto. Entonces sabemos que está funcionando como se pretendía. Entonces volviendo al actor, um, um, así que con el fin de mantener las cosas simples, voy a seleccionar aquí este enlace de tienda y deshacerme de la interacción existente. Entonces voy a seleccionar la interacción por aquí haciendo clic en ella y luego golpear delete para deshacerme de ella. ¿ Todo bien? Y así ahora quiero hacerlo para que esto se haga visible una vez que pase el ratón sobre este grupo aquí . Entonces voy a golpear nueva interacción y la acción que quiero. Er, lo siento, el evento que quiero usar el suyo en el ratón entrar porque cuando un ratón entra a esta zona, es cuando esto necesita dedo del pie suceda. Entonces la acción que quiero que suceda es en torno a la visibilidad. Y entonces lo que es, es ese espectáculo y esconderse. Entonces si hago clic, muestro y me escondo aquí, me va a preguntar qué quiero mostrar y esconderme. Voy a seleccionar el grupo de mega menú aquí, y no, puedo elegir mostrar ocultar o cambiar visibilidad. Ahora mismo. Mostrar está seleccionado por defecto, y eso estará bien. Entonces voy a golpear. Está bien, está bien. Ahora, volvamos a nuestro prototipo y refresquemos y veamos cómo se ve esto. Muy bien, así que haciendo el ratón por aquí, todo está bien. Mi ratón sobre tienda. Entonces aparece el mega menú, pero realmente no puedo conseguir que desaparezca, y eso es porque aún no hemos especificado esa interacción en particular. Entonces volvamos a la acción y veamos cómo haría eso. Está bien, Así que voy a subir aquí y dar clic en mega menú para que esté en esta zona aquí y lo que voy a hacer es, ah, voy a añadir un objeto llamado hot spot. Y esto parecerá inusual en cuanto a por qué yo haría eso, porque uno pensaría que sólo sería capaz de usar la interacción en el mouse out para hacer que esto desaparezca. Pero el problema es, es que al ratón fuera se disparará aunque suba al bar así. Y si quiero entrar al bar así encendido y que ese menú permanezca, no puedo usar al ratón fuera. Entonces voy a usar este objeto hot spot. Por lo general, me gusta que tenga unos 40 píxeles de altura. Eso suele ser lo suficientemente grande, y lo que este objeto va a hacer es totalmente invisible, por lo que no podrás ver nada con esto aquí, así que solo va a atrapar al ratón entrar, así que cuando entra el ratón esto, entonces va a ocultar el mega menú. Pero queremos que esto sea parte del mega menú, así que estoy mirando aquí en el esquema, y ahora mismo está muy separado, así que no queremos tenerlo así. Entonces lo voy a arrastrar al mega menú aquí, justo en la parte superior, y lo voy a nombrar porque lo nombramos todo. Un actor yo para llamarlo. Ah, mega comerciante de menú. Está bien, y ahora eso sigue seleccionado. Por lo que quiero agregar mi interacción. Voy a elegir en el ratón entrar y de nuevo quiero mostrar u ocultar. Y nuevamente quiero mostrar u ocultar mega menú. Pero en este caso, no quiero demostrarlo. Quiero que el dedo del pie lo esconda. Por lo que hago clic en ocultar y golpear. De acuerdo, Y ahora si voy al prototipo y lo refresco, traigo eso muestra el menú y luego salir de ahí hace que desaparezca. Y luego cuando subo aquí, aún no pasa nada. Entonces ya casi estamos ahí. Volvamos a la realidad ahora lo que tenemos que hacer es que lo hagamos para que cuando el ratón entre de nuevo a esta zona de la barra superior, esto es ah, grupo grande. Cuando el ratón entre en esta zona, entonces queremos que desaparezca el mega menú. Entonces voy a seguir adelante y dar clic en nueva interacción una y otra vez. Voy a usar en el ratón, entrar y mostrar y esconder, y quiero mostrar y ocultar de nuevo mega menú. Y en este caso otra vez, quiero esconderme. Por lo que selecciono ocultar y luego golpeo. Está bien. Y volvamos a nuestra actualización de prototipo. Y si vuelvo sobre tienda y subo, entonces se va. Si vuelvo sobre tienda y me voy abajo, entonces se va, que es exactamente lo que queremos que suceda. Y así es como usas el ratón, entras la interacción o en ER real para controlar la visibilidad de los objetos dentro del prototipo. 13. Hacer un ratón rico: en esta lección, vamos a aprender a hacer un ratón ricamente interactivo sobre la interacción en actor. Entonces, si nos desplazamos hacia abajo en el sitio Sunita aquí y miramos estos bloques de categoría, podemos ver que hay muchas cosas sucediendo cuando pasas el mouse sobre la imagen de fondo oscurece. Este título se mueve hacia arriba y aparecen estas cosas, y esto incluso se extiende. Ahora puedes hacer todo esto en actor, pero para lograrlo se requieren técnicas un poco más avanzadas que están fuera del alcance de esta clase introductoria. Entonces echemos un vistazo a lo que vamos a hacer en su lugar, está bastante cerca, pero no está todo el camino ahí. Entonces cuando pasamos el mouse sobre esto, tenemos el título de la categoría que se mueve hacia arriba, y la imagen en el fondo es genial fuera un poco. Y luego tenemos aquí estos artículos que aparecen. Entonces, sigamos adelante y veamos cómo hacer eso. Un actor. Voy a cambiar aquí a nuestro prototipo, y lo primero que quiero hacer es crear ese ah efecto de ennegrecimiento. El modo en que voy a lograr eso es agregando otra caja aquí, y voy a hacerlo exactamente del mismo tamaño. Voy a nombrarlo antes de que haga otra cosa. Nómalo máscara. Y entonces la forma en que realmente obtienen ese efecto es ahí esencialmente superponiendo algo encima de esa imagen s Voy a hacer esto negro y 40% opaco, y deberías ver algo que se ve bastante cerca. Está bien, ahí vamos. Ahora, en realidad necesitamos meterlo dentro de este grupo s Voy a simplemente una especie de arrastrarlo aquí abajo , y tomará un poco. Dedo del pie, Entra ahí. Uh, está bien. Entonces ahí estamos. Los suyos son de primera categoría en este momento. Lo tenemos en el grupo de la categoría, pero tiene que estar por encima de esa máscara son disculpas por encima de la imagen. Entonces ahora se ve bien. Pero lo que queremos hacer es asegurarnos de que esté oculto por defecto. Por lo que voy a dar click derecho en él. Se puso oculto. Ahí vamos. Y no, voy a hacer trampa un poco y vengo aquí en mi archivo completado el. Sólo voy a copiar algo de este material de superposición por aquí, bien, está bien, y ya se ha agrupado, y he logrado pegarlo directamente en ese grupo, así que creo que estamos bien. Pero de nuevo, este el nombre de la categoría aquí tiene que estar por encima de la superposición. Muy bien, entonces ahora lo que queremos hacer es que queremos crear la interacción en el propio grupo. Entonces si selecciono el grupo aquí, haga clic en interacciones y nueva interacción. lo primero en lo que necesitamos trabajar es hacer que esa imagen de fondo se diminuya. Entonces sigamos adelante y usemos en el ratón Entrar de nuevo y en Mao Center. Queremos mostrar este objeto, Um, y como hay muchas cosas aquí dentro, en realidad voy a buscar esta máscara de todo bien y la encuentro bastante rápido, y sí quiero mostrarla. Pero ahora agreguemos un poco de sabor. Si recordamos del sitio, en realidad es animado. Un pedacito. Vamos a desvanecernos en 250 milisegundos. Parece correcto. Está bien, así que ahora cuando lo metamos, se mostrará. Pero también necesitamos agregar otra interacción en este mismo grupo. Es la interacción on mouse out. Porque lo que vamos a hacer es esencialmente lo contrario de lo que acabamos de hacer. Entonces voy a venir aquí y golpear show y otra vez buscar máscara. Uh, y esta vez quiero ocultarlo. Entonces voy a golpear escondite y desvanecerse 250 otra vez y luego golpear. Está bien. Muy bien, echemos un vistazo a nuestro prototipo en el navegador y veamos cómo se ve y actualicemos. Aquí. Desplácese hacia abajo. Sí. Sí. Está bien. Eso está funcionando. Excelente. Muy bien, volvamos a actor. Y ahora trabajaremos en hacer esta categoría. Imagen mover aquí es una especie de movimiento de título de categoría. Una de las cosas que hago, uh es hacer una copia de la misma porque ya verás, una de las cosas que necesitamos hacer es identificar exactamente a dónde queremos trasladarla . Por lo que esta copia me ayuda a averiguarlo. Entonces no, porque estoy buscando cosas. Voy a asegurarme de que no me confunda este y solo llámalo maniquí. Está bien. Entonces, a 19 por 16. 73. Ahí es donde quiero que esto se mueva a Ok, así que he seleccionado nuevamente al grupo. No. Se puede ver que ya tenemos interacciones aquí. Entonces podemos Tenemos múltiples interacciones en el mismo objeto, pero también podemos tener múltiples acciones en el mismo evento. Entonces si hago clic aquí Ah, y le pego a este otro tipo de acción llamada Move. Esta es una nueva para nosotros. Voy a golpear categoría tipo categoría aquí. Está bien. Nombre de la categoría es lo que quiero mover. Um, y se puede mover, que es un número relativo de píxeles o dos, que se define ubicación en la pantalla. Y dos generalmente es mucho más confiable. Por lo que fueron 2 19 16. 73. Está bien. Y sí, quiero animarlo. Uh, voy a usar esta facilidad en curva fuera, porque esto tiende a parecer lo más natural. Es bastante gentil en. Golpeaste. Está bien. Está bien. Y ahora tenemos que hacer lo mismo al ratón fuera, pero al contrario. Entonces lo que voy a hacer es ir por aquí y ver dónde está. A partir. Eso es 2 1917 18 Voy a volver a mi, uh, mi grupo. Agregar en acción el de nuevo. Quiero agregar Mover aquí, y voy a buscar aquí el nombre de la categoría título de la categoría aquí. Yo quiero cambiar para pasar a. Yo quiero moverlo directamente al 19 por, uh, 17. 18 y luego lo animaremos. Está dentro y fuera de nuevo. 250 milisegundos. Muy bien, echemos un vistazo a cómo se ve esto. Pero en realidad, primero es deshacerse de ese maniquí de ahí. ¿ Todo bien? En una actualización. Está bien. Eso parece que queremos que se vea. Está bien, No, volver a entrar en real aquí. Y lo último que necesitamos para hacer que suceda es que necesitamos que aparezca esta superposición eso voy a volver a hacer clic en el grupo aquí y luego añadir otro show de acción. Y luego voy a golpear la superposición de ganado, en realidad, porque así se llama el grupo, y quiero mostrarlo, y quiero desvanecerlo en 250 milisegundos otra vez. Y entonces adivina qué tengo que hacer aquí abajo. Lo mismo, pero a la inversa. Entonces, uh, voy a mostrar la superposición. Pero esta vez quiero ocultarlo y sí, quiero animarme en este caso también. Muy bien, volvamos a nuestro prototipo aquí y actualicemos. Y lo tenemos funcionando. Ahora, adelante y haz eso por estos otros dos. Por lo que te acostumbras a usar múltiples acciones e interacciones en, en realidad, porque así es como vas a lograr toda tu rica interactividad con tus ricos prototipos. 14. Uso de estilos de interacción: en esta lección, vamos a aprender sobre algo llamado interacción. Estilos de interacción. Los estilos son similares a las interacciones, pero también son ligeramente diferentes. Esencialmente, lo que son es un conjunto de parámetros de formato a los que se asignan en objeto en la interfaz de usuario de su prototipo cuando ocurren ciertas acciones. Entonces echemos un vistazo al Senado un sitio por ejemplo. Entonces cuando pasamos por encima de estas cosas, podemos ver que se ponen de color rosa. Eso sería un ejemplo del estilo de interacción mouse sobre ratón. Ahora hay otros cuatro a los que llegarán en un poco que realmente apoya. Entonces, vamos a averiguar cómo podemos hacer esto en realidad. Por lo que en realidad sólo voy a navegar derecho a la lista de deseos. Vamos a hacer esto para la lista de deseos, y luego ustedes pueden hacer el resto por su cuenta. Entonces hay una serie de formas de llegar a los estilos de interacción en real, pero la que es la más fácil para mí recordar es hacer clic derecho o controlar haciendo clic en el objeto que quiero aplicar el estilo de interacción dos. Y luego voy a dar clic en efectos de estilo. Y entonces esta ventana subirá aquí. Ahora puedes ver aquí los otros cuatro estilos de interacción que pasa el ratón es en el que nos vamos a centrar hoy. Algunos de estos otros discutiremos en una clase más, más avanzada. Entonces una de las cosas que queríamos hacer es que queremos hacer el funt rosa. Entonces voy a revisar el color de la fuente porque esto significa que va a cambiar. El color de la fuente es parte de esta interacción y entonces eso parece ser un rosa lo suficientemente cercano para mí. Entonces voy a golpear OK, y vamos a volver al prototipo regenerar. Y si pasamos por encima de eso, ahí vamos. Pero si queremos que funcione así donde realmente hace rosado el corazón, vamos a tener que hacer un poco más de trabajo. Entonces volviendo al actor, lo primero que tenemos que hacer es añadir un estilo de interacción a esta cosa. Entonces el ícono en sí, Así que voy a hacer clic derecho efectos de estilo hit. Y para una Nikon, pensarías que sería la línea, pero en realidad es el color de relleno que necesitas cambiar y lo voy a cambiar por ese hit rosa. De acuerdo, vuelve al prototipo y refresca. Y ahí vamos. Ahora, ambas cosas se estaban poniendo de color rosa. El único problema es que no se están poniendo rosados juntos. Te mostraré cómo abordar eso. Entonces volvamos a lo real aquí, y podemos ver que estas cosas son en realidad un grupo. Um, y lo que podemos hacer es realmente poder seleccionar el grupo, luego hacer clic derecho y elegir esta opción llamada efectos de estilo de ratón de fuego. Lo que hará es enviar cualquier interacción de ratón directamente a todos los objetos dentro del grupo al mismo tiempo. Entonces si hago clic en eso y volvemos al prototipo y refrescamos y repaso la lista de deseos, ahí vamos. Puedo repasar cualquier área del grupo, y todo se vuelve rosa Ahora con el resto de lo que ustedes chicos necesitan hacer para terminar. Esto es para hacer esto por el resto de estas opciones de navegación aquí. Ahora bien, si eso te suena bastante tedioso, estás exactamente en lo correcto. Eso es muy tedioso. Te mostraré un consejo rápido que puedes dio Así que si solo Si tienes algo que tiene estilos de interacción seleccionados y lo copias, voy a golpear comando, Vea nuestro control. Ver, Lo que puedo hacer es realmente poder seleccionar otro objeto y hacer clic derecho en él o controlar. Click it realmente tiene que acercar aquí un poco y seguir adelante y ir Teoh pega especial . Y luego, um voy a pegar estilo y vamos a seguir adelante y refrescar el prototipo porque parece que no pasó nada. Pero ahora si voy por aquí, allá vamos. en realidad también puedas copiar y pegar estilos de interacción, esperando con ansias la siguiente lección donde empezamos a hablar de paneles dinámicos. 15. Uso de paneles dinámicos: básico: esto menos y vamos a aprender los conceptos básicos de los paneles dinámicos. Ahora, lo que es un panel dinámico es que es un área en tu edad prototipo que puede cambiar el contenido dinámicamente. Permítanme mostrarles un ejemplo de cómo se ve esto en el sitio Sunita. Entonces si nos desplazamos hasta aquí hasta las imágenes del producto, si pasamos por encima de esto, lo que pasa es que la imagen de fondo ahí cambia. Ahora vamos a prototipear a este un actor, ya sabes, debilitar, hacer la, uh, superposición tan usada como lo hicimos arriba. Pero por ahora, sólo nos vamos a centrar en hacer que esa imagen de producto cambie. Vosotros chicos podéis hacer la superposición por vuestra cuenta porque ya sabéis hacer eso. Entonces nuestro echemos un vistazo a cómo realmente haríamos esto. Un actor. Voy a desplazarme aquí abajo a las imágenes de producto que tenemos y ah, sólo voy a trabajar con esta en particular. Por lo que en realidad hay una serie de formas diferentes de conseguir un panel dinámico en tu prototipo. Una es arrastrarla de la biblioteca, pero casi nunca hago eso. Simplemente no me parece súper útil, porque cuando creo un marco de alambre, lo que estoy haciendo es usualmente estoy colocando el contenido primero. Entonces hay esta cosita linda que puedo dio donde puedo seleccionar algún contenido. En este caso, voy a ir aquí al esbozado para asegurarme de que tengo todo seleccionado que necesito tener seleccionado. Es necesario mirar los productos. De acuerdo, entonces aquí estamos, su producto, BG Imagen uno. Esto va a ser, ah, donde ahora existe mi panel dinámico. Un panel dinámico en sí mismo no es absolutamente nada. Es solo un límite para que parezca algo que necesitas para crear estados y contenido asignado a esos estados. Y es el cambio de esos estados lo que da el comportamiento que acabamos de ver en el sitio Sunita. Entonces la forma en que prefiero crear un panel dinámico es hacer clic derecho, hacer clic o controlar. Haga clic en el contenido seleccionado, uh, y presione crear panel dinámico es lo que esto va a hacer es que va a crear un panel dinámico con un estado, y ese estado tiene en él todas las cosas que he seleccionado. Entonces me pegué. Crea panel dinámico y puedes ver aquí tenemos un nombre genérico. Es su estado de panel dinámico uno, y luego el contenido que había seleccionado. Entonces lo primero que voy a hacer es,por supuesto, por supuesto, renombrar este tan producto imagen uno. Y también voy a renombrar el estado porque eso es algo que también es muy importante. Voy a llamar a este default me ayuda a hacer un seguimiento de lo que se supone que es dónde, bien. Y ahora te darás cuenta de que hay esta zona azul por aquí. Ahora bien, esto es muy nuevo en acción. Nueve. Una nueva forma de lidiar con los paneles dinámicos. Actor ha tenido paneles dinámicos desde hace algún tiempo, pero realmente han repasado cómo trabajas con, um Así que por defecto, probablemente en realidad se vea así. Um, así que aún verás todo el contenido que te rodea ahí podría ser un poco confuso porque, ya sabes, piensas que estás trabajando con el contenido, pero en realidad no lo estás. Por eso me gusta este largometraje aislado que también se conoce un actor nueve. Por lo que puedo mirar sólo en el contenido que estoy deseando crear. Ahora hay una serie de formas diferentes de crear diferentes estados porque vamos a necesitar hacer eso para poder cambiar entre ellos. Yo puedo subir aquí y golpear add state porque este pequeño tú me voy a permitir navegar nuevo entre estados. Esto es nuevo en real nueve, um, o puedo ir por aquí a la derecha o controlar haga clic en un estado o el propio panel dinámico y golpear Añadir estado. Pero lo que realmente voy a hacer es que voy a duplicar este estado porque el siguiente estado va a tener exactamente el mismo tipo de contenido, una imagen, y va a ser exactamente las mismas dimensiones. Entonces voy a llamar a este ratón estatal por ahí. Vamos, lo he aislado. Puedo ver que estoy en el ratón sobre estado, así que solo voy a hacer doble clic en esta imagen porque quiero reemplazarla por una nueva imagen a la que voy a golpear producto. Está bien, así que aquí está mi estado, mi ratón sobre estado. Y aquí está mi estado predeterminado más sobre estado. Muy bien, vamos a cerrar esto. Y así ahora volvemos a la propia página de marco de alambre en lugar de un estado de panel dinámico. Y vayamos a nuestro prototipo aquí y actualicemos esto y veamos cómo se ve eso. Ahora notas que no pasa nada. Y la razón por la que no pasa nada es porque tenemos que especificar una acción en particular llamada set panel state para que el panel dinámico se comporte así. Entonces vamos a ver cómo hacer eso en acción. De acuerdo, entonces voy a seleccionar el panel dinámico y, ah, como con cualquier otro objeto en real, puedes tener interacciones asociadas a este tipo de objeto. Entonces lo que queremos hacer es cuando el ratón se pone en marcha, queremos que cambie el ratón dentoso sobre el estado. Y cuando se apaga, queríamos volver al estado predeterminado. Entonces vamos a golpear nueva interacción y luego ir a nuestro viejo amigo en el ratón enter. Y aquí es donde las cosas se vuelven nuevas porque vamos a usar este nuevo tipo de acción llamado set panel state. Y lo que vamos a hacer es elegir un panel dinámico en particular. Entonces, por ejemplo, si tuviera múltiples paneles dinámicos, podría cambiar el estado de otro panel dinámico. Pero voy a mantenerlo sencillo y decir este widget porque eso siempre es autorreferencial. Y en el ratón entrar, quiero que se quede, que cambie, que pase el ratón. Por lo que selecciono ese estado aquí. No quiero hacer ninguna animación, aunque hay todo tipo de cosas divertidas que puedes hacer ahí va a golpear. De acuerdo, Y entonces, claro, tengo que añadir la interacción correspondiente en mouse out. Por lo tanto, de nuevo, establezca el estado del panel en este widget en el estado predeterminado. Eso es lo que quiero. Y otra vez, sin animación. OK, y ahora volvamos a revisar nuestro prototipo. Refresca y pasa el ratón y ahí vamos. Eso es lo que esperamos. Entonces esos son los fundamentos de trabajar con paneles dinámicos y actor. En la siguiente lección, veremos algunas de las propiedades e interacciones más únicas asociadas a los panelesdinámicos los paneles 16. Uso de paneles dinámicos: intermedio: en esta lección estará aprendiendo sobre algunas propiedades adicionales que son únicas de los paneles dinámicos . Entonces déjame cambiar al sitio Sunita y mostrarte de lo que estoy hablando. Así que presta atención a estas dos barras aquí arriba, que la de arriba se vaya, y luego la de abajo aparece otra vez y luego se pega a la parte superior de la ventana después de que te desplazas hacia abajo hasta cierto punto ahora, consiguiendo que las cosas se peguen en cualquier parte de la ventana. Eso es algo que es muy fácil de hacer con los paneles dinámicos. Cuando, si bien puedes hacer esta interacción donde solo aparece después de desplazarte hacia abajo hasta cierto punto, sí requiere técnicas más avanzadas. Entonces te mostraré lo que vamos a hacer en su lugar. Entonces si miramos a estos dos, arriba los nuestros, sólo vamos a pegarlos a la parte superior de la ventana y mantenerlos ahí para todo con de la ardilla. Entonces la forma en que hacemos esto va a entrar en actor. Ah, Como dije en Lee, los paneles dinámicos tienen esta propiedad de poder permanecer en algún lugar de la ventana mientras estás desplazando el desplazamiento. Entonces lo que voy a hacer es que voy a crear estos. El NAB están en la barra superior como paneles dinámicos. Por lo que voy a la derecha, hacer clic o controlar, hacer clic en él, crear panel dinámico, luego nombrarlo. Panel de barra superior. A mí me gusta Teoh. ¿ Tienen mis paneles realmente el panel de nombres en ellos? Simplemente me ayuda a hacer un seguimiento de las cosas ya que estoy prototipando. Entonces yo voy a hacer lo mismo aquí, excepto que voy a llamarlo nab nuestro panel. Y ahora, con el fin de que se pegue en la parte superior, lo que tenemos que hacer es dar click en este enlace de aquí. Ahora bien, esta es una sección que tendrán los paneles dinámicos Onley. Permite controlar el desplazamiento así como un par de otras propiedades. Pero el del que vamos a hablar ahora mismo está anclando al navegador. Entonces pinning es como haces las cosas pegajosas. Entonces para hacer eso, le das click en el navegador Pinto, selecciona esta casilla de verificación y como queremos que esto esté en el centro de la pantalla, vamos a arreglar esto en el centro y queremos que esté anclado a la parte superior y nosotros quieren mantenerlo en el frente. Entonces vamos a golpear, OK, OK, Y ahora eso no va a tener ningún cambio para nosotros aquí en el verdadero tú ¿por qué? Pero cuando vamos a ver en realidad esto, lo que vamos a ver es que esto sí se ve un poco diferente. Para que esa se quede atascada ahí arriba en la parte superior. Y lo vamos a hacer con este también. Así que haga clic en ese pin a pin del navegador a la ventana del navegador y vuelva a golpear centro. Ahora, aquí te darás cuenta de que hay un margen. Ese margen sólo significa que esto es esencialmente 40 píxeles hacia abajo desde la parte superior de la página. Voy a golpear eso y luego ir aquí a refrescarse. Y ahí vamos. Eso es lo que buscamos. Entonces eso es todo lo que necesitas hacer para pegar las cosas a la parte superior de la ventana. Sí quiero mostrarles algunas otras propiedades interesantes de los paneles dinámicos. Entonces una de las cosas que puedes hacer es que realmente puedes asignar ah color de fondo a un panel dinámico. Uh, y por qué eso es interesante es porque se puede hacer un panel dinámico 100% con ancho en cualquier ventana del navegador. Entonces lo que voy a hacer aquí es ir al color y voy a teclear d siete d siete porque resulta que sé que ese es el valor hexadecimal del fondo de esa barra en particular. Y lo que vas a ver es que no vas a ver nada aquí en este momento. Pero cuando voy al, uh el navegador y refresco y si lo encojo un poco para que veas cómo todo se queda ahí en medio y luego éste, uh, se extiende todo el camino. Ahora bien, este es un patrón muy común que Ah, se ve mucho en los sitios web modernos. Entonces esta es una buena manera, Teoh para recrear ese actor. Ahora lo otro interesante de los paneles dinámicos es que tienen interacciones únicas asociadas con, um así que he seleccionado en este panel, y si golpeo nueva interacción, verás un montón de cosas que tú normalmente no ven como en el cambio de estado del panel. Entonces cuando un panel dinámico cambia para mostrar contenido diferente o un estado diferente, puedes hacer cosas. Cuando eso sucede, en realidad puedes usar paneles dinámicos para hacer interacciones de gota de dragón. Y si estás creando prototipos de experiencias móviles nativas, puedes usar paneles dinámicos para hacer interacciones tipo deslizamiento. Um, y también puedes hacer interacciones de desplazamiento con cuando te desplazas dentro del panel dinámico . Normalmente, sólo se puede hacer esto cuando se está desplazando por la página, y eso es lo que tengo que mostrarles sobre algunas propiedades e interacciones especiales adicionales asociadas a los paneles dinámicos. Espero llegar a un tutorial de panel más avanzado, dinámico en el futuro porque hay muchas cosas realmente interesantes que puedes hacer con estos widgets. 17. Introducción a los maestros: Los maestros son una de las características y la acción más potentes. Permiten reutilizar contenido y funcionalidad a través de su prototipo mientras lo mantienen en un solo lugar. Ahora en la versión nueve, realidad lo han hecho aún mejor al agregar anulaciones de estilo de boceto. Lo que esto significa es que puedo crear un componente complejo, usarlo a través de mi prototipo, cambiar el contenido para cada instancia de ese componente y luego seguir manteniendo las interacciones y el diseño básico en un solo lugar. Es súper impresionante. Está bien, sigamos adelante y empecemos a aprender sobre los maestros. 18. Crear maestros: en esta lección, aprenderemos a trabajar con maestros, que son objetos en realidad que nos permiten reutilizar estilo, contenido y funcionalidad. A lo largo del prototipo, puedes encontrar maestros por aquí al lado de tus bibliotecas. Por defecto. Estará vacío porque en realidad tienes que crear un maestro primero. Entonces voy a llamar a este maestro de pruebas y te darás cuenta de que aquí no ha pasado nada lo cual está totalmente bien porque un maestro está en y por sí mismo, su propio marco de , alambre. Entonces lo que hay que hacer es realmente asignar cosas al maestro. Pondré esta caja aquí arriba, y luego pondré una imagen en la caja que nos queda bien. Y cuando vuelvo a casa de nuevo, nada ha cambiado. Si voy a amos aquí, puedo arrastrar este objeto. En realidad es objeto compuesto en este punto a la página. Ahora hay múltiples instancias de la misma. El genial de los maestros, sin embargo, es que si cambio algo en el maestro como um, agregar ah, encabezamiento, encabezamiento, agregar algo de texto aquí y volver a la página principal que los cambios se hicieron automáticamente todas las instancias del maestro. Entonces veamos un ejemplo real donde usaríamos esto porque lo que acabamos de describir es algo que no es como normalmente funcionaría. Normalmente. Lo que me gusta hacer es remolcar marco de alambre en su lugar y luego a la derecha, haga clic o control, haga clic y golpee. Crear Maestro. Esto funciona igual que crear paneles dinámicos. De esta manera. Voy a llamar a este listado de productos, acuerdo? Y ahora tengo este maestro, Así que hay mucha, uh, uh, funcionalidad e interactividad que está sucediendo aquí. Pero ahora podría comer, copiar eso a lo largo del resto de estas cosas y no tener que rehacer eso. Pero una de las cosas interesantes, sin embargo, es que, um, para productos como este, querrías tener contenido diferente. Y aunque tenemos este maestro de listados de productos aquí, una de las cosas que es nuevo en la versión nueve es esta idea de overrides. Esto es muy parecido a las anulaciones de símbolos y boceto si eres usuario de boceto, pero en realidad puedes cambiar este contenido. Eso, por ejemplo, déjame realmente eliminar esto y crear otra instancia del listado de productos porque cuando estás haciendo estas anulaciones, en realidad no estás cambiando el contenido del maestro. Sólo te cambias tu único cambiando el contenido de la instancia del maestro. Entonces aquí, en el listado de productos uno, esto en realidad es, um uh, algo como esto. Entonces voy a llamar. Yo también voy a cambiar el precio. 1 99 y llame uno a los productos del producto. Y ahora puedes ver esos cambios reflejados por aquí puedo aunque quiera elegir las imágenes. Entonces la imagen predeterminada voy a ir por Ah, digamos que voy a ir por imágenes en color esta vez. Y luego el ratón sobre la imagen. Voy a hacer esta imagen. Y ahora cuando vamos al prototipo y regeneramos, se puede ver aquí abajo, aún conserva todas las interacciones. Esto son los dos iguales. Um, todavía se mueven de la misma manera. Ahora probablemente te estés preguntando, OK , bueno, ¿de qué sirve esto Si puedo cambiar todo ese contenido? El uso es si quieres cambiar algo sobre esta interacción. Entonces, por ejemplo, voy a entrar aquí, y la interacción está diciendo que va a mostrar a la superposición un 2 250 milisegundos. Entonces, en realidad aumentemos eso a 500. Lo mismo con el pellejo. Y ahora cuando vayamos por aquí y volvamos a refrescar el prototipo, notarás que ambos funcionan. De igual manera, ambos tienen el mismo desvanecido. Y esa es la ventaja. Porque si quieres cambiar la naturaleza de una interacción para un maestro como este, si estás anulando el contenido, entonces realmente solo tienes que cambiarlo en un solo lugar. personal, creo que eso es, ah, fantástica nueva adición a después de las nueve. Ahora, les animaría a seguir adelante y hacer eso por todos estos. Siéntete libre de añadir cualquier imagen ahí dentro que quieras. 19. Behaviors de maestro: esta lección aprendió sobre algunos tipos diferentes de comportamientos que los maestros pueden exhibir cuando los sueltas en la página. También hablaremos un poco de planeación y estrategia a la hora de construir tu prototipo, porque usar maestros puede o bien acelerar realmente las cosas o potencialmente ralentizar las cosas. Entonces lo que hemos visto hasta ahora es solo un maestro que asignaste a una página y va donde lo pusiste. Y cuando cambias algo en ese maestro que cambia actualizaciones y otros maestros, a menos que , por supuesto, se haya anulado. Pero si realmente haces clic derecho en estos maestros de la lista, llegarás a algo que diga Drop behavior, el comportamiento predeterminado. Lo que acabamos de describir es lugar en cualquier lugar. Hay otros dos comportamientos bloquean a la ubicación maestra, lo cual es interesante. Aquí puedes ver los cambios de icono. Ahora si entramos en el propio maestro de listado de productos, su ubicación es 00 Entonces lo que va a pasar es que cuando arrastre este maestro por aquí, voy a ponerlo aquí mismo. Pero no va a ir ahí. Se va a reponer todo el camino hasta 00 ahora Esto no es uno que use mucho más porque tenemos paneles dinámicos que podemos anclar a la parte superior de la página. Normalmente, uso mucho esto para, um para la navegación. Ahora hay otro comportamiento al que llamar breakaway on. Lo que esto hace es que esto significa que es ah, maestro que no necesariamente está atado a nuestra más bien una instancia del maestro que no está atada al propio maestro. Entonces puedo, ya sabes, entrar aquí y borrar las cosas individualmente, etcétera, etcétera. Um, pero de nuevo, esto no es uno que primero me veo usando mucho más. Por las anulaciones de maestría, puedo lograr lo mismo de una manera mucho más eficiente con esas anulaciones. Cuando empecé a crear prototipos con actor, simplemente entraba directamente a la herramienta y comenzaba a crear prototipos. Y luego a mitad de camino, descubro una forma más eficiente de hacer algo, y luego regresaría y lo haría de la manera eficiente, y luego terminaría tomando mucho más tiempo. Entonces lo que ahora recomiendo a la gente es que no pienses que un actor piense en un cuaderno de bocetos, dibujen cosas, piensen todo a través, y luego representen su diseño. Y en realidad, cuando el tiempo esté listo y luego también pensar a través de lo que va a ser un maestro, piensa a través de lo que va a ser un panel dinámico. Piensa en cómo van a interactuar las cosas y eso te ayudará a ser mucho más eficiente cuando llegues a crear prototipos. Un actor actor es un programa muy complicado y fondo de usar, así que si no te metes en ello, plan Feli puedes bajar por algunos agujeros de conejo bastante profundos. 20. Introducción a las vistas adaptativas: Las tecnologías receptivas han existido desde hace algún tiempo. Sitios web en Native Mobile APS se expanden y contratan para adaptarse a cualquier dispositivo que los acceda. Desafortunadamente, no muchas herramientas de diseño hacen que sea fácil usar sistemas de marco o prototipos como ese. En realidad, sin embargo, sí es uso adaptativo. Característica hace que sea bastante fácil prototipar un sistema responsive ahora, aunque las vistas adaptativas son tamaños de puerto de vista fijos y no realmente responsivos, eso suele ser lo suficientemente bueno para las pruebas de usabilidad o para comunicarse con las partes interesadas como gestores de productos e ingenieros o cualquier otra persona y también inversión nueve. Estos se han vuelto aún más útiles con la adición de la función adaptive you sets. Lo que esto hace, básicamente es. Ahora puedo tener diferentes tamaños de puerto de vista para diferentes páginas, lo que aumenta en gran medida la flexibilidad de mi prototipo. Entonces sigamos adelante y averiguemos cómo usar el uso adaptativo y el actor 21. Cómo configurar Vistas adaptativas: en esta lección, aprenderemos cómo configurar actor para acomodar prototipado para sistemas sensibles mientras que en realidad no podemos prototipar la respuesta completa de sí misma. Se puede acercar con algo llamado adaptativo. Usa la forma más fácil de configurar usos adaptativos para seguir adelante y haz clic en algún lugar fuera de tu marco de alambre y haz clic en este panel de estilo aquí a la derecha. Y luego habrá algo aquí que diga, Agregar uso adaptativo. Adelante y haz click en eso. Ahora saldrá este diálogo y te mostrará una vista base. Esta es la vista que es tan amplia como su marco de alambre actualmente es, Um, así que en realidad voy a nombrar esta vista. Llámalo pantalla grande solo para ayudarme a entender qué es qué. Y lo que voy a hacer es crear vistas adicionales para acomodar situaciones en las que el puerto de vista sea menor a 14 40 píxeles. Entonces voy a añadir otra, y voy a usar esta práctica función preestablecida, que es super slick, y voy a golpear tablet paisaje y luego una más para tablet retrato. Ahora lo que está pasando aquí es que estas vistas se mostrarán en diferentes momentos por lo que la pantalla grande se mostrará Are en cualquier momento. El puerto de vista es de 14 40 píxeles o más ancha tableta Landscape se mostrará en cualquier momento. El puerto View es de 10 entre 10 24 y 14 40 píxeles y luego se mostrará la tableta vertical cuando el puerto View esté entre 7 68 y 10 24. Pero entonces también ya que es la vista más baja cualquier más pequeña con también. Entonces cuando golpee OK, lo que verán pasar aquí arriba es que estas vistas aparecen como por encima del marco de alambre. Voy a desmarcar esto. Hablaremos de esto en la siguiente lección. Pero lo que esto nos permite hacer es realmente asignar cosas diferentes a diferentes marcos de desgaste . Ahora es difícil contar que algo ha pasado en este momento. Pero si nos desplazamos todo el camino hasta la parte inferior y vemos especie del ancho de la página, si hago clic en tablet horizontal y tablet retrato, puede ver que estos que el tamaño de página esencialmente se hace mucho más pequeño. Y en la siguiente lección aprenderemos sobre realmente cómo usar marco en esa situación. Ah, una de las cosas que es nuevo en acción. Nueve. ¿ Es esta idea de adaptativa que establece en versiones anteriores, la única forma en que podría lograr el uso adaptativo era prototipo ancho, por lo que cada página tendría el mismo uso adaptativo. Ahora, si hago doble clic en tienda aquí, notarás que no hay ninguna configuración de uso adaptativo. Um, pensarás que probablemente te preocuparás de eso de acuerdo, ¿tengo que configurar estos para cada página? Y sí y no, uh, tienes que prepararlos, pero es bastante fácil. Entonces si has creado un conjunto adaptativo de vistas adaptativas en una página, si haces clic en agregar vistas adaptativas en una página que no las tiene, en realidad puedes seleccionar uno de los conjuntos que ya has creado. Entonces voy a hacer eso ahora mismo, y podemos ver que es exactamente lo mismo que hacíamos antes. Y podemos ver las cosas cada vez más pequeñas, igual que lo hace en la página principal. En la siguiente lección, hablaremos de cómo realmente usar marco en esta situación, con ganas de hacerlo 22. Entorno de cable adaptable: Ahora que tenemos nuestro adaptativo usted configurado, podemos seguir adelante y asegurarnos de que nuestro marco de alambre se vea bien en todos los diferentes tamaños de informe . Y antes de que empecemos, asegúrate de desmarcar afectar a todas las vistas. Hablaremos de lo que eso hace y un poco así porque el encuadre de alambre adaptativo puede llevar un poco de tiempo. Yo sólo me voy a centrar en un objeto aquí. Entonces ah, es esta imagen de héroe aquí. Por lo que ahora mismo en pantalla grande, se ve igual que lo ha hecho en el pasado. Ahora, si hago clic en el paisaje Tablet, todavía se ve igual. Pero en realidad voy a cambiar su tamaño aquí. Entonces si lo hago que con de de la página y luego vuelvo a una pantalla grande, ves que las cosas de pantalla grande permanecen sin cambios. Pero en la tableta de retratos, ese cambio se ha filtrado hacia abajo. Esa es la herencia de la que estábamos hablando en la lección anterior. Por lo que ahora tenemos estos tres tamaños para estos tres puertos de vista. Echemos un vistazo a cómo se ve eso en el navegador. Entonces si me desplazo aquí abajo, um, podemos ver que la imagen es todo el camino ancho en esto. Y no, porque esto es a los 14 40 ese es el tamaño de mi monitor. Se va a reventar de inmediato. Por lo que esta es la vista de tablet paisaje y bastante pronto estará en la vista de tablet retrato. Ahí vamos y se puede ver cómo todo lo demás sigue igual. Y así es básicamente como funciona el encuadre consciente, uh, uh, en estos diferentes puntos de vista. Ahora hay un par de otras cosas interesantes. Una es que si estamos en una vista inferior, normalmente, um, lo que hacemos aquí no afecta a ninguno de estos puntos de vista superiores, y se puede decir porque estos aire tipo de gran salida. Pero si golpeo efecto todas las vistas, estas cosas se ponen verdes, y lo que realmente puedo hacer es agregar algo que voy a agregar, encabezando uno aquí y luego cuando tabule sobre el dedo del pie tableta paisaje y pantalla grande, eso sigue ahí. Entonces eso es lo que efecto hace todos los puntos de vista. Tiendo a no usar eso porque realmente puede estropear las cosas si no estás realmente en el balón. Ahora hay otra cosa que es interesante acerca de adepto de prototipado versus encuadre de alambre , y por interesante me refiero realmente bastante molesto. Um, pero eso es tratar con interacciones. Entonces echemos un vistazo a esta interacción que tuvimos el prototipo antes. Ah, y veamos si podemos cambiarlo entre vistas. Por lo que esta máscara se desvanece a 250 milisegundos para una pantalla grande. Pasemos a la tableta horizontal y cambiemos a 500. Ahora, ¿qué crees que va a pasar aquí? Ah, tableta de retrato. Sí, 500. Eso es lo que esperarías. No obstante, en pantalla grande, también cambia, por lo que en realidad no se pueden tener interacciones diferentes para diferentes puertos de vista. Personalmente, creo que eso es una especie de señorita, pero eso es lo que tenemos que lidiar. Por lo que afortunadamente, hay una manera de lidiar con ello, y eso es con este maravilloso widget mágico llamado el punto caliente. Ah, hot spot es esencialmente un área invisible en la página a la que se pueden aplicar interacciones . Voy a hacer un atajo aquí y seleccionar este objeto porque estas son las interacciones que quiero y voy a hacer clic y controlar Haga clic en un poco de turno click en esto y, uh, copiarlos con comando, ver o control, ¿ Ves? Y luego sólo voy a seleccionar el punto caliente y golpear el comando V para pegar o controlar V, y se puede ver que estos realmente aparecen ahí mismo. Y voy a nombrar esto. Voy a llamar a este gatillo de tablilla paisajista. Y entonces lo que voy a hacer es moverlo encima de esto, así que en realidad va a absorber las interacciones y no disparar las de abajo. Y si voy a parte tablet, se puede ver que está ahí también. Pero no está ahí en gran pantalla. Entonces aquí, lo que voy a hacer es realmente puedo cambiar la interacción aquí sobre esto en lugar de tener que hacerlo en el objeto mismo. Y cuando llegue a la tablilla de retrato Ah, en realidad voy a, uh, hacer lo mismo. Pero voy a borrar este. Um, verás que sigue ahí en tablet de paisaje y crear otra y hacer este tipo de cosa similar como lo hice la última vez, una copia estas interacciones y pegarlas. Pero esta vez lo voy a hacer 1000. Entonces esencialmente sólo un segundo. Está bien, y luego voy a poner eso aquí abajo justo donde estaban los otros, y voy a llamar a este disparador de tablilla de retrato. De acuerdo, así que ahora son 1000 en tablet de retrato. Se trata de 500 milisegundos en paisaje y el regular a 50 en la pantalla grande, y así es más o menos como tenemos que manejar esto. Conoce lo otro que quiero mostrarte asociado a esto es esto. Te darás cuenta de que estos están listados en rojo porque esto significa que estos aire en la página pero no son visibles en esta vista. Entonces si voy a la tableta de paisaje, se puede ver que lt Trigger ahora es visible. Y para tablet de retrato, PT Trek Trigger ahora es visible. Ahora el rojo significa algo muy raro de decir. Significa que esto ha sido injugable est desde la vista, lo que significa que simplemente no está en la vista ahora. Si hago click derecho o control, click en él, puedo volver a colocarlo en la vista, Um , y además, si tengo P t trigger, puedo quitar algo justo de esta vista por control o haciendo clic derecho y haciendo clic en UNP encaje desde la vista. Um, pero sí, así es como manejas las interacciones y usas encuadre para prototipos adaptativos. En la siguiente lección, hablaremos sobre cómo los maestros impactan esto y la versión corta. Es realmente genial. 23. Masters adaptativos: No son sólo las páginas las que pueden tener uso adaptativo. Los maestros pueden tener un uso adaptativo y combinado con la capacidad de anular el contenido bastardo . Puede ser un ahorrador de tiempo realmente poderoso para ti. Entonces es desplazar aquí abajo y echar un vistazo al maestro que creé antes. Por lo que este producto listing Master Ah, ahora puedes ver en cada una de estas vistas es lo mismo. Y si hago doble clic en este dedo del pie, ábrelo. Podemos ver que en realidad no hay ningún uso adaptativo para este maestro de nuevo porque vistas adaptativas están asociadas a las páginas y puedes agregar conjuntos como quieras. Entonces lo que en realidad voy a hacer es que voy a agregar vistas maestras. Por lo que las vistas maestras son ligeramente diferentes al uso adaptativo, y ya verás, ¿por qué es esta base? Ya verás que no tiene medida. Voy a llamar a esto grande de ustedes y agregar uno más, um, y simplemente llamar a esa pequeña vista, y ahora podemos ver que aquí tenemos estas diferentes vistas. Entonces a pequeña vista, en realidad voy a hacer clic en eso y hacer que obviamente se vea diferente. Hay una vista grande. Hay vista pequeña y Ahora volvamos a nuestra página principal. Y a medida que pasamos por los diferentes puntos de vista aquí de nuevo, nada ha cambiado. Um, pero hagámoslo en la vista de tableta paisajística. Voy a seleccionar una de estas instancias y se puede ver que hay este campo adicional por aquí por las anulaciones. Aquí es donde puedo elegir cuál de ustedes del maestro que quiero. Y así en esta, realidad voy a tener estas dos vistas al mismo tiempo. Y en este, voy a tener ambos a pequeña vista y podemos ver cómo se juega esto en el prototipo. Entonces, refresquemos esto y bajemos aquí. Y así es normal aquí. Y entonces va a cambiar cuando entre en esa vista. Entonces ahí vamos, y luego uno más. Y ahora los dos podemos verlos ahí ahora, ya que el encuadre de desgaste adaptativo puede ser bastante finicky, hay un montón de cosas para dio um, quiero animarte a mirar por encima del archivo de ejercicios terminados porque me he ido a través y hecho todos los puntos de vista para ello. Ahora he tomado mi propio consejo y solo prototipo lo suficiente para llegar mi punto a través, que es este top bit de aquí. Ahora una de las cosas que específicamente quieren mostrarte es este maestro en particular, porque lo que está pasando aquí es que cada uno de estos maestros está siendo anulado con contenido, pero es exactamente el mismo maestro. Entonces si voy aquí a categoría, podemos ver que ahí está la vista de tableta de paisaje, la vista de tablet retrato y lo que también he hecho es donde ustedes chicos realmente tenían esta configuración para usar esta acción de movimiento que estaban usando mover en lugar de mover por. He cambiado esto para pasar y luego no necesité cambiar la interacción entre pantalla grande en la tableta de paisaje. Pero para tablet de retrato, aún así necesitaba dedo del pie. Agrega el hot spot ahí con unas interacciones diferentes porque en realidad me estaba moviendo por un número diferente de píxeles. Para sacar el máximo provecho de esta clase, adelante y enmarque completamente el alambre todo el uso adaptativo para todo este sistema. No, no hemos hecho mucho esto en la clase, pero eso se debe a que puede llevar bastante tiempo. Pero aprenderás mucho si haces eso y asegurarte de revisar el archivo de ejercicios completados. Si te atascas, hay un montón de cosas buenas ahí dentro, Así que a continuación estaremos hablando de documentación y estoy deseando eso. 24. Introducción a la documentación: su no eficiente al prototipo. Todo lo último que quieres que haga tu sistema. Y ahí es donde la funcionalidad de documentación de los actores viene en cosas como notas de página y notas de widget. Usé estas cosas dos para comunicar cosas que no tiene sentido. Los mensajes de aire prototipo son un ejemplo realmente bueno es genial para prototipar un ejemplo de un error. De esa manera, gente concibe el comportamiento del mensaje donde aparece el mensaje y la animación asociada a él. Pero no tiene sentido crear prototipos de cada última condición de aire y mensaje asociados con él. Entonces lo que hago es documentar esas cosas en su lugar en una nota que hace mucho más eficiente trabajar con Actor ahora en la versión nueve, no mucho ha cambiado sobre la documentación es a cosas nuevas. Una de esas es que ahora puedes mover una nota de un widget a otro widget. También puedes tener múltiples notas en un solo widget. Pero lo que es realmente diferente es cómo ha evolucionado la participación real. Ahora se llama nube real, y es una plataforma de colaboración muy imaginativa. Entonces sigamos adelante y comencemos a documentar cosas y en realidad 25. Documentación de páginas y widgets: en esta lección, vamos a aprender sobre cómo usar la funcionalidad de documentación de actores para comunicar más información sobre tu prototipo, cómo se supone que debe comportarse o cualquier otra cosa a tus colaboradores, como producto gerentes, ingenieros o cualquier otro tipo de interesado. Entonces sigamos adelante y empecemos. Ahora, cuando estamos haciendo documentación y actor, hay esencialmente a niveles que podemos hacerlo a nivel de marco de alambre, que es donde estamos comunicando información sobre ah páginas Ah, agujero y luego en el individuo nivel de widget, donde estamos comunicando información sobre widgets individuales. Entonces si queremos comunicar información sobre la página del todo, solo tienes que seguir adelante y dar click fuera de cualquiera de los widgets y luego seguir adelante y dar click aquí desapercibido y verás el nombre de la página. Y luego esta cosa de aquí que dice página visión general. Aquí es en realidad donde puedes escribir tus notas, así que solo voy a escribir I. Soy una nota de página, y luego cuando vayamos al prototipo generado aquí arriba, refresca esto. Si no podremos ver notas a menos que pinchemos en este ícono aquí arriba, esto muestra la documentación. Por lo que se ve el nombre de la página así como la nota en sí. Por lo que aquí es donde comunicaría información sobre las condiciones bajo las cuales aparece esta página . Ah, comportamientos especiales y situaciones especiales, ese tipo de cosas. Entonces sigamos adelante y veamos documentar widgets. En realidad voy a bajar aquí y, ah, ah, normalmente lo que harías cuando estás documentando un widget es que darías clic en el widget y luego pincharías en notas. Ahora notarás que aquí no hay nada. Esto es algo por lo que en realidad no estoy súper feliz porque un actor nueve al menos no se puede documentar un grupo. Entonces en realidad tengo que hacer clic en, ah, un objeto para poder poner notas sobre esto. Entonces en este caso, sólo voy a poner esta nota en la imagen de fondo de Categoría dos. Um, así que puedes ver aquí donde dice nota, yo voy Teoh, entra En alguna información, soy una nota, y verás aquí que en cuanto crees una nota, uh, aparece otra. Y además, cuando creas esa primera nota, esa pequeña etiqueta aparece aquí y también puedes crear varias notas por objeto, lo cual es realmente genial. Yo soy otra nota, y si tienes contenido asociado a un widget o cualquier tipo de interacciones, puedes hacer clic en este ah, icono adjunto, y puedes incluir ambos. En este caso, no hay texto ni interacción asociada a esto, pero si lo hubiera, se tiraría de eso. Y la razón por la que querrías hacer eso es porque si estás usando este prototipo para comunicarte con los ingenieros, a veces agarrar texto de un prototipo es difícil para que los ingenieros puedan entonces simplemente sacarlo de tu nota. Entonces veamos cómo se ve esto en el prototipo y actualicemos. Haga clic en mis notas aquí y aquí. Mi nota de página está ahí, y mis notas individuales están ahí en ti. Puedo ver muy claramente en qué se encuentra la nota individual, y puedo hacer click en ella. Va justo ahí abajo. Entonces esto es en realidad y si hago clic en el número real que consigo la nota aquí, así que básicamente es realmente, muy difícil perderse las notas Ahora. También puedes hacer este tipo de documentación en maestrías. Encuentro que eso es súper útil a la hora de comunicarme sobre el comportamiento de objetos como este . En la siguiente lección, hablaremos un poco de publicar tu prototipo en la nube real, que es lo que te permitirá realmente poner en marcha esa colaboración. 26. Publicación en Axure Share: para sacar el máximo provecho del actor como herramienta de colaboración, realmente necesitas publicar tus prototipos a Cloud real. Si vas a hacer eso, lo primero que debes hacer es ir al actor dot cloud y crear una nueva cuenta. Ya tengo cuentas, así que solo voy a seguir adelante y ah, inicia sesión aquí. Um, así que esto es todo de mis cosas de actor, pero eso no es importante en este momento. Lo importante es volver a la realidad y asegurarte de que estés conectado aquí. Entonces si vas a la cuenta y golpeas, inicia sesión en tu cuenta real, solo tienes que introducir las credenciales de Crittenden que acabas de crear para tu cuenta de nube real, y deberías estar bien para ir, hombre. Entonces, una vez que hayas hecho eso, puedes presionar este botón de compartir. Ahora, cuando golpee esto, esto va a verse un poco diferente porque en realidad necesito publicar esto a un nuevo año, Earl, um, porque he creado y borrado este prototipo un número de veces. Entonces cuando lo haga, esto es lo que te buscará por defecto. En realidad voy a elegir un lugar diferente dedo del pie poner esto porque tengo un montón de carpetas en mi cuenta en la nube real. Puedo proteger con contraseña si no lo hago si quiero, pero no quiero hacer eso ahora mismo. Uh, esto es importante. Asegúrate de tener comentarios de permitir comprobados. De lo contrario, otras personas no podrán comentar tu prototipo. Entonces voy a golpear Publish on this sí toma un poco de tiempo, incluso con un prototipo relativamente pequeño como este. Entonces sólo voy a golpear lentamente Copiar eres l Y de ninguna prisa maravilla volver aquí a mi navegador, meterlo ahí dentro y estuvimos ahí. Entonces déjame ir a la página de inicio Sunita home. Muy bien, Entonces lo que estamos viendo para hacer comentando sobre actor share es que usas esta pequeña nota por aquí. Um, en su mayor parte, lo que quieres hacer es golpear. Agregar comentario en pantalla. Ahora, lo importante es que tienes que desplazarte a donde quieres agregar el comentario. Porque una vez que hagas clic en esto, ya no podrás desplazarte. Entonces voy a añadir un comentario aquí cuando haga clic en eso. Está numerada. Y me está diciendo quién soy para que capte mi nombre. Ah, aquí está mi cometa. Entonces voy a publicar eso, y puedo seguir haciendo eso. Um, pero necesito golpear la salida para salir de eso. Para que eso aparece aquí puedes responderle y, ya sabes, puedes editarlo. Se resuelve el mercado. Una de las otras cosas interesantes está en otro comentario aquí, Um, también puedes hacer click en esto. Y lo que eso hará es que me permita tomar una foto particular de lo que estoy hablando. Voy a decir que quiero retomar esta fotografía. Ah, y entonces también puedo cambiar el color por la razón que sea y luego salir. Y esto muestra muestra aquí arriba. Um, Y cuando hagas las notificaciones por email, te lo advierto, habrá un gran número de ellas. Um, pero toda esta información, incluyendo estas fotos, aparecen ahí arriba. Por lo que es realmente fácil hacer un seguimiento de lo que está pasando. Para que eso termine nuestra lección sobre la publicación en la nube real 27. Conclusión: felicitaciones. Has completado la intro a la creación de prototipos, y después de las nueve, hemos hablado de interacciones de encuadre de alambre, maestros, diseño responsive y documentación. Y lo creas o no, esos son sólo lo básico. Por lo que espero cubrir algunos temas más avanzados en próximas clases. Cosas como interacciones avanzadas, interacciones basadas en formas de animación y aplicaciones dinámicas también cosas como lógica condicional y diseño visual detallado. Por lo tanto, mantente un ojo fuera de esos. Mientras tanto, quiero agradecerle tanto su atención, su interés en su tiempo. Y espero que hayas aprendido mucho. Cuídate.