UI prototyping with ms expression blend sketch flow
•Transferir como PPTX, PDF•
1 gostou•6,063 visualizações
Thiết kế prototype ui của sản phẩm sử dụng expression blend
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a UI prototyping with ms expression blend sketch flow
Semelhante a UI prototyping with ms expression blend sketch flow (20)
Mais de Tung Nguyen Thanh
Mais de Tung Nguyen Thanh (20)
Último
Último (20)
UI prototyping with ms expression blend sketch flow
- 1. NguyễnThanhTùng – Chief Software Architect - MISA JSC
- 2. Problems when coding without prototype Introduction to Expression Blend UI Prototyping with Expression Blend
- 3. 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
- 4. 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
- 5. ProductionPrototype Core architecture User Experience Visual Studio Expression Blend SketchFlow PSD, AI, Paper Client 1: Ideas 2: Resources 3: Project
- 6. ProductionPrototype Visual Studio Expression Blend SketchFlow PSD, AI, Paper ALM/Visual Studio Team System Specs, Requirements Deployment
- 8. Interactive design tool for rich apps built inWindows Phone, Silverlight andWPF 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
- 11. 15/07/2013
- 15. 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
- 16. 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?
- 17. 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 recipes Create more diversity in meals Writer In the car Looking for good food in own home Likes to try new foods Teacher In the break room Shopping Trying to save time/money • “Make it easy for busy folks to locate and share quick recipes”
- 20. Document windows Artboard SketchFlow Map Tools panel Properties Objects &Timeline
- 28. From Sketchflow to production Animation,Transition
- 29. 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.
Notas do Editor
- 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.