Uwagi użytkownika Beko Drxs827a

• Artykuł
01/04/2023
• Czas czytania: 9 min

Dotyczy: Visual Studio Visual Studio dla komputerów Mac Visual Studio Code

Podstawy animacji

Najlepsze rozwiązania dotyczące animacji w programie Visual Studio

Postępuj zgodnie z tymi regułami, aby zapewnić spójne i przyjazne dla użytkownika style animacji w środowisku IDE programu Visual Studio.

• Bądź selektywny. Ogranicz animacje do tych, które służą konkretnym celom.

• Czas i szybkość są ważne, aby zapewnić szybkie i naturalne działanie przejścia:

• Ukończ animowane przejścia w ciągu jednej połowy sekundy (500 milisekund).

• Animacje, które występują często, muszą być wystarczająco szybkie, że nie przerywają przepływu pracy użytkownika. Obejrzyj animację w pętli i dostosuj czas, aż poczuje się dobrze.

• Animacje nie powinny być tak szybkie lub żmudne, że trudno jest zrozumieć, ale nie tak wolno, że sprawia, że jeden niecierpliwy dla przejścia do końca.

• Użyj zmiennej chronometrażu, aby podkreślić znaczenie. Na przykład podczas przechodzenia przez sekwencję elementów na diagramie klasy można przyspieszyć przechodzenie między elementami, a następnie zwolnić, aby skupić się na ważnych elementach.

• Używaj stopniowego złagodzenia bezliniowego od jednego stanu do drugiego, dając poczucie spokoju i naturalnego ruchu.

• Jeśli to możliwe, użyj subtelnej animacji na aktywowaniu, aby wskazać elementy interaktywne pod myszą.

• Jeśli w dużej mierze korzystasz z animacji w funkcjach, podaj metodę wyłączania ich lokalnie (dla wszystkich funkcji) jako opcji w oknie dialogowym Opcje narzędzi>.

• Tylko jedna animacja powinna wystąpić w danym momencie i przekazać tylko jedną informację. Więcej niż jeden obiekt przenoszony lub próbujący przekazać wiele rzeczy może być mylące.

• Subtelność jest ważna. W większości przypadków animacja nie musi wymagać uwagi użytkownika, aby służyła jej celowi. Subtelne zmiany w chronometrażu, sekwencjonowaniu i zachowaniu mogą znacząco wpłynąć na postrzeganie i może mieć wpływ na efektywną i nieskuteczną animację.

• Korzystając z animacji, aby zwrócić uwagę na coś, upewnij się, że warto przerwać uczenie myśli użytkownika.

• Podczas wyświetlania postępu lub stanu za pomocą animacji:

• Zatrzymaj pokazywanie ruchu postępu, gdy podstawowy proces nie jest rozwijany.

• Rozróżnianie nieokreślonych procesów od procesów określania.

• Upewnij się, że animacja ma możliwe do zidentyfikowania stany ukończenia i awarii.

• Zminimalizuj użycie animacji efektu, które pokazują stan i upewnij się, że mają rzeczywistą wartość, udostępniając dodatkowe informacje o rzeczywistym użyciu. Przykłady obejmują przejściowe zmiany stanu i sytuacje awaryjne

  Animacja nie jest:

• Nie używaj małych ruchów (ruch w małym śladze). Preferuj zanikanie i zmiany w przenoszonych obiektach.

• Nie używaj animacji, które mają miejsce na dużym obszarze nieruchomości ekranu. Niezależnie od rozmiaru ten styl animacji rozprasza uwagę użytkownika.

• Nie używaj animacji niepowiązanych z obiektem, z którymi użytkownik jest obecnie skoncentrowany na lub wchodzić w interakcje.

• Nie używaj animacji, które wymagają interakcji użytkownika w celu zresetowania stanu, na przykład zmuszanie użytkownika do reagowania na powiadomienie migające w celu zatrzymania migania. Interakcja z nimi w jakikolwiek sposób powinna wystarczyć, aby je odrzucić.

  Aby uzyskać więcej informacji na temat aplikacji dla tych najlepszych rozwiązań, zobacz Wzorce animacji.

  Metryki animacji

• System powinien wyraźnie reagować na gesty użytkownika w mniej niż 10 milisekundach.

• Animowane przejścia nie powinny trwać dłużej niż 500 milisekund.

• Jednym ze sposobów zrekompensowania przejścia, które wymagają dłuższych czasów, jest rozdzielenie ich na dwie części. Na przykład pierwsza część animacji może być pustym kontenerem zawartości (do 500 milisekund), a następnie zawartością zanikającą do kontenera (do 500 milisekund).

• W przypadku czasów ładowania, które można obliczyć, preferowany jest wskaźnik postępu determinatora (wskaźnik postępu wykonywanego procentowo).

• W przypadku czasów ładowania, których nie można obliczyć, odpowiedni jest wskaźnik zajęty, taki jak kursor lub osadzona animacja wirująca (ładowanie lub wskaźnik pracy).

  Animacja jako komunikator

  W interfejsie użytkownika programu Visual Studio animacja działa tylko jako narzędzie komunikacyjne. Służy do przekazywania różnych informacji, takich jak zmiany strukturalne w interfejsie użytkownika (na przykład po otwarciu lub zamknięciu menu). Animacja może ułatwić wizualizowanie zależnych od czasu zachowania złożonych systemów, takich jak wizualizacja postępu instalacji. Animacje mogą również służyć do przyciągania uwagi z alertami i powiadomieniami.

  Animacje interfejsu użytkownika zwykle działają na cztery sposoby: wizualizowanie, przyciąganie uwagi, symulowanie i czas odpowiedzi/wskaźniki postępu.

  Wizualizacja

  Animacja może podkreślić trójwymiarowy charakter obiektów i ułatwić użytkownikom wizualizowanie ich struktury przestrzennej. Aby to osiągnąć, animacja może wymagać obracania obiektu w pełnym kółku, powoli obracać go z powrotem i z powrotem lub przybliżyć obiekt i nieznacznie zwiększyć jego rozmiar, aby podkreślić przerzucanie lub fokus.

  Chociaż obiekty trójwymiarowe mogą być przenoszone za pomocą kontrolki użytkownika, projektant powinien określić z wyprzedzeniem (programowo lub ręcznie) jak najlepiej animować ruch, który zapewnia optymalne zrozumienie obiektu. Ta zaprogramowana animacja może następnie zostać aktywowana przez użytkownika, umieszczając kursor nad obiektem, podczas gdy ruch kontrolowany przez użytkownika wymaga od użytkownika zrozumienia, jak manipulować obiektem. Ogranicz ruch do jednej osi lub orientacji w danym momencie; skalowanie, obracanie lub tłumaczenie, ale nie należy wykonywać więcej niż jednego jednocześnie.

  Kategoria Wizualizowanie obejmuje aspekty danych, relacji, stanu, struktury, sekwencji i czasu.

  Dane

  Ilustrowanie złożonych i zmiennych informacji:

• Przechodzenie przez wizualizacje informacji, takie jak wykresy i wykresy

• Przechodzenie przez sekwencję, przewodnik z przewodnikiem i stronicowanie

• Wywoływanie szczegółów, wskazywanie i wyróżnianie określonych informacji

• Nakładanie szczegółów i dodatkowych informacji na temat elementu ukierunkowanego

• Morfowanie z jednej reprezentacji strukturalnej lub organizacyjnej do innej

• Przedstawianie zmian w czasie przy użyciu suwaków czasu, kół jog-and-shuttle i kontrolek transportu (odtwarzanie, zatrzymywanie i wstrzymywanie)

  Relacje

• Ilustrowanie sposobu, w jaki elementy odnoszą się do siebie nawzajem lub które elementy odnoszą się do danego elementu

• Pokaż hierarchie i relacje nadrzędny-podrzędny lub równorzędny

• Jeden element zduplikuje inny

• Jeden element minimalizuje do innego elementu

• Jeden element nastęcony do innego

  Stan

• Aktualizacje zawartości

• Fokus użytkownika i wybór

• Postęp

• błędy

  Struktura

• Przestawianie struktury w jednym węźle

• Zmiana orientacji

• Minimalizuj i maksymalizuj lub rozwijaj i zwijaj

  Sequence

• Sekwencja pokazu slajdów

• Przerzucanie obrazów

  Godzina

• Pokaż zmiany w czasie, upływie czasu i emisji ekranu

• Przenieś do kosza, cofnij i ponownie

• Przywracanie stanu historycznego

  Przyciągaj uwagę

  Jeśli celem jest zwrócenie uwagi użytkownika na jeden element z kilku lub zaalarmowanie użytkownika o zaktualizowanych informacjach, animacja może być odpowiednia. Na przykład strona startowa aplikacji może użyć przycisku Wprowadzenie, który przesuwa się w miejsce po załadowaniu strony.

  Z reguły ostatni ruchomy element na ekranie przyciąga uwagę użytkownika. W serii animowanych elementów uwaga użytkownika będzie podążać za ostatnim poruszającym się obiektem.

  Alerty

• Powiadamianie użytkownika, zwracanie uwagi, pokazywanie postępu

• Pokaż, że coś jest wykonywane poprawnie lub niepoprawnie albo pokazuje postęp lub zmiany postępu

• Monituj użytkowników podczas zadania, na przykład znalezienie dodatkowych informacji w trybie online lub informacje o bieżącym zadaniu

  Powiadomienia

• Zgłaszanie alertu użytkownikowi o warunku błędu

• Przerwij użytkownikowi, aby zobaczyć, czy chce uczestniczyć w czymś innym

• Delikatnie poinformuj użytkownika, że proces został ukończony lub zmieniony, na przykład po zakończeniu pobierania.

  Symulować

  Ta kategoria obejmuje fizyczność i wymiarowość.

• Ilustrowanie miejsca, z którego pochodzą obiekty lub gdzie przechodzą do

• Rozwijanie i zwijanie lub otwieranie i zamykanie

• Przesuwanie, przewijanie i obracanie strony

• Układanie i porządkowanie z

• Karuzela i akordeon

• Przerzucanie i obracanie interfejsu użytkownika

  Wskaźniki odpowiedzi i postępu

  Wskaźniki postępu mają kilka istotnych zalet:

• Zarówno determinate, jak i nieokreślone wskaźniki postępu uspokoić użytkownika, że system nie uległ awarii i pracuje nad problemem.

• Determinate wskaźniki dają użytkownikowi poczucie, jak daleko wzdłuż akcji postępuje, a także uczucie zbliżania się do końca.

  Wzorce animacji

  Omówienie

  Animacje w programie Visual Studio są przeznaczone do obsługi określonej funkcji bez zakłócania produktywności użytkowników. Zazwyczaj animacje w programie Visual Studio powinny być:

• Małe i nietrudne

• Naturalne i realistyczne

• Subtelne i stonowane

• Szybkie i wydajne

• Zrelaksowany, nie pospieszny

  Na tej ilustracji przedstawiono style animacji zalecane dla programu Visual Studio. Najczęściej używane są animacje ani subtelne animacje, takie jak zanikanie/zanikanie. Istnieje ograniczone zastosowanie animacji ruchu, takich jak rozwijanie i kontrakt, zmiana położenia X i Y oraz rotacja.

  
  Zalecane style animacji dla programu Visual Studio

  Pojawianie się i znikanie

  Za pomocą tego wzorca element przełącza się z widocznego do widoku poza widokiem i z powrotem bez animacji przejścia. com/pl-pl/visualstudio/extensibility/ux-guidelines/media/1202-b_appearanddisappear. png? view=vs-2022" alt="Appear and disappear animation" title="1202-b_AppearAndDisappear" data-linktype="relative-path"/>
  Pojawianie się i znikanie animacji

  Poprawne użycie

  Świeże elementy interfejsu użytkownika, które muszą natychmiast pojawić się lub zniknąć, aby użytkownik nie był ani rozproszony, ani nie utrudniał. Ponadto animacje wolno poruszające się mogą być postrzegane jako przeciąganie wydajności, które nie wystąpią w stylu pojawiania się i znikania.

  Nieprawidłowe użycie

  Przypadki, w których interfejs użytkownika jest wyświetlany tak nagle, że użytkownik nie ma pojęcia, co się stało, i dodanie animacji pomoże w zrozumieniu kontekstowym.

  Właściwości animacji

  Opóźnienie czasu wynosi zwykle zero sekund.

  Przykłady

• Automatyczne ukrywanie okien narzędzi

• Interfejs użytkownika edytora aktywowanego za pomocą klawiatury, taki jak IntelliSense i Pomoc dotycząca parametrów

• Regiony kodu rozwijania i zwijania

  Zanikanie i zanikanie

  W przypadku tego wzorca element interfejsu użytkownika przechodzi z niewidocznej (nieprzezroczystości 0%) do widocznej (100% nieprzezroczystości) lub odwrotnie. com/pl-pl/visualstudio/extensibility/ux-guidelines/media/1202-c_fadeinfadeout. png? view=vs-2022" alt="Fade-in and fade-out animation" title="1202-c_FadeInFadeOut" data-linktype="relative-path"/>
  Animacja zanikania i zanikania

  Poprawne użycie

  Jest to najczęściej zalecana animacja interfejsu użytkownika. Jest to subtelny efekt, który zwiększa zainteresowanie bez przerywania przepływu. W niektórych przypadkach użytkownik może nawet nie zdać sobie sprawy, że istnieje animacja, postrzegając płynny i przepływujący system interfejsu użytkownika.

  Właściwości animacji

• Początkowa nieprzezroczystość: 0% w przypadku zanikania, 100% w przypadku zanikania

• Zakończenie nieprzezroczystości: 100% dla zanikania, 0% w przypadku zanikania

• Czas trwania: 200 milisekund autonomiczne, 100 milisekund w przypadku użycia w ramach sekwencji animacji kombinacji

• Styl złagodzenia: Sine InOut

  Przykłady

• Menu otwarte i zamknij

• Przejścia na kartę Tło i pierwszy plan

  Mieszanie kolorów od A do B

  W tym wzorcu element interfejsu użytkownika zmienia się z koloru A na kolor B. com/pl-pl/visualstudio/extensibility/ux-guidelines/media/1202-d_colorblend. png? view=vs-2022" alt="Color blend animation" title="1202-d_ColorBlend" data-linktype="relative-path"/>
  Animacja mieszanki kolorów

  Poprawne użycie

  Jako animowane przejście, gdy element interfejsu użytkownika zmienia kolor z jednego kontekstu lub stanu na inny.

  Właściwości animacji

• Kolor początkowy: specyficzny dla interfejsu użytkownika

• Kolor końcowy: specyficzny dla interfejsu użytkownika

  Przykłady

• Przejścia stanu okna dokumentu (aktywne, ostatnie aktywne i nieaktywne)

• Przejścia stanu okna narzędzi (skoncentrowane i bez fokusu)

  Rozwijanie i kontrakt

  Za pomocą tego wzorca element interfejsu użytkownika rozwija się w kierunku X, Y lub w obu kierunkach. com/pl-pl/visualstudio/extensibility/ux-guidelines/media/1202-e_expandcontract. png? view=vs-2022" alt="Expand and contract animation" title="1202-e_ExpandContract" data-linktype="relative-path"/>
  Rozwijanie i animacja kontraktu

  Poprawne użycie

  Jako animowane przejście, gdy element interfejsu użytkownika zmienia rozmiar z jednego kontekstu na inny.

  Właściwości animacji

• Skala X:% lub określony wymiar (w pikselach)

• Skala Y:% lub określony wymiar (w pikselach)

• Pozycja zakotwiczenia: zazwyczaj w lewym górnym rogu (w przypadku języków od lewej do prawej) lub w prawym górnym rogu (w przypadku języków od prawej do lewej)

  Przykłady

• Panel Eksplorator architektury, rozwijanie i zwijanie

• Rozwiń i zwiń element strony początkowej programu Visual Studio 2017

  Zmiana położenia X-Y

  W tym wzorcu element interfejsu użytkownika zmienia położenie X lub Y albo oba te elementy. com/pl-pl/visualstudio/extensibility/ux-guidelines/media/1202-f_xypositionchange. png? view=vs-2022" alt="X-Y position change animation" title="1202-f_XYPositionChange" data-linktype="relative-path"/>
  Animacja zmiany położenia X-Y

  Poprawne użycie

  Jako animowane przejście, gdy element interfejsu użytkownika zmienia pozycję z jednego kontekstu na inny.

  Właściwości animacji

• Pozycja X i Y: specyficzne dla interfejsu użytkownika

• Położenie końca X i Y: specyficzne dla interfejsu użytkownika

• Ścieżka ruchu: brak

  Przykład

  Zmiana kolejności tabulacji

  Obrót

  Za pomocą tego wzorca element interfejsu użytkownika obraca się. com/pl-pl/visualstudio/extensibility/ux-guidelines/media/1202-g_rotate. png? view=vs-2022" alt="UI element rotation animation" title="1202-g_Rotate" data-linktype="relative-path"/>
  Animacja rotacji elementów interfejsu użytkownika

  Poprawne użycie

  Tylko dla nieokreślonego wskaźnika postępu wirowania.

  Właściwości animacji

• Stopień obrotu: 360

• Środek obrotu: środek obiektu

• Czas trwania: ciągły

  Przykład

  Nieokreślony wskaźnik postępu (wirowanie)

  Typowe akcje interfejsu użytkownika powłoki i zalecane animacje

  Otwórz kartę

  
  Otwórz animację na karcie

• Styl: pojawi się

• Czas trwania: zero sekund

  Zamknij kartę

  
  Animacja zamknięcia karty

• Styl: Zmiana położenia X

• Czas trwania: 200 milisekund

  Zmiana kolejności tabulacji

  
  Animacja zmiany kolejności tabulacji

  Zamykanie przestawnych dokumentów

  
  Zamykanie animacji przestawnych dokumentów

  Przejście stanu okna

  
  Animacja przejścia stanu okna

• Styl: aby zachować spójność z innymi oknami, niech bieżący system operacyjny zdefiniuj animację zamknięcia dokumentu.

  Otwórz menu

  
  Menu otwórz animację

• Styl: zanikanie

  Zamknij menu

  
  Menu zamknij animację

  Automatyczne ukrywanie okna narzędzia

  
  Automatyczne ukrywanie okna narzędzi odsłania animacji