Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
Beweging beschrijft hoe de interface animeert en reageert op gebruikersinteractie. Beweging in Windows is reactief, direct en context passend. Het biedt feedback aan gebruikersinvoer en versterkt ruimtelijke paradigma's die way-finding ondersteunen.
Aanbeveling
In dit artikel wordt beschreven hoe de Fluent Design language wordt toegepast op Windows apps. Zie Fluent Design - Motion voor meer informatie.
Bewegingsprincipes
Deze principes begeleiden het gebruik van beweging in Windows.
Verbonden: Elementen van acties verbinden naadloos
Elementen die de positie en grootte wijzigen, moeten visueel verbinding maken tussen de ene toestand en de andere, zelfs als ze niet onder de motorkap zijn aangesloten. Gebruikers worden begeleid bij het volgen van elementen die van punt tot punt gaan, waardoor de cognitieve belasting van statische statuswijzigingen wordt verlaagd.
Voorbeeld: Wanneer een venster wisselt tussen zwevend, vastgezet en gemaximaliseerd, voelt het altijd als hetzelfde venster aan.
Aanbeveling
Deze pagina gebruikt nog steeds afbeeldingen in de standaardweergave om de toegankelijkheid en leesbaarheid te verbeteren. U kunt op een afbeelding klikken om de versie met animatie weer te geven.
Consistent: Elementen moeten zich op vergelijkbare manieren gedragen bij het delen van toegangspunten
Oppervlakken die hetzelfde toegangspunt voor de gebruikersinterface delen, moeten op dezelfde manier oproepen en afsluiten om consistentie in interacties te waarborgen. Elke overgang moet de timing, de versoepeling en de richting van andere elementen respecteren, zodat een surface cohesief voelt.
Voorbeeld: Alle flyouts op de taakbalk worden omhoog geschoven wanneer ze worden aangeroepen en omlaag geschoven wanneer ze worden gesloten.
Klik op de afbeelding om de animatie weer te geven.
Responsief: Het systeem reageert en past zich aan gebruikersinvoer en -keuzes aan
Duidelijke indicatoren tonen dat het systeem correct herkent en zich aanpast aan verschillende invoer, houdingen en oriëntaties. Apps moeten voortbouwen op het gedrag van het besturingssysteem om responsief, actief te zijn en het gebruik te helpen, afhankelijk van invoermethoden.
Voorbeeld: Taakbalkpictogrammen worden uitgespreid wanneer toetsenborden worden losgekoppeld. Vensterranden tonen een ander visueel effect, afhankelijk van het gebruik van een cursor of aanraakinvoer.
Klik op de afbeelding om de animatie weer te geven.
Heerlijk: Onverwachte momenten van vreugde met doel
Beweging voegt persoonlijkheid en energie toe aan de ervaring om eenvoudige acties om te zetten in momenten van genot. Deze momenten zijn altijd kort en vlot en helpen bij het versterken van gebruikersacties.
Voorbeeld: Bij het minimaliseren van een venster stuitert een app-pictogram naar beneden, terwijl herstellen ervoor zorgt dat een app-pictogram naar boven stuitert.
Klik op de afbeelding om de animatie weer te geven.
Resourceful: maakt gebruik van bestaande besturingselementen om waar mogelijk consistentie te brengen
Vermijd waar mogelijk aangepaste animaties. Gebruik animatiebronnen zoals WinUI 3-besturingselementen voor paginaovergangen, focus op pagina en micro-interacties. Als u geen WinUI-besturingselementen kunt gebruiken, moet u bestaand gedrag van het besturingssysteem nabootsen op basis van waar het toegangspunt van de app zich bevindt.
Voorbeeld:Paginaovergangen, verbonden animaties en pictogrammen met animaties zijn de aanbevolen WinUI-besturingselementen die heerlijke en noodzakelijke beweging toevoegen aan apps.
Klik op de afbeelding om de animatie weer te geven.
Voorbeelden
De WinUI 3 Gallery-app bevat interactieve voorbeelden van WinUI-besturingselementen en -functies. Haal de app op uit de Microsoft Store of blader door de broncode op GitHub.
Usage
Animatie-eigenschappen
Windows beweging is snel, direct en contextgegepast. Tijds- en versoepelingscurven worden aangepast op basis van het doel van de animatie om een coherente ervaring te creëren.
| Purpose | Definition | Gemak | Tijdregeling | Gebruikt voor |
|---|---|---|---|---|
| Directe ingang | Snel – In | Cubic-bezier(0,0,0,1) | 167, 250, 333 | Positie, schaal, draaiing |
| Bestaande elementen | Punt-naar-punt | cubic-bezier(0.55,0.55,0,1) | 167, 250, 333 ms | Positie, schaal, draaiing |
| Directe uitgang | Snel – uit | Cubic-bezier(0,0,0,1) | 167 ms | Positie, schaal, rotatie (ALTIJD combineren met vervagen) |
| Geleidelijke afsluiting | Zacht – Uit | cubic-bezier(1,0,1,1) | 167 ms | Positie, schaal |
| Minimaal bare | Vervagen – In + Uit | Lineair | 83 ms | Ondoorzichtigheid |
| Sterke ingang | Elastisch in (3 keyframes) | (3 onderstaande waarden) | (3 onderstaande waarden) | Positie, schaal |
| Keyframe 1 | Cubic-Bezier(0,85, 0, 0, 1) | 167 ms | ||
| Keyframe 2 | Cubic-Bezier(0,85, 0, 0,75, 1) | 167 ms | ||
| Keyframe 3 | Cubic-Bezier(0,85, 0, 0, 1) | 333 ms |
Controles
Deze release van Windows introduceert doelgerichte microinteracties in WinUI-besturingselementen. Voeg deze besturingselementen toe aan uw app om informatie beter te ordenen en de gebruikers van uw app te helpen over te stappen van pagina naar pagina, laag naar laag en status tot status van een interactie.
Paginaovergang: overgangen van pagina naar pagina binnen dezelfde surface
Gebruik paginaovergangen om soepel van pagina naar pagina over te stappen en animatierichtingen te configureren om de stroom van een app te respecteren.
Paginaovergangen leiden uw gebruikers naar binnenkomende en uitgaande inhoud, waardoor de cognitieve belasting wordt verlaagd.
Klik op de afbeelding om de animatie weer te geven.
Verbonden animatie: overgangen tussen lagen binnen dezelfde pagina
Gebruik verbonden animaties om specifieke stukjes informatie binnen een pagina of oppervlak te markeren, terwijl de context behouden blijft.
Verbonden animaties geven focus aan geselecteerde elementen en schakelen naadloos tussen de gefocuste en niet-gefocuste toestanden.
Klik op de afbeelding om de animatie weer te geven.
Pictogram animatie: voegt vreugde toe en onthult informatie via micro-interacties
Gebruik animatiepictogrammen om lichtgewicht, vectorgebaseerde pictogrammen en illustraties met beweging te implementeren met Lottie-animaties.
Pictogrammen met animatie vestigen de aandacht op specifieke toegangspunten, geven feedback van status tot status en voegen vreugde toe aan een interactie.
Klik op de afbeelding om de animatie weer te geven.
Met ons samenwerken op GitHub
De bron voor deze inhoud vindt u op GitHub, waar u ook problemen en pull-aanvragen kunt maken en controleren. Bekijk onze gids voor inzenders voor meer informatie.
Windows developer