Marcin Śpiewak, Projektowanie aplikacji Windows 8 ui
-
Upload
ixdapoznan -
Category
Documents
-
view
632 -
download
2
Transcript of Marcin Śpiewak, Projektowanie aplikacji Windows 8 ui
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 [email protected]
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’ Ś[email protected]ękuję za uwagę
design.windows.comMateriały i informacje
Na podstawie aplikacji Strefa VODrealizowanej przez Insys