Jak tworzyć przewijane i ładujące mikro animacje

Jakuba Nielsena
Jakob Nielsen jest duńskim konsultantem ds. Użyteczności internetowej i założycielem grupy "Nielsen Norman". Uzyskał doktorat z interakcji człowiek-komputer na Duńskim Uniwersytecie Technicznym w Kopenhadze.

(Wikipedia)
Jedna z zasad użyteczności Jakoba Nielsena mówi: "System powinien zawsze informować użytkowników o tym, co się dzieje".
Jednym ze sposobów, aby Twoja witryna pasowała do tej reguły, jest zapewnienie jej funkcji mikroanimacji. Dodaliśmy dwa typy animacji:
1. Wskaźnik ładowania strony o konfigurowalnym kolorze mówiącym: "Wszystko jest w porządku, strona się ładuje".
2. Wskaźnik przewijania informujący użytkownika, którą część strony aktualnie przegląda.
1
Jak dodać animację i wskaźnik ładowania
Dodaj blok T228 z kategorii "Inne" na górze strony.
Tak wygląda ładowanie strony bez animacji ładowania:
Ładowanie treści stanie się płynniejsze po dodaniu tego bloku:
Zaznacz pole wyboru "Pokaż wskaźnik ładowania" i wybierz kolor tła wskaźnika ładowania w panelu Ustawienia bloku.
Tak wygląda ładowanie strony po dodaniu wskaźnika ładowania:
Ten wskaźnik nie jest wyświetlany w przeglądarce Safari. Safari ma własny wskaźnik ładowania strony.
2
Jak dodać animację przewijania
Dodaj blok T333 z kategorii "Inne" na górze strony.
Określ kolor i wysokość paska postępu w panelu Ustawienia bloku.
Wykonane na
Tilda