Nuta
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować się zalogować lub zmienić katalog.
Dostęp do tej strony wymaga autoryzacji. Możesz spróbować zmienić katalogi.
Ruch opisuje sposób, w jaki interfejs animuje i reaguje na interakcję użytkownika. Ruch w systemie Windows jest reaktywny, bezpośredni i kontekst odpowiedni. Udostępnia on opinie dotyczące danych wejściowych użytkownika i wzmacnia paradygmaty przestrzenne, które obsługują znajdowanie sposobów.
Wskazówka
W tym artykule opisano sposób stosowania języka Fluent Design do aplikacji systemu Windows. Aby uzyskać więcej informacji, zobacz Fluent Design — Motion.
Zasady dotyczące ruchu
Te zasady prowadzą do korzystania z ruchu w systemie Windows.
Połączone: Elementy akcji łączą się bezproblemowo
Elementy, które zmieniają położenie i rozmiar, powinny wizualnie łączyć się z jednym stanem do drugiego, nawet jeśli nie są połączone pod maską. Użytkownicy są kierowani do obserwowanych elementów przechodzących od punktu do punktu, obniżając obciążenie poznawcze zmian stanu statycznego.
Przykład: Gdy okno przechodzi między zmiennoprzecinkową, przyciąganą i zmaksymalizowaną, zawsze wygląda jak to samo okno.
Wskazówka
Aby zwiększyć dostępność i czytelność, ta strona używa obrazów nadal w widoku domyślnym. Możesz kliknąć obraz, aby wyświetlić animowaną wersję.
Spójne: Elementy powinny zachowywać się podobnie podczas udostępniania punktów wejścia
Powierzchnie, które współużytkują ten sam punkt wejścia interfejsu użytkownika, powinny wywoływać i odrzucać ten sam sposób, aby zapewnić spójność interakcji. Każde przejście powinno uwzględniać czas, złagodzenie i kierunek innych elementów, dzięki czemu powierzchnia czuje się spójna.
Przykład: Wszystkie wysuwane paski zadań przesuwają się w górę po wywołaniu i przesuwają się w dół po odrzuceniu.
Kliknij obraz, aby wyświetlić go animowany.
Dynamiczny: system reaguje i dostosowuje się do danych wejściowych i wyborów użytkownika
Jasne wskaźniki pokazują, że system rozpoznaje i dostosowuje się bezpiecznie do różnych danych wejściowych, postaw i orientacji. Aplikacje powinny opierać się na zachowaniach systemu operacyjnego, aby czuć się szybko reagujące, aktywne i wspomagać użycie w zależności od metod wejściowych.
Przykład: Ikony paska zadań są rozłożone, gdy klawiatury są odłączone. Krawędzie okien wywołują inną wizualizację w zależności od kursora lub dotyku.
Kliknij obraz, aby wyświetlić go animowany.
Wspaniałe: Nieoczekiwane chwile radości z celem
Ruch dodaje osobowość i energię do doświadczenia, aby przekształcić proste działania w chwile radości. Te chwile są zawsze krótkie i ulotne i pomagają wzmocnić działania użytkowników.
Przykład: Minimalizacja okna powoduje, że ikona aplikacji odbija się w dół, a przywracanie odbija ikonę aplikacji w górę.
Kliknij obraz, aby wyświetlić go animowany.
Zaradne: korzysta z istniejących kontrolek, aby zapewnić spójność tam, gdzie to możliwe
Unikaj animacji niestandardowych tam, gdzie to możliwe. Używaj zasobów animacji, takich jak kontrolki WinUI na potrzeby przechodzenia stron, fokusu na stronie i mikro interakcji. Jeśli nie możesz używać kontrolek WinUI, naśladuj istniejące zachowania systemu operacyjnego w zależności od tego, gdzie znajduje się punkt wejścia aplikacji.
Przykład:przejścia strony, połączone animacje i animowane ikony to zalecane kontrolki WinUI, które dodają wspaniały i niezbędny ruch do aplikacji.
Kliknij obraz, aby wyświetlić go animowany.
Przykłady
Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub
Usage
Właściwości animacji
Ruch w systemie Windows jest szybki, bezpośredni i kontekstowy. Krzywe chronometrażu i złagodzenia są dostosowywane na podstawie celu animacji, aby stworzyć spójne środowisko.
| Przeznaczenie | Definition | Łatwość | Czas | Używane dla |
|---|---|---|---|---|
| Bezpośrednie wejście | Szybkie — w | Bezier sześcienny (0,0,0,1) | 167, 250, 333 | Położenie, skalowanie, rotacja |
| Istniejące elementy | Punkt-punkt | Bezier sześcienny(0,55,0,55,0,1) | 167, 250, 333 ms | Położenie, skalowanie, rotacja |
| Bezpośrednie wyjście | Szybkie — wyjście | Bezier sześcienny (0,0,0,1) | 167 ms | Pozycja, skalowanie, rotacja (ZAWSZE łącz się z wyblakłym) |
| Delikatne wyjście | Miękkie – out | Bezier sześcienny (1,0,1,1) | 167 ms | Położenie, skalowanie |
| Minimum | Zanikanie — w + na wyjęcie | Liniowy | 83 ms | Nieprzezroczystość |
| Silne wejście | Elastyczne w (3 ramki kluczowe) | (poniżej 3 wartości) | (poniżej 3 wartości) | Położenie, skalowanie |
| Ramka kluczowa 1 | Sześcienna-Bezier(0,85, 0, 0, 1) | 167 ms | ||
| Ramka kluczowa 2 | Sześcienna-Bezier(0,85, 0, 0,75, 1) | 167 ms | ||
| Ramka kluczowa 3 | Sześcienna-Bezier(0,85, 0, 0, 1) | 333 ms |
Sterowanie
W tej wersji systemu Windows wprowadzono celowe mikro-interakcje w kontrolkach WinUI . Dodaj te kontrolki do aplikacji, aby ułatwić organizowanie informacji i ułatwić użytkownikom aplikacji przejście ze strony do strony, warstwy na warstwę i stan na stan interakcji.
Przejście strony: przejścia między stronami w obrębie tej samej powierzchni
Przechodzenie między stronami umożliwia płynne przechodzenie ze strony do strony i konfigurowanie wskazówek animacji w celu przestrzegania przepływu aplikacji.
Przejścia stron prowadzą użytkownika do zawartości przychodzącej i wychodzącej, obniżając obciążenie poznawcze.
Kliknij obraz, aby wyświetlić go animowany.
Połączona animacja: przejścia między warstwami na tej samej stronie
Użyj połączonych animacji , aby wyróżnić określone elementy informacji na stronie lub powierzchni, zachowując kontekst.
Połączone animacje koncentrują się na wybranych elementach i bezproblemowo przechodzą między stanami skoncentrowanymi i nieprzystawionym.
Kliknij obraz, aby wyświetlić go animowany.
Animowana ikona: dodaje radość i ujawnia informacje za pośrednictwem mikro interakcji
Użyj animowanych ikon , aby zaimplementować lekkie, wektorowe ikony i ilustracje z ruchem przy użyciu animacji Lottie .
Animowane ikony zwracają uwagę na konkretne punkty wejścia, przekazują opinie ze stanu do stanu i dodają radość interakcji.
Kliknij obraz, aby wyświetlić go animowany.
Współpracuj z nami na GitHub
Źródło tej treści można znaleźć na GitHubie, gdzie można także tworzyć i przeglądać problemy oraz pull requesty. Więcej informacji znajdziesz w naszym przewodniku dla współautorów.
Windows developer