Animacje i przejścia

Strategiczne wykorzystanie animacji i przejść może ułatwić zrozumienie programu, czuć się płynniej, bardziej naturalne i o wyższej jakości i być bardziej angażujące. Ale bezinteresowne wykorzystanie animacji i przejść może sprawić, że program rozprasza, a nawet irytujący.

Animacje dają wygląd ruchu lub zmiany w czasie. Użyj animacji, aby przekazać opinię, wyświetlić podgląd akcji, pokazać relację między obiektami, zwrócić uwagę na zmianę lub wyjaśnić zadanie wizualnie.

System Microsoft Windows używa animacji flash w tle, aby przekazać opinię, że obiekt został kliknięty.

Przejścia to animacje służące do utrzymywania orientacji użytkowników podczas zmian stanu interfejsu użytkownika i manipulowania obiektami oraz wprowadzania tych zmian są płynne, a nie jarring. Dobre przejścia czują się naturalne, często dając iluzję, że użytkownicy wchodzą w interakcje z rzeczywistymi obiektami.

Gadżety pulpitu z systemem Windows używają płynnych przejść między ich zwięzłymi i szczegółowymi stanami.

Ogólnie rzecz biorąc, najlepsze animacje i przejścia są używane do komunikowania się użytkownikom niewerbalnie i w celu wprowadzenia zmian stanu bardziej naturalne i mniej zauważalne. Natomiast najmniej skuteczne są bezinteresowne, że nie komunikują się niczego ani nie zwracają niepotrzebnej uwagi. Animacje najlepiej używać jako pomocniczej formy komunikacji. Powinni oni komunikować informacje, które są przydatne, ale nie krytyczne i dostępne, użytkownicy powinni mieć możliwość określenia równoważnych informacji za pomocą innych środków.

Uwaga: wytyczne dotyczące znakowania oprogramowania, dźwiękui ułatwień dostępu są prezentowane w oddzielnych artykułach.

Czy jest to właściwy interfejs użytkownika?

Aby zdecydować, rozważ następujące pytania.

Animacje

Czy obowiązują następujące warunki?

• Animacja wizualnie komunikuje się z czymś przydatnym, takim jak przekazywanie opinii, pokazywanie relacji, przyczyn i efektów lub zwracanie uwagi na ważne zmiany.
• Wyświetlanie animacji nie jest niezbędne. Równoważne informacje można uzyskać w inny sposób. Użytkownicy mogą nie korzystać z animacji, jeśli:
  • Wyłączyli animacje.
  • Ich uwaga jest gdzie indziej.
  • Są one niedowidzące.
  • Animacja jest zaciemniana przez inne okno.
  • Animacja nie jest odtwarzana z powodu niewystarczającej wydajności systemu.
• Animacja nie wpływa na produktywność użytkownika. Albo:
  • Dzieje się to szybko (200 milisekund lub mniej).
  • Nie zakłóca to interakcji ani nie może zostać przerwane.
  • Użytkownik musi mimo to czekać.
• Animacja nie wpływa na przepływ użytkownika.
  • Jest to zarówno w centrum uwagi użytkownika, jak i zwraca uwagę na coś poza centrum uwagi, które jest ważne lub przydatne podczas wykonywania zadania.
  • Jest łatwo ignorowany, nie rozpraszający lub irytujący.
  • To nie staje się męczące. Użytkownicy nadal uważają to za odpowiednie i przyjemne nawet po wielokrotnym wyświetleniu.

Jeśli tak, rozważ użycie animacji.

Przejścia

Czy obiekt lub scena zmienia stan i czy wszystkie powyższe warunki do używania animacji, jak również którekolwiek z poniższych warunków mają zastosowanie?

• Zmiana stanu jest koncepcyjnie dezorientująca, myląca lub w inny sposób trudna do zrozumienia.
• Zmiana stanu jest wizualnie jarring, brakuje ciągłości lub gładkości lub; lub wydaje się nienaturalne, niepolished lub niskiej jakości, zwłaszcza jeśli obejmuje duży obszar ekranu.
• Użycie przejścia spowoduje szybsze wyświetlenie zmiany stanu.
• Zmiana stanu jest godna szczególnej uwagi użytkownika.

Jeśli tak, rozważ użycie przejścia.

Pojęcia dotyczące projektowania

Animacje i przejścia to skuteczny sposób wizualnego przekazywania informacji, które w przeciwnym razie wymagają wyjaśnienia tekstu lub mogą zostać pominięte przez użytkowników.

niepoprawne:

zrzut ekranu

poprawna:

Użycie animacji komunikuje te same informacje, ale w naturalny, nietrudny sposób. Co byś wolał zobaczyć tysiąc razy?

Animacje i przejścia nie muszą zwracać uwagi na sukces. W rzeczywistości są one często używane, aby uniknąć zwracania uwagi na mechanikę programową, o której użytkownicy nie muszą wiedzieć. Wiele udanych animacji jest tak naturalnych, że użytkownicy nie są nawet świadomi ich; raczej użytkownicy zauważyliby tylko ich nieobecność. Częstotliwość występowania zwiększa potrzebę subtelności, więc oszczędzaj efekty, które wymagają uwagi na rzadko występujące zdarzenia, które naprawdę zasługują na uwagę.

Przejście menu Start, które pozwala uniknąć zwracania uwagi.

Poza ułatwieniem zrozumienia i łatwiejszego działania programu, dobrze zaprojektowane animacje i przejścia to doskonały sposób dodawania osobowości, charakteru i stylu do programu. Mogą sprawić, że środowisko użytkownika będzie bardziej immersywne i angażujące, dając mu naturalne, rzeczywiste uczucie.

System Windows 7 wyróżnia przyciski paska zadań na podstawie bieżącego położenia myszy i koloru ikony programu. To podejście jest wizualnie atrakcyjne, ale subtelne, przekazując skromną osobowość.

Jednak animacje i przejścia są najbardziej skuteczne i mile widziane, gdy służą jasnemu celowi. Powinny one służyć do poprawy użyteczności, gładkości i przepływu oraz postrzegania jakości, bez znacznego uszkodzenia wydajności.

Podczas gdy niektóre typy animacji są używane do zwracania uwagi użytkownika, upewnij się, że uwaga jest zasłużona i godna przerwania pociągu myśli użytkownika. Ludzkie oko jest wrażliwe na ruch, zwłaszcza ruch peryferyjny. Może być trudno użytkownikom skoncentrować się, gdy jest przycisk paska zadań lub obracająca się ikona obszaru powiadomień. Unikaj używania animacji do przerywania lub rozpraszania użytkowników lub zwracania uwagi na rzeczy, które nie uzasadniają uwagi użytkownika.

niepoprawne:

Programy nie powinny migać przycisku paska zadań, chyba że użytkownicy muszą zrobić coś ważnego natychmiast. W takim przypadku jedyną rzeczą, którą użytkownik musi wykonać, jest aktywowanie programu.

Używaj animacji i przejść, ponieważ program ich potrzebuje, nie tylko dlatego, że możesz. W przypadku ułatwień dostępu nie używaj animacji jako jedynego sposobu przekazywania podstawowych informacji. Upewnij się, że użytkownicy mogą uzyskać równoważne informacje w inny sposób.

Atrybuty dobrych animacji i przejść

Dobre animacje i przejścia mają właściwą równowagę między tymi atrybutami:

• Są wyraźnie celowe. Dobre animacje są tam, ponieważ muszą być, czy komunikować się z informacjami, sprawić, aby interakcja czuła się prawdziwa, czy zwrócić uwagę na coś godnego uwagi. I celowe animacje są dokładne; jeśli animacja pokazuje, że zadanie jest wykonywane, jest to spowodowane tym, że zadanie jest w rzeczywistości wykonywane.

niepoprawne:

W tym przykładzie animacja pokazuje, że ładowana jest w pełni naładowana bateria.

• Wygląd gładki i ciągły. Dobre animacje płynnie usuwają szwy między zmianami stanu sceny lub elementu, pokazując relacje i zapewniając poczucie miejsca i kontekstu. Ciągłość pomaga użytkownikom zrozumieć, skąd się znajdują, i jak wrócić do miejsca, z którego pochodzą.

Okno paska zadań systemu Windows 7 w wersji zapoznawczej jest przekształcane w celu zapewnienia ciągłości, gdy użytkownik przechodzi z jednego programu do innego.

• Są realistyczne. Dobre animacje symulują rzeczywiste właściwości i zachowanie obiektu. Pomaga to użytkownikom przewidzieć i zrozumieć wyniki ich interakcji. Nie musisz modelować świata rzeczywistego dokładnie, ale jeśli używasz realistycznych animacji, musisz zachować ich spójność ze światem rzeczywistym. Użytkownicy nigdy nie powinni być zaskoczeni lub zdezorientowani wynikami, zwłaszcza w przypadku animacji używanych do bezpośredniej manipulacji.

W tym przykładzie animacja "wyjdź z drogi" używana przez pasek zadań systemu Windows 7 jest bardziej realistyczna niż statyczny punkt wstawiania.

• Są autentyczne. Nawet obiekty, które nie znajdują się w świecie rzeczywistym, mogą wydawać się naturalne, opierając się na rzeczywistym zachowaniu innego, ale powiązanego obiektu. Ta metafora działa tylko wtedy, gdy relacja wyraźnie komunikuje zamierzony cel i zachowanie.

W tym przykładzie animacja "squeegee" okna używana przez system Windows 7 jest autentyczna, ponieważ jest zgodna z tym, jak okna szklane mogą zachowywać się w świecie rzeczywistym.

• Użyj mapowania naturalnego. Mapowania naturalne są fizyczne lub kulturowe. Na przykład oparte na kulturze mapowanie naturalne może zaczynać się od faktu, że w kulturach zachodnich ludzie czytają od lewej do prawej. W związku z tym, aby wyrazić sekwencję czasową obiektów, środkowy obiekt jest bieżący, obiekty po lewej stronie pochodzą z przeszłości, a obiekty po prawej stronie znajdują się w przyszłości. W przyszłości jest wskazywany ruch od lewej do prawej.

W tym przykładzie kontrolka Windows Media Player ma naturalne mapowanie, ponieważ odtwarzanie przenosi pozycję od lewej do prawej.

• Mieć osobowość. Dobrze wybrane animacje to doskonałe sposoby dodawania osobowości, charakteru i stylu do programu. Mogą one sprawić, że środowisko użytkownika będzie bardziej wciągające i atrakcyjne. Podczas gdy typ animacji określa, co komunikuje, określony sposób, w jaki animacja jest wykonywana, pokazuje osobowość programu. Dobre animacje projektują właściwą osobowość dla twojego programu, zarówno poważne, jak i kapryśne, czy gdzieś między.

W tym przykładzie wykorzystanie animowanego tekstu i dynamicznej perspektywy Zune pomaga kształtować swoją osobowość.

• Wyglądaj i czuj się szybko. Dobre animacje nie szkodzą produktywności użytkownika, blokując użytkownikom inne interakcje ani zmuszając użytkowników do oglądania. Bez względu na to, jak naturalne i angażujące są animacje programu, nikt nie chce czekać na nich wyłącznie. Dobre animacje wyglądają również szybko bez żarliwego startu z miękkim lądowaniem. Dynamiczne animacje mogą również szybko komunikować się ze swoim celem. Użytkownicy nie powinni oglądać animacji przez długi czas, aby dowiedzieć się, co robi lub kiedy jest wykonywana. W przypadku bezpośredniej manipulacji dynamiczne animacje są niezbędne do utrzymania bezpośredniego i angażującego rzeczywistego poczucia. Aby czuć się bezpośrednio, punkty kontaktowe obiektu muszą pozostać pod wskaźnikiem płynnie w trakcie manipulacji. Każde opóźnienie, chybienie odpowiedzi lub utrata kontaktu niszczy postrzeganie bezpośredniej manipulacji.

W tym przykładzie przejście przesuwania dotykowego działa szybko, utrzymując punkt kontaktu pod palcem użytkownika podczas manipulowania.

• Przyciągaj odpowiedni poziom uwagi. Dobre animacje są zwykle subtelne i przyciągają tylko uwagę wymaganą do realizacji ich celu. W rezultacie nie są rozpraszające, irytujące, zbyt złożone, zbyt długie lub powtarzające się. Nie stają się męczące po wielokrotnych oglądania.

W tym przykładzie wyszukiwanie systemu Windows tymczasowo zwraca uwagę na pasujące wyrazy wyszukiwania, a następnie zanika w dół.

• Spójrz specjalnie tylko wtedy, gdy jest naprawdę wyjątkowy. Częstotliwość zwiększa konieczność subtelności, więc typowe interakcje wymagają prostych animacji, które komunikują prosty pomysł w prosty sposób. Zarezerwuj specjalne, złożone animacje dla specjalnych, rzadkich doświadczeń.

W tym przykładzie system Windows używa animacji zwracanej uwagi podczas uruchamiania, aby środowisko było wyjątkowe, ale taka animacja byłaby nieodpowiednia w innym miejscu.

Będziesz wiedzieć, że udało Ci się osiągnąć właściwą równowagę, gdy ogólne środowisko zostanie skrzywdzone, jeśli którykolwiek z tych atrybutów został usunięty.

Tworzenie słownictwa animacji

Dobre animacje dotyczą efektywnej komunikacji wizualnej, a spójność ma kluczowe znaczenie dla ich skuteczności. Jeśli używasz określonego przejścia, takiego jak wypychanie sceny z prawej strony, aby przejść do następnej sceny, powinno to być jedyne przejście używane w tym celu i że przejście nie powinno być używane do żadnego innego celu. Przypisywanie różnych znaczeń do tej samej animacji szkodzi jego zdolności do komunikowania się. Przypisując konkretne animacje i przejścia do określonych znaczeń, tworzysz słownictwo animacji.

Ten problem dotyczy animacji i przejść, które mają znaczenie, a nie ogólnych, do których użytkownicy nie mogą przypisywać znaczenia lub do tych, których celem jest niezauważalne. Na przykład animacje, takie jak zanikania i efekty specjalne, takie jak rozpuszczone, nie mają szczególnego znaczenia, więc mogą być używane swobodnie.

Dobre słownictwo przypisuje animacje, które modelują rzeczywisty świat obiektu, zachowanie fizyczne. Jeśli musisz przypisać animację do obiektu lub akcji, która nie ma rzeczywistego odpowiednika, wybierz animację pokazującą, jak obiekt może zachowywać się tak naprawdę.

Chociaż menu Start nie jest obiektem świata rzeczywistego, jego efekt aktywowania świeci jak rzeczywisty obiekt może zostać aktywowany.

Każda animacja w słownictwie musi być wyraźnie odrębna. Animacje powinny mieć podobne zachowania tylko wtedy, gdy skojarzone z nimi akcje są podobne. Na przykład przejścia ruchu sugerują nawigację, dzięki czemu można użyć przejść ruchu z różnych kierunków, aby wskazać różne typy nawigacji.

Wiesz, że animacje i przejścia nie komunikują się dobrze, gdy użytkownicy znajdą wyniki mylące, zaskakujące lub nieoczekiwane. Ogólnie rzecz biorąc, lepiej jest osiągnąć jeden cel dobrze niż wiele celów nie tak dobrze.

Najlepiej, aby słownictwo animacji było kompleksowe we wszystkich obszarach programu, które ich potrzebują. Jeśli tylko kilka interakcji ma naturalne animacje, to zwróci uwagę na te, które nie.

Aby dowiedzieć się więcej na temat słownictwa animacji systemu Windows, zobacz sekcję Wzorce użycia tego artykułu.

Projektowanie właściwej osobowości

Podczas gdy typ animacji określa, co komunikuje, konkretny sposób, w jaki animacja jest wykonywana, przemawia do osobowości programu i wzmacnia jego markę.

Osobowość twojego programu powinna odzwierciedlać charakter swoich zadań i osobowość użytkowników, więc nie jest to arbitralny wybór. Raczej dobrze zaprojektowana osobowość powinna czuć się autentyczna; nigdy nie próbuj go wymusić. Osobowość powinna mieć emocjonalne połączenie z użytkownikiem. Niektóre czynniki, które należy wziąć pod uwagę:

• Zadania: poważne lub zabawne; opcjonalne lub wymagane.
• Konsekwencje: poważne lub drobne.
• koszt : bezpłatne lub zakupione; w przypadku zakupu, średnio wycenione lub kosztowne.
• Fokus użytkownika: Stosunkowo wąską grupę użytkowników docelowych lub odbiorców ogólnych.
• Środowisko użytkownika: Professional, casual lub home.
• Wiek użytkownika: młodszy lub starszy.
• Częstotliwość użycia: częste lub rzadkie.

Połączenie tych czynników pomaga określić odpowiednią osobowość dla programu. Poniżej przedstawiono kilka odpowiednich kombinacji typowych typów programów:

aplikacje zwiększające produktywność

Oczywiście aplikacje zwiększające produktywność muszą skupić się na produktywności. Chociaż kilka specjalnych środowisk może wyróżniać się, większość innych animacji powinna mieć następujące cechy:

• Mały
• Naturalne, realistyczne
• Subtelne, stonowane
• Szybka, wydajna
• Rozluźniony

narzędzi

Narzędzia są zwykle używane krótko, więc korzystanie z animacji może być bardziej agresywne:

• Realistyczne, ilustracyjne, objaśniające
• Bezpieczny
• Angażowanie

Entertainment, gry

Ponieważ celem tych programów jest zaangażowanie i rozkoszowanie użytkowników, animacje i przejścia mogą być znacznie bardziej agresywne dzięki tym cechom:

• Duże (prawdopodobnie staje się integralną częścią doświadczenia)
• Sztuczna, surrealistyczna
• Wpływowe, żywe
• Emocjonalne, zabawne, kapryśne
• Energiczny

Tworzenie emocjonalnego związku jest tak ważne dla programów rozrywkowych, że dopuszczalne jest zginanie niektórych zasad, jeśli to pomaga sprawić, że użytkownicy zakochają się w programie. Na przykład dopuszczalne jest, jeśli animacja lub przejście stanie się męczące po setnym czasie, jeśli większość użytkowników jest mało prawdopodobne, aby używać programu, który często.

Ogólnie rzecz biorąc, animacje i przejścia, które są małe, naturalne, oszczędne, ale zrelaksowane są najbezpieczniejszym zakładem. Przejścia z tymi cechami zwykle zajmują najkrótszą ścieżkę od początku do końca, szybko zaczynają się, kończą się miękko i nie przechoczą. Ponadto dobrze zaprojektowane przejścia są zaprojektowane tak, aby działały dobrze w całym zakresie odległości, w których będą używane.

Wydajność animacji

Podczas projektowania animacji upewnij się, że nie wpływają one na zdolność użytkowników do wydajnego korzystania z programu. Ogólnie rzecz biorąc, sprawiają, że animacje są wystarczająco powolne, aby zrealizować swój cel, ale wystarczająco szybko, że nie zakłócają reakcji, wymagają zbyt dużej uwagi lub stają się męczące.

niepoprawne:

Chociaż ta strona obracania animacji ma wciągające, rzeczywiste działanie zmniejsza produktywność użytkowników, poświęcając więcej czasu na obracanie stron.

Krótkie przejścia (200 milisekund lub mniej) to szczególny przypadek (szczególnie wtedy, gdy często pracują z opóźnieniem), ponieważ użytkownicy będą wiedzieć, że muszą poczekać na sekundę. Użytkownicy są gotowi czekać na takie animacje, jeśli:

• Postrzegane oczekiwanie jest bardzo krótkie (200 milisekund lub mniej).
• Przejście sprawia, że interakcja jest bardziej płynna i naturalna.
• Przejście sprawia, że interakcja jest bardziej elastyczna.
• Każde opóźnienie pomaga zapewnić użytkownikowi kontrolę nad interakcją.

Użytkownicy zaakceptują krótkie opóźnienie zmiany kolejności animacji przycisku paska zadań, ponieważ jest bardzo krótki i sprawia, że interakcja jest bardziej naturalna.

Istnieją trzy sposoby, w których animacje mogą niekorzystnie wpływać na wydajność: szybkość, czas reakcji i postrzeganie.

W przypadku szybkości niektóre animacje to wizualne fornirowanie zadań intensywnie korzystających z procesora CPU, więc ostatnią rzeczą, którą należy wykonać, jest wolniejsze wykonywanie tych zadań przy użyciu animacji intensywnie korzystających z procesora CPU. Najbardziej intensywnie korzystające z procesora CPU animacje ("intensywne" animacje) mają tendencję do następujących:

• Należy niezależnie przenosić wiele elementów.
• Graj na długi czas trwania lub odległość.
• Zaangażuj dużą ilość miejsca na ekranie.
• Są matematycznie intensywne.

Animacje z mniejszym wpływem na wydajność:

• Zaangażuj pojedynczy obiekt.
• Graj przez krótki czas trwania lub odległość.
• Zaangażuj niewielką ilość miejsca na ekranie.
• Nie są intensywnie obciążane matematycznie.

Aby zapewnić dobrą wydajność, intensywne animacje powinny być używane tylko w przypadku zadań, które nie intensywnie korzystają z procesora CPU, podczas gdy animacje lekkie mogą być używane w dowolnym miejscu.

Aby zapewnić czas odpowiedzi, większość animacji i przejść powinna być zaprojektowana tak, aby użytkownicy mogli wchodzić w interakcje podczas uruchamiania animacji. Jeśli animacja nie jest częścią procesu, należy ją niezależnie od podstawowej interakcji użytkownika i umożliwić użytkownikom przerwanie jej działania.

Animacja może nie mieć negatywnego wpływu na wydajność zadania w rzeczywistości, ale użytkownicy mogą mieć przekonanie, że to robi. Na przykład nie należy używać animacji, która wydaje się ciężka w przypadku powolnego zadania intensywnie korzystającego z procesora CPU, nawet jeśli nie zaszkodzi wydajności, ponieważ użytkownicy mogą stwierdzić, że animacja jest powodem, dla którego zadanie działa wolno. Jeśli coś wygląda wolno, będzie działać wolno, więc lepiej użyć animacji, które czują się proste, lekkie i szybkie. Używanie animacji z początkowymi początkami przystawki dla zadań intensywnie korzystających z procesora CPU pomaga.

Ryzykowne:

Chociaż animacja w oknie dialogowym kopiowania plików systemu Windows nie szkodzi wydajności kopiowania plików, ryzyko, że użytkownicy uważają, że tak.

również ryzykowne:

W tym przykładzie powolny wygląd animacji postępu na pasku adresu Eksploratora Windows sprawia, że niektóre zadania wyglądają boleśnie powoli.

Animacje i przejścia nie mają żadnej wartości, jeśli ich jakość jest tak słaba, że sprawiają, że środowisko jest mniej płynne i mniej angażujące. Aby utrzymać ich jakość, animacje powinny być zaprojektowane tak, aby można było bezpiecznie obniżyć sprawność, gdy wystarczające zasoby systemowe nie są dostępne. Animacje mogą ulec pogorszeniu dzięki zmianom, które wymagają mniejszej ilości zasobów (takich jak krótsza długość lub niższa szybkość klatek), a nawet nie są uruchomione w ogóle. Niezależnie od dostępnych zasobów upewnij się, że animacje mają wysoką jakość i wyglądają jak animacje zamiast błędów oprogramowania.

Na koniec, jeśli użytkownicy uważają, że animacje i przejścia programu odejmują od ich produktywności, istnieje duża szansa, że niektórzy użytkownicy będą chcieli je wyłączyć. Aby zapewnić obsługę tej możliwości, należy przestrzegać opcji Wyłącz wszystkie niepotrzebne animacje znalezione w Centrum ułatwień dostępu systemu Windows.

Przyciąganie odpowiedniego poziomu uwagi

Chociaż tylko niektóre rodzaje animacji i przejść zostały specjalnie zaprojektowane w celu przyciągnięcia uwagi użytkownika, powinny one zostać zaprojektowane tak, aby przyciągnąć odpowiedni poziom uwagi, aby spełnić swój cel. Jakie są różne sposoby przyciągania uwagi i jak wybrać właściwy?

efekty animacji

Różne efekty animacji przyciągają różne poziomy uwagi. Poniższa lista zawiera podsumowanie najbardziej typowych metod, począwszy od najbardziej zwracanych uwagi:

• Szybkie. Wymaga natychmiastowej uwagi. Może przerwać koncentrację użytkowników bez względu na to, gdzie występuje.
• Umiarkowane. To samo, ale wymaga mniejszej uwagi z niższą częstotliwością.
• Odbijając. Zauważalne w wizji obwodowej i stosunkowo wymagające w przyrodzie. Użytkownicy mogą zauważyć, ale mogą nadal skoncentrować się gdzie indziej tylko wtedy, gdy czas trwania jest krótki.
• Ruch. Zauważalne w wizji peryferyjnej, ale nie wymagające. Jednak złożone lub 3-W ruchy przyciągają większą uwagę niż proste lub 2-W ruchów. Użytkownicy mogą zauważyć, ale nadal mogą się skoncentrować w innym miejscu.
• Umiarkowane pulsowanie. Zauważalne, ale nie rozpraszające wzroku peryferyjnego. Użytkownicy mogą nadal się skoncentrować w innym miejscu. Może pulsować jasność, kolory i rozmiary.
• Powolne pulsowanie/świecące. Zauważalne, ale subtelne. Przyciąga większą uwagę niż efekt statyczny, ale użytkownicy mogą nie zauważyć animacji, chyba że już wyglądają.
• Zanikanie. Jeszcze mniej zauważalne. Przyciąga większą uwagę niż efekt statyczny, ale użytkownicy mogą nie zauważyć animacji, chyba że już wyglądają.
• Statyczne wyróżnienie/przełącznik. Zauważalne, jeśli użytkownicy zdecydują się spojrzeć, ale nie wymagają uwagi, jeśli jest to gdzie indziej.
• Otoczenie/naturalne. Celowo nie zauważalne poprzez naturalny, rzeczywisty wygląd.

Aby określić właściwe podejście do programu lub funkcji, rozważ, jak te czynniki odnoszą się do scenariuszy funkcji.

Załóżmy na przykład, że projektujesz program wiadomości błyskawicznych i ktoś właśnie wysłał użytkownikowi wiadomość. Ten scenariusz wymaga uwagi użytkownika, powinien być zauważalny w dowolnym miejscu i zazwyczaj użytkownik będzie chciał szybko zareagować. Ten scenariusz sugeruje, że umiarkowana animacja byłaby dobrym wyborem. Załóżmy natomiast, że chcesz poinformować użytkowników, że zadanie drukowania zostało ukończone. Użytkownicy powinni być w stanie nadal skoncentrować się i pracować wydajnie w innym miejscu i jest to dopuszczalne, jeśli użytkownicy nie zauważą. Ten scenariusz sugeruje, że umiarkowane lub powolne pulsowanie lub świecenie byłoby dobrym wyborem.

czas trwania

Odpowiedni czas trwania animacji zwracanej uwagi zależy od scenariusza i określonego typu używanej animacji. Im więcej uwagi wymaga efekt animacji, tym krótszy powinien być czas trwania. Chociaż bardzo subtelne efekty, które wymagają niewielkiej uwagi (jak powolne pulsowanie) mogą być odtwarzane w nieskończoność, uwagę wymagających efektów należy grać tylko między 1 a 3 sekundami. Nic dłuższego ryzyka sprawia, że animacja jest przytłaczająca i irytujące.

W systemie Windows 7 pasek zadań na uwagę tylko przez sekundę. Dłużej byłoby irytujące.

rozpad efektu

Należy zaprojektować animacje z uwagi na podstawie założenia, że jeśli użytkownicy nie reagują od razu, jest to spowodowane tym, że są zajęci robieniem czegoś innego i nie chcą być przerywane. W związku z tym twoim celem powinno być przyciągnięcie uwagi bez domagania się go.

Aby uzyskać właściwą równowagę przyciągania uwagi bez jej domagania się, rozkładaj intensywność efektu w czasie. Na przykład, aby przyciągnąć uwagę, możesz początkowo sprawić, że efekt będzie silny, ale następnie szybko spowolnić efekt. Dzięki temu atrakcyjna moc zależy głównie od początkowego efektu, ale ogólne wrażenie użytkownika jest określane głównie przez jego zakończenie.

zrzut ekranu

W systemie Windows 7 efekt flash paska zadań spowalnia na końcu.

Co z powerpointem?

Przejścia programu Microsoft PowerPoint często celowo naruszają te wytyczne, ponieważ są one przeznaczone do zwracania uwagi na przejścia slajdów i wymagają od użytkowników oczekiwania na nie. Ponadto nie mają żadnego szczególnego znaczenia, więc nie komunikują się poza faktem, że slajd się zmienia.

Przejścia w stylu programu PowerPoint, gdy są używane prawidłowo, mają następujące cele:

• Przerywają długie prezentacje na mniejsze fragmenty, zmuszając prezentera do wstrzymania.
• Zwracają uwagę publiczności na zmiany w prezentacji, pomagając ludziom skupić się, jeśli ich umysły się zastanawiały.
• Dają one rytm prezentacji, aby nie czuł się monotonny ani przytłaczający.
• Ich styl odzwierciedla osobowość prezentera lub materiału.

Chociaż są to ważne cele prezentacji, takie przejścia zwróciłyby niepotrzebną uwagę w interfejsie użytkownika większości typów programów i szybko stałyby się męczące.

Linia dolna: Nie używaj przejść w stylu programu PowerPoint jako modelu dla programu.

Jeśli robisz tylko sześć rzeczy...

1. Użyj animacji i przejść, aby ułatwić zrozumienie programu i czuć się płynniej i bardziej wciągająco. Powinni mieć jasny cel. Nie używaj animacji tylko dlatego, że możesz lub zwrócić niepotrzebną uwagę na program.
2. Zdefiniuj słownictwo animacji i używaj go spójnie w całym programie. W razie potrzeby użyj słownictwa animacji systemu Windows 7.
3. Użyj cech animacji, aby dać swoją osobowość programową i wzmocnić swoją markę.
4. Uśmierć większość animacji prostych, krótkich i subtelnych. Pamiętaj, że animacje nie muszą zwracać uwagi na sukces. Jeśli animacja jest odpowiednia i naturalna, użytkownicy zauważą tylko jego brak.
5. Zapewnij szybkie i dynamiczne animacje i zapewnij im lekki wygląd. Bez względu na to, jak wciągające są twoje animacje, nikt nie będzie chciał czuć się tak, jakby czekali na nich. Projektuj cięższe animacje, aby mieć łaskawą degradację.
6. Projektowanie na dłuższą metę. Jeśli animacja jest irytujące, rozpraszające lub męczące, przeprojektuj ją lub usuń.

Wzorce użycia

Animacje mają kilka wzorców użycia:

Zwyczaj	Opis
Aktywuj opinię aby pokazać, gdzie znajduje się punkt interakcji.	Wskazuje, że punkt interakcji jest aktywny. wskaźnik aktywowania można również wyświetlić za pośrednictwem efektu statycznego. słownictwo okien: wyświetlanie efektu aktywowania (ograniczenie prostokąta, podkreślenia, powiększania) z efektem zanikania/zanikania w celu zapewnienia gładkości. W odtwarzaczu Zune digital media player album obejmuje wyróżnianie i dodawanie kontrolek odtwarzania po umieszczeniu wskaźnika myszy.
kliknij opinii aby pokazać, że obiekt możliwy do kliknięcia odpowiada i otrzymuje kliknięcie.	Wskazuje, że obiekt został kliknięty. słownictwo systemu windows: tło obiektu flash po kliknięciu zdarzenia w dół. aby pokazać kontakt dotykowy, użyj efektu tętnienia. Funkcja Touch wyświetla animację tętnienia, aby użytkownik wiedział, że interakcja została rozpoznana.
wybór opinii aby pokazać, że obiekt jest zaznaczony.	Wskazuje, że zaznaczono obiekt. wybór można również wyświetlić za pomocą efektu statycznego. słownictwo okien: rysuj prostokąt zaznaczenia z efektem zanikania/zanikania w celu zapewnienia gładkości. W programie Zune album obejmuje po kliknięciu, a następnie uzyskanie prostokąta wyboru w zaznaczeniach.
opinii o postępie aby pokazać, że zadanie jest wykonywane.	Opinia o postępie wskazuje, że zadanie wykonuje postęp, zazwyczaj ze wskaźnikami aktywności, paskami postępu lub animacjami ilustracyjnymi zadania. Określenie opinii o postępie pokazuje mniej więcej, ile zadania zostało wykonane i ile pozostaje, podczas gdy nieokreślony postęp wskazuje tylko, że zadanie jest wykonywane. słownictwo okien: obracające się wskaźniki aktywności, paski postępu, tło postępu, animacje ilustracji. W tym przykładzie program Windows Live Messenger wyświetla nieokreślone opinie o postępie podczas logowania.
przyciągającego aby pokazać, że coś wymaga uwagi użytkownika.	Przyciągaj odpowiedni poziom uwagi, gdy tworzone są znaczące obiekty lub wymagają uwagi (często ze względu na zmianę) lub zdarzają się ważne lub pilne zdarzenia. zobacz przyciąganie odpowiedniego poziomu uwagi technik projektowania. słownictwo okien:, poruszające się, pulsujące, świecące, lśniące, lśniące. Pasek narzędzi Windows Live animuje pierwszy wygląd, aby było oczywiste, gdzie jest.
relacji aby pokazać relację między obiektami lub przyczynowością w skutkach.	Pokaż relacje, zwłaszcza gdy relacja może nie być zrozumiała lub oczekiwana, w sposób, który nie rozprasza lub nie mylące. słownictwo okien: morfing, transport, zmiana fizyczna, taka jak przerzucanie, rośnie z punktu źródłowego, kurcząc się do miejsca docelowego punktu. W tym przykładzie animacja pokazuje relację między ustawieniem gamma a jego wpływem na wyświetlacz.
Ilustracja/wersja zapoznawcza aby wyjaśnić wizualnie koncepcję, zadanie lub efekt polecenia.	Animacja lub film wideo, który wyjaśnia koncepcję lub sposób, w jaki coś działa wizualnie, aby uzupełnić lub zastąpić wyjaśnienie tekstowe. Dzięki temu użytkownicy mogą wykonywać zadania lub wybierać polecenia wydajnie i pewnie. W tym przykładzie polecenia Panelu danych wejściowych komputera tabletu "pokaż mnie" używają ilustracji, aby pokazać, jak poprawić, usunąć, podzielić i sprzężć.

Przejścia mają kilka wzorców użycia:

Zwyczaj	Opis
Obiekt rośnie/zmniejsza/pojawia się w celu bezproblemowego zmiany rozmiaru lub stanu obiektu.	Obiekt zmienia się między stanami, prawdopodobnie podczas przenoszenia. przejście utrzymuje użytkowników zorientowanych podczas zmian. słownictwo okien: morf, zmiana rozmiaru, slajdy lub wyjście obiektu. W tym przykładzie gadżet weather morphs from its concise state to display its Options (Opcje) okno dialogowe.
wyświetlanie/ukrywanie/zmienianie zawartości w celu bezproblemowego pokazywania, ukrywania lub zmieniania zawartości, zazwyczaj w celu stopniowego ujawniania.	Wnętrze okna zmienia się, aby wyświetlić więcej, mniej lub inną zawartość. przejście utrzymuje użytkowników zorientowanych podczas zmian. słownictwo okien: okienko slajdów w lub na wyjęcie. okna wysuwane zanikają i wychodzą. zawartość jest zanikana lub rzutuje. Kalkulator systemu Windows ma płynne przejście między trybami wyświetlania.
Control lub affordance show/hide aby płynnie pokazać lub ukryć kontrolki lub ich przystępność cenową po umieszczeniu kursora lub myszy w celu uproszczenia normalnego wyglądu wizualnego.	Wyświetlaj kontrolki, gdy użytkownicy umieszczają wskaźnik myszy nad obszarem polecenia lub wyświetlają dostępność, gdy użytkownicy najeżdżają kursorem na kontrolkę. umieszczenie wskaźnika myszy na tych obszarach oznacza, że użytkownik zamierza wchodzić w interakcję. przystępność cenowa może się ukryć, jeśli wskaźnik staje się nieruchomy. W tym przykładzie kontrolki windows Media Player zanikają po umieszczeniu wskaźnika myszy w trybie pełnoekranowym.
przejścia sceny aby zapewnić płynne i bezproblemowe przejście sceny, aby uniknąć uwagi.	Nagłe zmiany sceny mogą być jarring, zwłaszcza w przypadku dużych obszarów ekranu, więc użyj przejść sceny, aby utworzyć gładkość i ciągłość oraz zapewnić kontekst. przejścia sceny mają być naturalne i niskie, aby uniknąć zwracania uwagi na sam proces przejścia. słownictwo okien: zanikać/wychodzić; zanikanie krzyżowe; przesuwanie w/w lewo, w prawo, w górę, w dół; pcha i pokrywy. W tym przykładzie tapeta pulpitu systemu Windows delikatnie zanika między obrazami, aby przejście było płynne i kontrolowane.
przejścia specjalnej sceny aby zwrócić uwagę na zmianę sceny, aby uczynić ją specjalną lub ponownie skupić uwagę użytkownika.	Podczas gdy większość przejść sceny nie powinna zwracać uwagi na proces przejścia, niektóre mają na celu przerwanie przepływu i zwrócenie uwagi w celu podkreślenia, że coś innego ma się zdarzyć. aby zwrócić uwagę, specjalne przejścia scen są zaprojektowane tak, aby nienaturalne i miały duży wpływ na wizualizację. slajdu przejścia przyciągającego uwagę W tym przykładzie program PowerPoint używa przejść zwracania uwagi, aby przyciągnąć odbiorców do zmiany.
Bezpośrednie manipulacje aby pokazać efekt manipulacji bezpośrednich (takich jak przenoszenie, przewijanie/przesuwanie, obracanie i powiększanie).	Przejście pokazuje efekt manipulacji w czasie rzeczywistym. efekt powinien czuć się gładki, ciągły i zgodny z rzeczywistym światem. przenoszenie i obracanie może nie być ciągłe w niektórych miejscach, aby wskazać ograniczenia lub prawdopodobnie preferowane opcje. powiększanie sprawia, że zawartość jest większa lub mniejsza, prawdopodobnie odpowiednio zmieniając poziom szczegółowości. W tym przykładzie lupa płynnie powiększa się między poziomami.
niepoprawne bezpośrednie manipulacje aby wskazać, że podjęto próbę bezpośredniej manipulacji (takiej jak przenoszenie, przewijanie/przesuwanie), ale nie można było tego zrobić.	Przejście pokazuje próbę manipulowania, ale wraca do stanu pierwotnego. często efekt wygląda jak manipulacja nie może być wykonywana z powodu niektórych rzeczywistych ograniczeń fizycznych. te animacje są używane zamiast komunikatów o błędach opartych na tekście, co zakłóciłoby rzeczywiste działanie manipulacji. słownictwo windows: bounce W tym przykładzie dokument odbija się, aby pokazać, że użytkownik osiągnął koniec.
Sortuj, filtruj, zmieniaj kolejność przejść aby wskazać, że prezentacja lub zawartość kolekcji elementów uległa zmianie.	Przejście pokazuje (lub w przypadku złożonych zmian sugeruje) efekt zmiany. w tym przykładzie wyszukiwanie wizualne bing używa przejścia filtru. W tym przykładzie usługa Windows Media Center używa przejścia zmiany kolejności jako specjalnego środowiska podczas odtwarzania utworu.
przejścia wydajności aby akcja wydawała się działać szybciej.	Chociaż każde przejście może podjąć działania wydaje się działać szybciej, głównym celem tych przejść jest zwiększenie postrzegania wydajności i reakcji. dobrą techniką jest pokazanie zadania wykonywanego w celowych krokach. natomiast opóźnienie akcji, renderowanie wyników w sposób przypadkowy lub użycie wskaźnika aktywności będzie działać wolno. słownictwo okien: wykonywanie akcji na etapach, z płynnymi przejściami między etapami. W tym przykładzie lista przeskoków paska zadań natychmiast wyświetla standardowe elementy, a następnie wysuwa się w celu wyświetlenia miejsc docelowych po uzyskaniu gotowości listy. W ten sposób ukrywa czas wymagany do utworzenia listy. Z kolei opóźnienie początkowego wyświetlania nie odpowiadałoby, a wyświetlenie niekompletnej listy lub opinii o postępie byłoby znacznie wolniejsze.
specjalne środowiska aby zaangażować i cieszyć użytkowników podczas rzadkich, specjalne środowiska, które są ważne dla twojego programu i mają pełną uwagę użytkownika.	Chociaż każde przejście może być specjalnym doświadczeniem, te przejścia są najlepiej zarezerwowane dla rzadkich środowisk, które są naprawdę wyjątkowe dla twojego programu. przejścia niestandardowe są używane do zapewniania specjalnego działania. znakowanie i osobowość są często ważnymi elementami projektowymi. w przeciwieństwie do innych wzorców, specjalne środowiska mogą wymagać uwagi, być ciężkie i wymagać od użytkowników odczekać chwilę. w związku z tym te przejścia szybko się zużywają, jeśli są nadmierne, ponieważ doświadczenie nie jest już specjalne. W tym przykładzie program Windows Media Center wyświetla animację podczas ładowania w celu natychmiastowego zaangażowania użytkowników.

Wytyczne

Efektywna komunikacja

• Zdefiniuj i użyj słownictwa animacji, aby upewnić się, że animacje i przejścia mają spójne znaczenie, i używaj go spójnie w całym programie. Większość słownictwa powinna zawierać wpisy dotyczące wyglądu sceny i obiektu oraz zniknięcia, nawigacji, podstawowej interakcji (umieszczanie kursora, wybieranie, klikanie), manipulowanie obiektami i interakcja (przenoszenie, upuszczanie, zmienianie rozmiaru, przewijanie, przesuwanie, powiększanie, obracanie, filtrowanie) i przyciąganie uwagi. Spójne znaczenie ma kluczowe znaczenie dla skutecznej komunikacji.

• Zawsze, gdy jest to praktyczne, użyj słownictwa animacji systemu Windows. Chociaż program może mieć inną publiczność i różne potrzeby, często korzyści ze spójności i znajomości przewyższają korzyści wynikające z tego, że są różne. Jeśli słownictwo programu musi być inne, użyj tych samych podstawowych typów animacji co System Windows, ale nadaj im właściwą osobowość dla programu.

• Nie przypisuj określonych znaczeń do ogólnych animacji i przejść w słownictwie animacji. Przejścia ogólne, takie jak zanikania i efekty specjalne, takie jak rozpuszczone, nie mają szczególnego znaczenia (poza pojawieniem się lub zniknięciem), więc mogą być swobodnie używane.

  niepoprawne:

  

  W tym przykładzie krzyżowe zanikanie jest niepoprawnie używane do przechodzenia do następnego elementu. Ponieważ zanikanie krzyżowe nie ma szczególnego znaczenia, to przejście nie zapewnia kontekstu.

• Wyraźnie ujmij wpisy słownictwa. Powiązane akcje mogą mieć podobne efekty (na przykład powiększanie i powiększanie powinno mieć odwrotne przejścia), ale niepowiązane akcje powinny mieć wyraźnie odrębne efekty (na przykład powiększanie nigdy nie powinno być mylone z obracaniem).

• Zachowaj realne efekty realistyczne i spójne. Jeśli używasz realistycznych animacji i przejść, zachowaj spójność doświadczenia z rzeczywistym światem. Użytkownicy nigdy nie powinni być zaskoczeni, zdezorientowani lub wprowadzani w błąd przez wyniki. I dla spójności, nie mieszaj metafor.

• Dawać odwrotne akcje odwrotne animacje. Takie działanie spełnia oczekiwania użytkowników i upraszcza słownictwo. Jeśli na przykład okienko zostanie wyświetlone przez przesunięcie, usuń je, przesuwając się nie z innym efektem.

• Sprawiają, że animacje są zrozumiałe. Użytkownicy powinni mieć możliwość szybkiego zrozumienia celu animacji. Można zrobić animację zbyt małą, zbyt krótką (mniej niż 50 milisekund) lub tak subtelną, że użytkownicy nie są w stanie zrozumieć ich celu. W takich przypadkach albo przeprojektuj, aby wyjaśnić znaczenie, lub usunąć.

  niepoprawne:

  

  W tym przykładzie efekt jest tak mały i subtelny, że niewielu użytkowników może zrozumieć swój cel. Lepiej przeprojektować lub usunąć.

Wzorców

Aktywuj opinię

• Aby pojawić się szybko, staraj się odtwarzać animację w ciągu 50 milisekund podczas wprowadzania lub opuszczania stanu aktywowania.
• Aby szybko wyświetlić, czas trwania animacji aktywowania jest krótszy niż 50 milisekund.
• Użyj efektu zanikania/zanikania z efektu aktywowania. Dzięki temu efekty aktywowania wyraźnie różnią się od opinii kliknięcia i wyboru.

kliknij opinii

• Aby wydawać się dynamiczny, staraj się odtwarzać animację w ciągu 50 milisekund po kliknięciu w dół zdarzenia. Klikanie zdarzeń nie wymaga kliknięcia opinii.
• Aby szybko wyświetlić, czas trwania animacji kliknięć jest krótszy niż 50 milisekund.
• Użyj efektu błysku tła lub. Dzięki temu efekty kliknięć wyraźnie różnią się od wskaźnika myszy i opinii dotyczącej wyboru. Kliknięcie wymaga aktywowania wskaźnika myszy, dlatego kliknij pozycję Opinia jest płynnym dodatkiem do przesyłania opinii o aktywowaniu wskaźnika myszy.

wybór opinii

• Aby pojawić się szybko, staraj się odtwarzać animację w ciągu 50 milisekund zaznaczenia lub usuwania zaznaczenia.
• Aby szybko wyświetlić, czas trwania animacji zaznaczenia jest krótszy niż 50 milisekund.
• Użyj efektu zanikania/zanikania zaznaczenia prostokąta. Dzięki temu wybór wyraźnie różni się od wskaźnika myszy i klikanie opinii.

opinii o postępie

• Użyj wskaźnika aktywności, gdy nie można wykonać akcji w ciągu sekundy. Oznacza to, że polecenie zostało odebrane.
• Użyj paska postępu, gdy zadanie potrwa ponad pięć sekund. Aby uzyskać więcej wskazówek, zobacz Paski postępu.
• Używaj animacji opinii o postępach, które ułatwiają użytkownikom wizualizowanie wpływu długotrwałych zadań. Unikaj niepotrzebnych animacji opinii o postępie, jeśli animacja nie komunikuje się niczego przydatnego, użyj paska postępu.
• Mają wyraźnie możliwe do zidentyfikowania stany ukończenia i awarii. Użytkownicy muszą mieć możliwość szybkiego określenia tych stanów końcowych.
• Zatrzymaj wyświetlanie postępu, gdy bazowe zadanie nie postępuje. Użytkownicy muszą mieć możliwość określenia, czy postęp nie jest wprowadzany, i odpowiednio reagować.

przyciągacze

• Używaj przyciągaczy z powściągliwością. O ile informacje nie są pilne, krytyczne lub w inny sposób mogą mieć wpływ na natychmiastowe zachowanie użytkownika, zazwyczaj lepiej zmienić stan niespowiadczo i pozwolić użytkownikom na samodzielne odnajdywanie zmian. Rozwiązywanie rozpraszania uwagi, brak możliwości odnajdywania.

  

  W tym przykładzie ikona obszaru powiadomień sieci bezprzewodowej używa animacji dla problemów krytycznych, ale umożliwia użytkownikom samodzielne odnajdywanie słabych sygnałów.

• Wybierz animację, która zwraca odpowiedni poziom uwagi. Animacje przyciągającego powinny zwrócić wystarczającą uwagę na siebie, aby zrealizować swój cel, ale nie więcej. Jeśli użytkownik musi działać natychmiast, wybierz efekt, który wymaga uwagi niezależnie od tego, gdzie szuka użytkownik. W innych sytuacjach zapoznaj się z Przyciąganie odpowiedniego poziomu uwagi sekcji, aby uzyskać właściwą kombinację uwagi, zauważalności i pilności.

  niepoprawne:

  

  Asystenci pakietu Microsoft Office przyciągnęli niepotrzebną uwagę do siebie.

• Jeśli użytkownik nie odpowiada, nie powtarzaj animacji ani nie używaj animacji ciągłych. Zamiast tego załóżmy, że użytkownik nie zdecydował się działać teraz, ale może działać później. Ciągłe animacje utrudniają użytkownikom skoncentrowanie się na czymkolwiek innym.

animacje relacji

• Użyj animacji relacji, aby pokazać, skąd pochodzą obiekty lub gdzie poszły.
• Animacje relacji muszą rozpoczynać się lub kończyć wybranym obiektem. Nie pokazuj relacji między obiektami, z którymi użytkownik nie korzysta obecnie. Jeśli użytkownicy w ogóle zauważą, co zauważą, to rozproszenie uwagi.

Ilustracje/wersje zapoznawcze

• Użyj podglądów, aby pokazać efekt polecenia bez konieczności wcześniejszego wykonywania go przez użytkowników. Korzystając z przydatnych wersji zapoznawczych, możesz zwiększyć wydajność i łatwość uczenia się programu oraz zmniejszyć potrzebę korzystania z wersji próbnej i błędu.
• Użyj ilustracji i podglądów, które mają wyraźną interpretację. Mają niewielką wartość, jeśli są mylące.
• odtwarzać tylko jedną ilustrację jednocześnie, aby uniknąć przytłaczających użytkowników. Jeśli jest możliwe wiele równoczesnych ilustracji, użyj wskaźnika myszy lub przycisku odtwarzania, aby umożliwić użytkownikom wskazanie ich zainteresowania.
• Odtwórz ilustrację automatycznie, jeśli jest głównym celem okna lub strony. W przeciwnym razie, jeśli jest to opcjonalne, pozwól użytkownikom odtworzyć go, gdy będą gotowi.
• odtwarzać animacje z optymalną szybkością: nie tak szybko są trudne do zrozumienia, ale nie tak powolne, że są żmudne do oglądania.

powiększanie/zmniejszanie obiektu

• Nie twórz wycinków zawartości podczas zmiany rozmiaru. Rozwiń kontenery przed dodaniem zawartości. Usuń zawartość przed zmniejszeniem liczby kontenerów.

  niepoprawne:

  

  W tym przykładzie zawartość jest przycinana podczas zmiany rozmiaru.

wyświetlanie/ukrywanie/zmienianie zawartości

• Statyczne wyświetlanie ważnych informacji. Użytkownicy nie powinni mieć dostępu do ważnych informacji poprzez stopniowe ujawnianie.

Control lub affordance show/hide

• Wyświetla ważne kontrolki, gdy użytkownik umieszcza wskaźnik w dowolnym miejscu w oknie lub okienku lub, jeśli jest pełny ekran, w ruchu myszą. Użytkownicy nie powinni szukać tych kontrolek, więc upewnij się, że ich odnajdywanie jest pewne.

  

  W tym przykładzie program Windows Media Center wyświetla kontrolki za każdym razem, gdy wskaźnik znajduje się nad oknem.

• Wyświetlanie pomocniczych kontrolek lub kontroli zapewniania dostępności, gdy użytkownik umieszcza wskaźnik na lub w pobliżu poleceń. Aby ułatwić odnajdywanie, należy uczynić lokalizację oczywistą i docelową dużą.

  

  W tym przykładzie program Windows Live Messenger wyświetla pomocnicze polecenie, gdy wskaźnik znajduje się w pobliżu prawego górnego rogu.

przejścia sceny

• Ustaw przejścia sceny fizycznej na spójność z mapowaniem naturalnym. Ludzie odczytują od lewej do prawej w kulturach zachodnich, a diagramy hierarchiczne przepływają od góry do dołu. W związku z tym przejście do przodu w czasie jest wskazywane przez ruch od lewej do prawej. Następujące przejścia sceny fizycznej mają naturalne mapowanie:

  Przejście	Znaczenie
  Od lewej	Powrót do przepływu zadań
  Od prawej	Przechodzenie do przodu w przepływie zadań
  Od góry	Przenieś hierarchię zadań w górę
  Od dołu	Przenieś hierarchię zadań w dół

• Jeśli program odtwarza dźwięk, przejścia sceny projektowej i przejścia audio razem. Jeśli na przykład scena zanika stopniowo, każdy dźwięk powinien stopniowo zanikać. Nie rujnuj bezproblemowych przejść wizualnych przez nagłe przejścia dźwięku. Aby uzyskać więcej wskazówek dotyczących dźwięku, zobacz Sound.

Bezpośrednie manipulacje

• W przypadku korzystania z gestów fizycznych w interakcji (takich jak podsłowanie) zaprojektuj animację tak, aby wyglądała jak naturalna odpowiedź na gest. Połącz przyczynę interakcji z efektem przejścia. Nadaj animacji rzeczywiste cechy fizyczne, takie jak przyspieszanie, zwalnianie, rozmach, opór, waga, odbicie i rotacja.
• Aby zachować bezpośrednie działanie, należy zachować punkty kontaktowe obiektu pod wskaźnikiem bezproblemowo w trakcie interakcji. Każde opóźnienie, chybienie odpowiedzi lub utrata kontaktu niszczy postrzeganie bezpośredniej manipulacji. Obiekty nigdy nie powinny zniknąć podczas manipulowania.

przejścia sortowania, filtrowania lub zmiany kolejności

• W przypadku prostych zmian pokaż całe przejście. Użytkownicy będą mogli łatwo śledzić całe przejście. Proste zmiany obejmują cztery elementy lub mniej.
• W przypadku złożonych zmian podkreśl koniec ruchu, gdy spowalnia, i niech oko wypełnia resztę. Dzięki temu ruch czuje się o wiele bardziej elastycznie i uporządkowanie.

przejścia wydajności

• Rozważ powolne przejścia w dwóch lub trzech etapach, aby były wyświetlane szybciej i natychmiast interakcyjne. W razie potrzeby należy użyć następującej kolejności kompozycji:
  • Ramka zewnętrzna
  • Tło
  • Zawartość początkowa (w razie potrzeby przy użyciu tymczasowej reprezentacji)
  • Podstawowe kontrolki (dzięki czemu użytkownicy mogą natychmiast wchodzić w interakcje)
  • Pomocnicze kontrolki i pozostałe elementy interfejsu użytkownika
  • Ostateczna zawartość (jeśli użyto tymczasowej reprezentacji) Użyj przejść, takich jak zanikanie i slajdy, aby kompozycja była gładka, uporządkowana i wyrafinowana.

zdjęcia satelitarnego i siatki

Podczas przewijania w widoku "Bird's eye" mapy Bing wyświetlają tymczasowe tło siatki. Dzięki temu użytkownicy mogą nadal przewijać zawartość bezpośrednio przed renderowaniem ostatecznej zawartości.

animacje specjalne

• Rozważ animowane ekrany powitalne (a także statyczne ekrany powitalne). Często ekrany powitalne zwracają uwagę na czas ładowania programu i szybko zużywają powitanie. Chociaż ekrany powitalne są akceptowalne, jeśli są wyświetlane tylko wtedy, gdy interakcja użytkownika nie jest możliwa, zawsze, gdy praktyczne jest lepszym rozwiązaniem jest zaprojektowanie programu tak, aby użytkownicy mogli z nim korzystać natychmiast, nawet gdy jest on nadal ładowany.
• Podaj polecenie Pomiń wprowadzenie, jeśli animowany ekran powitalny trwa ponad trzy sekundy. Kliknięcie w dowolnym miejscu na ekranie powitalnym powinno również go odrzucić. Alternatywnie użyj krótkiej wersji animacji po początkowym okresie.

Wydajność

• Nie należy czekać na animacje i przejścia programu. Używaj krótkich animacji i przejść (mniej niż 200 milisekund) zawsze, gdy jest to praktyczne. Używaj szybszych animacji (100 milisekund) do częstszych operacji. Projektowanie dłuższych animacji (zwykle więcej niż jedna sekunda to opinie o postępie, ilustracja i specjalne wzorce środowiska), dzięki czemu użytkownicy mogą nadal pracować podczas ich działania.

• Zaprojektuj długotrwałe animacje, aby wyjaśnić użytkownikom, że mogą wchodzić w interakcje podczas uruchamiania animacji. Użytkownicy nie będą próbować kontynuować pracy, jeśli wskazówki wizualne sugerują, że nie mogą.

  

  W tym przykładzie z programu Windows Internet Explorer pasek postępu o niskim kluczu na pasku stanu sugeruje, że użytkownicy nie muszą czekać na ukończenie, zanim będą mogli wchodzić w interakcje.

• Używaj lekkich animacji na potrzeby zadań intensywnie korzystających z procesora CPU. Daje to pełną moc obliczeniową do zadania. Ponadto użytkownicy nie będą postrzegać, że uproszczona animacja jest powodem, dla którego zadanie intensywnie zużywa procesor.

• Nie wyświetlaj wskaźnika aktywności podczas animacji ani przejścia. To powoduje zniszczenie efektu. Projektuj animacje i przejścia, aby od razu rozpocząć pracę.

• Zaprojektuj animacje, aby bezpiecznie obniżyć sprawność, gdy nie ma wystarczających zasobów systemowych. Animacje mogą ulec pogorszeniu dzięki zmianom, które wymagają mniejszej ilości zasobów (takich jak krótsza długość lub niższa szybkość klatek), a nawet nie są uruchomione w ogóle. Niezależnie od dostępnych zasobów upewnij się, że animacje mają wysoką jakość i wyglądają jak animacje zamiast błędów oprogramowania.

  niepoprawne:

  

  W tym przykładzie przejście przywracania okna jest używane, mimo że nie ma wystarczającej ilości zasobów systemowych, aby je dobrze odtworzyć. W związku z tym zamrożona ramka wydaje się być usterką. Jeśli zasoby nie są dostępne, lepiej po prostu wyświetlić okno bez przejścia.

Cechy animacji

Dobrze zaprojektowane animacje i przejścia zwykle mają następujące cechy:

• Krótki czas trwania. Większość animacji powinna należeć do przedziału od 100 do 300 milisekund, najlepiej 1/6 sekund (167 milisekund) lub 1/4 sekundy (250 milisekund). (Specjalne środowiska i opinie dotyczące postępu mogą być dłuższe). Używaj krótszych czasów animacji w przypadku częstszych operacji. Ogólnie rzecz biorąc, dłuższe animacje zajmują więcej czasu na ukończenie, pośmiń więcej czasu, aby zrozumieć i poczuć się powoli.

• Reakcji. Animacje powinny rozpoczynać się w ciągu 50 milisekund od zainicjowanego zdarzenia lub akcji użytkownika. Dłuższe czasy rozpoczęcia nie odpowiadają.

• Przyspieszanie/zwalnianie. Aby wyglądać naturalnie, większość efektów animacji musi przyspieszyć podczas uruchamiania i zwalniania podczas zatrzymywania. Aby wyglądać szybko, animacje projektowe mają szybkie starty. Aby wydawać się kontrolowane, animacje projektowe mają miękkie lądowania na końcu. Chociaż dotyczy to efektów ruchu, ma również zastosowanie do dowolnego efektu, który sugeruje ruch, taki jak powiększenie, a nawet zanika.

  

  Większość animacji powinna mieć szybkie starty i miękkie zakończenia, aby mieć dynamiczny, ale kontrolowany sposób działania.

• Ruch. Animacje przedstawiające ruch w szczególności muszą przyspieszać i zwalniać, więc nie używaj ruchu liniowego, chyba że czas trwania animacji jest bardzo krótki. Ruchy powinny podjąć ścieżkę szortów od początku do końca, bez przesłonięć. Pełna ścieżka ruchu nie zawsze jest wymagana. Jeśli to konieczne, podkreśl koniec ruchu, gdy spowalnia, i niech oko wypełni resztę. Dzięki temu ruch czuje się o wiele bardziej elastycznie i uporządkowanie. Podczas animowania ruchu kilku obiektów jednocześnie, daj im nieco różne ścieżki z nieco różnymi chronometrażami, aby poczuć się bardziej naturalne.

• Klatek. Większość animacji powinna używać częstotliwości klatek na sekundę wynoszącej 20 ramek. Jeśli animacja ma specjalne doświadczenie lub jest związana z głównym celem programu, rozważ użycie większej liczby 24 30 klatek na sekundę, aby poprawić gładkość i realizm.

• Skala. Zaprojektuj animacje, aby dobrze działały w całym zakresie zamierzonego użycia. Na przykład przejścia stron powinny być zaprojektowane tak, aby działały dla wszystkich rozmiarów stron.

• Osobowość. Zaprojektuj animacje, aby poczuć naturalne, jędmione i wydajne, a nie sztuczne, kapryśne lub powolne.

Tekst animowany

• Chociaż tekst może być wyświetlany przy użyciu przejścia, nie animuje tekstu w sposób ciągły. Tekst animowany często rozprasza uwagę i trudniej jest odczytać niż tekst statyczny. wyjątki :
  • Możesz animować tekst w sytuacjach, w których jest tradycyjnie animowany, i udostępnić dostępną alternatywę.
  • Możesz animować tekst, jeśli przeznaczenie tekstu jest przede wszystkim dekoracyjne.

W tym przykładzie Zune animuje tekst, ale jego celem jest przede wszystkim dekoracyjne. Nie ma problemu, jeśli użytkownicy nie czytają dokładnie tekstu.

Zmniejszenie zużycia energii

• Zaprojektuj animacje, aby zmniejszyć zużycie energii. W przypadku prawidłowego projektowania animacje nie powinny znacznie zwiększać zużycia energii. Aby zmniejszyć zużycie energii:
  • Zatrzymaj animowanie, gdy ekran jest wyłączony. Wyświetlacz może być wyłączony w celu oszczędzania energii.
  • Nie używaj długotrwałych animacji, które nie są inicjowane przez użytkownika. Animacje korzystające z okresowych czasomierzy o wysokiej rozdzielczości zmniejszają wydajność zarządzania energią procesora. Pamiętaj również, aby wyłączyć wszystkie okresowe czasomierze o wysokiej rozdzielczości po zakończeniu animacji.
  • Wstrzymaj wszystkie animacje, gdy system stanie się bezczynny. Okres braku aktywności użytkownika w stanie bezczynności jest określany przez opcje zasilania w Panelu sterowania.

Dostępność

• Nie używaj animacji jako jedynego sposobu przekazywania podstawowych informacji. Animacje powinny komunikować informacje, które są przydatne, ale nie krytyczne, ponieważ nie są dostępne dla użytkowników z wadami wzrokowymi.

• Upewnij się, że równoważne informacje są dostępne za pośrednictwem innych środków, takich jak:

  • Inspekcja. Użytkownicy mogą określić równoważne informacje, przeglądając ekran lub obiekty zaangażowane w animację.
  • Przez prostą interakcję. Użytkownicy mogą określić równoważne informacje, umieszczając wskaźnik myszy, klikając lub klikając dwukrotnie.

  

  Strona główna Bing zawiera początkową animację, która ujawnia kilka punktów aktywnych. Użytkownicy mogą również wyświetlać punkty aktywne, przenosząc kursor w jego pobliżu.

  Należy pamiętać, że "równoważne informacje" nie oznaczają identycznych informacji. Informacje mogą być w innym formacie lub wymagają prostego odliczenia.

• W razie potrzeby ustaw fokus danych wejściowych na obiekt zmieniony podczas przejścia. Dzięki temu technologie pomocnicze mogą wykrywać, gdzie nastąpiła zmiana. Nie zmieniaj jednak fokusu danych wejściowych, gdy użytkownik korzysta z klawiatury.

• Nie używaj animacji ani przejść, które szybko ani nie zmieniają rozmiaru obiektów. i szybkie zmiany ekranu mogą powodować problemy dla osób z upośledzeniem napadów i innymi zaburzeniami neurologicznymi.

• Zezwalaj użytkownikom na wyłączanie animacji i przejść programu. Aby zapewnić obsługę tej możliwości, należy przestrzegać opcji Wyłącz wszystkie niepotrzebne animacje w Centrum ułatwień dostępu w systemie Windows.

  Deweloperzy: Możesz określić, czy animacje są włączone przy użyciu interfejsu API SystemParametersInfo.

• Zadania projektowe przy założeniu, że użytkownicy będą wyłączać animacje programu. Upewnij się, że nie zakłóca to znacznie przepływu zadań.

Aby uzyskać więcej wytycznych dotyczących ułatwień dostępu, zobacz Accessibility.

Dokumentacja

• Unikaj odwoływania się do animacji, gdy jest to możliwe. Zamiast tego należy odwołać się do animowanego obiektu i, w razie potrzeby, typu animacji.
• Nie należy odwoływać się do przejść, z wyjątkiem dokumentacji technicznej. Zamiast tego należy odwołać się do obiektu w stanie końcowym lub początkowym.
• Jeśli użytkownik jawnie inicjuje animację, użyj odtwarzania czasownika; w przeciwnym razie należy użyć czasownika do dokumentacji technicznej.

Przykłady:

• Będziesz wiedzieć, że element potrzebuje uwagi, gdy jego ikona zacznie odbijać się.
• Najpierw wybierz zdjęcia, które chcesz wydrukować (pamiętaj, że zdjęcia są powiększone po zaznaczeniu).
• Aby bezproblemowo zmienić stan obiektu, użyj przejścia między zanikania.