5 Niezniszczalnych reguł dla animacji interfejsu użytkownika w Internecie
Przejścia są skutecznym sposobem komunikowania zmian w interfejsie użytkownika. Mogą być używane w aplikacjach, aby odciążyć wiele pracy poznawczej w kory wzrokowej: pomagają użytkownikom przenosić się między kontekstami nawigacyjnymi, wyjaśniają zmiany w rozmieszczeniu elementów na ekranie i wzmacniają hierarchię elementów. W konsekwencji są istotnym elementem projektowania interakcji.
Pomyślne animowane przejście ma pięć następujących cech:
1. Dobra animacja interfejsu użytkownika jest naturalna
Zmiany stanu w interfejsie użytkownika często wiążą się z twardymi cięciami domyślnie, co może utrudniać ich śledzenie. W prawdziwym świecie większość rzeczy nie pojawia się lub znika natychmiast. Kiedy coś ma dwa lub więcej stanów, wtedy zmiany między stanami będą znacznie łatwiejsze do zrozumienia dla użytkowników, jeśli przejścia są animowane zamiast natychmiastowe. Spójrzmy na przykład poniżej, w którym użytkownik wybiera element na liście, aby powiększyć jego szczegółowy widok. Podczas ekspansji mała karta przemieszcza się łukiem w kierunku miejsca docelowego, rozszerzając się na większą kartę. Ruch ten jest inspirowany siłami realnego świata.
2. Efektywna animacja interfejsu użytkownika jest etapowana
Dobrze zorganizowana transformacja animacyjna kieruje uwagę użytkownika i wyjaśnia zmianę stanów. Ta cecha jest bezpośrednio związana z koncentracją i ciągłością użytkownika. Dobre przejście pomaga skierować uwagę użytkownika na właściwe miejsce we właściwym czasie, kładzie nacisk na odpowiednie elementy w zależności od tego, jaki jest cel. W poniższym przykładzie pływający przycisk akcji (FAB) przekształca się w elementy nawigacyjne nagłówka składające się z trzech przycisków. Użytkownik po raz pierwszy nie jest w stanie przewidzieć interakcji, która ma się wydarzyć, ale odpowiednio animowane przejście pomaga użytkownikowi pozostać zorientowanym i nie ma wrażenia, że zawartość nagle się zmieniła. To przejście pomaga użytkownikowi przejść do następnego etapu interakcji.
3. Najlepsze animacje interfejsu użytkownika są asocjatywne
Przejścia powinny ilustrować, w jaki sposób elementy są połączone. Dobre przejścia kojarzą nowo utworzone powierzchnie z elementem lub działaniem, które je tworzy. Logika powiązania asocjacyjnego ma pomóc użytkownikowi w zrozumieniu zmiany, która właśnie się wydarzyła w układzie widoku i co spowodowało zmianę.
Poniżej możesz zobaczyć dwa przykłady przejścia między warstwami. W pierwszym przykładzie nowa warstwa pojawia się z dala od punktu, w którym został wywołany, co powoduje przerwanie relacji z metodą wprowadzania danych.
W drugim przykładzie nowa warstwa pojawia się bezpośrednio z punktu kontaktu. W ten sposób wiązanie elementu do punktu dotyku.
Inny przykład można znaleźć w systemie Mac OS, który korzysta z animowanego przejścia podczas minimalizowania okna. Ta animacja łączy pierwszy stan z drugim stanem.
4. Popularna animacja interfejsu użytkownika jest szybka
Jeśli jest tylko jedna zasada animacji, o którą się troszczysz, zdecydowanie powinna być w czasie. Czas jest prawdopodobnie jednym z najważniejszych czynników przy projektowaniu przejść. Animacja powinna być szybka i dokładna, z niewielkim opóźnieniem lub bez żadnego opóźnienia między początkowym działaniem użytkownika a początkiem animacji. Ponadto użytkownik nie musi czekać na zakończenie animacji. W poniższym przykładzie powolna animacja powoduje niepotrzebne opóźnienie i wydłuża czas trwania.
Gdy elementy poruszają się między stanami, ruch powinien być wystarczająco szybki, aby nie powodował oczekiwania, ale wystarczająco powolny, aby można było zrozumieć przejście. Aby animacja skutecznie przekazywała związek przyczynowo-skutkowy między elementami interfejsu użytkownika, efekt musi rozpocząć się w ciągu 0,1 sekundy od początkowego działania użytkownika, aby utrzymać wrażenie bezpośredniej manipulacji. Staraj się, aby czas trwania animacji nie przekraczał 300 ms, a szybkie przejścia tracą mniej czasu użytkowników. Przetestuj ją wśród użytkowników, aby zobaczyć, co jest tolerowane.
5. Najlepsza animacja interfejsu użytkownika jest przejrzysta
Powszechnym błędem jest przeciążanie interfejsów użytkownika animacjami lub tworzenie zbyt skomplikowanych interakcji. Zbyt duża zmiana w interfejsie użytkownika może spowodować dezorientację użytkownika, a odzyskanie go zajmuje trochę czasu. Pamiętaj, że każdy ruch na ekranie przyciąga uwagę, więc zbyt wiele animacji powoduje jednocześnie chaos.
Przejścia powinny unikać robienia zbyt wiele naraz, ponieważ mogą się zagmatwać, gdy wiele elementów musi się poruszać w różnych kierunkach. Pamiętaj, mniej znaczy więcej, zwłaszcza w odniesieniu do animacji i przejść. Wszystko, co jeśli zostanie usunięte, będzie czystszym interfejsem, to prawie na pewno dobry pomysł. Kiedy powierzchnia zmienia kształt i rozmiar, musisz zachować czystą ścieżkę do następnego widoku. Złożone przejścia powinny zapewniać widoczność pojedynczego elementu. Pomaga to utrzymać zorientowanie na użytkownika.
Przejścia i dostępność
Ponieważ przejścia dotyczą komunikacji wizualnej, domyślnie nie są dostępne dla użytkowników z wadami wzroku. Powinieneś udostępnić alternatywne treści dla tej grupy użytkowników. webacessibility.com W ramach najlepszych praktyk dotyczących animacji znajdują się sugestie, kiedy udostępnić alternatywne treści dla technologii wspomagających.
Wniosek
Podczas projektowania przejść skup się tylko na praktycznych rzeczach, które robią dla użytkownika. Niezależnie od tego, czy Twoja aplikacja lub strona jest zabawna i zabawna, czy też poważna i prosta, użycie znaczących przejść może pomóc w zapewnieniu wyraźnego i szybkiego spójnego doświadczenia.