Thanks for your wonderful response and emails for my Part 1 on Blend 3 SketchFlow. In last part basically I tried my best to put need of SketchFlow in front of you and things around that along with the initial steps to begin your SketchFlow work like how to add controls and what all options are there.
Today in this part, I am going to concentrate on Developing(coding) part along with navigation and much more till how to execute it etc. Maybe the exporting and other important features I will address in my part 3 (I don’t want my readers to feel sleepy with long long paragraphs :) ).
I assume here that, there are total 3 screens in my example application as Login->Welcome->Report, As arrow shows here the flow, without login you cannot move ahead. So flow starts from login screen and ends at Report.
For designers, good thing is that,they can give now smooth transition effects and small animations too while doing some functionality or screen change with something know as SketchFlow Animation like this :
More in-depth information you can find here. As we talking from Part 1, Sketch Flow is all about making prototype more real and interactive. So we can even take help of code behind to make it as if a working code snippet. Let’s say on this Login Screen,If I want to validate user, I can write code for this prototype and make it realistic like this :
I can even associate navigation by means of trigger too by attaching-detaching it,something like this :
<i:Interaction.Triggers>
<i:EventTrigger x:Name="MyTrigs" EventName="Click">
<pb:NavigateToScreenAction TargetScreen="SilverlightPrototype1Screens.Screen_1_1"/>
</i:EventTrigger>
</i:Interaction.Triggers>
There is yet another way to connect to another screen, Let’s say you have normal navigation button where you directly want to throw user on some specific screen then you can choose “Navigate To” option by just Right Clicking on it like this :
Or directly associate particular screen via Map like this :
Note that One screen may connected to multiple screens and direction is not always one way, All depends on your vision of workflow among screens, So looping is common thing here.
Please make another note that, the Sketch Flow screens can be databound or you can have dummy data for them, How to DataBind screens in Blend, for this I have already written one article which you can refer here.
Now lets build this sample two screens and let’s now talk more on Output and execution part. So after building and executing project, you can see output in browser like this :
Now let’s talk more specifically to each aspects and parts which we can see in above output, Check panel on Left first. (Well if you try to view source,you will find nothing but routine object tag embedding this output, So nothing specific or special there in terms of rendering), now lets concentrate on left panel :
Now Part 1 which is highlighted in Red is nothing but shows us the navigation sequence of screens, you can jump on your own to each of them either by clicking in that list or using Home and back button given on top of it. You will also notice that, your SketchFlow animation is also getting on list here along with screens. Part 2 which is again highlighted in Red is nothing but a scale where you can zoom in and out for particular screen on right hand side. Now let’s talk about Options Map and Feedback on down panel of this, It look like this :
Highlighted icon may confuse you and you might think that it is for full screen, Actually this will overlap on your screen on right and there you can see the current selected screen and its position on map, which you can zoom in-out and can close too like this :
If you ask me..from my own experience in IT, Hardly there will be any client who will not give any feedback and give go ahead on the spot, So feedback has to be there to improve work and do it more better and better. For this, You have a Feedback tab on left which look like this :
With those pens and colors, you can draw or quote your remarks or feedback on screen on right like this :
Now not all the times these remark will help Designers to understand what exactly they are suppose to do, so we have a Text entry feature again made available which gives more information on what wrong on right side like this :
Now a question may come to your mind that, what if I/My Client close down the browser? Where will that feedback get stored? am I going into loss for not having that data? Well, Simple answer is you have something known as “Feedback File” where all this information get stored, So all you need is just to click on Folder like symbol on left panel bottom part at right most button and then choose option like this :
Click on Export Feedback…
and you are done ! You can then access that file from your drive or even you can transfer it wherever you want !
But what to do this Feedback file? and how will designer come to know feedback who might be sitting altogether at different location? Any other features where I can export my Output as Prototype? Well for all these questions, just wait for Part 3 where I will be talking about getting feedback file and how to extract feedback and make those changes along with much more powerful features..So be here once again for Part 3 with much more new things, I will take another day(Maybe on Tuesday) for Part 3 since as per my time zone,after few hours, it will be Monday Morning Blue for me !! :D
Like Part 1, I hope Part 2 will be helpful to take your development one step ahead, Do let me know your feedback.
Vikram.
No comments:
Post a Comment