prototyping giao diện sử dụng expression blend sketch flow
DESCRIPTION
Bài giảng trong khóa học lập trình ứng dụng di động tại TechMaster, http://techmaster.vnTRANSCRIPT
![Page 1: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/1.jpg)
http://techmaster.vn
UI Prototyping with MS Expresion Blend
Bài giảng do giảng viên TechMaster biên soạn
![Page 2: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/2.jpg)
http://techmaster.vn
Agenda
• Problems when coding without prototype
• Introduction to Expression Blend
• UI Prototyping with Expression Blend
![Page 3: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/3.jpg)
http://techmaster.vn
• 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
Problems when coding without prototype
![Page 4: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/4.jpg)
http://techmaster.vn
• 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
Problems when coding without prototype
![Page 5: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/5.jpg)
http://techmaster.vn
Good Pattern
![Page 6: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/6.jpg)
http://techmaster.vn
Good Pattern
![Page 7: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/7.jpg)
http://techmaster.vn
SketchFlow Role
![Page 8: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/8.jpg)
http://techmaster.vn
3 Ingredients of a Good UX
Platform
Tools
Skills
UX
![Page 9: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/9.jpg)
http://techmaster.vn
• 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
Why is Expression Blend Sketchflow
![Page 10: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/10.jpg)
http://techmaster.vn
Designer & Developer Workflow
Designer Developer
![Page 11: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/11.jpg)
http://techmaster.vn
Rapidly Model the Look and Feel
![Page 12: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/12.jpg)
http://techmaster.vn10/04/2023
Multi-Version/User Feedback
![Page 13: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/13.jpg)
http://techmaster.vn
![Page 14: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/14.jpg)
http://techmaster.vn
![Page 15: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/15.jpg)
http://techmaster.vn
![Page 16: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/16.jpg)
http://techmaster.vn
• 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
SketchFlow hightlights
![Page 17: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/17.jpg)
http://techmaster.vn
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?
![Page 18: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/18.jpg)
http://techmaster.vn
Analysis Matrix – User Story
People Places Activities MotivationsCollege 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”
![Page 19: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/19.jpg)
http://techmaster.vn
MindMap – User Story
![Page 20: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/20.jpg)
http://techmaster.vn
List User Story
![Page 21: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/21.jpg)
http://techmaster.vn
Expression Blend Workspace• Document
windows
• Artboard
• SketchFlow Map
• Tools panel
• Properties
• Objects & Timeline
![Page 22: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/22.jpg)
http://techmaster.vn
SketchFlow Map
![Page 23: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/23.jpg)
http://techmaster.vn
Sketch styles for controls
![Page 24: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/24.jpg)
http://techmaster.vn
Adding navigations
![Page 25: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/25.jpg)
http://techmaster.vn
Data binding and sample data
![Page 26: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/26.jpg)
http://techmaster.vn
SketchFlow animation
![Page 27: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/27.jpg)
http://techmaster.vn
SketchFlow player
![Page 28: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/28.jpg)
http://techmaster.vn
Design documentation
![Page 29: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/29.jpg)
http://techmaster.vn
What’s next?
• From Sketchflow to production
• Animation, Transition
![Page 30: Prototyping giao diện sử dụng Expression Blend Sketch Flow](https://reader034.vdocuments.pub/reader034/viewer/2022052618/549c93a8ac7959bf2a8b47ca/html5/thumbnails/30.jpg)
http://techmaster.vn
• 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.
Summary