Tijekom prošle godine u svijetu je prodano više od 170 milijuna pametnih telefona, a predviđa se da će do 2015. godine, svaki 8 stanovnik zemlje imati pametni telefon, a neki i tablet. Metro sučelje koje je Microsoft razvio za Windows Phone i Windows 8, drukčije je od ostalih sučelja na tržištu, zahtjeva posebnu pažnju i, unatoč naizglednoj banalnosti, krije brojne pametne trikove i dizajnerske prilike. Dođite čuti o glavnim smjernicama dizajna za Metro sučelje, na što paziti i kako iskoristiti neke revolucionarne mogućnosti kao što je Panorama. ----- [ENGLISH] This is a presentation for my talk on Microsoft Windays Conference 2012, held in Rovinj, Croatia. Talk was about Metro UI - explained in details. It is meant for developers to teach them what should they care when designing for the Metro design language.

1. Rovinj, 23. – 26. travnja 2012.

2. Metro UI - tajne velikih slova i
jednobojnih ikona
Emanuel Blagonić
@emanuelblagonic
Blagonić Brothers - Extendis d.o.o.

3. Sponzori

4. Isključite zvuk
telefona

5. O čemu će biti riječi u prezentaciji?
• Korisničko sučelje
• Metro UI
– Metro principi
– Metro dizajnerski jezik
• 9 savjeta
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

6. UI

7. Što je to korisničko sučelje?

8. I'm interested in making tangible
improvements and making better those
things that people do fifty to a hundred
times a day. I'm less interested in "vow"
features that you use every 90 days and you
never remember after that.
Marko Ahtisaari, Global Head of Nokia Design
http://vimeo.com/28758945
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

9. Zašto je važno?
• Vašu će aplikaciju koristiti tisuće ljudi
• Stvarate navike kod korisnika
• Definirate načine korištenja vaše aplikacije
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

10. Korisničko sučelje
nekad i danas

11. flickr.com
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

12. • Stolna računala
• Namijenjena profesionalcima
• Miš i tipkovnica
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

13. digitaltrends.com
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

14. • Uređaji osjetljivi na dodir
• Dostupni svima
• Koristimo ih intuitivno
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

15. msdn.com
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

16. WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

17. Principi

18. Čisto i pregledno
Clean, light, fast

19. • Izbacite nepotrebne elemente
• Koristite jednostavnu tipografiju i boje
• Iskoristite whitespace
• Fokusirajte se na glavne zadatke
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

20. WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

21. Fokus na sadržaju
Content, not chrome

22. WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

23. • Sadržaj u prvom planu
– Izbacite grafičke elemente koji nisu bitni
za sadržaj
• Ne zaboravite: od previše sadržaja,
gubi se fokus korisnika
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

24. Steam Store, Windows 8 koncept Chrisa Prestona

25. Tipografija
Typography

26. TIPOGRAFIJA
JE LIJEPA.
I TOČKA.
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

27. • Jedan od najvažnijih segmenata Metroa
• Tipografija naglašava sadržaj, ali je i lijepa
• Pripazite na veličine naslova i teksta
• Koristite Segoe UI
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

28. WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

29. Pokret i dodir
Alive in motion

31. • Tranzicije i animacije
– Tranzicije i animacije su jednako važne
kao i UI aplikacije
• Telefon i tablet ne predstavljaju samo jedan
ekran, oni su “svemir u malom”
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

32. Tranzicije
• Koristimo ih za prikazivanje promjena
između aplikacija i različitih ekrana
• Tranzicije trebaju biti dorađene
– Dakle, bez “trzanja”
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

33. Animacije
• Koristimo ih za prikaz promjene na
trenutnom ekranu
• Animaciju može ali i ne mora
pokrenuti korisnik
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

34. Korisnik se mora osjećati posebno u svakom
trenutku. Interakcija između telefona ili
tableta i korisnikovih želja mora biti brza i
fluidna, kako bi se korisnik osjećao ugodno u
korištenju uređaja, ali i aplikacije.
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

35. Digitalna autentičnost
Authentically Digital

36. WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

37. • Metro je “digitalno” sučelje
– Ne želimo stvarati iluziju “realnog” svijeta
unutar aplikacije
• Pridržavajte se svih smjernica kod dizajna
za Metro, i neće biti problema
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

38. Dizajnerski jezik

45. Struktura Metro aplikacije

46. ux.artu.tv
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

47. Pozadina (1000px do 1500px)
Naslov aplikacije
Naslov grupe
Elementi u grupi

48. • Koristite je na početnom ekranu aplikacije
• Služi za razdvajanje “jednako važnog”
sadržaja
• Uvijek je vidljiv dio sljedećeg dijela ekrana
• Ne pretjerujte s Panoramom
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

49. Statična pozadina
Tabovi
Informacije

50. • Slično panorami, ali razdvojeni ekrani
– Bez dinamične pozadine
– Za prikaz veće količine podataka
• Koristite ih za prikaz sadržaja kojeg biste
inače prikazali korištenjem tabova
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

52. • Funkcionalnost “obične statične stranice”
• Premalo korištena funkcionalnost, ali
odlično rješenje za prikaz velike količine
jedinstvenih podataka
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER

53. 9 savjeta

54. Poštujte principe

55. Pametno koristite ekrane

56. Razmišljajte o korisnicima

57. Kada niste sigurni, budite
umjereni i jednostavni

58. Nemojte se bojati
istraživati

59. Stalno testirajte

60. Ne pretjerujte s
Panoramom ;)

61. Tipografija je lijepa.
Whitespace je ljepši.

62. Ne budite “naporni” s
notifikacijama

63. Pitanja

65. Hvala!

66. © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be
interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.