![Page 1: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/1.jpg)
Rovinj, 23. – 26. travnja 2012.
![Page 2: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/2.jpg)
Metro UI - tajne velikih slova i jednobojnih ikona
Emanuel Blagonić@emanuelblagonicBlagonić Brothers - Extendis d.o.o.
![Page 3: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/3.jpg)
Sponzori
![Page 4: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/4.jpg)
Isključite zvuk telefona
![Page 5: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/5.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• Korisničko sučelje
• Metro UI
–Metro principi
–Metro dizajnerski jezik
• 9 savjeta
O čemu će biti riječi u prezentaciji?
![Page 6: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/6.jpg)
UI
![Page 7: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/7.jpg)
Što je to korisničko sučelje?
![Page 8: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/8.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
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
![Page 9: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/9.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• Vašu će aplikaciju koristiti tisuće ljudi
• Stvarate navike kod korisnika
• Definirate načine korištenja vaše aplikacije
Zašto je važno?
![Page 10: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/10.jpg)
Korisničko sučeljenekad i danas
![Page 11: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/11.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
flickr.com
![Page 12: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/12.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• Stolna računala
• Namijenjena profesionalcima
• Miš i tipkovnica
![Page 13: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/13.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER digitaltrends.com
![Page 14: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/14.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• Uređaji osjetljivi na dodir
• Dostupni svima
• Koristimo ih intuitivno
![Page 15: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/15.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER msdn.com
![Page 16: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/16.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
![Page 17: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/17.jpg)
Principi
![Page 18: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/18.jpg)
Čisto i preglednoClean, light, fast
![Page 19: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/19.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• Izbacite nepotrebne elemente
• Koristite jednostavnu tipografiju i boje
• Iskoristite whitespace
• Fokusirajte se na glavne zadatke
![Page 20: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/20.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
![Page 21: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/21.jpg)
Fokus na sadržajuContent, not chrome
![Page 22: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/22.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
![Page 23: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/23.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• 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
![Page 24: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/24.jpg)
Steam Store, Windows 8 koncept Chrisa Prestona
![Page 25: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/25.jpg)
TipografijaTypography
![Page 26: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/26.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
TIPOGRAFIJA JE LIJEPA. I TOČKA.
![Page 27: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/27.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• 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
![Page 28: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/28.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
![Page 29: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/29.jpg)
Pokret i dodirAlive in motion
![Page 30: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/30.jpg)
![Page 31: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/31.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• 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”
![Page 32: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/32.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• Koristimo ih za prikazivanje promjena između aplikacija i različitih ekrana
• Tranzicije trebaju biti dorađene
–Dakle, bez “trzanja”
Tranzicije
![Page 33: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/33.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• Koristimo ih za prikaz promjene na trenutnom ekranu
• Animaciju može ali i ne mora pokrenuti korisnik
Animacije
![Page 34: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/34.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
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.
![Page 35: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/35.jpg)
Digitalna autentičnostAuthentically Digital
![Page 36: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/36.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
![Page 37: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/37.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• 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
![Page 38: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/38.jpg)
Dizajnerski jezik
![Page 39: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/39.jpg)
![Page 40: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/40.jpg)
![Page 41: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/41.jpg)
![Page 42: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/42.jpg)
![Page 43: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/43.jpg)
![Page 44: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/44.jpg)
![Page 45: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/45.jpg)
Struktura Metro aplikacije
![Page 46: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/46.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER ux.artu.tv
![Page 47: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/47.jpg)
Pozadina (1000px do 1500px)
Naslov aplikacijeNaslov grupeElementi u grupi
![Page 48: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/48.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• 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
![Page 49: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/49.jpg)
Statična pozadina
TaboviInformacije
![Page 50: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/50.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• 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
![Page 51: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/51.jpg)
![Page 52: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/52.jpg)
WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER
• Funkcionalnost “obične statične stranice”
• Premalo korištena funkcionalnost, ali odlično rješenje za prikaz velike količine jedinstvenih podataka
![Page 53: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/53.jpg)
9 savjeta
![Page 54: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/54.jpg)
Poštujte principe
![Page 55: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/55.jpg)
Pametno koristite ekrane
![Page 56: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/56.jpg)
Razmišljajte o korisnicima
![Page 57: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/57.jpg)
Kada niste sigurni, budite umjereni i jednostavni
![Page 58: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/58.jpg)
Nemojte se bojati istraživati
![Page 59: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/59.jpg)
Stalno testirajte
![Page 60: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/60.jpg)
Ne pretjerujte s Panoramom ;)
![Page 61: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/61.jpg)
Tipografija je lijepa. Whitespace je ljepši.
![Page 62: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/62.jpg)
Ne budite “naporni” s notifikacijama
![Page 63: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/63.jpg)
Pitanja
![Page 64: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/64.jpg)
![Page 65: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/65.jpg)
Hvala!
![Page 66: Metro UI - Tajne velikih slova i jednobojnih ikona](https://reader033.vdocuments.pub/reader033/viewer/2022051112/5594690d1a28ab1c118b4611/html5/thumbnails/66.jpg)
© 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.