Wprowadzenie do animacji w projektowaniu stron internetowych
Animacja nie jest już tylko dla kreskówek. Od pełnoekranowych ruchomych obrazów po małe efekty unoszenia - wszędzie pojawiają się akcenty animacji. Animacja jest modna, przyjemna i przyjazna dla użytkownika.
A przeszkody w korzystaniu z animacji zaczęły spadać. Dzięki większości użytkowników korzystających z szybkich połączeń i łatwości tworzenia czegokolwiek, od prostych ruchów lub głupich gifów po kilka minut działania, animacje stały się praktycznymi i przydatnymi narzędziami do projektowania stron internetowych.
Poznaj elementy Envato
Podstawy animacji
Animacja ma miejsce, gdy coś stworzonego w nieruchomej lub dwuwymiarowej formie zostaje „ożywione” i wydaje się poruszać w sposób zgodny z prawami fizyki. To sposób, w jaki postać z kreskówki przechodzi przez ekran lub jak ikona aplikacji podskakuje jak piłka podczas ładowania na pulpicie komputera Mac.
Jednym ze słów, które są niemal synonimem animacji, jest Disney. Na początku lat osiemdziesiątych dwóch czołowych animatorów firmy napisało książkę opisującą 12 zasad animacji. „Illusion of Life: Disney Animation” autorstwa Franka Thomasa i Ollie Johnston nadal zapewnia ramy dla animacji.
- Squash i stretch
- Przewidywanie
- Inscenizacja
- Akcja z wyprzedzeniem i pozycja do pozycji
- Wykonaj i pokrywające się działania
- Zwolnij i zwolnij
- Łuk
- Działanie wtórne
- wyczucie czasu
- Przesada
- Solidny rysunek
- Apel
Animacje internetowe są często zapisywane jako GIF, CSS, SVG, WebGL lub wideo. Mogą to być wszystko, od prostego podkreślenia, które pojawia się po najechaniu kursorem na słowo, na wideo lub obraz w tle na pełnym ekranie. Podobnie jak w przypadku każdej innej techniki projektowania, animacje mogą być subtelne lub mogą być widoczne na twarzy i trudne do uniknięcia.
Wschodzący trend 2017 roku
Animacje w projektowaniu stron internetowych zaczynamy od każdego dnia. Kluczem do animacji jako trendu projektowego jest umiar. Małe, proste animacje są wciągające i interesujące; użytkownik może nawet nie myśleć o tym, że jest animacją. Animacje na dużą skalę mogą być interesującym efektem wizualnym, który wciągnie Cię w projekt. Ale jeśli zaczniesz mieszać zbyt wiele różnych efektów ruchomych, może to spowodować całkowity chaos.
To, co sprawia, że animacja jest modna, to realizm. W dzisiejszym krajobrazie projektowym z wieloma płaskimi i minimalistycznymi stylami użytkownicy potrzebują więcej wskazówek, aby powiedzieć im, co mają robić. Proste fragmenty animacji mogą prowadzić użytkownika bez zmiany estetyki. Pomaga dodawać instrukcje i porządek w projektowaniu schematów, które mogą być zbyt proste wizualnie, aby zapewnić wystarczający kierunek dla użytkowników. W tym przypadku animacja tworzy szczęśliwy środek między uproszczoną prostotą a użytecznością.
Innym czynnikiem przyczyniającym się do tego trendu jest dostęp do narzędzi na zapleczu i po stronie użytkownika. Nie potrzebujesz Flasha do bardziej skomplikowanych animacji. (A jeśli nadal budujesz we Flashu, czas przestać.) Można to zrobić na wiele innych sposobów. Dzisiejsze animacje nie psują witryn ani serwerów internetowych, dzięki czemu efekty są szybko ładowane dla użytkowników, a dzięki szybkim animacjom dostępu do Internetu nie można pominąć utknięcia w połowie cyklu wydarzenia.
Duże kontra małe animacje
Jeśli chodzi o animację w Internecie, można ją podzielić na dwie równie łatwe do zrozumienia kategorie: dużą i małą. (Prawdopodobnie można się domyślić, jak to wygląda.)
Duże animacje to takie, które mają skalę do nich. Animacje na dużą skalę często w formie filmu z czasem trwania wypełniają znaczną część ekranu i są charakterystyczne dla krótkiego filmu. Te animacje służą jako punkt centralny w ogólnym projekcie. Użytkownicy często nie muszą wykonywać żadnych czynności, aby zobaczyć animację w ruchu. Jeśli uważnie obserwujesz na stronie Studio Meta, każdy duży obraz powiększa się podczas czytania kopii.
Małe animacje to małe fragmenty, które odkrywasz, wchodząc w interakcję ze stroną internetową. Te działy mogą mieć postać stanów unoszenia się, maleńkich kawałków ozdób lub przewodników lub narzędzi użyteczności. Małe animacje są akcentem, który przyczynia się do ogólnej estetyki, ale raczej nie będzie przedmiotem zainteresowania projektu. Prosta animacja na stronie Henry'ego Browna polega na tym, że jeśli przyjrzysz się uważnie, oczy na ilustracji faktycznie mrugają.
Kiedy używać animacji
Problemem z każdym trendem, w tym tym, jest wiedza, kiedy go użyć. Animacja może być świetną sztuczką dla zestawu narzędzi do projektowania, ale nie jest do każdego projektu. Animacja powinna być płynna i płynna, a nie przesadna lub mechaniczna. Musi służyć celowi dla użytkownika i nie przeszkadzać w treści.
Podstawowym powodem korzystania z animacji jest zwiększenie użyteczności. Proste animacje mogą być świetnymi narzędziami prowadzącymi, które pomagają zrozumieć, które przyciski należy kliknąć lub gdzie dalej na mapie witryny. Wielu projektantów używających złożonych efektów przewijania łączy prostą animację z narzędziem użytkownika do przewijania lub klikania. (Obejmuje to wszystko od prostej odbijającej się ikony lub słów, które pojawiają się, mówiąc „przewiń w dół”).
Użyteczność występuje w kilku formach:
- Funkcja komunikacji lub sposób korzystania ze strony internetowej
- Pokaż zmiany, takie jak prawidłowe wypełnienie formularza lub podkreślenie, że element można kliknąć
- Utwórz przepływ lub skieruj użytkowników do wezwania do działania
Drugi powód korzystania z animacji jest estetyczny. Animacja może być świetną „dekoracją”. Czasami cel elementu animowanego jest czysto wizualny i jest to akceptowalne zastosowanie. Ta dekoracyjna animacja może pomóc opowiedzieć historię lub stworzyć emocjonalne połączenie między interfejsem a użytkownikiem. Animacja może wzbudzić zainteresowanie wizualne i utrzymać zaangażowanie użytkownika w witrynie przez dłuższy czas.
Tworząc czysto wizualną animację, zastanów się, co ma zrobić. Pomyśl o połączeniu, które chcesz mieć użytkownik. Czy to ma być zabawne czy zaskakujące? Czy to trochę wyjątkowa treść przeznaczona do udostępniania? Nawet czysty wygląd powinien mieć cel.
Zasoby
Gotowy do rozpoczęcia animacji? Oto kilka zasobów do dalszego czytania i narzędzi, które pomogą Ci zacząć.
- Film Iluzja życia pokazuje każdą z 12 zasad w sposób łatwy do zrozumienia.
- „Internetowa animacja w pracy” z A List Apart to świetne źródło informacji o tym, co sprawia, że animacja działa.
- „Wprowadzenie do animacji CSS dla początkujących” pokazuje, jak przekształcić kwadrat w okrąg za pomocą właściwości CSS.
- Elastyczne animowane elementy SVG to samouczek na temat integracji i animacji składnika SVG.
- Prezentacja Art of UI Animations autorstwa Marka Geyera wykorzystuje animację do wyjaśnienia pojęć.
- „15 najlepszych narzędzi HTML5 do tworzenia zaawansowanych animacji za pomocą” to świetny krok na następny poziom i lista narzędzi, jeśli znasz już podstawy.
- Zestaw przetrwania animatora uczy podstawowych zasad, które dotyczą wszystkich form animacji.
Wniosek
W przypadku animacji obowiązuje zasada: dobra animacja poprawi wrażenia użytkownika. Może to być w formie połączenia emocjonalnego - na przykład zabawy, pozytywnych wrażeń - lub przez ułatwienie korzystania ze strony.
Animacja to zabawna technika, która stała się o wiele bardziej standardowa dla różnych zastosowań. Jeśli szukasz inspiracji, wróć do tego artykułu i kliknij linki do przykładów wizualnych, odwiedź witryny i baw się animowanymi funkcjami. Baw się dobrze!
