The key to any advanced prototypes using Blend 3 w/ Skecthflow is using the SketchFlow Animation Panel, the more advanced States panel, or by adding common interactive behavior to controls. Now, if you happen to have any Flash background, setting up animations will feel very comfortable for you. Below are my thoughts on how to set up some of the behavior that is exhibited by another Silverlight Prototype I put together. (Please explore the prototype to see how feedback and annotations work.)
Creating an Accordion Navigation
The image shown above was the base state of the accordion navigation I built. All of the screen elements presented are drawn rectangles rather than any control that comes along with inherited behavior. The base state is the foundation for any animation a designer wishes to built to mimic interactive behavior. From this starting state, a designer can create iterations of the screen and tie the various states together. What happens when switching between the various states is completely taken care of by Blend, very much like the tween functionality in Flash. Below are screen shots of the two other states I created, and the States panel. Notice one of the defined states returns the accordion to the base state, I am unsure if this is necessary but it worked for me.
The SketchFlow Animation Panel works exactly that same way as states, but only allows for a single animation flow. If it’s desired that the interactive aspects of the prototype be conditional, it’s required to use the States aspect of Blend.
Rollover Effects
Providing a rollover effect is a common need for prototypes. The SketchFlow Animation Panel is perfect for exhibiting this type of behavior. On the ‘Countries’ page, the sketched picture circles can be navigated by rolling over the right arrow. Here is a look at the SketchFlow Animation Panel that allows for this type of behavior.
Drag and Drop
Adding the Drag and Drop behavior is as simple as adding a property to a control. With this property added, it’s possible to place the control anywhere on the screen. Blend adds the proper code necessary, behind the scenes, so a designer can concern themselves with exploring the behavior rather than programming it. As you can see from the screenshot, there are many behaviors available that can be added to any control.
Blend is a powerful prototyping tool given that you find yourself in a WPF/Silverlight development environment. It provides the same benefits that many other prototyping tools have for other development environments. So which tool should a designer use? It depends. It all depends on the type of environment you find yourself in and personal preference. Hope you have enjoyed my exploration of Blend and if you find yourself using it one day please share your experiences.
