Próba łamania symetrii zapewnia kontrast i atrakcyjność projektów. Dowiedz się, kiedy i jak zastosować to rozwiązanie w swoich projektach.
Asymetryczne czasy animacji poprawiają wrażenia użytkownika, ponieważ pozwalają wyrażać swoją osobowość i jednocześnie szybko reagować na interakcje użytkowników. Zapewnia także kontrast, dzięki czemu interfejs staje się bardziej atrakcyjny wizualnie.
- Używaj asymetrycznych animacji czasowych, aby nadać swojej pracy osobowość i kontrast.
- Zawsze faworyzuj interakcje użytkowników. Reaguj na kliknięcia, stosuj krótszy czas trwania, a dłuższy dla użytkowników, którzy nie przebywają w Twojej witrynie.
Podobnie jak w przypadku większości „reguł” animacji, należy poeksperymentować, aby sprawdzić, co sprawdzi się w przypadku danej aplikacji, ale jeśli chodzi o wrażenia użytkowników, użytkownicy są często niecierpliwi. Ogólną zasadą jest szybkie reagowanie na interakcje użytkownika. Jednak większość działań użytkownika jest asymetryczna i animacja również może być taka sama.
Jeśli na przykład użytkownik kliknie, aby wyświetlić pasek boczny nawigacji, powinien zostać wyświetlony tak szybko, jak to możliwe, przez około 100 ms. Jeśli jednak użytkownik zamknie menu, możesz pozwolić na wolniejsze animowanie widoku, na przykład w czasie około 300 ms.
Z kolei po włączeniu widoku modalnego zwykle zostaje wyświetlony komunikat o błędzie lub inny krytyczny komunikat. W takiej sytuacji widok należy uruchamiać nieco wolniej, ponownie w okolicach 300 ms, ale odrzucenie, które musi uruchamiać użytkownik, powinno następować bardzo szybko.
Oto ogólna zasada:
- Animacje interfejsu uruchamiane w wyniku interakcji użytkownika, np. przejścia między obejrzeniami lub pokazanie elementu, mają szybkie wprowadzenie (krótkie) i wolne zakończenie (dłuższe).
- Animacje interfejsu uruchamiane przez Twój kod (np. błędy lub widoki modalne) mają wolniejsze wprowadzenie (dłuższy czas trwania), ale krótkie zakończenie (krótkie).