Información general acerca de SketchFlow

Microsoft Expression Blend incluye un nuevo conjunto de características específicamente diseñadas para facilitar y agilizar las tareas de creación, comunicación y revisión de prototipos para aplicaciones interactivas y contenido interactivo. Este conjunto de características se conoce como SketchFlow.

Los prototipos SketchFlow son aplicaciones reales de Windows Presentation Foundation (WPF) o Microsoft Silverlight. Puede generar un proyecto prototipo, ejecutarlo y navegar por el prototipo, incluso si tiene sólo bocetos iniciales del prototipo.

Los prototipos SketchFlow pueden ser tan sencillos o tan complejos como sea necesario para el proyecto en el que esté trabajando. Por ejemplo, un prototipo puede ser un boceto preliminar con notas, una secuencia lineal de diapositivas con algunas notas que muestre un flujo de trabajo dibujado en la mesa de trabajo o un gráfico complejo esquematizado en el panel Mapa SketchFlow, que incluye elementos reutilizables en una sola pantalla (pantallas de componentes) y navegación entre pantallas (conexiones de navegación).

SketchFlow incluye varias herramientas para hacer que un prototipo sea interactivo con el fin de imitar con mayor exactitud el flujo de una aplicación de producción. Por ejemplo, con SketchFlow, puede realizar lo siguiente:

• Comenzar un prototipo con un solo mapa del sitio y algunas notas en las pantallas de la aplicación, y continuar perfeccionando el prototipo después conforme avanza.

• Dibujar elementos de interfaz de usuario (UI) o importarlos de programas de dibujo comunes.

• Animar el prototipo creando una presentación visual de la interacción entre el usuario y la aplicación.

• Usar la biblioteca completa de elementos de interfaz de usuario estándar y controles personalizados.

• Crear datos de ejemplo al instante, generar con facilidad elementos de interfaz de usuario controlados por datos y agregar estilos a los datos.

• Crear interactividad sin escribir código usando los controles de comportamiento integrados. Los controles de comportamiento se pueden ampliar, lo que hace más fácil agregar controles de comportamiento personalizados al cuadro de herramientas de creación de prototipos.

• Escribir código para crear elementos personalizados o usar elementos pregenerados del equipo de desarrollo.

Mesa de trabajo

SketchFlow proporciona dos vistas del diseño: la mesa de trabajo y el panel Mapa SketchFlow. La mesa de trabajo proporciona una vista de pantallas individuales en las que puede dibujar con las herramientas de dibujo de Expression Blend, donde puede importar imágenes de Adobe Photoshop y donde puede usar la completa gama de controles disponibles en Expression Blend para WPF y Silverlight. También puede usar estados para mostrar diferentes estados de un elemento concreto o para representar la interacción con los elementos de la pantalla mediante animación.

Para obtener más información, vea Crear contenido en la mesa de trabajo.

Panel Mapa SketchFlow

Puede crear fácilmente el boceto de la estructura de un prototipo en el panel Mapa SketchFlow, que aparece en la parte inferior de la aplicación Expression Blend cuando se trabaja en SketchFlow. No aparece cuando se trabaja en otros tipos de proyecto de Expression Blend.

El panel Mapa SketchFlow es una representación visual del flujo de la aplicación, empezando por la primera pantalla y siguiendo por la interacción del usuario hasta la acción final.

Para obtener más información, vea Crear un flujo de aplicación.

Pantallas

Cada pantalla de un prototipo se representa con un nodo en el panel Mapa SketchFlow. Puede crear nuevas pantallas de componentes o navegación de un modo rápido y sencillo. Puede tener nodos independientes que representen pantallas individuales y crear conexiones para representar las conexiones entre pantallas individuales.

Hay dos tipos de pantallas en SketchFlow: pantallas normales (a veces denominadas pantallas de navegación) y pantallas de componentes. Las pantallas normales representan un lugar al que puede navegar. Las pantallas de componentes son bloques de contenido o funcionalidad que se pueden reutilizar en varias pantallas de navegación (por ejemplo, un menú o una lista de reproducción). Puede crear pantallas de componentes directamente en el panel Mapa SketchFlow o convirtiendo el contenido de una pantalla en un componente.

En otras palabras, puede definir la navegación y la composición de una aplicación directamente en el panel Mapa SketchFlow creando nuevas pantallas de componentes, conexiones entre componentes, pantallas de navegación y conexiones de navegación directamente en el panel Mapa SketchFlow.

Conexiones de navegación

Las conexiones de navegación representan la navegación entre pantallas. Una conexión de navegación entre dos pantallas significa que el usuario de la aplicación podrá navegar directamente de una a otra usando la navegación que implican las conexiones.

Las conexiones de navegación permiten crear con rapidez una vista de alto nivel del flujo de una aplicación directamente en el panel Mapa SketchFlow.

Para obtener más información, vea Crear un flujo de aplicación.

Conexiones entre componentes

Al igual que las conexiones de navegación, las conexiones entre componentes se crean directamente en el panel Mapa SketchFlow. Si bien las conexiones de navegación representan la navegación por una aplicación, las conexiones entre componentes indican que el componente se visualiza en la pantalla de navegación a la que está conectado. Por ejemplo, si el diseño incluye elementos de página básicos como un encabezado, un pie de página y una barra de navegación, puede dibujarlos directamente en la mesa de trabajo o crear tres nodos componente distintos que representen cada uno de estos tres elementos básicos y reutilizarlos en el proyecto.

Para obtener más información, vea Crear un flujo de aplicación.

Animación SketchFlow

El panel Animación SketchFlow permite crear con facilidad una animación que represente elementos interactivos en una pantalla. Las animaciones SketchFlow agilizan y facilitan la creación de una sencilla secuencia de animaciones de estilo cuaderno sin necesidad de saber cómo usar las herramientas de animación de fotogramas clave disponibles en Expression Blend.

Para obtener más información, vea Agregar interactividad.

Datos de ejemplo

Expression Blend facilita la creación de prototipos de interfaces de usuario controladas por datos sin obtener acceso a los datos reales. Use el panel Datos para generar datos de ejemplo significativos o importar datos de ejemplo de un archivo XML. Los datos de ejemplo están disponibles para los controles de la mesa de trabajo en tiempo de diseño. Puede personalizar en gran medida los detalles de los datos de ejemplo y cambiar fácilmente entre usar datos de ejemplo y usar datos reales en tiempo de ejecución.

Para obtener más información, vea Crear datos de ejemplo.

Estilos SketchFlow

Cuando cree estilos, quizá desee obtener un aspecto de boceto a mano. SketchFlow incluye un conjunto de máscaras para controles estándar de WPF y Silverlight que proporcionan un aspecto de boceto a mano a la aplicación. Use formas básicas para crear sus propias plantillas con aspecto de boceto para los controles personalizados que tenga. El uso de estilos SketchFlow en un prototipo permite enfatizar el flujo de la aplicación sobre el aspecto acabado, lo que permite a los revisores centrarse en el diseño interactivo en lugar del diseño gráfico de la aplicación. Esto evita expectativas fuera de lugar y comentarios erróneos que podrían surgir de un prototipo demasiado pulido en las primeras fases de diseño.

Reproductor SketchFlow

En cualquier momento, puede generar, ejecutar y ver un proyecto en el Reproductor SketchFlow, un entorno en tiempo de ejecución que reproduce el flujo de la aplicación tal como se diseñó.

SketchFlow lo hace posible porque ejecuta el prototipo en un reproductor independiente que permite hacer clic a lo largo del prototipo, cambiar estados en la interfaz de usuario y ejecutar animaciones. El Reproductor SketchFlow facilita también la distribución del prototipo a los revisores y recopilar sus comentarios. Puede dibujar y agregar comentarios directamente en el prototipo. Los comentarios recopilados en el Reproductor SketchFlow se pueden ver en Expression Blend, donde el diseñador puede evaluarlos e implementarlos.

Para obtener más información, vea Vista previa de un prototipo.

Anotaciones y comentarios

Las anotaciones son una nueva características de Expression Blend que se puede usar también en proyectos SketchFlow. La característica Anotaciones permite dejar notas para sí mismo o para otros, así como mantener un seguimiento de los comentarios de otros miembros del equipo mientras se trabaja en la Vista de diseño. Las anotaciones se pueden ocultar para facilitar la visualización del proyecto actual y hacerlas visibles cuando se desee revisarlas.

Los revisores pueden dejar también comentarios en el Reproductor SketchFlow usando el panel Comentarios. Los comentarios se guardan como un archivo .feedback, que se puede enviar al diseñador como un archivo aparte.

Para obtener más información acerca de las anotaciones, vea Anotar un documento.

Para obtener más información acerca de los comentarios, vea Dejar comentarios para un prototipo.

Convertir un prototipo

Puede crear un prototipo SketchFlow a partir de una presentación de Microsoft Office PowerPoint. También puede importar imágenes de Adobe Photoshop (.psd) y Adobe Illustrator (.ai) en un prototipo SketchFlow. En cualquier momento, puede crear un documento de Microsoft Word partiendo directamente del prototipo.

Los proyectos SketchFlow son soluciones de Microsoft Visual Studio estándar y, como tales, se pueden editar en Visual Studio. Una vez aprobado un prototipo, un proyecto prototipo se puede convertir en un proyecto de producción quitando los datos de SketchFlow del archivo del prototipo. Una vez que se han quitado los datos de SketchFlow, el proyecto funciona igual que cualquier otro proyecto de Expression Blend.

Para obtener más información, vea Convertir un prototipo.

Conclusión

En resumen, SketchFlow facilita la elaboración del boceto de una aplicación conceptual. Para comenzar, cree sólo una serie de pantallas y después empiece a dibujar. Conforme progrese su idea, puede agregar elementos interactivos que hagan que el prototipo sean tan parecido al producto acabado como sea necesario para comunicar la idea de diseño que desea transmitir. Los revisores pueden usar el Reproductor SketchFlow para ver el flujo de la aplicación y dejar comentarios directamente en el proyecto como anotaciones. Una vez incorporados los comentarios y completado el prototipo, se puede entregar el proyecto prototipo a un desarrollador para que lo convierta en un proyecto de Expression Blend final.