Złamanie symetrii zapewnia kontrast i atrakcyjność dla projektów. Dowiedz się, kiedy i jak stosować tę funkcję w swoich projektach.
Asymetryczny czas animacji zwiększa wygodę użytkowników, ponieważ pozwala wyrazić swoją osobowość, a jednocześnie szybko reagować na interakcje z użytkownikiem. Sprawia, że interfejs jest bardziej atrakcyjny wizualnie.
- Użyj asymetrycznego czasu animacji, aby nadać swojej pracy osobowość i nadać jej kontrast.
- Zawsze faworyzuj interakcję użytkownika z reklamą. Odpowiadaj na kliknięcia krócej, a gdy nie odpowiadasz na kliknięcia, zarezerwuj dłuższy czas.
Podobnie jak w przypadku większości „reguł” animacji, warto poeksperymentować, aby sprawdzić, co się sprawdza w przypadku danej aplikacji, ale jeśli chodzi o wygodę użytkowników, użytkownicy są wyjątkowo niecierpliwi. Ogólna zasada brzmi: zawsze szybko reagować na interakcję użytkownika. Jednak w większości przypadków czynność użytkownika jest asymetryczna, więc animacja też może być taka sama.
Na przykład, gdy użytkownik kliknie, aby wyświetlić nawigację na pasku bocznym, powinna się ona wyświetlić jak najszybciej i trwała około 100 ms. Jeśli jednak użytkownik zamknie menu, będzie można animować widok nieco wolniej, na przykład z limitem 300 ms.
Z kolei widok modalny zwykle wyświetla błąd lub inny krytyczny komunikat. W takich przypadkach warto przywracać widok nieco wolniej, ponownie po upływie 300 ms, ale odrzucenie, które uruchamia użytkownik, powinno następować bardzo szybko.
Oto ogólna zasada:
- Animacje interfejsu uruchamiane w wyniku interakcji użytkownika, np. przejścia w widoku lub pokazanie elementu, mają krótkie wprowadzenie (krótki czas), ale wolniejsze zakończenie (dłuższe czas).
- Animacje interfejsu uruchamiane przez Twój kod, np. błędy lub widoki modalne, mają wolniejsze wprowadzenie (dłuższe czas trwania), ale szybkie zakończenie (krótki czas).