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’)

http://www.google.gr/url?sa=i&rct=j&q=&esrc=s&frm=1&source=images&cd=&cad=rja&docid=mV47NgyYlX46jM&tbnid=3Q1wEOX6hRTM8M:&ved=0CAUQjRw&url=http://www.ghostvolta.com/2013/01/19/facebook-app-concept-for-windows-8/&ei=p-gQUeiRIIjChAej9IG4DA&bvm=bv.41867550,d.ZG4&psig=AFQjCNHSlBMFAoSabpGJ__6PHZLr4aKGkg&ust=1360148981190400

Σχεδιαστική Ικανότητα Καμβάς και Γραμματοσειρές

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