Delen via

Richtlijnen voor panbeweging

Met pannen of schuiven kunnen gebruikers in één weergave navigeren om de inhoud van de weergave weer te geven die niet binnen de viewport past. Voorbeelden van weergaven zijn de mapstructuur van een computer, een bibliotheek met documenten of een fotoalbum.

Belangrijke API's: Windows.UI.Input, Windows.UI.Xaml.Input

Wat je wel en niet moet doen

Panning-indicatoren en schuifbalken

  • Zorg ervoor dat pannen/schuiven mogelijk is voordat u inhoud in uw app laadt.

  • Geef panningindicatoren en schuifbalken weer om aanwijzingen voor locatie en grootte te bieden. Verberg ze als u een aangepaste navigatiefunctie opgeeft.

    Notitie In tegenstelling tot standaard schuifbalken zijn panning-indicatoren puur informatief. Ze worden niet blootgesteld aan invoerapparaten en kunnen op geen enkele manier worden gemanipuleerd.

     

Pannen met één as (eendimensionale overloop)

  • Gebruik panning met één as voor inhoudsregio's die zich buiten één viewportgrens bevinden (verticaal of horizontaal).

    • Vertical scrollen voor een eendimensionale lijst met items.
    • Horizontaal scrollen over een itemsraster.

  • Gebruik geen verplichte knikpunten bij een-assige panning wanneer de gebruiker moet kunnen pannen en stoppen tussen deze punten. Verplichte snap-punten garanderen dat de gebruiker stopt op een snap-punt. Gebruik in plaats daarvan nabijheidssnap-punten.

Vrij pannen (tweedimensionale afloop)

  • Gebruik panning met twee assen voor inhoudsregio's die zich buiten beide viewportgrenzen (verticaal en horizontaal) uitstrekken.

    • Overschrijf het standaardgedrag van rails en gebruik vrije-vormpanning voor ongestructureerde inhoud waarbij de gebruiker zich waarschijnlijk in meerdere richtingen verplaatst.

  • Freeform panning is doorgaans geschikt voor navigeren in afbeeldingen of kaarten.

Paginaweergave

  • Gebruik verplichte snap-punten wanneer de inhoud bestaat uit discrete elementen of als u een volledig element wilt weergeven. Dit kan pagina's zijn van een boek of tijdschrift, een kolom met items of afzonderlijke afbeeldingen.

    • Er moet een uitlijnpunt op elke logische grens worden geplaatst.
    • Elk element moet worden aangepast qua grootte of schaal, zodat het past bij de weergave.

Logische en hoofdpunten

  • Gebruik nabijheidssnap-punten als er belangrijke punten of logische plaatsen in de inhoud zijn waar een gebruiker waarschijnlijk zal stoppen. Bijvoorbeeld een sectiekop.

  • Als beperkingen of grenzen voor maximale en minimale grootte zijn gedefinieerd, gebruikt u visuele feedback om te laten zien wanneer de gebruiker deze grenzen bereikt of overschrijdt.

Ingesloten of geneste inhoud koppelen

  • Gebruik panning met één as (meestal horizontaal) en kolomindelingen voor tekst- en rasterinhoud. In deze gevallen stroomt inhoud doorgaans op natuurlijke wijze van kolom naar kolom en blijft de gebruikerservaring consistent en gemakkelijk te ontdekken in Windows-apps.

  • Gebruik geen ingesloten pannable regio's om tekst- of itemlijsten weer te geven. Omdat de panning-indicatoren en schuifbalken alleen worden weergegeven wanneer de invoercontactpersoon in de regio wordt gedetecteerd, is het geen intuïtieve of detecteerbare gebruikerservaring.

  • Koppel of plaats een pannable gebied niet in een andere pannable regio als ze beide in dezelfde richting pannen, zoals hier wordt weergegeven. Dit kan ertoe leiden dat het oudergebied onbedoeld wordt geschoven wanneer een grens voor het kindergebied wordt bereikt. Overweeg om de panningas loodrecht te oriënteren.

    afbeelding van een ingesloten deelbaar gebied dat in dezelfde richting schuift als de container.

Aanvullende gebruiksrichtlijnen

Pannen met een aanraking, met behulp van een veegbeweging met een of meer vingers, is vergelijkbaar met scrollen met de muis. De pannende interactie lijkt het meest op het draaien van het muiswiel of het verschuiven van het scrollvak, in plaats van te klikken op de schuifbalk. Tenzij een onderscheid wordt gemaakt in een API of vereist is voor een bepaalde apparaatspecifieke Windows-gebruikersinterface, verwijzen we gewoon naar beide interacties als pannen.

Windows 10 Fall Creators Update - Gedragswijziging In plaats van tekstselectie schuift een actieve pen nu in Windows-apps (zoals aanraken, touchpad en passieve pen). Als uw app afhankelijk is van het vorige gedrag, kunt u het penschuiven uitschakelen en terugkeren naar het vorige gedrag. Zie het API-referentieonderwerp voor de ScrollViewer-klasse voor meer informatie.

Afhankelijk van het invoerapparaat panned de gebruiker in een pannable gebied met behulp van een van de volgende:

  • Een muis, touchpad of actieve pen/stylus om op de schuifpijlen te klikken, het schuifvak te slepen of in de schuifbalk te klikken.
  • De wielknop van de muis om het schuifvak te emuleren.
  • De uitgebreide knoppen (XBUTTON1 en XBUTTON2), indien ondersteund door de muis.
  • Met de pijltjestoetsen op het toetsenbord kunt u het schuifblok slepen of met de paginatoetsen kunt u klikken binnen de scrolbalk nabootsen.
  • Raak, touchpad of passieve pen/stylus aan of veeg de vingers in de gewenste richting.

Schuiven omvat het langzaam bewegen van de vingers in de richting van het pannen. Dit resulteert in een een-op-een-relatie, waarbij de inhoud met dezelfde snelheid en afstand als de vingers beweegt. Swipen, waarbij de vingers snel schuiven en worden opgetild, resulteert in de volgende fysische principes die worden toegepast op de panninganimatie:

  • Vertraging (traagheid): Als u de vingers opheft, begint het pannen te vertragen. Dit is vergelijkbaar met glijden naar een stop op een glad oppervlak.
  • Absorptie: Panning-momentum tijdens vertraging veroorzaakt een licht terugkaatsend effect als een uitlijnpunt of de grens van het inhoudsgebied wordt bereikt.

Typen pannen

Windows ondersteunt drie typen panning:

  • Eén as: pannen wordt alleen in één richting ondersteund (horizontaal of verticaal).
  • Rails - panning wordt in alle richtingen ondersteund. Zodra de gebruiker echter een drempelwaarde voor afstand in een specifieke richting overschrijdt, wordt pannen beperkt tot die as.
  • Vrije vorm - pannen wordt in alle richtingen ondersteund.

Pannen UI

De interactie-ervaring voor pannen is uniek voor het invoerapparaat, terwijl het nog steeds vergelijkbare functionaliteit biedt.

Er zijn twee panning modi op basis van het gedetecteerde invoerapparaat:

  • Panning-indicatoren voor touchbediening.
  • Schuifbalken voor andere invoerapparaten, waaronder muis, touchpad, toetsenbord en stylus.

Notitie Panning-indicatoren zijn alleen zichtbaar wanneer het contact met het aanraakscherm zich in het panninggebied bevindt. Op dezelfde manier is de schuifbalk alleen zichtbaar wanneer de muiscursor, pen/styluscursor of de toetsenbordfocus zich binnen het schuifbare gebied bevindt.

 

Panning-indicatoren Panning-indicatoren zijn vergelijkbaar met het schuifvak in een schuifbalk. Ze geven het aandeel van weergegeven inhoud in het totale scrolbare gebied en de relatieve positie van de weergegeven inhoud in het scrolbare gebied weer.

In het volgende diagram ziet u twee verschuifbare gebieden met verschillende lengten en hun verschuifindicatoren.

Afbeelding met twee verschuifbare gebieden van verschillende lengten en hun bijbehorende panning-indicatoren.

Pan-gedragSnap points Panning met de veegbeweging introduceert traagheid in de interactie wanneer het contact wordt opgeheven. Met traagheid blijft de inhoud pannen totdat een afstandsdrempel wordt bereikt zonder directe invoer van de gebruiker. Gebruik snap-punten om dit traagheidsgedrag te wijzigen.

Uitlijnstippen geven logische stops aan in de inhoud van je app. Cognitief fungeren snappunten als een pagineringsmechanisme voor de gebruiker en minimaliseren zij vermoeidheid door overmatig schuiven of vegen in grote scrollbare gebieden. Hiermee kunt u met onnauwkeurige gebruikersinvoer omgaan en ervoor zorgen dat een specifieke subset van de inhoud of sleutelinformatie in de viewport wordt getoond.

Er zijn twee typen uitlijnpunten:

  • Nabijheid - Nadat het contact is verbroken, wordt een vastklikpunt geselecteerd als de traagheid stopt binnen een afstandsdrempel van het vastklikpunt. Het pannen kan nog steeds stoppen tussen nabijheidssnap-punten.
  • Verplicht: het geselecteerde uitlijnpunt is het punt dat onmiddellijk voorafgaat aan of opvolgt het laatste uitlijnpunt dat was gepasseerd voordat het contact werd beëindigd (afhankelijk van de richting en snelheid van de beweging). Pannen moet stoppen bij een verplicht uitlijnpunt.

Panning-uitlijnpunten zijn handig voor toepassingen zoals webbrowsers en fotoalbums die gepagineerde inhoud emuleren of logische groeperingen van items hebben die dynamisch gegroepeerd kunnen worden om binnen een viewport of scherm te passen.

In de volgende diagrammen ziet u hoe pannen naar een bepaald punt en loslaten ervoor zorgt dat de inhoud automatisch naar een logische locatie gepand wordt.

afbeelding van een verschuifbaar gebied.

Veeg om te pannen.

afbeelding van een pannenbaar gebied dat naar links wordt gepand.

Contact met aanraking opheffen.

afbeelding van een gebied dat kan worden gepand en is gestopt bij een logisch vastklikkingspunt.

Pannable gebied stopt op het snappunt, niet waar de aanraking werd losgelaten.

Rails Inhoud kan breder en hoger zijn dan de afmetingen en resolutie van een beeldschermapparaat. Daarom is tweedimensionale panning (horizontaal en verticaal) vaak nodig. Rails verbeteren de gebruikerservaring in deze gevallen door het pannen langs de bewegingsas (verticaal of horizontaal) te accentueren.

In het volgende diagram ziet u het concept van rails.

diagram van een scherm met rails die schuiven beperken

Ingesloten of geneste inhoud koppelen

Nadat een gebruiker een zoom- of schuiflimiet heeft bereikt voor een element dat is genest binnen een ander zoombaar of schuifbaar element, kunt u opgeven of dat bovenliggende element de zoom- of schuifbewerking moet voortzetten in het onderliggende element. Dit wordt zoom- of schuifketting genoemd.

Koppelen wordt gebruikt voor pannen binnen een inhoudsgebied met één as dat een of meer regio's met één as of vrije vorm bevat (wanneer de contact met aanraking binnen een van deze onderliggende regio's valt). Wanneer de scrollgrens van de onderliggende regio in een specifieke richting wordt bereikt, wordt pannen vervolgens geactiveerd op de bovenliggende regio in dezelfde richting.

Wanneer een pannable regio is genest in een andere pannable regio, is het belangrijk om voldoende ruimte op te geven tussen de container en de ingesloten inhoud. In de volgende diagrammen wordt één verschuifbare regio in een andere verschuifbare regio geplaatst, elk in loodrechte richtingen ten opzichte van elkaar. Er is voldoende ruimte voor gebruikers om in elke regio te navigeren.

afbeelding waarin een ingesloten deelgebied wordt gedemonstreerd.

Zonder voldoende ruimte, zoals wordt weergegeven in het volgende diagram, kan het ingesloten pannable gebied de verschuiving in de container verstoren en leiden tot onbedoelde verschuiving in een of meer van de pannable gebieden.

afbeelding met onvoldoende opvulling voor een ingesloten deelbaar gebied.

Deze richtlijnen zijn ook nuttig voor apps zoals fotoalbums of kaartapps die onbeperkt pannen binnen een afzonderlijke afbeelding of kaart ondersteunen, terwijl ze ook het pannen langs één as in het album (naar de vorige of volgende afbeeldingen) of in het detailgebied mogelijk maken. In apps die een detail- of optiesgebied bieden dat overeenkomt met een freeform panning-afbeelding of kaart, raden we u aan dat de pagina-indeling begint met het gebied met details en opties, omdat het niet-getrainde panninggebied van de afbeelding of kaart de panning naar het detailgebied kan verstoren.

Voorbeelden

Archiefvoorbeelden

  • Last updated on