Top Hotel Praha 7. – 8. 3. 2012 Twitter hashtag: #cztechdays.

Prezentace na téma: "Top Hotel Praha 7. – 8. 3. 2012 Twitter hashtag: #cztechdays."— Transkript prezentace:

1 Top Hotel Praha 7. – 8. 3. 2012 Twitter hashtag: #cztechdays

2 OREA Hotel Voroněž I Brno 5. – 6. 3. 2012 Twitter hashtag: #cztechdays

3 Štěpán Bechynský Developer Evangelist Microsoft Design Metro Style aplikací Twitter hashtag: #cztechdays

4 1. Metro style design 2. Rychlé a plynulé 3. Přizpůsobují se 4. Kontrakty 5. Dlaždice 6. Připojené 7. Cloud 8. Osvojení Metro principů 8 rysů Metro Style aplikací

5 Rozvržení

6 Co nejvíce prostoru pro obsah Neorganizujte obsah pomocí čar a rámů Záměrně vytvořená prázdná místa rámují obsah a pomáhají lepší orientaci Rozvržení

7

8 Používejte typografii pro vytvoření struktury a hierarchie obsahu Jednotná sada velikostí, řezů a barev Používejte výchozí šablony

9 Typografie 42pt 20pt 11pt 9pt

10

11 Rozvržení Využívejte Metro style siluetu Zarovnávejte do mřížky pro vytvoření konzistentního a strukturovaného rozvržení Vycházejte z šablon ve Visual Studio pro základní rozvržení

12

13

14

15

16

17 Interakce

18 Aplikační lištu (App bar) s příkazy zobrazíte přejetím dolního nebo horního okraje obrazovky Používejte ovládací tlačítka (Charms) pro vstup do hledání, sdílení, nastavení a zařízení Nezapomeňte na okraje

19

20 Aplikační lišta Dolní aplikační lišta je pro příkazy  Globální příkazy vpravo, kontextové vlevo  Může být vyvolána aplikací  Nejčastěji používaný příkaz může být umístěn na plochu  Menu Flyout může zobrazovat skupinu příkazů Horní aplikační lišta je pro navigaci

21 Title

22 Flyout Flyout se používá pro jednoduché kontextové příkazy a nastavení Zadávání informacíPotvrzování a varování

23 Chyby zobrazujte tam, kde vznikly Chyby

24 Navrhujte pro dotyk

25 Ovládací prvky musejí mít odpovídající velikost Navrhujte v prvé řadě pro prsty

26 Základní interakce Stisknout a držet – kontext Kliknout – výchozí akcePosunout – přetaženíPřejet - výběr Sbalit – změna velikosti Přejet z okraje – systémová a aplikační nabídka Rotace – otočení

27 Přichytávání a rozvržení

28 Aplikace může být různě veliká Přichycená: 320x768 (minumální rozlišení pro přichytávání je 1366 x 768) Celá obrazovkz na šířku: minimum 1024 x 768 Selá obrazovkz na Výšku: minimum 768 x 1024 Ověřte aplikaci na rozlišeních 1024 x 768 a 1366 x 768 Navrhujte pro více typů obrazovek Širokoúhlá (1366x768+)Přichycení (vyžadováno)Minimum (1024x768) Na výšku

29 Přichytávání (Snap)

30 Dlaždice a notifikace

31

32 Notifikace

33 Vestavěné ovládací prvky

34 Vestavěné ovládací prvky odpovídají zásadám Metro style UI Vytvořeny pro dotyk, myš a klávesnici Nativní pro XAML i HTML Vestavěné ovládací prvky

35 Přepínač (XAML) Upozornění: WinRT vyžaduje v názvech proměnných znaky s diakritikou!

36 Přepínač (HTML) HTML: <div data-win-control="WinJS.UI.Toggle" data-win-options="{title: 'Wi-fi networking'}" id="myToggle"

37 Základní ovládací prvky

38 Základní ovládací prvky se stylem

39 Základní ovládací prvky

40 Editace textu

41 Editace textu – chování

42 Editace textu – dotyková klávesnice

43 Editování textu

44 Prezentování informací

45 Doporučené ovládací prvky List ViewGrid ViewFlip View

46 Sémantický zoom

47 Sémantický zoom v seznamu aplikací

48 Zobrazení dat v ListView ListView = dataSource+ itemRenderer+ layout Data

49 ListView datová šablona (XAML) <GridView x:Name="ListView1" Width="Auto" Height="Auto” ItemTemplate="{StaticResource MyTemplate}" />

50 ListView datová šablona (HTML) <div height="400" data-win-control="WinJS.UI.ListView" id="listview1" data-win-options="{dataSource: myData, itemRenderer: myTemplate}">

51 ListView a GridView

52