Wireframing intermedio en Axure RP 8

1. Introducción: hola allá, y bienvenidos a mi segunda clase de encuadre de alambre con R P. real . Ocho. Esta clase cubre más en profundidad y temas complejos y habilidades y técnicas que serán perfectas para alguien que ya se ha mojado los pies con ER real y solo quiere aprender un poco más y hacer que sus marcos de alambre realmente destaquen si tú ya he visto mi introducción al video real que tu perfectamente preparado para esta clase. De no ser así, te sugeriría que vuelvas a mi primer video, que se llama una introducción al R P ocho real, solo para mojarte los pies con el software. Y para que sepas de lo que estoy hablando. medida que pases por estos videos, asegúrate de hablar de tu propio proyecto de clase en los comentarios a continuación también, un enviar cualquier pregunta para que otros estudiantes puedan beneficiarse de tu propio aprendizaje. Gracias y empecemos 2. Maestros y grupos: Esta primera clase cubre dos técnicas importantes para hacer tus marcos de alambre de manera más eficiente. A la primera técnica se le llama Maestros, y a la segunda se le llama agrupaciones. Ahora estoy usando este marco de alambre que hice en mi primera clase de actor. Es sólo un marco de alambre realmente simple. Entonces si no tienes esto o no sabes cómo hacerlo, sugeriría volver a mi primera clase e introducción a la acción. Entonces entiendes cómo se hizo esto. Ahora tengo mi mapa de sitio aquí con varias páginas diferentes, pero están todas en blanco en este momento. Sé que quiero crear más pantallas de este marco de alambre, pero no quiero tener que crear cada elemento una y otra vez porque eso sería demasiado trabajo. Pero puedo hacer algo llamado Creando un Maestro. Y la forma en que haces eso es, seleccionas cada elemento que quieras estar en tu maestro. En este caso, sólo voy a seleccionar las cosas que quiero ser. Ah, algo así como una plantilla para las pantallas de marco de alambre restantes. Por lo que estoy seleccionando todos estos. Ya ves, he seleccionado el diseño grande del iPhone así como la barra superior y la hamburguesa y el pie de página . Doy click derecho y selecciono la opción convertir a Maestro. Y aquí tengo la opción de nombrar a mis amos. Voy a llamarlo, um, um, diseño de iPhone golpeó el botón Continuar, y puedo ver que esto se ha vuelto rojo, y este es básicamente mi nuevo maestro. Entonces si voy a la pestaña de Maestros aquí abajo y hago clic en el maestro, realidad puedo ver a mi maestro subir. Ah, y esto es básicamente como una plantilla maestra de lo que quieras que sea. Por lo que este podría ser un fondo del resto de su marco de alambre móvil. Entonces si quería arrastrar esto a una página diferente, fácilmente puedo hacer eso. Simplemente hago clic en esto y lo arrastro aquí y ahora tengo la misma plantilla que tenía que había creado desde cero en la página principal. Pero tengo en la segunda página también, y no tomé tanto trabajo para llegar allí. Por lo que los maestros aire útil cuando tienes varias páginas y sabes que el diseño va a ser el mismo. Por lo que solo tienes que crear un diseño maestro y podrás copiar y pegar ese diseño donde quieras . Um, claro, aquí puedo empezar a agregar cosas encima de mi maestro si quiero agregar, ya sabes, tal vez esta es una pantalla diferente y quiero agregar texto nuevo. Entonces si entro en bibliotecas, mis bibliotecas predeterminadas en un encabezado aquí esta tal vez es mi página principal y se puede ver si muevo el maestro de esta manera, va de esta manera o de esa manera. No obstante, sólo voy a mantenerlo donde estaba. Y luego este texto, me voy a mover hacia el centro. Y por supuesto, puedo seguir sumando cosas en este rubro. Esto sería como el área donde, ya sabes, podría agregar características extra que sólo serían visibles en la página principal y no en la pantalla de inicio de sesión , como lo que tenemos aquí así maestros aire útil de esa manera, Otra cosa que puedes hacer con los maestros es en realidad editar el propio maestro. Entonces si hago doble clic aquí abajo en el dolor de maestros, realidad puedo abrir el propio maestro y empezar a editar estas piezas como Tal vez quiero algo como esto o algo como nosotros. Y luego si voy a las nuevas páginas, realidad se puede ver que los cambios fueron replicados a través de todos mis maestros. Cambiar este Masters es útil porque nunca tendrás problemas para mover esto o tener algún elemento extraviado cuando lo hagas vas a hacer más cambios en estas diferentes páginas , así que ahora me llevaré este maestro y lo pondré en el otro páginas. De esa manera tengo una plantilla de exactamente lo que necesito. También podría seguir adelante y llover en estas páginas ahora, ya que en realidad es mi página de inicio de sesión, Esta va a ser mi página principal. No estoy seguro de cuáles serán estos todavía, pero lo bonito es que, como dije, tengo los maestros aquí, así que realmente no necesito preocuparme por volver a crear esta plantilla una y otra vez. Lo siguiente que puedes hacer es algo llamado agrupación, y una agrupación es útil cuando tienes muchos elementos diferentes. Pero simplemente no lo haces y tienes que moverlos o alterarlos, ya sabes, alterarlos o lo que sea, pero no quieres cosas. Teoh, sal de lugar. Quieres que todo se queden juntos. Por lo que aquí han seleccionado un montón de elementos diferentes. Si hago click derecho en estos elementos, tengo esta opción que dice Grupo. Ahora se puede ver en el dolor por aquí a la izquierda y el contorno. Estos elementos ahora están anidados bajo este archivo llamado Grupo, que es súper útil porque ahora realmente puedo tomar a quién equivocado uno. Si en realidad selecciono este grupo, lo puedo llevar y arrastrarlo a cualquier lugar que quiera. Y no tengo que preocuparme de que mis elementos salgan de lugar, y no tengo que preocuparme por arrastrar individualmente cada elemento a través. Por lo que esto es súper útil cuando tienes un marco de alambre grande o un marco de alambre complejo. O tal vez tienes algo así como un diseño de forma donde sabes cómo el espaciado entre los elementos y simplemente no quieres que Teoh lo estropee de ninguna manera. Cuando estás manipulando, las cosas están moviendo las cosas. Bueno, se puede hacer dentro. Esto está dentro del grupo. Si haces doble clic en un elemento, puedes editar ese elemento específico para que aún puedas volver atrás y editar elementos específicos si lo deseas. Bueno, eso es todo para esta lección. La siguiente lección será sobre la creación de diagramas de flujo de usuarios y mapas de viaje de usuarios a través actioner. Actual tiene bibliotecas especiales y dedicadas donde se pueden crear diagramas de flujo. Teoh hace cosas como mapas de sitios o viajes de usuarios, o definió el flujo de tu aplicación para tus stakeholders. 3. Gráficos de flujo: este video será sobre la creación de flujos de usuarios, mapas de sitios y flujos de tareas en er real, utilizando actores construidos en herramientas. Por lo que este tipo de cosas son realmente útiles cuando tienes muchas pantallas o quieres mostrar tal vez la forma en que los usuarios se moverían en estas pantallas o quieres mostrar el mapa del sitio o quieres mostrar la forma en que se organizan las cosas para tus ah stakeholders o otros miembros del equipo. Entonces lo primero que haremos es crear una nueva página para mostrar este nuevo diagrama de flujo, y llamaremos a este mapa del sitio porque voy a usar herramientas de actores para crear un mapa de sitio de mi aplicación. Ah que es ir al lienzo en blanco y lo primero lo siguiente Will Dio es navegar a bibliotecas aquí abajo y elegir la biblioteca. Ese es su flujo, y verás todas estas diferentes formas aquí que puedes usar para construir tu mapa de sitio . Y tenemos cosas diferentes. Rectángulos, rectángulos apilados, um, ya sabes, diferentes formas. Um, incluso tenemos una persona aquí, un actor. Por lo que estos aire útil. Si tienes un diagrama de flujo o tienes un flujo de tareas que quieres especie de, um, ya sabes, construir para que la gente pueda verlo, y verás muchas de estas diferentes formas. Ya sabes, puedes asignar diferentes acciones a estas diferentes formas y cosas así, dependiendo de lo que quieras hacer. Pero ahora mismo, sabes, ya que tenemos un mapa del sitio, eso es bastante sencillo. Sólo va a tener cuatro secciones ah a ella. Sólo voy a usar el rectángulo. Bueno, voy a Sí, usaré la dirección. Todo arrástrelo aquí. Entonces esta es una forma que tenemos y ves que tienen la forma tiene todos estos, um, um, ya sabes, pequeños lugares donde puedes redimensionar. Um, y esto es todo estos también son lugares donde se pueden agregar conectores. Entonces esta es una forma, así que llamaremos a esto, um, ya sabes, para nuestro mapa del sitio para nuestra aplicación, tenemos cuatro páginas que tenemos que iniciar sesión. Ah, cuentas de página principal, 70 ajustes y un centro de mensajes. Y estos aire aún no diseñado. Yo sólo los nombro así. Um, sólo para que tendríamos algunas páginas de muestra de las que salir. Entonces con el fin de crear el mapa del sitio. Ah, queremos tener la jerarquía correcta. Por lo que esta la sección superior será la página de inicio en cuando queremos crear Dentro de la página principal hay otros dos llamados configuración de cuenta y centro de mensajes. Por lo que probablemente podamos poner estos aquí abajo centro, y también tenemos la pantalla de inicio de sesión. Entonces déjame solo copiar pegar esto. Tengo la misma forma aquí y llamamos a este inicio de sesión. Así es la forma en que he arreglado. Esto es que tenemos la página principal arriba porque esto es algo así como la página de nivel superior. Ah, por todo lo que vamos a estar haciendo dentro de nuestra aplicación. Eso parece bastante lógico. Y luego, ya sabes, aquí abajo, tenemos otras tres cosas que debilitan a Dio desde la página principal. Es decir, esto podría ser iniciar sesión, slash out, pero son solo acciones que podemos tomar desde la página principal. Ahí secciones tipo de, ya sabes, estos aires. Esta es la forma en que está la jerarquía para mi aplicación. Y así, ah, ya sabes, estas no son muy diferentes de las otras formas que realmente tiene en sus otras bibliotecas. Ya sabes, tienes la biblioteca predeterminada con las diferentes cajas y esas cosas. Pero la biblioteca de flujos es útil porque cuando queremos empezar a conectar estas formas, realidad podemos subir a la esquina superior izquierda y seleccionar la herramienta de conector. Y ahora nuestras cantidades lo han cambiado conectores. modo que en realidad podemos, si pasas por encima de uno de estos lados, haces clic en él y en realidad puedes empezar a dibujar líneas entre cada cuadro así. Ahora, en realidad he conectado nuestras cajas, y en realidad hemos hecho básicamente un mapa del sitio, y podemos ajustar esto. Puedes ajustar las líneas para que sean la forma que quieras. Cualquiera que sea el tamaño que te guste, puedes ajustar esto. Y ahora vemos que tenemos la página principal y tenemos tres secciones ramificándose fuera de la página principal para que en realidad podamos mostrar jerarquía aquí. Y si lo sabes, si tuviéramos más páginas aquí abajo, seguimos teniendo más secciones aquí. Y tal vez, ya sabes, quizá tengamos subsecciones dentro de cada una de estas páginas. Ya sabes, tal vez tendríamos, como, ah, subsección para ajustes de cuenta y tal vez quiero que esto sea todavía estamos en modo conector, Así que volvamos a seleccionar el modo aquí arriba para que podamos elegir el forma de esta caja. Ya sabes, tal vez tendría, como, otras subsecciones bajo ajustes de cuenta que quiero ver cómo podemos seguir simplemente haciendo esto y y puedes conectar las líneas como esta a cada una de estas subsecciones. Y yo siempre digo que tenemos los inicios de un mapa del sitio. Y de nuevo, esto es súper útil para tus fronteras estatales, y puedes hacer lo mismo aquí. Podríamos incluso copiar, trozar todo esto y en realidad ponerlo y ponerlo aquí. A lo mejor sólo asegúrate de que estos conectores se conectan al aire, y podemos seguir haciendo esto. Entonces los iconos de flujo son súper útiles con un actor y, ya sabes, solo para darte una idea de los otros iconos que están aquí, hay un rectángulo apilado solo para darte una idea de los otros iconos que están aquí, hay un rectángulo apilado. En ocasiones usamos esto y flujos de usuario. Conozco el aire de rectángulos redondeados que se utiliza a menudo para especie de iniciar o terminar un flujo. Es algo así como el punto de inicio o el punto final. Um, ya sabes, tenemos otras formas, como probarlo, goles. Actores, voy. Esto podría ser similar. Esto podría simular un elemento humano dentro de un flujo de tareas. Ah, y otras cosas así. Entonces y por supuesto, puedes cambiar el estilo de estos, ya sabes, igual que con cualquier otro elemento. Se puede cambiar el color. Um, no tienes que tener un gran y podría ser sólido. Puedes cambiar el borde para que puedas cambiarlo para que realmente sea lo que te gusten las líneas también . No tiene que ser esta línea de color. Sé que puedes cambiarlo para que sea como, ahora mismo es rojo. Puedes cambiarte a ser verde o lo que quieras hacer. Entonces, sí. Esta es una forma súper fácil de ilustrar tu mapa del sitio o la forma en que estás aplicación está dispuesta así como la forma en que sabes, tal vez los usuarios querrían fluir a través de una aplicación y ver cómo funciona realmente. 4. Interacciones simples: Entonces este video va a ser una introducción a las interacciones y er real, Y con eso me refiero a programar tus propias interacciones y hacer que tus prototipos cobren vida y en realidad empiecen a funcionar como si fuera lo real. Por lo que las interacciones podrían hacerse de muchas maneras diferentes. Y sólo me voy a centrar en uno para esta lección. Y luego para el siguiente video, te mostraré un par de métodos más. Um así para empezar, quiero a Teoh. Empieza con la pantalla ah que he llamado al centro de mensajes. Y yo construí un poco Ah, tú yo por mandar un mensaje. Y lo que voy a hacer es programar una interacción para este botón, el botón enviar, que cuando enviemos un mensaje, realidad va a tener otra pantalla que diga Tu mensaje fue enviado y ese es un mensaje. Enviar pantalla de confirmación. Entonces lo que hacemos es hacer click en el botón. Ah, el elemento que es un botón y se abre el dolor de la mano derecha llamado Inspector, y ya veremos que, ya sabes, aquí tenemos Inspector, y está inspeccionando el rectángulo aquí para que podamos incluso llama a esto el botón de enviar y debajo de las hay tres pestañas aquí hay propiedades, notas y estilo, y debajo de la pestaña Propiedades es donde veremos cómo podemos empezar a crear interacciones. Entonces las interacciones está aquí, y hay muchos eventos diferentes que podemos asignar a este botón. Como verán, no hay en un clic en el ratón, entrar mouse fuera y aún más eventos aquí abajo Eso parece que hay alrededor de 15 a 20 tipos diferentes de interacciones que realmente podemos poner en este botón. Um, y sólo nos vamos a centrar en Click para que haga clic en esto. Eso dice en Click Ah, que asignará un evento click al botón. Entonces seguiré adelante y doble click en Click y esto abrirá el editor de casos y el editor de casos es donde ah, edita todas las interacciones que quieras para tus estos diferentes elementos en tu prototipo así sucesivamente. Entonces tenemos en Click, y queremos que algo suceda cuando hacemos clic en este botón, y lo que queremos que suceda es que queremos que la otra pantalla que diga confirmación de mensaje. Queremos que eso se presente, así que lo que haremos es Ah, para el caso uno. Queremos abrir un enlace. Entonces haga clic en esta sección que dice enlace abierto en la ventana actual. Entonces ahora realmente estamos agregando una acción aquí, y nosotros Entonces vamos a seguir adelante y configurar la acción en este tercer dolor por aquí, y la forma en que lo haremos está bien. Queremos enlazar a una página que ya está en este diseño. Eso es cierto. En realidad queremos enlazar a esta página el mensaje, enviar confirmación, y se puede ver que esta es solo la lista de todas las páginas. Es sólo decir, Ya sabes, cuando hacemos clic en el botón, queremos abrir un enlace y el enlace va a ser una de estas páginas y en realidad puedes enlazar a cualquier cosa que puedas enlazar a un externo. Tú lo eres. Ah ah, Puedes volver a una página anterior como si hubieras vinculado a una página anterior, en realidad puedes volver a ella. Se puede recargar la página actual para que súper útil, Um, una muy intuitiva. Pero vamos a seguir adelante. Y así queremos un enlace al mensaje, Enviar pantalla de confirmación y haremos click. OK, y eso es todo. Eso es todo lo que tomó Teoh puso una interacción en este botón verá. Aquí hay una pequeña nota que dice una, Um, es una nota pequeña que muestra que, sí, sí tenemos una interacción para esto, y se puede ver y de nuevo en la parte superior derecha el dolor que ahora hemos programado en interacción que dice, Ok cuando hacemos clic en el botón, un caso sucede en ese caso es abrir esta pantalla que se llama mensaje de confirmación hijo en la ventana actual para que incluso podamos probar esto, iría a la vista previa, y ahora en realidad lo estamos abriendo en el navegador. Y este es nuestro prototipo. Ni siquiera podemos escribir aquí un tema, y se puede incluso lo que sea, porque hice estos cuadros de texto así que en realidad sí podemos teclear en ellos. Y ahora cuando hacemos clic en esto, ahora entra a la pantalla de confirmación, lo cual es genial. Eso es exactamente lo que queremos. En el siguiente video, te mostraré algunas interacciones más complicadas. Um, estos son bastante simples. Y de nuevo, ya sabes, tienes tantos eventos diferentes que puedes elegir desde aquí. Realmente hace en realidad una herramienta muy poderosa para crear prototipos de trabajo. Um, así te veré en el próximo video donde hablamos, Ah, Ah, un poco más de interacciones y te mostraré un par de formas más diferentes de hacerlas . 5. Cómo usar paneles dinámicos: Hola a todos. Por lo que esta será una clase rápida sobre una introducción a un panel dinámico, que es otro video que va junto con cómo usar elementos interactivos dentro, en realidad para hacer que tus prototipos sean interactivos y funcionen y se sientan y se vean como los reales cosa. Um, los paneles dinámicos son parte de actores, bibliotecas, parte de extras bibliotecas por defecto. Entonces si vas a la izquierda en la biblioteca está pagando haces clic por defecto y te desplazas aquí abajo , verás una opción aquí para los paneles dinámicos. Um, si arrastras uno de estos a la pantalla Ah, te ocurrirá lo que parece sólo una caja normal. Pero este tipo de paneles son especiales porque en realidad tienen estados diferentes, lo que significa que en realidad puedes poner cosas diferentes en este panel, y se mostrarán en diferentes momentos, dependiendo de cuándo quieras que aparezcan. Entonces, por ejemplo, este panel que acabo de arrastrar a la pantalla de la página principal um, esto ya ha ganado estado llamado ST one. Y puedo agregar estados como yo quisiera, y los estados son como si fuera lo que dice. Es como, Ah, Ah, un estado de ser, si se quiere, de este panel. Entonces cualquier cosa que esté en esta forma gana estado uno. Ahora estamos abriendo Estado Uno. Ah, será Onley en ST uno. Sólo estará ahí cuando muestres estado uno. Entonces tal vez pondré una imagen aquí, Justus Un ejemplo. Podría poner algún texto, así que algo así podría estar en el estado uno. Ya sabes, podría ser lo que quieras. Um, para que puedas ver en nuestra periferia estos en realidad aparecen bajo el Estado uno. Y el contorno que van a ST a debilitarse, hacen lo mismo, Um, y simplemente ponen algo diferente. Y por supuesto, podrías seguir yendo y yendo y haciendo tantos estados como desees volver a página principal Estado Uno es lo que aparece aquí. Ah, pero sabemos que tenemos otro estado llamado estado a. Y entonces esto es una especie de comienzo de cómo se utilizan los paneles dinámicos donde sabemos que tenemos diferentes estados. Y ahora lo que queremos dio es empezar a cambiar entre esos estados. Entonces, ya sabes, tal vez una cosa que podríamos hacer es tener un botón que diga click aquí. Entonces si tengo un botón aquí y me gustaría cambiar me gustaría hacer este panel interactivo Al usar este botón. Puedo hacer lo que hicimos en nuestro video anterior, que es doble click en Click. Y aquí tenemos un par de opciones aquí en el editor de casos. Si queremos cambiar el panel dinámico, vamos a la pestaña que muestra dice widget, y podemos hacer establecer, estado del panel. Y primero nos fijamos en configurar acciones establecidas. En realidad lo vamos a decir para decirlo, ya que ya está en ST One inicialmente y hacemos click. OK, y ahora esta interacción aparece de un botón aquí. Entonces básicamente lo que estamos haciendo es, al hacer clic en el botón, este panel va a cambiar. Todo lo que hay en este panel va a cambiar al estado para en lugar de estar en el estado uno. Entonces si queremos previsualizar esto rápidamente y veamos si funciona, estamos en la página principal. Entonces este es nuestro panel dinámico. Hacemos click aquí y debería ir al estado dos. Y sí fue al Estado dos. Por lo que los paneles dinámicos son una gran manera. Teoh ad Ah, montón entero de elementos interactivos a la vez. O si tienes una sección de tu app que sabes que todo va a cambiar o , ya sabes, quieres hacer un montón de diferentes cómo dices que los estados son modos. Ah, de eso de igual que en esa sección en particular de tu app. Al igual que aquí. Acabamos de hacerlo en la página principal y acabamos de tener un panel dinámico aquí que podríamos hacer. Este es Bigas. Nosotros la queremos. Un pequeño es que queremos, um si sabes que vas a tener algo así. Los paneles dinámicos son realmente útiles porque no tienes que ir cambiando cada elemento a la vez. Simplemente puedes crear un estado con todos los elementos que necesitas y tantos estados como quieras con tantos elementos como quieras, y todos cambiarán todos a la vez. Entonces eso es todo para los paneles dinámicos. Y eso cubre la mayor parte de lo que necesitas saber para interacciones con un actor 6. PROYECTO DE CLASE: De acuerdo, entonces ahora que has dominado la mayoría de las técnicas dentro de ACTU r p ocho y la mayoría de las técnicas que yo consideraría intermedias a avanzadas, que incluye cosas como flujos de usuario, interacciones y paneles dinámicos, su asignación de clase es crear su propio conjunto interactivo de marcos de alambre, completo ya sea con un mapa del sitio o un flujo de tareas. Y además asegúrate de publicarlo a actos, compartir y en los comentarios, compartir un enlace a tu nuevo conjunto de marcos de alambre para que todos podamos verlos en el aula. Y todos podemos comentar y sugerir cambios y mejoras, etcétera, etcétera. Um, esto podría ser un conjunto de marcos de alambre para una aplicación que decidas construir tú mismo. A lo mejor es una idea que se te ocurrió. O tal vez es un rediseño de una aplicación existente o de un sitio web o producto existente que crees que podrías hacer mejor. Por lo que me encantaría volver a ver tus proyectos. Asegúrate de publicar tus proyectos en actos comparte, obtén el enlace y ponlo en los comentarios en este aula para que todos podamos verlo. Y si tiene alguna pregunta, no dude en ponerse en contacto. Y buena suerte. Espero ver sus diseños