Partager via

Vue d'ensemble SketchFlow

  • Article

Microsoft Expression Blend comprend un nouveau jeu de fonctionnalités spécialement conçues pour faciliter et accélérer la création, la communication et le contrôle des prototypes d'applications interactives et de contenu interactif. Ce jeu de fonctionnalités s'appelle SketchFlow.

Les prototypes SketchFlow sont des applications Windows Presentation Foundation (WPF) ou Microsoft Silverlight réelles. Vous pouvez générer un projet de prototype, l'exécuter puis naviguer au sein de celui-ci, même si ne disposez que de croquis initiaux du prototype.

Les prototypes SketchFlow peuvent être aussi simples ou complexes que l'exige le projet sur lequel vous travaillez. Il peut s'agir, par exemple, d'un croquis accompagné de commentaires, d'une séquence linéaire de diapositives assortie de quelques commentaires démontrant un flux de travail dessiné sur la planche graphique, ou d'un graphe complexe, ébauché dans le panneau Carte SketchFlow et comprenant les éléments réutilisables sur un seul écran (écrans de composants) ainsi qu'une navigation entre les écrans (connexions de navigation).

SketchFlow propose plusieurs outils permettant de rendre les prototypes interactifs afin de reproduire plus fidèlement le flux d'une application de production. Avec SketchFlow, vous pouvez, par exemple :

  • commencer un prototype avec un simple plan de site et quelques commentaires griffonnés sur les écrans d'application, puis le peaufiner au fur et à mesure ;

  • dessiner des éléments d'interface utilisateur ou les importer à partir de programmes de dessin courants ;

  • animer un prototype, créant ainsi une représentation visuelle de l'interaction entre l'utilisateur et l'application ;

  • utiliser la bibliothèque complète d'éléments d'interface utilisateur standard et de contrôles personnalisés ;

  • créer des exemples de données à la volée, générer facilement une interface utilisateur pilotée par les données et ajouter des styles à vos données ;

  • créer de l'interactivité sans écrire de code grâce aux comportements intégrés. Les comportements sont extensibles, facilitant ainsi l'ajout de comportements personnalisés à votre boîte à outils de prototypage ;

  • écrire du code afin de créer des éléments personnalisés, ou utiliser des éléments intégrés fournis par votre équipe de développement.

Planche graphique

SketchFlow vous offre deux vues de votre conception : la planche graphique et le panneau Carte SketchFlow. La planche graphique offre une vue des écrans individuels dans laquelle vous pouvez dessiner à l'aide des outils de dessin de Expression Blend, importer des images à partir d'Adobe Photoshop et utiliser la gamme complète de contrôles disponibles dans Expression Blend pour WPF et Silverlight. Vous pouvez également recourir à l'animation pour afficher les différents états visuels d'un élément particulier ou pour représenter l'interaction avec les éléments affichés sur l'écran.

Pour plus d’informations, voir créer du contenu sur la planche graphique.

Panneau Carte SketchFlow

Vous pouvez facilement esquisser la structure d'un prototype dans le panneau Carte SketchFlow, qui est visible en bas de l'application Expression Blend lorsque vous travaillez dans SketchFlow. Ce panneau n'est pas affiché lorsque vous travaillez sur d'autres types de projets Expression Blend.

Le panneau Carte SketchFlow est une représentation visuelle du flux de l'application qui permet de suivre l'interaction avec l'utilisateur depuis le premier écran jusqu'à l'action finale.

Pour plus d’informations, voir créer d'un flux d'application.

Écrans

Chaque écran d'un prototype est représenté par un nœud dans le panneau Carte SketchFlow. Vous pouvez créer de nouveaux écrans de composants ou de navigation rapidement et facilement. Vous pouvez créer des nœuds autonomes représentant des écrans individuels et des connexions représentant les connexions entre les écrans individuels.

Il existe deux types d'écrans dans SketchFlow : les écrans normaux (parfois appelés écrans de navigation) et les écrans de composants. Les écrans normaux représentent un emplacement vers lequel vous pouvez naviguer. Les écrans de composants sont des blocs de contenu ou de fonctionnalité réutilisables dans plusieurs écrans de navigations (tels qu'un menu ou une sélection, par exemple). Vous pouvez créer des écrans de composants directement dans le panneau Carte SketchFlow ou en intégrant un contenu d'un écran dans un composant.

Autrement dit, vous pouvez définir la navigation et la composition de votre application directement dans le panneau Carte SketchFlow en créant de nouveaux écrans de composants, connexions de composant, écrans de navigation et connexions de navigation directement dans le panneau Carte SketchFlow.

Connexions de navigation

Les connexions de navigation représentent la navigation entre les écrans. Une connexion de navigation entre deux écrans signifie que l'utilisateur de l'application pourra passer directement de l'un à l'autre en utilisant la navigation induite par les connexions.

Grâce aux connexions de navigation, vous pouvez créer rapidement une vue générale d'un flux d'application directement dans le panneau Carte SketchFlow.

Pour plus d’informations, voir créer d'un flux d'application.

Connexions de composant

Tout comme vous le faites pour les connexions de navigation, vous créez les connexions de composant directement dans le panneau Carte SketchFlow. Alors que les connexions de navigation représentent la navigation à travers une application, une connexion de composant indique que le composant est affiché sur l'écran de navigation auquel il est connecté. Ainsi, si votre conception comprend des éléments de page clés, tels qu'un en-tête, un pied de page et une barre de navigation, vous pouvez dessiner ces derniers directement sur la planche graphique ou créer trois nœuds de composant distincts, chacun représentant l'un des éléments clés, puis les réutiliser ailleurs dans le projet.

Pour plus d’informations, voir créer d'un flux d'application.

Animation SketchFlow

Le panneau Animation SketchFlow vous permet de créer très facilement une animation représentant les éléments interactifs affichés sur un écran. Grâce aux animations SketchFlow, vous pouvez, facilement et rapidement, créer une séquence d'animation simple de type livret animé sans avoir à maîtriser les outils d'animation d'images clé disponibles dans Expression Blend.

Pour plus d’informations, voir Ajouter de l'interactivité.

Exemples de données

Avec Expression Blend, il est facile de créer des prototypes d'interfaces utilisateur pilotées par les données sans avoir accès à des données live. Vous pouvez utiliser le panneau Données pour générer des exemples de données significatifs ou en importer à partir d'un fichier XML. Les exemples de données sont accessibles par les contrôles de la planche graphique en phase de conception. Vous pouvez personnaliser les exemples de données dans leurs moindres détails et basculer aisément entre l'utilisation d'exemples de données et celle de données live à l'exécution.

Pour plus d’informations, voir Création d'un échantillon de données.

Styles SketchFlow

Lors de la création de prototypes, vous pouvez opter pour une apparence de type croquis. SketchFlow comprend un jeu d'apparences que vous pouvez associer aux contrôles standard WPF et Silverlight afin de donner à votre application une apparence de type croquis. Vous pouvez utiliser les formes de base pour créer vos propres modèles de croquis à associer aux contrôles personnalisés dont vous disposez. En appliquant les styles SketchFlow à un prototype, vous privilégiez le flux d'application par rapport à l'apparence finale, ce qui permet aux réviseurs de se concentrer sur la conception interactive de l'application plutôt que sur sa conception graphique. Ceci permet d'éviter les attentes inconsidérées et les commentaires inappropriés que peut entraîner un prototype dont la présentation est trop travaillée dès le début de la phase de conception.

Lecteur SketchFlow

Vous pouvez à tout moment générer, exécuter, puis afficher votre projet dans le lecteur SketchFlow, un environnement d'exécution dans lequel le flux d'application est lu tel qu'il a été conçu.

Le lecteur autonome SketchFlow vous permet d'exécuter le prototype pas à pas, de modifier les états au sein de l'interface utilisateur et d'exécuter des animations. Grâce au lecteur SketchFlow, vous pouvez distribuer le prototype aux réviseurs et recueillir leurs commentaires très facilement. Vous pouvez dessiner et ajouter des commentaires directement sur le prototype. Les commentaires recueillis dans le lecteur SketchFlow peuvent être affichés dans Expression Blend, où ils peuvent être évalués et implémentés par le concepteur.

Pour plus d’informations, voir Aperçu d'un prototype.

Annotations et commentaires

La nouvelle fonctionnalité d'annotations de Expression Blend peut également être utilisée dans les projets SketchFlow. Cette fonctionnalité permet d'insérer des annotations, à votre intention ou à celle d'autres utilisateurs, ou d'effectuer le suivi des commentaires d'autres membres de l'équipe lorsque vous travaillez en mode Création. Vous pouvez masquer les annotations afin d'améliorer la lisibilité du projet actuel, puis les afficher au moment de les passer en revue.

Les réviseurs peuvent également faire des commentaires dans le lecteur SketchFlow à l'aide du panneau Commentaires. Les commentaires sont enregistrés dans un fichier .feedback, qui peut ensuite être envoyé au concepteur en tant que fichier distinct.

Pour plus d’informations sur les annotations, voir Annoter un document.

Pour plus d’informations sur les commentaires, voir Déposer des commentaires sur un prototype.

Conversion d'un prototype

Vous pouvez créer un prototype SketchFlow à partir d'une présentation Microsoft Office PowerPoint. Vous pouvez également importer des images Adobe Photoshop (.psd) et Adobe Illustrator (.ai) dans un prototype SketchFlow. À tout moment, vous pouvez créer un document Microsoft Word directement à partir d'un prototype.

Les projets SketchFlow sont des solutions Microsoft Visual Studio standard et à ce titre, peuvent être modifiés dans Visual Studio. Une fois qu'un prototype a été approuvé, il est possible de convertir un projet de prototype en projet de production en supprimant les données SketchFlow du fichier de prototype. Après la suppression des données SketchFlow, le projet fonctionne comme tout autre projet Expression Blend.

Pour plus d’informations, voir Convertir un prototype.

Conclusion

En résumé, SketchFlow facilite l'ébauche d'applications conceptuelles. Au départ, vous pouvez simplement créer une série d'écrans, puis commencer à dessiner. Au fur et à mesure que votre idée prend forme, vous pouvez ajouter des éléments interactifs afin de rapprocher le plus possible votre prototype du produit fini tel que vous l'envisagez, afin de mieux communiquer l'idée de conception que vous avez en tête. Les réviseurs peuvent ensuite afficher le flux d'application dans le lecteur SketchFlow, puis insérer des commentaires directement dans le projet sous forme d'annotations. Lorsque les commentaires ont été incorporés et que le prototype est achevé, le projet de prototype peut être remis à un développeur pour conversion en projet Expression Blend final.