Pokyny k návrhu interakce widgetů

Tento článek obsahuje podrobné pokyny k návrhu interakce pro widgety Windows.

Widget by měl být přehledný a zaměřený a měl by představovat jeden aspekt primárního účelu aplikace. Widgety můžou poskytovat jedno nebo více volání k akci. Když uživatel klikne na volání k akci, widget by měl spustit přidruženou aplikaci nebo web místo implementace akce v samotném widgetu. Widget má pouze jednu primární stránku, která může obsahovat více interakcí. Kliknutím na položku ve widgetu byste nikdy neměli přecházet do úplně jiného zobrazení widgetu. Například ve widgetu počasí můžete zobrazit počasí na několik dní, ale kliknutím na jeden z dnů se podrobnosti ne rozbalí v řádku, ale místo toho spustíte aplikaci nebo web.

Následuje maximální počet dotykových bodů doporučených pro každou podporovanou velikost widgetu.

Velikost widgetu Maximální počet dotykových bodů
malý 1
médium 3
velký 4

Widgety Windows nepodporují následující navigační prvky:

  • Pivoty nebudou ve widgetech podporovány.
  • Stránky L2 nebudou podporovány v rámci widgetů.
  • Ve widgetech nebude podporováno svislé nebo vodorovné posouvání.

Containers

Následující obrázky ukazují příklad použití prvků kontejneru v šabloně widgetu. Kontejnery seskupí vizuální prvky do sloupců a řádků a vytvoří hierarchickou strukturu mřížky.

Čtyři obrázky widgetů, které znázorňují kontejnery Widgety na obrázcích mají prvky rozdělené na řádky a sloupce, které poskytují hierarchickou strukturu mřížky.

Následující obrázky ukazují příklad použití prvků odkazu na obrázek v šabloně widgetu.

Dva obrázky widgetů, které znázorňují odkazy na obrázky Obrázky jsou uspořádané do sloupců a řádků, které tvoří mřížku.

Pagination

Následující obrázky ukazují příklady stránkování v šabloně widgetu. Ovládací prvky stránkování lze zarovnat vodorovně nebo svisle. Navigační šipky se zobrazí v reakci na ukazatel myši.

Tato sada dvou obrázků zobrazuje vodorovnou stránkování. Na prvním obrázku je sloupec s tečkami zarovnaný podél pravé strany. Jedna tečka je větší, aby označí aktuálně aktivní stránku. Na druhém obrázku kurzor najede na šipku dolů v dolní části widgetu, která uživateli umožní přejít na další stránku. V horní části widgetu je odpovídající šipka nahoru pro navigaci na předchozí stránku.

Tato sada dvou obrázků zobrazuje svislou stránkování. Na prvním obrázku je řádek s tečkami zarovnaný podél dolní části. Jedna tečka je větší, aby označí aktuálně aktivní stránku. Na druhém obrázku najede kurzorem na šipku vpravo na pravé straně widgetu, která uživateli umožní přejít na další stránku. Na levé straně widgetu je odpovídající šipka vlevo, která slouží k přechodu na předchozí stránku.

Tyto dva obrázky ukazují, jak ovládací prvky stránkování vypadají, když má widget pozadí obrázku.

Následující obrázky ukazují příklad hypertextových odkazů v šabloně widgetu.

Dva obrázky widgetů, které znázorňují hypertextové odkazy První obrázek ukazuje hypertextový řetězec textu. Text je prostý. Na druhém obrázku najede kurzor myši na hypertextový odkaz, což způsobí podtržení textu.

Obrázek znázorňující hypertextový odkaz na střed v dolní části widgetu těsně nad vodorovným řádkem s tečkami stránkování Červený symbol X označuje, že stránkovací tečky a hypertextový odkaz by neměly být ve stejném prostoru. Na dalším obrázku vpravo je hypertextový odkaz v dolní části, ale tečky stránkování jsou zarovnané svisle ve sloupci na pravé straně. Zelená kontrola označuje, že toto umístění těchto dvou prvků je správné.

Dva obrázky widgetů znázorňující rozevírací nabídky. Na levém obrázku je rozevírací nabídka sbalená. Na pravém obrázku je rozevírací nabídka rozbalená a přesahuje okraj widgetu.

Widgety mohou dočasně mírně přesáhnout svou velikost, pokud uživatel interaguje s nabídkou nebo rozbalovacím seznamem. Nabídka by se měla automaticky zavřít, pokud uživatel klikne mimo oblast nabídky nebo rozevírací nabídky.

  • Last updated on