{"id":124709,"date":"2018-03-21T15:03:21","date_gmt":"2018-03-21T14:03:21","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/the-scenarios-module\/"},"modified":"2025-02-03T16:44:19","modified_gmt":"2025-02-03T15:44:19","slug":"the-scenarios-module","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/modulo-flujos-de-usuario","title":{"rendered":"El m\u00f3dulo Flujos de usuarios"},"content":{"rendered":"

El m\u00f3dulo Flujos de usuario ofrece una s\u00f3lida herramienta de diagramaci\u00f3n que puede conectarse al resto de tu prototipo. Puede proporcionar a las partes interesadas de tus proyectos diferentes formas de visualizar que son dif\u00edciles de visualizar en el prototipo. Los usos t\u00edpicos de Flujos de usuario son diagramar Flujos de usuario, simularlos y validarlos. <\/p>\n

<\/a>Visi\u00f3n general<\/h2>\n

\"m\u00f3dulo<\/p>\n

    \n
  1. Barra de herramientas – aqu\u00ed encontrar\u00e1s todos los elementos para dibujar un flujo de usuario en el lienzo. Encontrar\u00e1s componentes como Pantallas, Acciones, Decisiones, Notas (cuadros de texto), Im\u00e1genes o conexiones para conectar todos esos elementos entre s\u00ed. Tambi\u00e9n puedes lanzar la simulaci\u00f3n de tu flujo de usuario. Puedes encontrar una descripci\u00f3n detallada de cada elemento de la barra de herramientas en la siguiente secci\u00f3n. <\/li>\n
  2. Tableros – una lista de todos los tableros que has creado. Puedes cambiar el tablero que aparece en el lienzo haciendo clic en los tableros de esta lista. <\/li>\n
  3. Pantallas – las pantallas del prototipo en el que est\u00e1s trabajando actualmente en el m\u00f3dulo UI. Si arrastras una pantalla al prototipo, se a\u00f1adir\u00e1 un elemento Pantalla al tablero vinculado a esa pantalla. <\/li>\n
  4. Lienzo – muestra el contenido del Tablero. Puedes utilizar las herramientas de la barra de herramientas o las pantallas de la paleta para dise\u00f1ar tu flujo de usuario. <\/li>\n
  5. Propiedades – una lista de propiedades del elemento seleccionado en el lienzo. Puedes editar muchas propiedades de estilo de cada elemento para hacerlas tuyas. <\/li>\n<\/ol>\n

    <\/a>La barra de herramientas del m\u00f3dulo Flujos de usuario<\/h2>\n

    En la barra de herramientas Flujos de usuario puedes encontrar las siguientes opciones:
    \n\"\"<\/p>\n

      \n
    1. Inicio – ve a tu pantalla de inicio.<\/li>\n
    2. Herramienta de selecci\u00f3n – haz clic aqu\u00ed para cambiar de una herramienta diferente a la herramienta de selecci\u00f3n.<\/li>\n
    3. Herramienta Pantalla – haz clic y vuelve a hacer clic en el lienzo para a\u00f1adir un elemento Pantalla al tablero. Por defecto, los elementos Pantalla son s\u00f3lo iconos en el diagrama, pero puedes vincularlos a pantallas concretas del prototipo mediante la paleta Propiedades. Una vez vinculados, el icono ser\u00e1 sustituido por una captura de pantalla sincronizada de la Pantalla vinculada. <\/li>\n
    4. Herramienta Decisi\u00f3n – haz clic y vuelve a hacer clic en el lienzo para a\u00f1adir un elemento Decisi\u00f3n al tablero. Las Decisiones s\u00f3lo sirven para diagramar, no afectan a la navegaci\u00f3n de tu prototipo. <\/li>\n
    5. Herramienta Acci\u00f3n – haz clic y vuelve a hacer clic en el lienzo para a\u00f1adir un elemento Acci\u00f3n al tablero. Las Acciones s\u00f3lo sirven para diagramar, no afectan a la navegaci\u00f3n de tu prototipo. <\/li>\n
    6. Herramienta Conector – haz clic y vuelve a hacer clic en el lienzo para a\u00f1adir un elemento de la Pantalla al tablero.  Un conector es un elemento de diagramaci\u00f3n que se utiliza para iniciar\/finalizar un flujo de usuario.<\/li>\n
    7. Herramienta de texto: esta herramienta te permite escribir texto en tus diagramas.<\/li>\n
    8. Herramienta Nota: puedes utilizar esta herramienta para dibujar cuadros de texto en tu diagrama. Las notas son altamente personalizables y pueden utilizarse para dibujar cualquier tipo de diagrama. <\/li>\n
    9. Herramienta Imagen – haciendo clic en esta herramienta podr\u00e1s a\u00f1adir cualquier archivo de imagen al tablero.<\/li>\n
    10. Herramientas de conexi\u00f3n – esta herramienta sirve para a\u00f1adir conexiones entre elementos del diagrama. El primer tipo de conexi\u00f3n ser\u00e1 rectil\u00ednea, y el segundo recta. Puedes cambiarlo en la paleta Propiedades. <\/li>\n
    11. Nivel de zoom: puedes controlar el nivel de zoom en el lienzo utilizando este componente. Si haces clic en la flecha, aparecer\u00e1n opciones de zoom adicionales. <\/li>\n
    12. Ver en el dispositivo, Simular y Compartir, equivalentes a los mismos iconos del m\u00f3dulo Interfaz de usuario.<\/li>\n<\/ol>\n

      <\/a>Crear un nuevo tablero<\/h2>\n

      Para crear un nuevo tablero, haz clic en el icono \u00ab+\u00bb de la paleta Tableros. Aqu\u00ed tambi\u00e9n ver\u00e1s una lista de todos los tableros que has creado. Si quieres abrir un tablero, simplemente haz clic en \u00e9l. Hacer doble clic te permitir\u00e1 renombrar un Tablero y hacer clic con el bot\u00f3n derecho (ctrl+clic en Mac) te mostrar\u00e1 opciones adicionales.
      \n\"Crear<\/p>\n

      <\/a>Diagramaci\u00f3n de transiciones y validaci\u00f3n de flujos<\/h2>\n

      Puedes dibujar conexiones entre los elementos de tu diagrama utilizando las herramientas de Conexi\u00f3n de la barra de herramientas. Primero, haz clic en una de esas herramientas y ver\u00e1s c\u00f3mo cambia el cursor. Mu\u00e9vete sobre uno de los elementos que tengas en el lienzo y ver\u00e1s una vista previa del punto de inicio de esa conexi\u00f3n. Haz clic y arrastra hasta otro elemento del lienzo para crear una nueva conexi\u00f3n. Puedes personalizar el aspecto de esa conexi\u00f3n en la paleta Propiedades. Si la conexi\u00f3n es entre dos pantallas, Justinmind comprobar\u00e1 si esa navegaci\u00f3n impl\u00edcita coincide con alguno de los eventos creados en esas pantallas en el m\u00f3dulo Interfaz de usuario. Si no es as\u00ed, aparecer\u00e1 un icono de advertencia. Si en alg\u00fan momento creas un evento de navegaci\u00f3n entre esas pantallas, el mensaje de advertencia en esas conexiones desaparecer\u00e1. <\/p>\n

      \"Diagramaci\u00f3n
      \nToda la informaci\u00f3n del diagrama se puede exportar a un documento MS Word junto con el resto de la informaci\u00f3n del prototipo. Utiliza las opciones del men\u00fa principal \u00abArchivo – Exportar – Documento espec. \/ Personalizar documento espec. <\/p>\n

      <\/a>Crear pantallas desde el m\u00f3dulo Flujos de usuarios<\/h2>\n

      Los flujos de usuario pueden ser un buen punto de partida para dise\u00f1ar tus aplicaciones, antes de entrar en los detalles del contenido de cada pantalla y sus interacciones. En muchas metodolog\u00edas, definir los Flujos de Usuario es el primer paso antes de entrar en el dise\u00f1o UI \/ UX o incluso en el wireframing. Lo bueno es que no tienes que hacer el trabajo dos veces, ya que puedes crear Pantallas desde la paleta de pantallas o la barra de herramientas. Para ello, haz clic con el bot\u00f3n derecho en una pantalla y selecciona la opci\u00f3n \u00abEditar pantalla\u00bb. Se a\u00f1adir\u00e1 una nueva Pantalla al prototipo con el nombre que hayas configurado en el m\u00f3dulo Flujos de usuario y autom\u00e1ticamente pasar\u00e1s a esa pantalla en el m\u00f3dulo Interfaz de usuario.
      \n\"Crear
      \nA continuaci\u00f3n, puedes dise\u00f1ar el contenido y las interacciones de esa pantalla para dar cuerpo al flujo de navegaci\u00f3n. Si vuelves a tu Tabl\u00f3n, ver\u00e1s una captura sincronizada de la pantalla real. <\/p>\n

      <\/a>Simulaci\u00f3n de flujos de usuarios<\/h2>\n

      Puedes mostrar tu flujo de usuario en tu simulaci\u00f3n como si fuera cualquier otra pantalla. Una vez en el modo Simulaci\u00f3n, puedes incluso restringir la navegaci\u00f3n de tu prototipo por lo definido en uno de tus flujos de usuario. Para ello, sigue estos pasos: <\/p>\n

        \n
      1. Ve a la barra de herramientas y pulsa el icono \u00abReproducir\u00bb para iniciar la simulaci\u00f3n.<\/li>\n
      2. En la ventana del modo Simulaci\u00f3n que aparece, haz clic en el men\u00fa hamburguesa de la esquina superior derecha. Aparecer\u00e1 un men\u00fa deslizante con dos pesta\u00f1as: \u00abPantallas\u00bb y \u00abFlujos de usuario\u00bb. <\/li>\n
      3. Ve a la pesta\u00f1a \u00abFlujos de usuario\u00bb y selecciona la placa en la que se encuentra el flujo de usuario que deseas simular.<\/li>\n
      4. En el Lienzo de simulaci\u00f3n, haz clic en el componente donde hayas definido el inicio de tu flujo de navegaci\u00f3n. En la ventana emergente que aparece, haz clic en \u00abIniciar\u00bb. Entonces se iniciar\u00e1 la simulaci\u00f3n en esa pantalla, pero s\u00f3lo funcionar\u00e1n los eventos de navegaci\u00f3n que coincidan con las flechas de ese flujo. Puedes previsualizar el paso en el que te encuentras en tu flujo en la barra superior. <\/li>\n<\/ol>\n
        Nota:<\/strong> si quieres simular esta pantalla concreta sin el flujo de usuario, haz clic en \u00abIr a la pantalla\u00bb para que te lleve a la pantalla sin el flujo correspondiente.<\/div>\n

        Puedes detener la simulaci\u00f3n actual y\/o cambiar el flujo de navegaci\u00f3n, quitando el filtro de la barra de herramientas superior de la ventana Simulaci\u00f3n, de esta forma
        \n\"Simulaci\u00f3n<\/p>\n

        Revisando<\/h3>\n

        Si compartes tu prototipo, tienes la opci\u00f3n de compartir tambi\u00e9n el flujo en ese prototipo. Los revisores podr\u00e1n entonces ver los diagramas y a\u00f1adirles comentarios. Incluso pueden a\u00f1adir comentarios a elementos concretos dentro de un flujo. <\/p>\n

        <\/a>Diagramaci\u00f3n de mapas del sitio<\/h2>\n

        Es muy f\u00e1cil diagramar un mapa del sitio utilizando el m\u00f3dulo Flujos de usuario. Primero haz clic en la herramienta Nota y luego en el Lienzo. Personaliza el aspecto de esa nota a tu gusto utilizando la paleta Propiedades. A continuaci\u00f3n, copia y pega esa Nota (o cuadro de texto) en tantas pantallas como est\u00e9s definiendo en tu Mapa del sitio. Por \u00faltimo, utiliza la herramienta de conexi\u00f3n para diagramar tu Mapa del sitio y definir la jerarqu\u00eda de tus pantallas. <\/p>\n

        \"crear<\/p>\n","protected":false},"excerpt":{"rendered":"

        El m\u00f3dulo Flujos de usuario ofrece una s\u00f3lida herramienta de diagramaci\u00f3n que puede conectarse al resto de tu prototipo. Puede proporcionar a las partes interesadas de…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8431,8438],"tags":[],"class_list":["post-124709","post","type-post","status-publish","format-standard","hentry","category-guia-del-usuario","category-el-espacio-de-trabajo"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124709"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124709"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124709\/revisions"}],"predecessor-version":[{"id":126142,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124709\/revisions\/126142"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}