Przewijanie paralaksy nie wymaga wprowadzenia, jeśli chodzi o omówienie najbardziej atrakcyjnych praktyk projektowych. Ogólnie rzecz biorąc, przewijanie paralaksy jest szeroko rozpowszechnione w witrynach WordPress. Jest to efekt, w którym obraz tła porusza się wolniej niż elementy pierwszego planu. Daje to złudzenie posiadania trzech wymiarów na płaskiej dwuwymiarowej powierzchni. Wiele gier od dawna wykorzystuje ten trend, jednak stosunkowo niedawno pojawił się on w projektowaniu stron internetowych i zyskał ogromną popularność. Jest tak rozpowszechniony, że najprawdopodobniej widziałeś go gdzieś podczas surfowania w sieci, nawet jeśli nie wiedziałeś, co to jest. Koncepcja przewijania paralaksy polega na stworzeniu iluzji, która wygląda atrakcyjnie i niepowtarzalnie. Dodaje wartość estetyczną do projektowania stron internetowych i zwraca uwagę na zawartość zwoju paralaksy, co pomaga wyróżnić wartościowe treści z bałaganu.
Spis treści ukryj
1. Doświadczenie użytkownika znacznie się poprawia:
2. Wspomaga proces opowiadania historii:
3. Znaczące obniżenie współczynników odrzuceń:
1. Zwój tła paralaksy:
2. Pionowe przewijanie paralaksy:
3. Efekt przezroczystości paralaksy:
4. Zwój poziomy paralaksy:
5. Efekt skali paralaksy:
1. Zawsze pamiętaj o głównym celu swojej witryny:
2. Nie nadużywaj efektu przewijania paralaksy:
3. Stwórz prototypowe efekty przewijania paralaksy i przetestuj je: Pin
4. Zaplanuj zawartość do użytku mobilnego:
5. Responsywność Twojej strony internetowej:
1. Historia The Goonies:
2. Studio Psów:
3. Straż pożarna:
Ten trend w projektowaniu powstał, gdy pojawił się trend projektowania płaskiego. Przed trendem projektowania płaskiego modne było projektowanie realizmu. W tym trendzie nacisk położono na cienie, odbicia i inne tego typu sztuczki, aby stworzyć wrażenie głębi i trójwymiarowego wyglądu. Płaska konstrukcja była zbyt dwuwymiarowa i takie sztuczki nie zadziałałyby z nimi, aby stworzyć trójwymiarowy wygląd. Widząc tę lukę, przewijanie paralaksy pojawiło się jako koncepcja wprowadzenia trzech wymiarów do płaskiej konstrukcji.
Aby lepiej zrozumieć przewijanie paralaksy, powinniśmy najpierw przyjrzeć się, dlaczego warto w to zainwestować.
1. Doświadczenie użytkownika znacznie się poprawia:
Szpilka
Niektórzy uważają, że przewijanie paralaksy jest dodatkową funkcją, która zwiększa złożoność interfejsu użytkownika bez żadnego wkładu. Jednak nie jest to prawdą, ponieważ mikrointerakcje i animacje mają duży wpływ na tworzenie angażujących interfejsów użytkownika w porównaniu z płaskimi twarzami użytkowników. Ma doskonałą wartość pod względem doświadczenia użytkownika (UX).
2. Wspomaga proces opowiadania historii:
Szpilka
Gdybyśmy musieli opowiedzieć historię innej osobie, moglibyśmy to zrobić bez wysiłku. Jednak taka sama łatwość i przepływ opowieści w projektowaniu stron internetowych może być bardzo trudna. Łączenie kropek, ułatwianie przejścia i utrzymywanie widzów w napięciu jest często trudne. Przewijanie paralaksy pomaga w rozwiązaniu tego problemu, tworząc wciągające i wciągające wrażenia, dzięki którym historia płynie. Ponieważ istnieje różnica w szybkości elementów tła i pierwszego planu, wydajna stymulacja elementów może znacznie poprawić wrażenia z narracji.
3. Znaczące obniżenie współczynników odrzuceń:
Szpilka
Współczynnik odrzuceń odnosi się do liczby osób, które kliknęły stronę internetową i kliknęły przycisk Wstecz na karcie przed dokładnym przejściem przez stronę. Częste i wysokie współczynniki odrzuceń mogą znacząco wpłynąć na ranking SEO. Witryny z przewijaniem paralaksy mają znacznie mniejsze współczynniki odrzuceń, ponieważ większość z nich to witryny z przewijaniem jednej strony. Dynamiczne wrażenia, jakie użytkownicy uzyskują, obserwując przewijanie paralaksy, utrzymują ich zaangażowanie.
Teraz, gdy omówiliśmy zalety korzystania z przewijania paralaksy, możemy omówić różne rodzaje technik przewijania paralaksy dostępne dla projektantów stron internetowych. Istnieją dwie szerokie kategorie efektów paralaksy. Efekty paralaksy oparte na przewijaniu i efekty paralaksy oparte na myszy.
Efekty paralaksy oparte na przewijaniu to efekty paralaksy, których można doświadczyć podczas przewijania strony internetowej. Każdy rodzaj przewijania paralaksy odpowiada innym potrzebom i celom. Niektóre efekty przewijania paralaksy to:
1. Zwój tła paralaksy:
Jest to jeden z najstarszych, ale skutecznych sposobów wykorzystania zwoju paralaksy. Dzięki temu, gdy użytkownik przewinie stronę internetową, obraz tła zmieni się. Pomaga to w stylowym opowiadaniu fascynujących historii.
2. Pionowe przewijanie paralaksy:
Parallax Vertical Scroll jest idealny dla stron internetowych, w których chcesz, aby użytkownicy czuli, że strona porusza się razem z nimi, używając elementów pływających, które poruszałyby się z różnymi prędkościami. Można to również zrobić na wielu warstwach.
3. Efekt przezroczystości paralaksy:
Efekt przezroczystości paralaksy to płynny efekt, w którym tekst lub obraz powoli zanika, gdy użytkownik przewija w dół. Pojawia się również z powrotem, gdy użytkownik przewinie w górę.
4. Zwój poziomy paralaksy:
Przewijanie Parallax Horizontal tworzy wrażenie ruchu w poziomie, gdy użytkownik przewija stronę w dół. Elementy po lewej zbliżają się do środka. Stwarza to poczucie ruchu.
5. Efekt skali paralaksy:
Efekt skali paralaksy pozwala użytkownikowi na powiększenie i pomniejszenie efektu tunelu. Powiększenie jest proporcjonalne do proporcji, dzięki czemu tworzy wyjątkową iluzję, która wygląda fajnie. Czuje się jak efekt wypaczenia, który przenosi użytkownika do innego wymiaru.
Teraz, gdy omówiliśmy różne odmiany efektów przewijania paralaksy, możemy przejść do omówienia podstawowych praktyk projektowych, o których należy pamiętać podczas projektowania efektu przewijania paralaksy dla Twojej witryny:
1. Zawsze pamiętaj o głównym celu swojej witryny:
Szpilka
Przewijanie paralaksy jest zabawne i może być wciągające. Nie tylko dla widzów, ale także dla projektanta. Nie powinno to przekładać się na posiadanie strony internetowej, która ma imponujący efekt przewijania paralaksy i nie skupia się na treści. Przewijanie paralaksy, podobnie jak inne elementy projektu, powinno działać jako wizualne wskazówki, które powinny prowadzić użytkownika do miejsc, w których zamierza się znaleźć. Powinno to pomóc w osiągnięciu celów biznesowych, takich jak sprzedaż produktu, rozpowszechnianie treści czy generowanie leadów.
Jeśli nadmiernie używasz przewijania paralaksy bez żadnego kontekstu ani celu, możesz zrobić wrażenie na widzach na swojej stronie, ale nie przełoży się to na skuteczne leady lub konwersje. Skorzystaj z przewijania paralaksy, aby zwiększyć szanse na to, czego oczekujesz od użytkownika. Doskonałym sposobem na to jest przypięcie atrakcyjnego, ale subtelnego CTA w stopce strony. W ten sposób, gdy użytkownicy będą przewijać witrynę, zobaczyliby w akcji przewijanie paralaksy. Mieliby również jeden lub dwa stałe przyciski, które są statyczne i wszechobecne. To przyciągnęłoby odwiedzającego do kliknięcia przycisku, aby zobaczyć, co się stanie.
2. Nie nadużywaj efektu przewijania paralaksy:
Szpilka
Efekt przewijania paralaksy ma pewien efekt wow. Przełamuje przyziemność i stagnację każdej strony internetowej, która wywołuje nagłe zainteresowanie w oczach odwiedzających. Ponieważ użycie przewijania paralaksy sprawia, że elementy strony poruszają się z różnymi prędkościami, znalezienie odpowiedniej równowagi między zabawą a chaosem jest niezbędne podczas korzystania z przewijania paralaksy. Jeśli witryna zawiera wiele szybko poruszających się elementów lub zbyt wiele ruchomych elementów, odwiedzający może nadążyć za nią. Spowodowałoby to zrzucenie ich wizualnego przewodnika po całej witrynie i wywołanie zamieszania.
3. Stwórz prototypowe efekty przewijania paralaksy i przetestuj je: Szpilka
Zawsze dobrze jest zbudować interaktywny prototyp przed sfinalizowaniem go na etapie rozwoju. Pomaga to projektantom przetestować efekt przewijania paralaksy przed jego uruchomieniem. Projektanci powinni przetestować wpływ na użyteczność i doświadczenie użytkownika. Ponieważ paralaksa jest tak wszechstronna i odmienna w swoim podejściu, może wpływać na różnych ludzi na różne sposoby. Łatwo jest odejść od użytecznej paralaksy do tworzenia efektów przewijania paralaksy, które rozpraszają uwagę. Dlatego dokładnie przetestuj go z prawdziwymi użytkownikami, którzy są obiektywni i mają wyczucie projektowania stron internetowych. Przetestuj go również z ogólną publicznością, ponieważ to dla nich robisz efekt.
4. Zaplanuj zawartość do użytku mobilnego:
Szpilka
Surfowanie po sieci nie jest już ograniczone do komputerów. Zamiast tego ponad połowa użytkowników woli przeglądać na swoich smartfonach i tabletach. Google zmienił również swoje wyniki wyszukiwania, na podstawie których inaczej reguluje i klasyfikuje strony internetowe dla urządzeń mobilnych niż dla komputerów stacjonarnych. Oznacza to, że jeśli Twoja witryna ma dobrą pozycję w przeglądaniu na komputerze, ale ma nieprzyjazny wygląd mobilny, nie będzie miała wysokiej pozycji w Google podczas wyszukiwania w telefonie. Przewijanie paralaksy nie jest przyjazne dla urządzeń mobilnych. Tablety obsługują to w pewnym stopniu, ale nie telefony komórkowe. Praktycznym rozwiązaniem jest niestosowanie efektów paralaksy w witrynie mobilnej.
Podstawowy układ witryny powinien być zaprojektowany w taki sposób, aby można go było łatwo przetłumaczyć na urządzenia mobilne. Należy uważać na wszelkie sekcje, które nakładają się i przepełniają. Tła nie powinny kolidować z czytelnością treści. W przypadku witryny mobilnej zachowaj tylko niezbędne elementy projektu. Pomogłoby to na dwa sposoby – użytkownicy korzystający z przeglądarki na telefonie komórkowym mogą korzystać z danych mobilnych. Posiadanie lżejszej witryny pomogłoby im szybciej załadować witrynę i wydać mniej danych na przeglądanie witryny. W ten sposób nie wpłynie to również na twój ranking SEO.
5. Responsywność Twojej strony internetowej:
Szpilka
Nie mamy już połączeń sieciowych, których załadowanie strony internetowej zajmuje minuty lub godziny. Każdy ma dostęp do Internetu z taką prędkością, że użytkownicy mogą przez sekundę przebywać na jednej stronie internetowej, a w kolejnej sekundzie przełączyć się na inną. Z tą łatwością szybkości przychodzi łatwość opcji. Ludzie codziennie przeglądają kilka stron internetowych. Jeśli Twoja witryna nie ładuje się stosunkowo szybko, nie będą czekać, aż Twoja witryna się załaduje i pokaże niesamowity efekt paralaksy. Paralaksa to ciężka sztuczka, nawet jeśli ją zoptymalizujesz; zajęłoby to trafienie w czasie ładowania strony. Twoim obowiązkiem jest zoptymalizowanie go tak bardzo, jak to możliwe, jeśli uważasz, że przewijanie paralaksy znacząco przyczynia się do rozwoju Twojej witryny.
Teraz, gdy rozumiemy wszystkie aspekty przewijania paralaksy i jak najlepiej z niego korzystać, przyjrzyjmy się niektórym witrynom, które skutecznie zaimplementowały przewijanie paralaksy w swoich projektach:
1. Historia The Goonies:
Szpilka
Ta strona internetowa wykorzystała dedykowany efekt przewijania paralaksy, aby podkreślić klasyczny film The Goonies. Wykorzystuje wciągające przewijanie paralaksy, aby opowiedzieć o fabule filmu i innych szczegółach, takich jak imię i nazwisko reżysera, data wydania, profile postaci i inne. Jest tworzony za pomocą WebFlow i działa jako hołd dla klasycznego filmu. Kiedy odwiedzasz witrynę, pierwsza interakcja wykorzystuje efekt skali paralaksy, który pomaga użytkownikowi poczuć się tak, jakby podróżował po historii ze stroną internetową. Każdy efekt paralaksy służy do kierowania wizualnej wskazówki dla gościa i jest wykonywany bez wysiłku. Wykorzystuje również dźwięk, aby zapewnić wciągające wrażenia narracyjne.
2. Studio Psów:
Szpilka
Dogstudio to kreatywne studio, które łączy sztukę, technologię i design. Aby to pokazać, sprytnie zaprojektowali swoją stronę internetową. Na środku strony znajduje się pies, który skaluje się i obraca, gdy użytkownik przewija stronę. Światło na psie również się zmienia, gdy najedziesz myszą na jego ostatnie projekty. Istnieją również efekty paralaksy oparte na myszach. Na początku strony, jeśli najedziesz myszą w lewo, pies pochyli się w prawo i odwrotnie. Jest to efektywne wykorzystanie przewijania paralaksy.
3. Straż pożarna:
Szpilka
Firewatch to gra stworzona przez Campo Santo. Istnieje strona internetowa promująca tę grę, która w subtelny, ale najbardziej imponujący sposób wykorzystuje przewijanie paralaksy. Kiedy odwiedzasz witrynę, jesteś traktowany z obrazem banera, który wygląda tak immersyjny, jak jest. Kiedy przewijasz stronę w dół, obraz i zawartość przesuwają się w górę, tworząc prosty, ale skuteczny efekt przewijania paralaksy. Strona wykorzystuje 6 warstw, aby była tak gładka, jak jest. Reszta strony jest statyczna, w której znajduje się cała zawartość. Pomaga to w czytaniu treści i poznawaniu gry bez odczuwania choroby morskiej z powodu nadmiernie wykonanych efektów paralaksy. Wykorzystują efekt paralaksy, aby przyciągnąć uwagę, a następnie dostarczają odpowiednich informacji, aby przyciągnąć uwagę odwiedzających.
Teraz wiesz, dlaczego przewijanie paralaksy to trend w projektowaniu, który jest tak popularny w dzisiejszych czasach. Ma wiele zalet, które mogą wykorzystać projektanci stron internetowych. Nie ma zakresu powtarzalności z inną witryną ze względu na wiele dostępnych wariantów przewijania paralaksy. Witryny wymienione na tej liście obejmują również, w jaki sposób efekt można wykorzystać w całości do celów opowiadania historii lub jako dodatkowy element poprawiający atmosferę witryny. Dowiedz się, dlaczego i gdzie musisz używać przewijania paralaksy w swojej witrynie i korzystaj z tego. Nie zmuszaj go tylko ze względu na walory estetyczne.
