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 de manier waarop de interface de interactie van gebruikers aangeeft en reageert. 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-taal 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 overgaat tussen zwevend, vastgelijnd en gemaximaliseerd, voelt het altijd 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
Surfaces die hetzelfde toegangspunt voor de gebruikersinterface delen, moeten dezelfde manier aanroepen en sluiten om consistentie te brengen in interacties. Elke overgang moet de timing, de versoepeling en de richting van andere elementen respecteren, zodat een oppervlak cohesief voelt.
Voorbeeld: Alle flyouts op de taakbalk worden omhoog geschoven wanneer ze worden aangeroepen en schuif omlaag 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 roepen een andere visual aan, afhankelijk van 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: Als u een venster minimaliseert, wordt een app-pictogram niet weergegeven, terwijl het herstellen van een app-pictogram omhoog gaat.
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-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 de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Haal de app op uit de Microsoft Store of haal de broncode op GitHub op
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 | Timing | Gebruikt voor |
|---|---|---|---|---|
| Directe ingang | Snel – In | Kubieke bezier(0,0,0,1) | 167, 250, 333 | Positie, schaal, draaiing |
| Bestaande elementen | Punt-naar-punt | Kubieke bezier(0,55,0,55,0,1) | 167, 250, 333 ms | Positie, schaal, draaiing |
| Directe uitgang | Snel – uit | Kubieke bezier(0,0,0,1) | 167 ms | Positie, schaal, draaiing (ALTIJD combineren met vervagen) |
| Zachte uitgang | Zacht – Uit | Kubieke 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 micro-interacties 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 hetzelfde oppervlak
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 de focus naar geselecteerde elementen en schakelen naadloos tussen de prioriteits- en niet-gerichte statussen.
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 behulp van 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