Isavella Benekou UX Specialist – Microsoft Hellas
Windows 8 & Windows Phone 8 UX Design
Windows 8 UI
Σχεδιάζοντας επιτυχημένες
Windows Store apps
Απλοποίηση
Σχεδιαστική Ικανότητα
Ταχύτητα και Ροή
Ψηφιακή αισθητική
Ενιαία Χρήση OS και Εφαρμογής
Απλοποίηση στο περιεχόμενο
(in red features covered by Charms)
“Food with Friends is the best app in its category at helping
users and their friends find a restaurant to eat at tonight.”
Make dinner plans for tonight with friends
Start a plan
• Suggest a restaurant
• Make a reservation at a restaurant
Vote on a plan from friends
• Vote “Yep” to a suggestion
• Vote “Nope” to a suggestion
• Vote “maybe” for a suggestion
Find restaurants that I want to eat at
Manage my wishlist
• Add/remove wishlist items
Manage a map of restaurants
• Redo search on current map
• Find current location
Manage views
• View restaurants on a map/list
Manage list of restaurants
• Filter…
• Sort…
Write a review
Find restaurants my friends want to eat at
View friends wishlist
View friends preferences
Read reviews from friends
Απλοποίηση στη Μορφή (αποφύγετε αυτό που λέμε ‘chrome’)
Σχεδιαστική Ικανότητα Καμβάς και Γραμματοσειρές
Visual Studio Template
1
3
2
1
2
3
20pt
Light
Semilight
Regular
42pt
Light 11pt
Semilight
Regular
Semibold
9pt
Regular
Semibold
Bold
42pt
20pt
11pt
11pt
11pt
9pt
1 2 3
Ταχύτητα και Ροή
Contoso Travel Featured destinations Last minute deals My Trips Featured destinations Last minute deals My Trips
Tonight Friends’ Wishlists My Wishlist All Restaurants
Ψηφιακή αισθητική Χωρίς φυσικές απομιμήσεις
Με Χρήση Infographics και συμβόλων
Χωρίς φυσικές απομιμήσεις
Zoom out view!
Στον ψηφιακό κόσμο, μπορεί να σας προσφέρει μία τελείως άλλη οπτική!
Όσο η οπτική μας αντίληψη βελτιώνεται τόσο περισσότερο απλοποιούνται τα σύμβολα που χρησιμοποιούμε
Ενιαία στοιχεία μεταξύ OS και Εφαρμογής
Το charm και οι εντολές του:
Share
Search
Settings
Devices
Και εντολές εκτός charm, διαθέσιμες σε κάθε εφαρμογή όπως το File picker
Windows Phone 8: Μερικά tips
12:38
Text
Text
Text
Text
CONTOSO COOKBOOK
regions
12:38
Text
CONTOSO COOKBOOK
indian rec
CONTOSO COOKBOOK
recipes ind
pivot
Text
Text
Text
Text
12:38
Contoso Cookbook Shows recipes grouped by regional style. User can view recipes, also add pictures and notes
12:38 CONTOSO COOKBOOK
regions
12:38
Regional recipes
12:38
Recipe Detail
12:38
About
12:38
Notes & Photos Back Back Back
Back
6
3
Πολύ μικρό
μέγεθος font
Το λευκό
κείμενο
δεν
διαβάζεται
στο λευκό
Theme
Ανακεφαλαίωση
Απλοποίηση
• Τι κάνω
• Πως το παρουσιάζω (χωρίς περιττά : chrome)
Σχεδιαστική Ικανότητα
• Καμβάς & Τυπογραφία
Ταχύτητα και Ροή
• Πλοήγηση και κίνηση
• Εργονομία στο touch
Ψηφιακή αισθητική
• Χωρίς φυσικές απομιμήσεις
• Με Χρήση Infographics και συμβόλων
Ενιαία στοιχεία μεταξύ OS και Εφαρμογής
• Κοινό UI
• Χρήση Contracts: Share, Search, Settings, File picker
Χρήσιμες Πηγές
Ten principles of good design: http://www.vitsoe.com/en/gb/about/dieterrams/gooddesign
Book: Foundation of Swiss Design: Swiss Graphic Design, by Richard Hollis, ISBN: 0-300-10676-9 http://viget.com/inspire/5-things-to-consider-whilst-sketchinghttp://channel9.msdn.com/Events/BUILD/BUILD2011/APP-395Thttp://www.syncfusion.com/downloads/metrostudio
http://design.windows.comhttp://www.windows8designhandbook.com/
http://msdn.microsoft.com/library/windows/apps/
http://www.microsoft.com/student/en-us/app-development/windows-8.aspx#fbid=7NeT2RfhfCs
http://channel9.msdn.com/Events/Windows-Camp/Windows-8-UX-Fundamentals-Training-Workshop-2012Navigation design for Windows Store appsNavigation modelJavaScript project templates for Windows Store appsQuickstart: Using single-page navigation Guidelines for sharing content (Windows Store apps)Guidelines for creating custom data formats (Windows Store apps)Sharing content Receiving shared content Sharing content source app sample Sharing content target app samplehttp://msdn.microsoft.com/en-us/windows/apps/br229516http://msdn.microsoft.com/en-us/library/windows/apps/hh770552.aspxhttp://msdn.microsoft.com/library/windows/apps/hh779072http://channel9.msdn.com/Events/Windows-Camp/Windows-8-UX-Fundamentals-Training-Workshop-2012
http://channel9.msdn.com/blogs/yochay/windows-phone-7-designhttp://dev.windowsphone.com/en-us/design/libraryhttp://channel9.msdn.com/Events/BUILD/BUILD2011/APP-832Thttp://research.microsoft.com/apps/video/default.aspx?id=157227http://msdn.microsoft.com/en-us/library/windowsphone/design/hh202915%28v=vs.105%29.aspxhttp://msdn.microsoft.com/en-us/library/hh202915.aspx