Touch-interaktioner

Det här avsnittet innehåller designriktlinjer för att skapa anpassade, pekoptimerade upplevelser i Windows-appar.

Översikt

Touch är en primär form av input i Windows- och Windows-appar som involverar användning av en eller flera fingrar (eller beröringskontakter). Dessa beröringskontakter och deras rörelse tolkas som pekgester och manipuleringar som stöder en mängd olika användarinteraktioner.

Både Windows SDK och Windows App SDK innehåller omfattande samlingar med touchoptimerade kontroller som ger robusta och konsekventa upplevelser i Windows-appar.

Använd dessa riktlinjer när du skapar anpassade kontroller, upplevelser och ramverk för dina Windows-appar.

Designprinciper

Tänk på följande när du utformar touch-upplevelsen i din Windows-app.

Optimerad för pekskärm

Windows-appupplevelser bör kännas inbjudande att röra vid, möjliggöra direkt manipulering och hantera mindre exakta interaktioner. Överväg pekacceleratorer, inklusive gester och penn- och röstintegrering.

Konsekvent genom olika positioner

Din app bör ha en konsekvent upplevelse oavsett vilken indatametod eller hållning användaren befinner sig i. Ändringar från traditionell skrivbordshållning till surfplatta (se Rekommenderade inställningar för bättre surfplattupplevelser) samt ändringar i orienteringen bör inte vara desorienterad, utan snarare subtila och endast vid behov. Din app bör anpassa användargränssnittet på ett subtilt sätt för att skapa en välbekant, sammanhängande upplevelse som möter användarna där de befinner sig.

Responsiv

Appar och interaktioner bör ge användarna feedback i varje fas (tryck ned, handling, släpp upp) av en interaktion med hjälp av animeringar som svarar på en användares aktuella tillstånd samtidigt som de indikerar möjliga åtgärder. Animeringar bör också behålla minst 60 fps för att kännas smidiga och moderna.

Att respektera touch-konventioner

Responsiv återkoppling

Lämplig visuell feedback under interaktioner med din app hjälper användarna att känna igen, lära sig och anpassa sig till hur deras interaktioner tolkas av både appen och Windows-plattformen. Ge omedelbar och kontinuerlig feedback som svar på användarens beröring, som är märkbar, begriplig och inte förlorad av distraktioner. Den här omedelbara feedbacken är hur användarna lär sig och utforskar de interaktiva elementen i din app.

• Feedback bör vara omedelbar vid nedtryckning och rörliga objekt bör hålla sig till användarens finger.
• Användargränssnittet bör svara på gester genom att matcha användarens hastighet och rörelser, undvik att använda nyckelramsanimeringar.
• Visuell återkoppling bör förmedla möjliga utfall innan användaren åtagit sig till en åtgärd.

Gör

Gör inte

Mer information finns i Riktlinjer för visuell feedback och rörelse i Windows 11

Mönster för touchinteraktion

Respektera dessa vanliga interaktions- och gestmönster för att få konsekvens och förutsägbarhet i din upplevelse.

Vanliga interaktioner

Det finns en uppsättning vanliga pekbeteenden och gester som användarna är bekanta med och förväntar sig att arbeta konsekvent i alla Windows-upplevelser.

• Tryck för att aktivera eller markera ett objekt
• Kort tryck och dra för att flytta ett objekt
• Tryck och håll i för att få åtkomst till en meny med sekundära, kontextuella kommandon
• Svep (eller dra och släpp) för kontextuella kommandon
• Rotera medsols eller motsols för att svänga

Interaktioner

Knacka

Svep (eller dra och släpp)

Kort tryck och dra

Rotera

Tryck och håll

Mer information finns i Riktlinjer för visuell feedback och rörelse i Windows 11

Gester

Gester minskar den ansträngning som krävs av användare för att navigera och agera på vanliga interaktioner. Om möjligt kan du stödja användargränssnittet med touchgester för att göra det enkelt för användare att navigera och agera i en app.

Om du navigerar mellan vyer, använd anslutna animeringar så att både befintliga och nya statusar syns mitt under dragningen. Om du interagerar med användargränssnittet bör objekt följa användarens rörelse, ge feedback och vid lansering reagera med ytterligare åtgärder baserat på tröskelvärden för dragposition.

Gester bör också vara användbara med snärtar och svep baserat på tröghet och vara inom ett bekvämt rörelseomfång.

• Dra eller snärta för att gå fram och tillbaka
• Dra för att avvisa
• Dra ned för att uppdatera

Gester

Dra eller snärta för att gå fram och tillbaka

Dra ner för att uppdatera

Dra för att stänga

Mer information finns i Sidövergångar och Pull för att uppdatera.

Anpassade gester

Använd anpassade gester för att ta högfrekventa genvägstangenter och styrplatta-gester till en touchinteraktion. Underlätta upptäckt och respons genom dedikerade möjligheter med animeringar och visuella tillstånd (till exempel, när du placerar tre fingrar på skärmen krymper fönstren för att ge visuell feedback).

• Åsidosätt inte vanliga gester eftersom detta kan orsaka förvirring för användarna.
• Överväg att använda gester med flera finger för anpassade åtgärder, men tänk på att systemet har reserverat vissa gester med flera finger för snabb växling mellan appar och skrivbord.
• Tänk på anpassade gester som kommer nära kanterna på en skärm eftersom kantgester är reserverade för beteenden på OS-nivå, som kan anropas av misstag.

Undvik oavsiktlig navigering

Om din app eller ditt spel kan innebära frekventa interaktioner nära skärmens kanter kan du överväga att presentera din upplevelse i ett FSE-läge (Fullscreen Exclusive) för att undvika oavsiktlig aktivering av utfällbara system (användarna måste svepa direkt på den tillfälliga fliken för att dra in det associerade systemets utfällbara objekt).

Anmärkning

Undvik att använda detta om det inte är absolut nödvändigt eftersom det gör det svårare för användare att navigera bort från din app eller använda den tillsammans med andra.

Pektangentbordsupplevelser

Pektangentbordet möjliggör textinmatning för enheter som stödjer touch. Textinmatningskontroller i Windows-appen anropar pektangentbordet som standard när en användare trycker på ett redigerbart indatafält.

Utför vid tryck på textfält

Pektangentbordet bör dyka upp när en användare trycker på ett textinmatningsfält – detta fungerar automatiskt med hjälp av våra system-API:er för att visa och dölja tangentbordet. Se Reagera på förekomsten av pektangentbordet.

Använda standardkontroller för textinmatning

Att använda vanliga kontroller ger förväntat beteende och minimerar överraskningar för användare.

Textkontroller som stöder Text Services Framework (TSF) tillhandahåller funktioner för formskrivning (sveptangentbord).

Pektangentbordssignaler

Ta hänsyn till indata, hållning, maskinvarusignaler som gör pektangentbordet till huvudläget för indata (maskinvarutangentbordet kopplas från, inmatningspunkter aktiveras med beröring, tydlig avsikt från användaren att skriva).

Flöda om på rätt sätt

• Tänk på att tangentbordet kan ta upp 50% av skärmen på mindre enheter.
• Dölj inte det aktiva textfältet med pektangentbordet.
• Om pektangentbordet döljer det aktiva textfältet rullar du upp appinnehållet (med animering) tills fältet visas.
• Om pektangentbordet döljer det aktiva textfältet men appinnehållet inte kan rullas upp kan du försöka flytta appcontainern (med animering).

Uppnå mål

Se till att träffmålen är bekväma och inbjudande att röra vid. Om träffmålen är för små eller för trånga måste användarna vara mer exakta, vilket är svårt på en pekskärm och kan resultera i en dålig upplevelse.

Beröringsbara

Vi definierar touchable som minst 40 x 40 epx, även om det visuella objektet är mindre eller 32 epx högt om bredden är minst 120 epx.

Våra vanliga kontroller överensstämmer med den här standarden (de är optimerade för både mus- och touchanvändare).

Touchoptimerad

För ett pekoptimerad användargränssnitt bör du överväga att öka målstorleken till 44 x 44 epx med minst 4 epx synligt utrymme mellan mål.

Vi rekommenderar två standardbeteenden: Alltid pekoptimerad eller övergång baserat på enhetssignaler.

När en app kan optimeras för pekfunktioner utan att äventyra musanvändare, särskilt om appen främst används med touch, så pekoptimera alltid.

Om du anpassar användargränssnittet baserat på enhetssignaler för enhetshållning, ger du alltid konsekventa upplevelser över olika hållningar.

Matcha visuella objekt för att röra målet

Överväg att uppdatera visuella objekt när pekmåldimensioner ändras. Om träffmålen till exempel ökar när användarna går in i surfplattans hållning bör användargränssnittet som representerar träffmålen också uppdateras för att hjälpa användarna att förstå statusförändringen och uppdaterade möjligheter. Mer information finns i Grunderna för innehållsdesign för Windows-appar, Riktlinjer för pekmål, Kontrollstorlek och densitet.

Porträttoptimering

Stöd responsiva layouter som hanterar både höga och breda fönster för att säkerställa att en app är optimerad för både liggande och stående läge.

Detta säkerställer också att appfönster visar grundläggande visuella gränssnittsobjekt korrekt i scenarier med multitasking (appar som snappades sida vid sida med stående proportioner) oavsett orientering och skärmstorlekar.