Windows 8 UI. Grzegorz Róg eduweb.pl

Transkrypt

1 Windows 8 UI Grzegorz Róg eduweb.pl

2 demo Windows 8 Windows Phone

3 platformy i technologie

4 Jak działa Windows 8? I czy naprawdę muszę to wiedzieć?

5 Ekosystem Windows Szybkość i płynność działania Full Screen i 100% szerokości i wysokości dla aplikacji Interfejs przystosowany pod ekrany dotykowe Aplikacje pracujące razem i wymieniające dane Dostępność na wszystkich urządzeniach Tabletach PC-tach i laptopach Smartfonach

6 Kluczowe obszary systemu Nowe środowisko uruchomieniowe (WinRT) Interfejs Modern UI Nowe środowisko działania aplikacji Obsługa nowych urządzeń Sklep Windows

7 Platforma Windows 8

8 API Aplikacji Windows 8

9 Jak to działa?

10 HTML5

11 CSS3

12 Livecycle aplikacji App gets 5s to handle suspend App is not notified before termination Uruchomienie przez użytkownika Apps are notified when they have been resumed Splash screen

13 aplikacje natywne a webowe + szybkość + dostęp do funkcji natywnych + spójny wygląd - wiele platform - aktualizacje + multiplatformowość + łatwe aktualizacje + wspólne standardy - brak dostępu do funkcji natywnych

14 hardware przyciski accelerometr i żyroskop. mikrofon, aparat / kamera, głośniki. bluetooth. WiFi. 3G

15 Akcelerometr, żyroskop

16 Czujnik światła

17 czym jest Windows 8 UI?

18 nie ma złych projektów, są kiepskie interfejsy.

19 Wprowadzenie do Windows 8 UI Jak Microsoft zmienił się o 180 stopni Jak Modern UI wpływa na twórców aplikacji? Zasada Win as One Dlaczego to ma sens?

20 Wprowadzenie UI kontra UX, Czym jest zatem Windows 8 UI? a design language is an overarching scheme or style that guides the creation of a common set of experiences and user interfaces

21

22

23

24 WYTYCZNE =/= WYMOGI

25

26

27

28

29

30

31 Inspiracje Windows 8 UI Szkoła Bauhaus Swiss Style Cinematographics

32 Bauhaus

33

34

35 Intuicja i schematy

36 Cinematographics Catch Me if You Can Opening Title Sequence Quantum of Solace: Opening

37 Koncepcja W8 UI

38

39

40 brak daty przydatności. ponadczasowość, nowoczesność.

41 uniwersalność informacja porządek typografia globalizacja

42 treść ruch nowoczesność przestrzeń cyfrowość

43 kafelki i notyfikacje - Zwykłe kafelki (Tlies) - Live Tiles - Powiadomienia Toast - WPS

44

45 Kafelki Pierwsze, które widzi użytkownik Dwa rozmiary 1/1 i 2/1 W manifeście aplikacji Używane gdy nie ma Live Tile Identyfikacja aplikacji

46 Live Tile Nawet jeśli aplikacja nie działa JPG lub PNG max 150KB Text, obrazek lub łącznie Aktualizowane przez notyfikacje Local content działająca aplikacja Local content zaplanowane Push / pull z serwera Szablony

47 Badg e Symbole na kafelkach Liczby 1-99 Symbole i znaki

48 Kolejkowanie powiadomień Domyślnie pokazuje się tylko ostatnia notyfikacja Możliwe jest wyświetlanie 5 ostatnich powiadomień

49 Notyfikacje Toast Poza kontekstem aplikacji Przyciągnij uwagę użytkownika Użytkownik może wyłączyć Szybki sposób na nawigację Szablony jak w Live Tile

50 Windows Notfication Service Dostarczają toasty i Live Tile z chmury Wyświetlają powiadomienia nawet, jeśli aplikacja nie działa WNS odpowiada za komunikację z aplikacją Dostępne tylko online Darmowa usługa dla Twoich aplikacji

51 Jak to działa? Zdobycie Channel URI Rejestracja Azure Autentykacja i powiadomienie

52 Jak to działa?

53 Lock Screen Aplikacje działające w tle mogą odpowiadać za komunikację (mail, voip). Mogą być odświeżane co 15 min. Użytkownik może je wyłączyć dla konkretnych aplikacji.

54 Powiadomienia Toast, Live Tile: 2 sek CPU, co 2 godziny Notyfikacje Lock Screen 1 sek CPU, co 15 min

55 tematy (themes) i kafelki w WP

56 App Bar i Charms y

57 Nawigacja zgodnie z Win as One App Bar jest uruchamiany przez przeciągniącie od góry, od dołu lub wciśnięcie spacji W App Barze znadjują się polecenia i funkcje kontekstowe aplikacji Charms y uruchamiamy przeciągając z prawej strony W Charms ach znajdują się zunifikowane funkcje: Wyszukiwanie Search Ustawienia Settings Urządzenia - Device

58

59

60

61

62 Działanie App Bar App Bar, który znajduje się na dole służy jako menu kontekstowe App Bar na górze służy do nawigacji

63 Widoki Snap i Fill

64 Widoki aplikacji

65 Widok Snap i Fill

66 { /* Re-arrange and hide/show content */

67 <Grid x:name="layoutroot"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:name="orientationstates"> <VisualState x:name="fullscreen" /> <VisualState x:name="filled" /> <VisualState x:name="snapped" /> <VisualState x:name="portrait" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid>

68 Kontrakty

69 Pod maską procesów

70 Account

71 Działanie Kontraktów Charms jako spójny mianownik Zasada Win as One Wymiana danych przez aplikacje z Share Uruchomienie aplikacji Splash Screen (do 15s., kolor + png) Search kontra Find Search przeszukuje całą aplikację Find zazwyczaj przeszukuje konkretny widok

72

73 Share kontrakt

74 Share kontrakt

75 Share kontrakt

76 Ustawienia - Settings Wszystkie ustawienia aplikacji w jednym miejscu Intuicyjne dla użytkownika Nie twórz dodatkowych ustawień w obrębie aplikacji Przykładowe: Pomoc, O Aplikacji, Regulamin Po wybraniu ustawień z Charm a Twoja aplikacja kontroluje UI Zachowaj prostą strukturę i grafikę

77 Pakiety danych w Share

78 Wykorzystaj File Picker Dodatek który pozwala dostać się do contentu aplikacji skądkolwiek System obsługuje całe UI pickera Nawigacja Koszyk selekcji Masz jednak wpływ na prezentację wyników Wybierz File Picker Item Template Wsparcie dla ListView, Selection, Viewstate

79

80 Dotyk

81 Dotyk TOUCH FIRST MOBILE FIRST

82 Projektując pod dotyk obsługę myszy dostajesz gratis

83 Dotyk 9x9 9px 7px 5x5 9px 7px 5x5 9mm9mm 5mm5mm

84 Mapa wizualna Umieść nawigację we właściwym miejscu!

85 Projektowanie dla dotyku Niezwykle ważny jest brak opóźnień Operacje powinny być odwracalne, dla bezpieczeństwa TAP to nie jedyny event! Pamiętaj o Slide etc. Przesuwać można tylko w jednym kierunku

86 Sklep Windows

87 Sklep Windows

88 Sklep Windows

89 Wersja Trial

90

91

92

93 wiele ekranów - statystyki ranking.pl - rozdzielczości

94 dpi, ppi i inne trudne skróty

95 Pixel Density i rozdzielczość

96 Skalowanie i pixel density Fonty, obrazki i inne elementy interfejsu lepiej prezentują się na wyższej rozdzielczości. Windows automatycznie skaluje zawartość w zależności od rozdzielczości oraz wartości DPI

97

98 Skalowanie Fontów

99 Skalowanie siatki

100 Skalowanie? A po co to komu?

101 Zarządzalny whitespace

102 Większy content

103 Więcej contentu

104

105 Przykładowe rozmiary ekranów i aplikacja

106 Rozmiary w Windows 8 Aplikacje powinny być maksymalnie skalowalne Minimalna rozdzielczość to 1024x768px Rozpoczynamy projektowanie od 1366x768px Aplikacja zajmuje 100% ekranu Używaj VS Simulator aby sprawdzić jak aplikacja prezentuje się na wielu rozdzielczościach

107 Schematy layoutu aplikacji

108 Skalowalny layout z HTML5 i CSS3

109 Skalowalny layout z XAML

110

111 Grid w Windows 8

112 Założenia Wykorzystanie Grida umożliwia skalowalność Layout jest bardziej poukładany i solidny Wykorzystaj szablony.psd od Microsoft

113 Grid w Windows 8

114

115

116

117

118

119 Grid w Windows Phone

120 Kolory

121

122 Kolory Nasycenie - saturation Kolory jednolite - solid Presety i profile na kuler.adobe.com

123 Typografia i ikonografia

124 Typografia

125 Segoe UI

126 Segoe UI

127

128 42pt 20pt 11pt 11pt 9pt 11pt

129 Ikonografia

130

131 Ruch i animacja

132 Animacja np. WinJS.UI.Animation.enterPage(element, offset).done();

133 przejście Przemieszczanie się pomiędzy aplikacjami

134 kontynuacja Lekki ruch w obrębie konkretnej aplikacji

135 interfejs Przekazywanie informacji bez dekoncentrowania

136 przesuwanie Sygnalizacja początku i końca listy - aplikacji

137 własna Tworząc nowy rodzaj animacji pamiętaj o tym, że content jest zawsze ważniejszy od tego, w jaki sposób został on wyświetlony z pomocą animacji.

138 Content is the King

139 ikonografika vs infografika

140

141 Whitespace Jeśli element interfejsu nie pomaga spełniać zadania aplikacji przeszkadza jej

142

143

144

145 Semantyka treści Treść ma strukturę, ważność, hierarchię. Zdecyduj za użytkownika

146

147

148 Establish common anchors Identify commonalities between different pages, and present those elements in a consistent manner. Use a stable rail When 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 point Select a hero for your content, and add visual volume to it to make it the first thing that catches people's eyes.

149 Nawigacja

150 Nawigacja

151

152

153 Nawigacja w Modern UI

154 Hierarchiczna nawigacja

155 Schemat nawigacji Hierarchicznej

156

157 Semantic Zoom

158

159 Semantic Zoom

160 Contoso Travel Featured destinations Last minute deals My Trips

161 Contoso Travel Barcelona, Spain 7 night Alaska Cruise

162 Contoso Travel Featured destinations Last minute deals My Trips Ocean View Cabins Suites Upgrade from an inside cabin and save $43/night/person! Picture windows with ocean and port views From $2,099 only $150/night/person based on double occupancy Upgrade from an inside cabin and save $43/night/person! Picture windows with ocean and port view From $2,099 only $150/night/person do

163 Schemat nawigacji płaskiej

164 Przykład nawigacji płaskiej