Przełamanie symetrii zapewnia kontrast i atrakcyjność projektów. Dowiedz się, kiedy i jak stosować te funkcje w swoich projektach.
Asymetryczne wygaszanie animacji poprawia wrażenia użytkowników, ponieważ pozwala wyrazić osobowość, a zarazem szybko reagować na ich działania. Dodaje też kontrastu, co sprawia, że interfejs jest bardziej atrakcyjny wizualnie.
- Użyj asymetrycznego czasu animacji, aby nadać swoim projektom charakter i kontrast.
- Zawsze stawiaj na interakcję z użytkownikiem. Krótsze czasy trwania używaj w odpowiedzi na dotknięcia lub kliknięcia, a dłuższe – w momentach, gdy nie ma interakcji.
Podobnie jak w przypadku większości „reguł” animacji, eksperymentuj, aby dowiedzieć się, co sprawdza się w Twojej aplikacji. Pamiętaj jednak, że użytkownicy są niecierpliwi. Zasada jest taka, że należy zawsze szybko reagować na interakcje użytkowników. Jednak w większości przypadków działanie użytkownika jest asymetryczne, więc animacja może też być asymetryczna.
Jeśli na przykład użytkownik kliknie, aby wyświetlić pasek nawigacyjny, powinien on zostać wyświetlony tak szybko, jak to możliwe (w ciągu około 100 ms). Gdy użytkownik zamknie menu, możesz pozwolić sobie na nieco wolniejsze animacje, np. 300 ms.
Natomiast wyświetlenie widoku modalnego zwykle ma na celu wyświetlenie błędu lub innego krytycznego komunikatu. W takich przypadkach widok powinien pojawiać się nieco wolniej, z czasem około 300 ms, ale zamknięcie, które uruchamia użytkownik, powinno nastąpić bardzo szybko.
Ogólna zasada jest więc następująca:
- Animacje interfejsu wywoływane przez interakcję użytkownika, np. przejścia między widokami lub wyświetlanie elementu, powinny mieć szybkie wprowadzenie (krótkie) i wolne zakończenie (dłuższe).
- W przypadku animacji interfejsu wywoływanych przez Twój kod, takich jak błędy lub modalne widoki, użyj wolniejszego wstępu (dłuższego czasu trwania) i szybkiego zakończenia (krótkiego czasu trwania).