metro ui - tajne velikih slova i jednobojnih ikona

Rovinj, 23. – 26. travnja 2012.

Metro UI - tajne velikih slova i jednobojnih ikona

Emanuel Blagonić@emanuelblagonicBlagonić Brothers - Extendis d.o.o.

Sponzori

Isključite zvuk telefona

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?

Što je to korisničko sučelje?


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


• 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?

Korisničko sučeljenekad i danas


flickr.com


• Stolna računala

• Namijenjena profesionalcima

• Miš i tipkovnica

WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER digitaltrends.com


• Uređaji osjetljivi na dodir

• Dostupni svima

• Koristimo ih intuitivno

WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER msdn.com

Principi

Čisto i preglednoClean, light, fast


• Izbacite nepotrebne elemente

• Koristite jednostavnu tipografiju i boje

• Iskoristite whitespace

• Fokusirajte se na glavne zadatke

Fokus na sadržajuContent, not chrome


• 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

Steam Store, Windows 8 koncept Chrisa Prestona

TipografijaTypography


TIPOGRAFIJA JE LIJEPA. I TOČKA.


• 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

Pokret i dodirAlive in motion


• 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”


• Koristimo ih za prikazivanje promjena između aplikacija i različitih ekrana

• Tranzicije trebaju biti dorađene

–Dakle, bez “trzanja”

Tranzicije


• Koristimo ih za prikaz promjene na trenutnom ekranu

• Animaciju može ali i ne mora pokrenuti korisnik

Animacije


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.

Digitalna autentičnostAuthentically Digital


• 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

Dizajnerski jezik

Struktura Metro aplikacije

WINDAYS12 TECHNOLOGY OBRAZOVNI PARTNER ux.artu.tv

Pozadina (1000px do 1500px)

Naslov aplikacijeNaslov grupeElementi u grupi


• 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

Statična pozadina

TaboviInformacije


• 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


• Funkcionalnost “obične statične stranice”

• Premalo korištena funkcionalnost, ali odlično rješenje za prikaz velike količine jedinstvenih podataka

9 savjeta

Poštujte principe

Pametno koristite ekrane

Razmišljajte o korisnicima

Kada niste sigurni, budite umjereni i jednostavni

Nemojte se bojati istraživati

Stalno testirajte

Ne pretjerujte s Panoramom ;)

Tipografija je lijepa. Whitespace je ljepši.

Ne budite “naporni” s notifikacijama

Pitanja

Hvala!

© 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.