Projektowanie aplikacji Windows 8 Modern UI

Podstawowa zmianaModern UI powstało z myślą o ekranach dotykowychTe aplikacje nie mają zastąpić dotychczasowych aplikacji desktopowych

Aplikacje (nie) na urządzenia mobilneNajlepsza interakcja Najlepsza widoczność

Najlepiej rozpocząć projektowanie od 1366x768Minimalna rozdzielczość 1024x768

Dlaczego powstał Modern UIMoja prywatna teoria:

Aby ułatwić developerom szybkie tworzenie aplikacji

Skoncentrowanie na treści nie grafice Gotowe szablony i schematy nawigacyjne Uproszczenie, dzięki zasadzie „Less is more”

Layout

42pt20pt

11pt

9pt42pt = 80px 20pt = 40px

42pt

20pt

11pt

11pt

11pt

9pt

Silhouette

Metro style designIn the absence of chrome when people are focusing on the content, the formation of the content is what lets people recognize something as Metro style before their eyes even process it. Creating a silhouette is about leveraging negative space and content placement to establish a recognizable form.

Page titleBaseline at 100px

Content areaTop aligned at 140px

Content areaLeft margin 120px

Establish common anchorsIdentify commonalities between different pages, and present those elements in a consistent manner.

Use a stable railWhen content goes off screen, let it move from edge to edge along a single axis. Let off screen objects peek in and use negative space to create a visual rail.

Create a focal pointSelect a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.

Architektura informacji

Struktura treści

Hierarchiczna Płaska

1. Content area2. Sections3. Header4. Back button5. Header menu6. Semantic zoom

Elementy struktury hierarchicznej

Hub

Contoso Travel Featured destinations Last minute deals

Spok

esDe

tails

7 night Alaska Cruise

Last Minute Deals

Featured destinations Barcelona, Spain

Last Minute Deals 7 Night Alaska Cruise

Ocean View CabinsUpgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy

SuitesUpgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do

My Trips Weather

7 daysChicago (3/11 – 3/19)Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Attractions

My Trips

Featured Destinations Top Destinations for 2012

Barcelona, Spain

My Trips City Guide

Contoso Travel Featured destinations Last minute deals My Trips

Panorama

Contoso Travel Featured destinations Last minute deals My Trips Featured destinations Last minute deals My Trips

Semantic zoom

Hub

Contoso Travel Featured destinations Last minute deals My Trips

Spok

esDe

tails

7 night Alaska Cruise

Last Minute Deals

Featured destinations Barcelona, Spain

Last Minute Deals 7 Night Alaska Cruise

Ocean View CabinsUpgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double occupancy

SuitesUpgrade from an inside cabin and save $43/night/person!Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do

My Trips Weather

7 daysChicago (3/11 – 3/19)Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Attractions

My Trips

Featured Destinations Top Destinations for 2012

Barcelona, Spain

FeaturedLast minute deals My Trips

Contoso Travel

Inne sposoby nawigacji

Elementy struktury płaskiej1. Content area2. Navigation bar3. Sections4. Add button5. Delete button

Interakcja

Design for touch first

Press and hold to learn

Tap for primary action Slide to pan Swipe to select

Turn to rotateSwipe from edge for app commandsPinch to zoom

Swipe from edge for system commands

Obsługa gestów

3 zasady interakcji z aplikacją Połączenie nawigacji z treścią Wykorzystanie krawędzi Interakcja musi uwzględniać kontekst

Product name

Product name

Product name

Product name

Product name

Product name

Product name

Product name

Product name

Product name

Akcje na grupach obiektów

Obsługa błędów

Wyświetlanie

Responsive Design

10” 1024x76813” 1400x105020” 1920x108030” 2560x160011.6” 1366x768

Warto wiedzieć…

Widescreen (1366x768+) Snap view (320x768)Minimum (1024x768)

Portrait

Widoki w jakich może być wyświetlana aplikacja

1. Kolor2. Grafika3. Ilustracje4. Grid5. Layout6. Logo7. Typografia

Branding

AnimacjeApp navigationEnter Page / Exit Page

Animate ContentEnter Content / Exit ContentExpand / CollapseRepositionCrossfadeFade In / Fade OutPeekUpdate BadgeReveal / Hide

SelectionPointer animationsSwipe Select / Swipe DeselectSwipe Reveal

Show or hide supplemental UIShow Edge UI / Hide Edge UI Show Panel / Hide PanelShow Pop Up / Hide Pop Up

Collections and listsAdd / Delete from listDrag and drop animations

11.6” 1366x768

Gęstość ekranu

11.6” 1920x1080

Wzrost rozdzielczości powoduje pomniejszenie interfejsuLayout jest skalowany automatycznie

Gęstość ekranu

100%

11.6” 1366x768135 dpi

140%

11.6” 1920x1080190 dpi

180%

11.6” 2560x1440253 dpi

1x 1.4x 1.8x20px 28px 36px5px 7px 9px

Zaleca się stosowanie gridu 20px/5px

Zaprojektuj kafelek

Powiadomienia systemowe

Podsumowanie

Nie każda treść pasuje

Treść bez grafiki (ilustracji) Długie teksty z linkami śródtekstowymi (hypertext) Menu tekstowe (linki) w otoczeniu tekstu Zbiory z dużą liczbą katalogów i zagłębieniem Zbiory wymagające wyszukiwania fasetowego Typowe kreacje reklamowe

Ekosystem jeden z wielu, ale…Konieczność projektowania od zera dla Modern UI

Trudności z brandingiem Dopasowanie architektury informacji Dopasowanie istniejących treści Typografia ma ogromne znaczenie Integracja z usługami w przeglądarce (zgodność z IE10) Zapewnienie dostępności zależnie od urządzenia

Ten sam interfejs dla dotyku i myszki

Etiam a velit at enim pretium fermentum lorem@ipsum.com

Mauris sed augue• Lorem ipsum dolor sit amet, consectetur

adipiscing elitarium.

• In vestibulum dui eu augue. • Cras vehicula nisl sed pede malesuada

imperdiet. • Sed elementum orci in sem consequat semper. • Ut blandit augue porttitor risus. • Curabitur sodales pretium tellus.

Marcin ‘kupmikawe’ Śpiewakmarcin.spiewak@uxweb.plDziękuję za uwagę

design.windows.comMateriały i informacje

Na podstawie aplikacji Strefa VODrealizowanej przez Insys