Základy návrhu widgetů

Tento článek obsahuje podrobné pokyny k návrhu uživatelského rozhraní pro widget Windows.

Velikosti widgetů

Widgety poskytují uživateli tři velikosti, ze které si uživatel může vybrat. Doporučujeme vytvořit a zvážit všechny 3 velikosti a přizpůsobit návrh speciálně pro každou velikost. Malé a střední velikosti poskytují lepší viditelnost, protože se častěji zobrazují v rámci dynamického kanálu. Velké velikosti jsou užitečné pro zobrazení podrobnějších informací. Podpora více velikostí umožňuje uživatelům flexibilně přizpůsobit widgety, které se rozhodnou připnout na panel widgetů.

Malý

Principy widgetů, přehledné a zaměřené, se stávají důležitějšími při rozhodování o návrhu widgetů s malou velikostí. Widget s malou velikostí by se neměl pokoušet vynutit všechny funkce, které by se pohodlně vešly do velkého widgetu. Zaměřte se na jednu interakci uživatele nebo na klíčové informace, které se zde dají zobrazit pomocí 1 dotykového cíle.

Středně

Widget střední velikosti umožňuje více místa v porovnání s malými, takže je možné zahrnout více funkcí nebo dalších informací. Střední widget může také poskytovat stejný soustředěný zážitek jako malý widget, ale poskytuje 2-3 cílové body dotyku.

Velký

Velké velikosti umožňují prezentovat další informace, ale obsah by měl být stále zaměřený a snadno použitelný. Případně může karta ve velkém formátu zvýraznit jeden obrázek nebo téma a nabídnout působivý zážitek. Velká velikost by neměla mít více než 3-4 dotykové cíle.

Barvy a vzhledy

Windows 11 podporuje dva barevné režimy: světlé a tmavé. Každý režim se skládá ze sady neutrálních hodnot barev, které se automaticky upraví tak, aby se zajistil optimální kontrast. Pro každou velikost widgetu, kterou podporujete, nezapomeňte vytvořit samostatné návrhy světlých a tmavých motivů, aby se widget bez problémů integrovali do širšího operačního systému a výběru motivu uživatele. Pozadí widgetu podporuje přizpůsobení s pevným světlým nebo tmavým pozadím, barevným odstínem přechodu nebo pozadím obrázku.

Při volbě barev pozadí, obrázků a obsahu se ujistěte, že je dostatek barevného kontrastu pro zajištění čitelnosti a přístupnosti.

Pravidla přístupnosti webového obsahu (WCAG) 2.0 úrovně AA vyžadují kontrastní poměr nejméně 4,5:1 pro normální text a 3:1 pro velký text. WCAG 2.1 vyžaduje kontrastní poměr minimálně 3:1 pro grafické součásti a součásti uživatelského rozhraní (například vstupní ohraničení formuláře). WCAG Level AAA vyžaduje kontrastní poměr minimálně 7:1 pro normální text a 4,5:1 pro velký text. Velký text je definován jako 14 bodů (obvykle 18,66px) a tučný, případně větší, nebo 18 bodů (obvykle 24px) nebo větší.

Okraje

Každý widget má 16px okraj kolem sebe a atributovou oblast 48px, do které nelze umístit obsah. Jediným prvkem, který může být umístěn na pravém a dolním okraji, jsou tečky stránkování. Příklady umístění stránkovacích teček najdete v části pokynů k návrhu interakce widgetu, která se věnuje stránkování, ,.

U widgetů, které používají kontejnery, je hřbet mezi každým prvkem 4px a kontejnery by se měly dotýkat okrajů. Obsah by měl také používat hodnoty mezer a velikosti násobků čtyř pixelů k dosažení čistého a pixelového dokonalého návrhu v různých rozlišeních obrazovky.

Při návrhu svého obsahu byste měli také postupovat podle pokynů k mezerám a rámečkům v části Základy návrhu obsahu pro aplikace pro Windows .

Typografie

V případě usnadnění je v následující tabulce uveden text tabulky uvedené na obrázku výše.

Příklad	Velikost / výška čáry	Vzorec adaptivních karet
Titulek	12/16 epx	Malý, světlejší
Tělo	14/20 epx	Výchozí, světlejší
Text (pro hypertextové odkazy)	14/20 epx	Výchozí, světlejší, akcent
Silné tělo	14/20 epx	Výchozí, tučnější
Velké tělo	18/24 epx	Střední, světlejší
Největší tělo	18/24 epx	Střední, tučnější
Podtitul	20/28 epx	Velké, výraznější
Titul	28/36 epx	Velmi velké, tučnější

Segoe UI je typ písma používaný ve widgetech a ve Windows. Výše uvedená rampa typu obsahuje formulace, jak správně nastavit správné styly v Návrháři adaptivních karet. Styl písma by se neměl odcházet od zadaných vzorců výše. Další informace o vytváření šablon widgetů pomocí Návrháře adaptivních karet najdete v tématu Vytvoření šablony widgetu pomocí návrháře adaptivních karet.

V Návrháři adaptivních karet používají názvy a kopie textu výchozí barvu přidruženou k motivu widgetu. Další možností, jak odlišit název od kopie textu, je použití jemné verze výchozí barvy. Barva zvýraznění se používá jenom pro hypertextové odkazy.

Ikonografie

Profilové obrázky

Pokud váš widget obsahuje zobrazení uživatelských profilů (například informační kanál sociálních médií nebo datový proud), použijte jednu z následujících povolených velikostí kruhových profilů: 96x96px, 48x48px, 32x32px nebo 24x24px.

Popisy tlačítek

Popisy tlačítek se dají použít, když se text nadpisu zkrátí ve widgetu. V rámci osvědčených postupů by text měl zapadnout přesně do prostoru widgetu a vyhnout se tak nutnosti zkracování; to se ale nemusí vždy podařit, v závislosti na různých scénářích, jako je jazyková lokalizace, škálování systémového textu nebo při citování něčeho (tj. název článku, název skladby). To neplatí pro základní text widgetu.