Any suggestions for best practices to follow when creating UI prototypes using sketchFlow for multiple screen sizes?

am looking to prototype the UI for an windows application. The app will be deployed on several display devices with different (physical) screen sizes and aspect ratios. Would like to be able to generate scenarios optimized on one display and quickly check if the layout is OK on different screen sizes, orientations. That is, I'd like to prototype one set of scenarios and "automatically" generate the same scenarios on different screens. Have superficial knowledge of MS Sketchflow. Have seen some best practices at http://www.wpftutorial.net/LayoutProperties.html#best . Am wondering if folk can advise on best practices to follow in sketchflow.

Bye

13.10.2009 15:29:53
2 ОТВЕТА

Keep a consistent theme between the pages, kind of goes without saying.

0
16.10.2009 10:14:20

To quickly be able to check how things will look, I have 2 possible suggestions:

  1. Use the states panel to create a state group/states that change the size of the layout container (such as layoutroot) you are working with. Then in the sketchflow player, you can select the state from the navigation menu and see how it looks.

  2. Use a ChangePropertyAction behavior from the asset panel attached to a button. You can set the height or width to the size you want. If you use 2, you can set both the height and width. This would give you the ability to control the layout size and see how it is rendered.

Hope that helps, let me know if you need more info.

1
20.10.2009 14:29:59
Thanks Chuck. Just tried adding a state transition change the layout container size and that worked well for the screen I was looking at. Can I change the size of all screens in my prototype with states? btw, am Sketchflow neophyte so excuse naive questions)
Anthony Carroll 26.11.2009 11:35:52
That would be a little more difficult. One way to do it would be to have a behavior that sets a global variable someplace for the height and width, and another behavior that sets the size of a screen when it is loaded. There is no easy solution out of the box. If this is important to you I could create a blog post describing these behaviors and how to build/use them. Let me know.
Chuck Hays 1.12.2009 17:04:34