Top Hotel Praha 7. – Twitter hashtag: #cztechdays

OREA Hotel Voroněž I Brno 5. – Twitter hashtag: #cztechdays

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

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í

Rozvržení

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í

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

Typografie 42pt 20pt 11pt 9pt

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í

Interakce

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

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

Title

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

Chyby zobrazujte tam, kde vznikly Chyby

Navrhujte pro dotyk

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

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í

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

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

Přichytávání (Snap)

Dlaždice a notifikace

Notifikace

Vestavěné ovládací prvky

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

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

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

Základní ovládací prvky

Základní ovládací prvky se stylem

Základní ovládací prvky

Editace textu

Editace textu – chování

Editace textu – dotyková klávesnice

Editování textu

Prezentování informací

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

Sémantický zoom

Sémantický zoom v seznamu aplikací

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

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

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

ListView a GridView