Grunderna i widgetdesign

Den här artikeln innehåller detaljerad vägledning för att utforma användargränssnittet för en Windows widget.

Widgetstorlekar

En skärmbild som visar tomma widgetmallar som illustrerar små, medelstora och stora storlekar. En skärmbild som visar exempel på små, medelstora och stora storlekar för en väderwidget. En skärmbild som visar exempel på små, medelstora och stora storlekar för en trafikwidget.

Widgetar innehåller tre storlekar som användaren kan välja mellan. Vi rekommenderar att du skapar och överväger alla tre storlekar och anpassar designen specifikt för varje storlek. Små och medelstora storlekar ger bättre upptäcktsbarhet eftersom de blir ytbehandlade oftare i det dynamiska flödet. Stora storlekar är användbara för att visa mer detaljerad information. Stöd för flera storlekar gör det möjligt för användare att anpassa de widgetar som de väljer att fästa på widgetkortet.

Liten

Widgetprinciperna som är lättöverskätliga och fokuserade blir viktigare i designbeslut som fattas för widgeten med liten storlek. Den lilla widgeten bör inte försöka tvinga alla funktioner som bekvämt skulle få plats i en stor widget. Fokusera på en användarinteraktion eller viktig information som kan visas här med 1 pekmål.

Medium

Widgeten med medelstorlek ger mer utrymme jämfört med den lilla, så fler funktioner eller ytterligare information kan inkluderas. Den medelstora widgeten kan också ge samma fokuserade upplevelse som den lilla widgeten, men ge 2-3 touchmål.

Stora

Stora storlekar gör det möjligt att visa mer information, men innehållet bör fortfarande vara fokuserat och enkelt att använda. Alternativt kan ett stort kort markera en bild eller ett ämne och få en mer uppslukande upplevelse. Den stora storleken får inte ha fler än 3–4 tryckytor.

Färg och teman

Tre exempel på widgetmallar som visar ljustemat. Den första är en tom widget med en vit backgronud. Den andra är en tom widget med en ljus toningsbakgrund. Den tredje är en widget med en bildbakgrund. Alla tre har ordet

Tre exempel på widgetmallar som visar det mörka temat. Den första är en tom widget med en svart backgroud. Den andra är en tom widget med en mörk toningsbakgrund. Den tredje är en widget med en bildbakgrund. Alla tre har ordet

Windows 11 stöder två färglägen: ljus och mörk. Varje läge består av en uppsättning neutrala färgvärden som justeras automatiskt för att säkerställa optimal kontrast. För varje widgetstorlek som du stöder måste du skapa separata design för ljusa och mörka teman så att widgeten integreras sömlöst i det bredare operativsystemet och användarens temaval. Widgetbakgrunden stöder anpassning med antingen en helljus/mörk bakgrund, toningston eller bildbakgrund.

Två widgetexempel sida vid sida. Det vänstra exemplet har en ljus toningsbakgrund och text i ett ljusgrått teckensnitt. Bilden är markerad med ett rött X för att indikera att den låga kontrasten gör texten oläslig. Den högra bilden har en ljus toningsbakgrund och text i ett mörkt svart teckensnitt. Bilden är markerad med en grön kontroll för att indikera att den höga kontrasten gör texten läsbar.

Två widgetexempel sida vid sida. Det vänstra exemplet har en mycket mättad bakgrundsbild och text i ett mörkt teckensnitt. Bilden är markerad med ett rött X för att indikera att den låga kontrasten gör texten oläslig. Den högra bilden har en desaturerad färgbakgrund och text i ett mörkt svart teckensnitt. Bilden är markerad med en grön kontroll för att indikera att den höga kontrasten gör texten läsbar.

När du väljer bakgrundsfärger, bilder och innehåll kontrollerar du att det finns tillräckligt med färgkontrast för att säkerställa läsbarhet och tillgänglighet.

Riktlinjerna för webbinnehållstillgänglighet (WCAG) 2.0 nivå AA kräver ett kontrastförhållande på minst 4,5:1 för normal text och 3:1 för stor text. WCAG 2.1 kräver ett kontrastförhållande på minst 3:1 för grafik- och användargränssnittskomponenter (till exempel formulärindatakantlinjer). WCAG-nivå AAA kräver ett kontrastförhållande på minst 7:1 för normal text och 4.5:1 för stor text. Stor text definieras som 14 punkter (vanligtvis 18,66px) och fet eller större, eller 18 punkter (vanligtvis 24px) eller större.

Marginaler

Ett diagram över en widget med riktlinjer som anger marginalerna. Bredvid detta finns ett diagram över en widget där området inuti marginalerna är färgat blått för att visa innehållsområdet.

Varje widget har en marginal på 16 px runt sig och ett 48px Attribution-område där innehållet inte kan placeras. Den enda komponenten som kan leva i höger sidomarginal och nederkant är sidnumreringspunkterna. Exempel på placeringen av sidnumreringspunkterna finns i sidnumreringsavsnittet i Designvägledning för widgetinteraktion.

Två widgetexempel sida vid sida. Den vänstra bilden visar guidelinjer som delar widgeten i tre kolumner, vilket illustrerar 4 bildpunkters rännor mellan kolumnerna. Den högra bilden visar guidelinjer som delar upp widgeten i tre rader, vilket illustrerar 4 bildpunkters rännor mellan raderna.

För widgetar som använder containrar är mellanrummet mellan varje element 4px och containrarna ska vidröra marginalens kanter. Innehållet bör också använda avstånds- och storleksvärden för Multiples of Four Px för att få en ren, perfekt design för olika skärmupplösningar.

Du bör också läsa riktlinjerna för avstånd och utrymmen i Grundläggande innehållsdesign för Windows-appar när du utformar ditt innehåll.

Typography

Två strängar av frasen

En tabell som visar exempeltext för olika typelement i en widget. Tabellen återskapas i oformaterad text utan det renderade utseendet i texten under bilden.

För tillgänglighet presenteras följande tabell med texten från tabellen som visas i bilden ovan.

Exempel Storlek/linjehöjd Formel för adaptiva kort
Bildtext 16/12 epx Liten, ljusare
Body 14/20 epx Standard, ljusare
Textdel (för hyperlänkar) 14/20 epx Standard, ljusare ton, accentfärg
Kropp Stark 14/20 epx Standard, fetare
Stor textkropp 18/24 epx Medel, ljusare
Största brödtexten 18/24 epx Medel, fetare
Undertext 20/28 epx Större, fetare
Titel 28/36 epx Extra stor, fetare

Segoe UI är det typsnitt som används i widgetar och över Windows. Ovanstående typramp innehåller formuleringar för hur du korrekt ställer in rätt formatmallar i Adaptive Cards Designer. Typsnittsformat bör inte avvika från de angivna formler som anges ovan. Mer information om hur du använder Adaptive Cards Designer för att skapa widgetmallar finns i Skapa en widgetmall med Adaptive Cards Designer.

Två exempelwidgetar med frasen

I Adaptive Cards Designer använder rubriker och brödtext den standardfärg som är associerad med widgettemat. Ett ytterligare alternativ för att skilja rubrik från brödtext ytterligare är att använda den subtila versionen av standardfärgen. Dekorfärgen används endast för hyperlänkar.

Iconography

Profilbilder

Fyra instanser av en cirkulär profilbild i fallande storlekar från vänster till höger. Bilderna är märkta

Om widgeten innehåller användarprofiler (till exempel ett flöde eller en ström för sociala medier) använder du någon av följande tillåtna cirkelprofilstorlekar: 96x96px, 48x48px, 32x32px eller 24x24px.

Verktygstips

En bild av en kalenderwidget som visar en kalenderbokning. Musmarkören hovrar över ämnesraden i kalenderbokningen, som är avkortad, och ett verktygstips visar hela ämnesraden.

Verktygstips kan användas när rubriktexten blir avkortad i widgeten. För bästa praxis bör text passa snyggt i widgetutrymmet och inte behöva trunkering, men det kanske inte alltid händer beroende på scenarier som språklokalisering, systemtextskalning eller när du citerar något (t.ex. artikelrubrik, namn på en låt). Detta gäller inte för brödtext på en widget.

  • Last updated on