Prototyping in Expression Blend + SketchFlow. Part 2. Basics
We continue, or rather, begin to deal with prototyping in SketchFlow. Last time we looked at the evolution of SketchFlow itself - from early prototypes to the final product , and today we will begin to sort through its capabilities.
It all starts with the creation of a new project. At this point, you can choose which type of SketchFlow application you want to create. You have two options: Silverlight and a WPF application.
It may seem that SketchFlow allows you to develop only prototypes of Silverlight or WPF applications, but this is not so, nor is it true that only prototypes of “paper” applications can be made on paper.
')
In fact, you choose a container or, if you prefer, a delivery method for your prototype. Silverlight-container works in a browser and can be uploaded to the site. A WPF container is a standalone Windows application. This is the main difference, nevertheless, you shouldn’t forget that you have Silverlight! . (See also Project Types in Expression Blend + SketchFlow. )
vs. 
Otherwise, it all depends on your imagination and your tasks. With SketchFlow, you get an interactive prototype player container. In this sense, nothing prevents the development of prototypes of ordinary applications, sites or mobile applications for any platform. Essentially, to give context, it is enough to add a suitable underlay and, if necessary, suitable control styles (Expression Blend can import psd files). That is, the answer to the question “can I make a prototype of an iPhone application with this thing?” Is positive. Although, it is better, of course, if you make an application under Windows Phone 7 ;)
I will stick to the path of the Silverlight container. Let's take a look at the Expression Blend interface for a SketchFlow project:
In addition to the menu and toolbar, the interface can be divided into 6 main blocks:
Before moving on, you need to make one important setting that will make life much easier later: through the Tools⇒Options⇒SketchFlow menu, you need to set the default size for new screens and components. For example, if you are using a phone or browser underlay, then it is reasonable to set the default size for screens to be exactly the size of the underlay.
Moving on: in front of the main concepts: the map, screens, components, communications, and at the end we will talk a little about importing.
SketchFlow Map is a map of your screens and a component that shows how they are related. (Mathematically, this is a directed graph and you can even find its description in the xml-format somewhere in the project service files.)
What screens can a user get from the current? What transitions are available to him? What should he do to get to the desired screen? How are different components inserted into each other and into different screens? All together it forms the flow of your application, that is, it illustrates the possible ways for the user to work with your application.
Perhaps you can even say that SketchFlow Map allows you to see the whole picture, what is called a big picture . The map allows you to concentrate not on the details of the screens, but on the connections between them.
For example, in the picture above you can see that there is a Login start screen, and there are several main screens, each of which has a menu inserted in the form of a MenuComponent component, through which you can get to any of the screens. A WindowComponent underlay was inserted in all screens, a TweersComponent tweet tape and a panel for updating UpdateComponent status were inserted into the main screens.
The scheme may be more complicated:
or more simple:
.
In the end, it all depends on the complexity of the prototype and on what level you do the splitting on the screens, because Some transitions between different states can be “wired” inside the screen in the form of selected states (States), transitions between which can be set, for example, using behaviors (Behaviours).
Another interesting point: from the point of view of prototyping as a tool for thinking and analyzing, SketchFlow Map itself is a tool for designing the “flow” of an application and exploring possible options, somewhat reminiscent of MindMap.
A few simple rules on SketchFlow Map:
By the way, you can set your colors to all map elements (screens, components, links) - you have a pool of eight colors (color tags) that you can define through the Project⇒SketchFlow Project Settings menu ...
You can further assign the color via the drop-down or context menu:
For convenience, you can enable snapping using the context menu of the map. Also, in the case of a large expanded scheme with a bunch of links, these two buttons can be useful, highlighting the links of the selected components or screens and extinguishing the rest:
Compare:
and 
.
Moving on: screens and components.
Screens are the key states of your application, you can establish links (transitions) between them. Components are parts of an application that can be inserted into other components or screens, i.e. This is the usual composition. The same component can be inserted in multiple screens.
Technically, both are ordinary UserControls.
Using the component allows, for example, to bring the navigation (application menu or site menu) into a separate block that concentrates all the necessary functionality (transitions, navigation) in itself, and which will be subsequently inserted into all the necessary screens. That is, from the circuit
can go to the scheme
.
However, this should be done depending on the stage of development of the prototype and the problem to be solved. In the first case, you concentrate on the main screens, and in the second, you highlight the components of the UI.
Create new screens and components in various ways:
For each new screen or component on the map, a window opens in which you can edit the content. Remember to set the default screen sizes and components (see the beginning).
Connections are a very important element: not only do they, in fact, connect various screens to each other, they also allow you to conveniently play your prototype using a player. Each screen (or components inserted into it) has outgoing links that show where you can go from this screen:
In this case, from screen C, you can go directly to screen X and through the inserted Navigation component to screens A, B, C (yes, formally, it turns out that you can also go to yourself).
In the prototype player (compilation and launch - F5) this set of links is directly mapped to the available navigation options (transitions):
Please note that the monitor colors correspond to the colors on the card. In this case, of course, in the player you can simply open the map and go directly to any screen or component of interest.
New connections on the map can appear in several ways:
This is what concerns the manual creation of links. There is also a variant of the semi-automatic appearance of links on the map: on individual elements (inside screens or components) you can hang behaviors (Behaviors) through which you can run many interesting actions and, in particular, transitions.
For transitions even added a special item in the context menu - NavigateTo, through which you can hang the transition by clicking on any of the available screens or forward / backward in the history of the user's movement on the screens. If there is no connection between the screens, it will automatically be added to the map.
Behavior we consider separately in one of the following articles.
In conclusion of this article I want to identify another interesting topic, introductory to the next part. Notice that all that is above is, in fact, a conversation about the form, not the content, that is, the flow of the application, and not the details of the UI.
In this context, the question of quickly identifying what will be on each of the screens becomes interesting. This task can be solved in various ways: from the simplest in the form of a text explanation “there will be a list of contacts” to the import of finished sketches (sketches).
Expression Blend + SketchFlow provides you with several interesting features, each with its own advantages and disadvantages.
As an example, see a video about prototyping an interactive banner .
Getting started and interface
It all starts with the creation of a new project. At this point, you can choose which type of SketchFlow application you want to create. You have two options: Silverlight and a WPF application.
It may seem that SketchFlow allows you to develop only prototypes of Silverlight or WPF applications, but this is not so, nor is it true that only prototypes of “paper” applications can be made on paper.
')
In fact, you choose a container or, if you prefer, a delivery method for your prototype. Silverlight-container works in a browser and can be uploaded to the site. A WPF container is a standalone Windows application. This is the main difference, nevertheless, you shouldn’t forget that you have Silverlight! . (See also Project Types in Expression Blend + SketchFlow. )
vs. Otherwise, it all depends on your imagination and your tasks. With SketchFlow, you get an interactive prototype player container. In this sense, nothing prevents the development of prototypes of ordinary applications, sites or mobile applications for any platform. Essentially, to give context, it is enough to add a suitable underlay and, if necessary, suitable control styles (Expression Blend can import psd files). That is, the answer to the question “can I make a prototype of an iPhone application with this thing?” Is positive. Although, it is better, of course, if you make an application under Windows Phone 7 ;)
I will stick to the path of the Silverlight container. Let's take a look at the Expression Blend interface for a SketchFlow project:
In addition to the menu and toolbar, the interface can be divided into 6 main blocks:
- The work area where the main action takes place,
- SketchFlow Map - a map of your application that shows what screens and components are and how they are interconnected.
- Projects - the tree of your project, Assets - blanks, controls, etc., which can be used in the prototype.
- The tree of elements of the current screen, component or control + panel for recording animations.
- SketchFlow Animations is a special panel for simplified recording of animations for prototypes.
- Properties of selected elements - color, position, fonts, etc.
Before moving on, you need to make one important setting that will make life much easier later: through the Tools⇒Options⇒SketchFlow menu, you need to set the default size for new screens and components. For example, if you are using a phone or browser underlay, then it is reasonable to set the default size for screens to be exactly the size of the underlay.
Moving on: in front of the main concepts: the map, screens, components, communications, and at the end we will talk a little about importing.
Sketchflow map
SketchFlow Map is a map of your screens and a component that shows how they are related. (Mathematically, this is a directed graph and you can even find its description in the xml-format somewhere in the project service files.)
What screens can a user get from the current? What transitions are available to him? What should he do to get to the desired screen? How are different components inserted into each other and into different screens? All together it forms the flow of your application, that is, it illustrates the possible ways for the user to work with your application.
Perhaps you can even say that SketchFlow Map allows you to see the whole picture, what is called a big picture . The map allows you to concentrate not on the details of the screens, but on the connections between them.
For example, in the picture above you can see that there is a Login start screen, and there are several main screens, each of which has a menu inserted in the form of a MenuComponent component, through which you can get to any of the screens. A WindowComponent underlay was inserted in all screens, a TweersComponent tweet tape and a panel for updating UpdateComponent status were inserted into the main screens.
The scheme may be more complicated:
or more simple:
.In the end, it all depends on the complexity of the prototype and on what level you do the splitting on the screens, because Some transitions between different states can be “wired” inside the screen in the form of selected states (States), transitions between which can be set, for example, using behaviors (Behaviours).
Another interesting point: from the point of view of prototyping as a tool for thinking and analyzing, SketchFlow Map itself is a tool for designing the “flow” of an application and exploring possible options, somewhat reminiscent of MindMap.
A few simple rules on SketchFlow Map:
- The prototype always has a start screen, which is indicated by a green triangle (see the pictures above). Through the context menu, you can start any screen.
- Screens are indicated by rectangles, by default they are blue (Navigation).
- Components are indicated by rounded rectangles, by default they are green (Component).
- Transitions are indicated by solid lines. Composition is indicated by dotted lines.
By the way, you can set your colors to all map elements (screens, components, links) - you have a pool of eight colors (color tags) that you can define through the Project⇒SketchFlow Project Settings menu ...
You can further assign the color via the drop-down or context menu:
For convenience, you can enable snapping using the context menu of the map. Also, in the case of a large expanded scheme with a bunch of links, these two buttons can be useful, highlighting the links of the selected components or screens and extinguishing the rest:
Compare:
and .Moving on: screens and components.
Screens and components
Screens are the key states of your application, you can establish links (transitions) between them. Components are parts of an application that can be inserted into other components or screens, i.e. This is the usual composition. The same component can be inserted in multiple screens.
Technically, both are ordinary UserControls.
Using the component allows, for example, to bring the navigation (application menu or site menu) into a separate block that concentrates all the necessary functionality (transitions, navigation) in itself, and which will be subsequently inserted into all the necessary screens. That is, from the circuit
can go to the scheme
.However, this should be done depending on the stage of development of the prototype and the problem to be solved. In the first case, you concentrate on the main screens, and in the second, you highlight the components of the UI.
Create new screens and components in various ways:
- The SketchFlow Map control panel has the necessary buttons:
- The same options are available from the context menu of the map.
- The screens and components on the map have a drop-down menu from which you can pull a new linked screen or component:
- If you select one or several elements in the workspace or object tree, you can turn them into new components from the context menu (Make into Component Screen ...).
For each new screen or component on the map, a window opens in which you can edit the content. Remember to set the default screen sizes and components (see the beginning).
Links and transitions
Connections are a very important element: not only do they, in fact, connect various screens to each other, they also allow you to conveniently play your prototype using a player. Each screen (or components inserted into it) has outgoing links that show where you can go from this screen:
In this case, from screen C, you can go directly to screen X and through the inserted Navigation component to screens A, B, C (yes, formally, it turns out that you can also go to yourself).
In the prototype player (compilation and launch - F5) this set of links is directly mapped to the available navigation options (transitions):
Please note that the monitor colors correspond to the colors on the card. In this case, of course, in the player you can simply open the map and go directly to any screen or component of interest.
New connections on the map can appear in several ways:
- When you pull a new screen or component from an existing one, a link automatically appears (see above).
- From the drop-down menu of a component or screen, you can select the Connect an Existing Screen or Insert Component Screen option and drag the connection to the desired object.
- You can simply select an object with a mouse and drag it to another - a link will be automatically created between them (navigation or composition).
This is what concerns the manual creation of links. There is also a variant of the semi-automatic appearance of links on the map: on individual elements (inside screens or components) you can hang behaviors (Behaviors) through which you can run many interesting actions and, in particular, transitions.
For transitions even added a special item in the context menu - NavigateTo, through which you can hang the transition by clicking on any of the available screens or forward / backward in the history of the user's movement on the screens. If there is no connection between the screens, it will automatically be added to the map.
Behavior we consider separately in one of the following articles.
Import
In conclusion of this article I want to identify another interesting topic, introductory to the next part. Notice that all that is above is, in fact, a conversation about the form, not the content, that is, the flow of the application, and not the details of the UI.
In this context, the question of quickly identifying what will be on each of the screens becomes interesting. This task can be solved in various ways: from the simplest in the form of a text explanation “there will be a list of contacts” to the import of finished sketches (sketches).
Expression Blend + SketchFlow provides you with several interesting features, each with its own advantages and disadvantages.
- Graphic sketches (sketches). Thinking through sketches, you immediately highlight key states (screens) and prepare sketches for each of them. Condition = sketch . Then each of the sketches create a separate screen and transfer the image there. Then you connect the screens with each other and get the primary version of the prototype. This can also be handy if you start with paper prototypes or interface sketches on paper.
- Graphic editor. You can open Adobe Illustrator or Photoshop and draw the whole sketch in a single file (or several files), spreading different components and states across layers. State = layer set. You can then import this file into Expression Blend along with layers.
- Microsoft PowerPoint. If you make a prototype in PowerPoint as a series of slides, then you can import the presentation into Expression Blend. For each slide, SketchFlow will create a separate screen and establish links between them. State = slide.
- Expression Blend. Finally, you can create everything at once in Expression Blend + SketchFlow. We will consider this option in the next article.
As an example, see a video about prototyping an interactive banner .
Source: https://habr.com/ru/post/102628/
All Articles