Prototyping giao diện sử dụng Expression Blend Sketch Flow
•Download as PPTX, PDF•
5 likes•1,855 views
Bài giảng trong khóa học lập trình ứng dụng di động tại TechMaster, http://techmaster.vn
Recommended
Recommended
More Related Content
What's hot
Viewers also liked
Viewers also liked (17)
Similar to Prototyping giao diện sử dụng Expression Blend Sketch Flow
Similar to Prototyping giao diện sử dụng Expression Blend Sketch Flow (20)
More from TechMaster Vietnam
More from TechMaster Vietnam (15)
Recently uploaded
Recently uploaded (20)
Prototyping giao diện sử dụng Expression Blend Sketch Flow
- 1. UI Prototyping with MS Expresion Blend Bài giảng do giảng viên TechMaster biên soạn http://techmaster.vn
- 2. Agenda • Problems when coding without prototype • Introduction to Expression Blend • UI Prototyping with Expression Blend http://techmaster.vn
- 3. Problems when coding without prototype • Stakeholders asked for user requirements • You started building a function immediately • Stakeholders end up saying that is not what they want • => You ruin and redesign everything with an angry attitude http://techmaster.vn
- 4. Problems when coding without prototype • But it’s not real problem • Problem here is we need a way to validate what’s the stakeholder want before is too late • It has to fast process for the stakeholder provide feedbacks http://techmaster.vn
- 5. Good Pattern http://techmaster.vn
- 6. Good Pattern http://techmaster.vn
- 7. SketchFlow Role http://techmaster.vn
- 8. 3 Ingredients of a Good UX Platform Tools UX Skills http://techmaster.vn
- 9. Why is Expression Blend Sketchflow • Interactive design tool for rich apps built in Windows Phone, Silverlight and WPF • SketchFlow is a rapid prototyping tool that allows you to build and test out UI’s quickly • Provide an interactive way to get stakeholder feedbacks • Market-leading designer-developer integration and workflow http://techmaster.vn
- 10. Designer & Developer Workflow Designer Developer http://techmaster.vn
- 12. 28/06/2012 http://techmaster.vn
- 16. SketchFlow hightlights • Drag & Drop interface • Sketch controls style • Navigation, animations, behaviors • Realistic sample data • Highly customizable: UI & code • Package and send prototype to stakeholder for adding comment, draw some feedbacks figures • Documentation generation http://techmaster.vn
- 17. UI Prototyping with Expression Blend • Define the purpose of the app – What are the goals of the app? – What are the user’s requirements? – How can you keep them aligned? http://techmaster.vn
- 18. Analysis Matrix – User Story “Make it easy for busy folks to locate and share quick recipes” People Places Activities Motivations College Student In a classroom Bored in class Impressing a date Young single professional In the elevator Using spare time Enjoys cooking Newly married person At the bus stop Waiting for the bus Wants to improve cooking skills New mother On the couch Relaxing for a few minutes Needs meals that can be cooked quickly Nurse At the doctor’s office Taking a break Wants to try new spices and flavors Busy Parent On the bus/train Cooking for a crowd Looking for recipes for food already in the house Fireperson At work Refreshing memory on favorite recipe Needs to find fast recipes to feed co- workers Cook In the kitchen Researching other people’s favorite Create more diversity in meals recipes Writer In the car Looking for good food in own home Likes to try new foods Teacher In the break room Shopping http://techmaster.vn Trying to save time/money
- 19. MindMap – User Story http://techmaster.vn
- 20. List User Story http://techmaster.vn
- 21. Expression Blend Workspace • Document windows • Artboard • SketchFlow Map • Tools panel • Properties • Objects & Timeline http://techmaster.vn
- 22. SketchFlow Map http://techmaster.vn
- 23. Sketch styles for controls http://techmaster.vn
- 24. Adding navigations http://techmaster.vn
- 25. Data binding and sample data http://techmaster.vn
- 26. SketchFlow animation http://techmaster.vn
- 27. SketchFlow player http://techmaster.vn
- 28. Design documentation http://techmaster.vn
- 29. What’s next? • From Sketchflow to production • Animation, Transition http://techmaster.vn
- 30. Summary • Sketchflow provide us with a quick way to build a prototype using just hand drawn sketches. • How to build a page by using sketched controls and reusable components. • How to add real data to our prototype. http://techmaster.vn
Editor's Notes
- C:\\Program Files\\Microsoft SDKs\\Windows Phone\\v7.0\\IconsUse the application bar button for common application tasks.You are limited to four application bar buttons.Place less frequently performed actions in the application bar menu.You are limited to five application bar menu items to prevent scrolling.Custom application bar icons should be 48 x 48 pixels (You do not need the circle in the icon, as this is drawn by the application bar.)Application icon should be 62 x 62 pixels and PNG format.Portrait is the default application view-you must add code to support landscape viewTile images should PNG format and measure 173 pixels by 173 pixels at 256 dpiMake sure to change Build Action for images to Content when you add them to Visual Studio.For time consuming processes, developers should provide feedback to indicate that something is happening by using content to indicate progress, or consider using a progress bar or raw notification as a last resortYou should set the InputScope property for a text box or other edit controlsCanvas uses a pixel-based layout and can provide better layout performance than the grid for applications that do not change orientations.Grid control is the best choice when the application frame needs to grow, shrink, or rotate.Use panorama elements as the starting point for more detailed experiencesUse a pivot control to filter large data sets, providing a view of multiple data sets, or to provide a way to switch between different views of the same dataDo not use the pivot control for task-based navigation, like in a wizard applicationUse for vertical scrolling through a list or grid in panorama sections is acceptable as long as it is within the confines of the section and is not in parallel with a horizontal scroll.Never place a pivot control inside of another pivot controlNever place a pivot control inside of a panorama controlApplications should minimize the number of pivot pagesThe Pivot control should only be used to display items or data of similar typeUse fonts other than Segoe sparinglyAvoid using font sizes that are smaller than 15 points in sizeMaintain consistent capitalization practices to prevent a disjointed or jagged reading experienceThe title bar application title should be all capitalsUser all lower case letters for most other application text including page titles, list titles, etc.
- C:\\Program Files\\Microsoft SDKs\\Windows Phone\\v7.0\\IconsUse the application bar button for common application tasks.You are limited to four application bar buttons.Place less frequently performed actions in the application bar menu.You are limited to five application bar menu items to prevent scrolling.Custom application bar icons should be 48 x 48 pixels (You do not need the circle in the icon, as this is drawn by the application bar.)Application icon should be 62 x 62 pixels and PNG format.Portrait is the default application view-you must add code to support landscape viewTile images should PNG format and measure 173 pixels by 173 pixels at 256 dpiMake sure to change Build Action for images to Content when you add them to Visual Studio.For time consuming processes, developers should provide feedback to indicate that something is happening by using content to indicate progress, or consider using a progress bar or raw notification as a last resortYou should set the InputScope property for a text box or other edit controlsCanvas uses a pixel-based layout and can provide better layout performance than the grid for applications that do not change orientations.Grid control is the best choice when the application frame needs to grow, shrink, or rotate.Use panorama elements as the starting point for more detailed experiencesUse a pivot control to filter large data sets, providing a view of multiple data sets, or to provide a way to switch between different views of the same dataDo not use the pivot control for task-based navigation, like in a wizard applicationUse for vertical scrolling through a list or grid in panorama sections is acceptable as long as it is within the confines of the section and is not in parallel with a horizontal scroll.Never place a pivot control inside of another pivot controlNever place a pivot control inside of a panorama controlApplications should minimize the number of pivot pagesThe Pivot control should only be used to display items or data of similar typeUse fonts other than Segoe sparinglyAvoid using font sizes that are smaller than 15 points in sizeMaintain consistent capitalization practices to prevent a disjointed or jagged reading experienceThe title bar application title should be all capitalsUser all lower case letters for most other application text including page titles, list titles, etc.
- C:\\Program Files\\Microsoft SDKs\\Windows Phone\\v7.0\\IconsUse the application bar button for common application tasks.You are limited to four application bar buttons.Place less frequently performed actions in the application bar menu.You are limited to five application bar menu items to prevent scrolling.Custom application bar icons should be 48 x 48 pixels (You do not need the circle in the icon, as this is drawn by the application bar.)Application icon should be 62 x 62 pixels and PNG format.Portrait is the default application view-you must add code to support landscape viewTile images should PNG format and measure 173 pixels by 173 pixels at 256 dpiMake sure to change Build Action for images to Content when you add them to Visual Studio.For time consuming processes, developers should provide feedback to indicate that something is happening by using content to indicate progress, or consider using a progress bar or raw notification as a last resortYou should set the InputScope property for a text box or other edit controlsCanvas uses a pixel-based layout and can provide better layout performance than the grid for applications that do not change orientations.Grid control is the best choice when the application frame needs to grow, shrink, or rotate.Use panorama elements as the starting point for more detailed experiencesUse a pivot control to filter large data sets, providing a view of multiple data sets, or to provide a way to switch between different views of the same dataDo not use the pivot control for task-based navigation, like in a wizard applicationUse for vertical scrolling through a list or grid in panorama sections is acceptable as long as it is within the confines of the section and is not in parallel with a horizontal scroll.Never place a pivot control inside of another pivot controlNever place a pivot control inside of a panorama controlApplications should minimize the number of pivot pagesThe Pivot control should only be used to display items or data of similar typeUse fonts other than Segoe sparinglyAvoid using font sizes that are smaller than 15 points in sizeMaintain consistent capitalization practices to prevent a disjointed or jagged reading experienceThe title bar application title should be all capitalsUser all lower case letters for most other application text including page titles, list titles, etc.
- C:\\Program Files\\Microsoft SDKs\\Windows Phone\\v7.0\\IconsUse the application bar button for common application tasks.You are limited to four application bar buttons.Place less frequently performed actions in the application bar menu.You are limited to five application bar menu items to prevent scrolling.Custom application bar icons should be 48 x 48 pixels (You do not need the circle in the icon, as this is drawn by the application bar.)Application icon should be 62 x 62 pixels and PNG format.Portrait is the default application view-you must add code to support landscape viewTile images should PNG format and measure 173 pixels by 173 pixels at 256 dpiMake sure to change Build Action for images to Content when you add them to Visual Studio.For time consuming processes, developers should provide feedback to indicate that something is happening by using content to indicate progress, or consider using a progress bar or raw notification as a last resortYou should set the InputScope property for a text box or other edit controlsCanvas uses a pixel-based layout and can provide better layout performance than the grid for applications that do not change orientations.Grid control is the best choice when the application frame needs to grow, shrink, or rotate.Use panorama elements as the starting point for more detailed experiencesUse a pivot control to filter large data sets, providing a view of multiple data sets, or to provide a way to switch between different views of the same dataDo not use the pivot control for task-based navigation, like in a wizard applicationUse for vertical scrolling through a list or grid in panorama sections is acceptable as long as it is within the confines of the section and is not in parallel with a horizontal scroll.Never place a pivot control inside of another pivot controlNever place a pivot control inside of a panorama controlApplications should minimize the number of pivot pagesThe Pivot control should only be used to display items or data of similar typeUse fonts other than Segoe sparinglyAvoid using font sizes that are smaller than 15 points in sizeMaintain consistent capitalization practices to prevent a disjointed or jagged reading experienceThe title bar application title should be all capitalsUser all lower case letters for most other application text including page titles, list titles, etc.
- Document windows A new SketchFlow document opens a start page by default. As you create more navigation screens, they will be opened, and can be selected here. ArtboardThe artboard is your main screen or canvas; you will add various elements such as images, text and forms, and arrange them on the artboard. The artboard represents the authoring view of your application. SketchFlow Map panel The SketchFlow Map panel at the bottom of the screen is a graph editor that allows you to define the various screens in your application. The blue rectangle labeled Start is a node, and by default, represents the initial navigation screen. Hovering over any node expands a section allowing you to create new screens, connections, and components, as well as change the visual tag associated with these nodes. The Tools panel The Tools panel allows you to create and modify objects in your application. You create objects by selecting the tool and drawing on the artboard with your mouse (or a tablet, if connected). Tools with a white rectangle in the bottom right corner expand to display more tools when you click them.
- The SketchFlow map shows you all screens composing the prototype and the connections (navigations) between those screens. When you create a new SketchFlow application with Expression Blend 3 you will probably see that map in the center bottom part of the screen, otherwise you can open it from the Window->SketchFlow Map menu.The SketchFlow map shows you all screens composing your prototype and the connections between them. At each moment you can add a new screen to your prototype.
- the customer often focuses on the wrong things and also the customer easily tempts into thinking that they are seeing more than there is. That’s why the SketchFlow comes with a built-in sketchy style, which makes controls look as if they were drawn on the white board in the office. Adding to this the various drawing tools and the sticky notes, the designer has a complete set of tools for sketching and prototyping.All sketch controls (styles) may be found in the Assets panel (Windows -> Assets), under the node SketchFlow -> Styles -> SketchStyles.
- The SketchFlow map shows you all screens, composing your prototype and the connections between those screens. In order your prototype to be complete and to give the customer a full vision about the flow, the customer must be able to navigate (switch) between the different screens
- Making mock up data is sometimes painful, especially if you need to do that for an early prototype. Never more – Blend lets you create meaningful sample data just with a few clicks; you can create working data – bound lists and master – details views just with drag and drop. You can define sample data in the Data pane. You may import data from a XML file or you may choose to use the built in data which Blend offers you. Binding to a list control is just a piece of cake. Just select the collection and drag it onto the desired control.
- One of the purposes of the prototype is to quickly and easily express your ideas. There is no better way to do this but to use animations. Since you are using Expression Blend , you have a complete set of key frame-based animation tools. Key frame animations are powerful but not effective for prototyping. You simply have to create and manage too many frames, and that will slow down your work. That’s why SketchFlow offers you a special type animation called “SketchFlow Animation” which purpose is to show the customer what happens on that screen step by step. By default the SketchFlow Animation pane is placed on the center top part of the screen (just above the main design surface).You just add a storyboard frame, making your screen look the way you like. Repeat that procedure as many times as you want. It is extremely simple and most important – it is fast. For each storyboard frame you may specify how long to show that frame (Hold Time) and how long to take the transition from the previous frame to the current one (Transition Time). Also the SketchFlow animation allows you to set an easing function for the transition (by default it is Cubic InOut).
- The SketchFlow player is an extremely important part of the prototype. Once you have the prototype ready you may ask yourself how you will interact with the customer. This is what the SketchFlow player is used for. The big advantage is that you don’t need any additional software to run the player (of course you will need the Silverlight plugin installed in your browser). If your prototype is for WPF then the player is an ordinary application. If your prototype is for Silverlight then the player will run in the browserThe player allows anybody who explores the prototype to give an immediate feedback. You can insert comments or use ink to draw directly on the prototype.After that you just turn back the prototype to the designer, who can insert it in the Blend art board. Gathering timely feedback from a client is just as important as creating the prototype. That’s why the player is extremely important part. It helps reducing the time lost and costs in the design and development process. It is freely distributed and can be run on a standard browser. Clients review the prototype, make some tests, provide in context feedback and send back the demo to the designer.
- Every project needs design documentation. SketchFlow can export your prototype to a Microsoft Word. Just use the File->Export to Microsoft Word command. The document will contain screenshots of the SketchFlow Map, as well as screenshots of every screen you have in the project; table of contents and table of figures.