Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. prototyping and scripting W&Match CHENG Peng HUANG He GU Pan LIU Yaming ZHU Yibing11 2 19
  2. 2. introduction W&Match is a application that can facilitate the user to chose a good hair style for them, it base on the windows phone 7 guideline and associate with face position reorganization technology and LBS, the user just select few of options, tilt angle and shake the mobile phone to quickly chose hair style on the mobile phone.11 2 19
  3. 3. 11 2 19
  4. 4. 11 2 19
  5. 5. Scenario Alice is a fashion girl, she usually browses salon website sometimes for changing a hairstyle and sometimes just for selecting her favorites. She usually search hairstyle by the way scan hairstyle or face shape. By using w&match app she can take a photo and the system can find other users’ photo whose face shape match her face shape. And she can choose which one is her favorite. In other way, she scans the gallery and choose photos by several categories such as length, color and face shape, and then match the selected photos to choose favorites.11 2 19
  6. 6. Site11 2 19
  7. 7. Prototyping of your UI design 111 2 19
  8. 8. Prototyping of your UI design Prototyping of your UI design 211 2 19
  9. 9. paper model11 2 19
  10. 10. user test 1 Through this step of paper prototype, we want to ensure that the user interface provided users with the appropriate capabilities to access and view the operation of the test object and ensure that objects within the UI function as expected requirements.11 2 19
  11. 11. We did the paper prototype as the original UI design. This is a very important step, we set up the logic progress of our app. But due to the limitation of paper prototype, we can’t understand real size of font or pictures and the real effect of final GUI. Moreover, the action script all basic on the guideline.11 2 19
  12. 12. Metro Red Threads of Windows Phone 7: • Personal – your day, your way • Relevant – your people, your location • Connected – your stuff, your peace of mind11 2 19
  13. 13. 1) Clean, light, open, and fast It is visually distinctive, contains ample white space, reduces clutter and elevates typography as a key design element. 2) Content, not chrome It accentuates focus on the content that the user cares most about, making the product simple and approachable for everyone. 3) Integrated hardware and software Hardware and software blend into each other and creates a seamless user experience from single- button access to Search, Start, Back and the camera to on-board sensor integration. 4) World-class motion The Windows Phone 7 touch and gesture experiences on capacitive screens are consistent with Windows 7 on the desktop and include hardware-accelerated animations and transitions to enhance the userʼs experience at every turn. 5) Soulful and alive A personalized, automatically updated view into the information that matters most to the user is enabled and brings to life a cinematic photo and video experience by having a fully integrated Zune media player experience.11 2 19
  14. 14. Rationale of our UI design Before we develop the User Interface of our W&Match application for Windows Phone 7, we did carefully study into the official “UI Design and Interaction Guide for Windows Phone 7”. We tried to understand the Windows Phone 7 design philosophy and principles. As we already know that, Metro is the design language for Windows Phone 7. Call it Metro because it’s modern and clean. It’s fast and in motion. It’s about content and typography. And it’s entirely authentic. We developed the User Interface of W&Match based on and strictly observed the “Design Templates for Windows Phone 7”, but at the same time we applied it into an innovative and creative way to create the beautiful and comfortable user experience.11 2 19
  15. 15. UI Design11 2 19
  16. 16. user test 1 user test 211 2 19
  17. 17. user test 1 conclusion The biggest acquirement of this project is that we have totally understood the fresh and advanced mobile phone OS: Windows7. It has many different features from previous operation systems: 1. The guideline is pretty strict of both software and hardware. The advantages is ensuring the quality of the unified interaction and visual experience. It reduces the development time, fund and manpower of the software based on Win7 OS platform as well. 2. Win7 pays more attention on expanding the limited space of the mobile phone UI space. Firstly, the concept called Panorama is a new thinking of using the UI space of cell phone. Secondly, there is no fixed status bar including time, battery and signal on Win7. Finally, removing the soft “back” button on the top. 3. Benefit from XBox Live Service, the app sale system and gaming system of Win7 cell phone is very powerful, which can keep Win7 OS being latest. Beside, in our application, we try to use the function of accelerometer sensor in some new ways.11 2 19