Prototipos con SketchFlow

Publicación del inglés original: sábado 25 de abril de 2009, a las 23:42 PST por Somasegar

Recientemente, hemos presentado un nuevo conjunto de herramientas para Expression Blend 3 diseñadas para tratar las primeras fases de diseño.

Con SketchFlow, puede:

a) esbozar ideas,
b) convertir esas ideas en prototipos funcionales que son tan en bruto o refinados como desee que sean,
c) presentar esas experiencias de uso interactivas para su revisión y comentarios en el reproductor SketchFlow.

Los prototipos creados con SketchFlow son rápidos e informales, y permiten a los diseñadores explorar fácilmente una gran variedad de ideas. Puede ejecutar y explorar prototipos desde el primer boceto. Cuando esté preparado para desarrollar más, puede convertir un prototipo en una aplicación real en Expression Blend o Visual Studio.

Esbozando ideas

Al empezar a trabajar en un nuevo proyecto de prototipo para WPF o Silverlight, verá los paneles, controles y área de diseño a los que probablemente ya está acostumbrado en Expression Blend. Puede utilizar el conjunto de controles que se encuentra en Expression Blend 3 o sus propios controles personalizados.

SketchFlow también proporciona un conjunto de controles de “estilo boceto” que dan al prototipo un aspecto de boceto para mantener el enfoque en los conceptos de la experiencia de usuario sin distraerse con los detalles de los elementos visuales demasiado pronto. Los controles de estilo boceto son completamente funcionales y se puede volver a los controles de alta fidelidad en cualquier momento. A continuación puede ver un ejemplo de cómo aparecen los controles de estilo boceto.

Diseño del flujo y la navegación

Aunque el área de diseño proporciona una vista en una pantalla individual, el panel de flujo de aplicación le permite diseñar el flujo de su aplicación, y a continuación, rápidamente realizar cambios en ese flujo sin remodelar el diseño.

En la aplicación que se muestra debajo, flechas sólidas azules representan paradas en la experiencia de usuario, mientras flechas discontinuas verdes representan el contenido que se puede compartir o reutilizar entre pantallas, como por ejemplo un conjunto de botones de navegación común que aparecen en varias páginas.

 

Recopilación de comentarios

SketchFlow proporciona una forma para presentar su prototipo a otros usuarios con el Reproductor SketchFlow. El Reproductor SketchFlow le permite explorar el prototipo desde el primer momento, aunque se componga de nada más que unos bocetos aproximados. El Reproductor le permite navegar por el prototipo, ejecutar animaciones que muestran cómo podría funcionar, o moverse entre distintos estados de la interfaz de usuario, todo ello sin necesidad de crear elementos de la interfaz de usuario reales. Esto reduce el costo de evaluar ideas en fases iniciales antes de que se incurra en muchos gastos.

Pero mostrar un prototipo a otros es sólo parte del proceso de revisión, por lo que el Reproductor SketchFlow también proporciona herramientas para recopilar comentarios de revisores. Los revisores pueden proporcionar comentarios en forma de texto, como los comentarios en la ficha comentarios en la captura de pantalla siguiente, o como tinta, como la flecha roja en la pantalla siguiente. Entonces su equipo puede incorporar estos comentarios en el prototipo utilizando el panel de comentarios de Expression Blend, lo que le permite trabajar en su diseño con las sugerencias del equipo.

Agregar interactividad y datos

SketchFlow aprovecha las características de Expression Blend 3 para que sus prototipos cobren vida propia. Agregue interactividad sin código utilizando comportamientos, esboce su interfaz de usuario controladas por datos utilizando datos de ejemplo e importe contenido desde Adobe Photoshop e Illustrator.

Para obtener más información, vea el vídeo sobre SketchFlow (en inglés) o lea mi entrada anterior sobre la Versión Preliminar de Expression Blend 3.

¡Namaste!