Designvägledning för widgetinteraktion

Den här artikeln innehåller detaljerad vägledning för att utforma interaktion för Windows widgetar.

En widget ska vara lätt att överblicka och fokuserad och ska representera en enda aspekt av appens primära syfte. Widgetar kan innehålla en eller flera uppmaningar till handling. När användaren klickar på ett anrop till en åtgärd bör widgeten starta den associerade appen eller webbplatsen i stället för att implementera åtgärden i själva widgeten. En widget har bara en primär sida som kan innehålla flera interaktioner. Om du klickar på ett objekt i widgeten kommer du aldrig till en helt annan vy av widgeten. I en väderwidget kan du till exempel visa vädret i flera dagar, men om du klickar på en av dagarna expanderas inte informationen infogad, utan i stället startas appen eller webben.

Följande är det maximala antalet pekpunkter som rekommenderas för varje widgetstorlek som stöds.

Widgetstorlek Maximala pekpunkter
liten 1
medel 3
stor 4

Följande navigeringselement stöds inte i Windows Widgetar:

  • Pivoter stöds inte i widgetar
  • L2-sidor stöds inte i widgetar
  • Lodrät eller vågrät rullning stöds inte i widgetar

Containers

Följande bilder visar exempel på användning av containerelement i en widgetmall. Containrarna grupperar visuella element i kolumner och rader för att skapa en hierarkisk rutnätsstruktur.

Fyra bilder av widgetar som illustrerar containrar. Widgetarna i bilderna har element indelade i rader och kolumner för att tillhandahålla en hierarkisk rutnätsstruktur.

Följande bilder visar exempel på användning av bildlänkelement i en widgetmall.

Två bilder av widgetar som illustrerar bildlänkar. Bilderna ordnas i kolumner och rader som skapar ett rutnät.

Pagination

Följande bilder visar exempel på sidnumrering i en widgetmall. Sidnumreringskontrollerna kan justeras vågrätt eller lodrätt. Navigeringspilar visas som svar på en markörens hovring.

Den här uppsättningen med två bilder visar vågrät sidnumrering. I den första bilden justeras en kolumn med punkter längs höger sida. En punkt är större för att indikera den aktiva sidan. I den andra bilden muspekar en markör över en nedåtriktad pil längst ned i widgeten som gör att användaren kan flytta till nästa sida. Det finns en matchande uppåtriktad pil överst i widgeten för att navigera till föregående sida.

Den här uppsättningen med två bilder visar lodrät sidnumrering. I den första bilden justeras en rad punkter längst ned. En punkt är större för att indikera den aktiva sidan. I den andra bilden muspekar en markör över en högerriktad pil till höger i widgeten som gör att användaren kan flytta till nästa sida. Det finns en matchande vänsterpil till vänster i widgeten för att navigera till föregående sida.

Dessa två bilder visar hur sidnumreringskontrollerna ser ut när widgeten har en bildbakgrund.

Följande bilder visar exempel på hyperlänkar i en widgetmall.

Två bilder av widgetar som illustrerar hyperlänkar. Den första bilden visar en hyperlänkad textsträng. Texten är oformaterad. I den andra bilden hovrar en musmarkör över hyperlänken, vilket gör att texten understryks.

En bild som visar en hyperlänk centrerad längst ned i widgeten, precis ovanför den vågräta raden med sidnumreringspunkter. Ett rött X anger att sidnumreringspunkterna och hyperlänken inte ska finnas i samma utrymme. Till höger visar en annan bild hyperlänken längst ned, men sidnumreringspunkterna är lodrätt i en kolumn till höger. En grön kontroll anger att den här placeringen av de två elementen är korrekt.

Två bilder av widgetar som illustrerar listmenyer. I den vänstra bilden döljs den nedrullningsbara menyn. I den högra bilden expanderas listrutan och sträcker sig över widgetens kantlinje

Widgetar kan tillfälligt utökas något utöver widgetstorleken om användaren interagerar med en meny eller listruta. Menybeteendet bör vara lätt att stänga och stänga menyn om en användare klickar utanför menyn/listrutan.

  • Last updated on