Naprawiono położenie elementów WWW
Wykorzystanie stałych elementów pozycji zyskało na popularności i stało się powszechnym elementem w sieci.
Technika ta polega na naprawieniu jakiegoś elementu w przeglądarce, podczas gdy reszta strony przewija się. Najczęściej znajdujemy to w elementach nagłówka, w tym w głównej nawigacji strony. Jest to również popularne podejście do witryn z jedną stroną, gdzie nawigacja na stronie musi być zawsze obecna. Znajdujemy również różne elementy stron internetowych zablokowane za pomocą takich technik.
Istnieje wiele sytuacji, w których możemy ustalić, gdzie naprawienie elementu na stronie jest dobre, ale wszystko wraca do jednego celu. W prawie wszystkich tych sytuacjach stały element utrzymuje krytyczną część strony przed użytkownikami przez cały czas.
Znaczenie tych elementów jest różne, ale w pewnym stopniu podstawowym celem jest utrzymanie części strony w porcie widokowym.
Rozważając zastosowanie tej techniki, zdecydowanie zalecamy dokładne rozważenie, dlaczego i jak to zrobić. Pamiętaj, że jakakolwiek część strony się nie porusza, automatycznie przyciągnie dużo uwagi. Dlatego upewnij się, że działasz. Nurkujmy!
Naprawiono nagłówki
Naprawione nagłówki są zdecydowanie najczęstszym stałym elementem pozycji, tak bardzo musiałem zacząć dodawać do tej kolekcji, aby uniknąć zbyt wielu próbek. Najczęściej nagłówek jest naprawiony, aby zapewnić, że nawigacja po stronie jest zawsze obecna. Jak wspomniałem wcześniej, jest to szczególnie prawdziwe w przypadku pojedynczej strony internetowej.
Istnieje wiele subtelnych zmian w sposobie radzenia sobie ze stałymi nagłówkami, dlatego przejrzymy kilka przykładów różnych pomysłów dotyczących tego podejścia.
Piegi i przystojni
Oto, co uważam za klasyczny przykład tej techniki. Nagłówek jest poprawiony podczas przewijania strony. Obejmuje to logo i główne elementy nawigacyjne. Dodatkowo jest to jedna strona internetowa. Kliknięcie w główną nawigację powoduje przewinięcie do odpowiedniej części strony.
W takim przypadku lepki nagłówek sprawia, że przeglądanie strony pojedynczej strony jest proste. Pozwala to również uniknąć jednego z bardziej irytujących aspektów wielu stron pojedynczych stron: kiedy nawigacja jest tylko u góry strony, ale jest przewijana przez wieki. W związku z tym, stały nagłówek nie tylko wygląda ładnie i utrzymuje główną witrynę marki i centrum, ale także zapewnia łatwą obsługę witryny.
Mapalong
W tym przykładzie użyto stałego nagłówka, ale z jego niewielkim dodatkiem. Ta strona to także układ strony, ale brakuje jej w nawigacji strony. W tym przypadku stały nagłówek zawiera główne logo i przycisk logowania, oba bardzo ważne elementy. Ale nawet lepiej, gdy przewijasz stronę, główne wezwanie do działania przesuwa się do nagłówka, gdy zniknie z widoku. W rezultacie główny punkt konwersji witryny jest zawsze widoczny. A jednak, nawet lepiej od tego, akt wezwania do działania blednie, zwraca uwagę użytkownika na to, jeszcze bardziej podkreślając punkt konwersji w projekcie! Moim zdaniem genialne wykorzystanie tego podejścia.
Kisko Labs
Innym sprytnym podejściem do nagłówka o ustalonej pozycji jest technika, którą nazywam slide i stick. Na stronie Kisko Labs znajduje się tylko część nagłówka. Podczas przewijania strony przewija się główna nawigacja. Tak jest, dopóki nie trafi on na górę ekranu, a następnie się tam trzyma. W ten sposób nawigacja ślizga się (lub przewija) jak zwykle, a następnie przylega do góry.
Dodatkowym szczegółem, który jest naprawdę ładny, jest to, jak nawigacja podświetla część strony, którą aktualnie przeglądasz. Ponieważ jest to pojedynczy projekt strony, pomocna jest identyfikacja bieżącej części strony w taki sam sposób, jak przy normalnym statusie "bieżącej strony" dowolnej nawigacji.
Podnieść dach
Powszechnym rozszerzeniem tego stylu jest włączenie pewnego poziomu przezroczystości do lepkiej warstwy. W wielu przykładach, które znajdziesz tutaj, dzieje się to poprzez zwykłe nierówne krawędzie lepkiego elementu. Czasem dokonuje się tego, gdy element wystaje z nieruchomego pręta, innym razem z postrzępionym brzegiem. W witrynie Raise the Roof wykonano bardzo organiczną i prawie losową granicę.
W tym przykładzie znajdujemy interesujący efekt wizualny. Dzięki zastosowaniu nakładających się elementów witryna tworzy wizualną głębię, gdy zawartość przewija się za nagłówkiem. Jest to dodatkowo podkreślone przez księżyc w tle, który jest również ustalony. Efektem końcowym są trzy warstwy wizualne. Taka głębia zapewnia wysoki poziom wizualnego zainteresowania i może stworzyć efektowny wizualnie projekt.
Witamy w wodzie
Witryna Welcome to the Water jest dość nietypowym dziełem. Bardzo niewiele o tej stronie pasuje do norm układu strony i projektowania. Szczególnie interesujące dla tematu tego artykułu jest poprawiony nagłówek. Na tej stronie ten stały element służy jako narzędzie nawigacyjne na stronie. Ale na wiele sposobów ma w sobie więcej paska narzędzi.
Dodatkowe próbki ustalonych nagłówków
Oto kilka dodatkowych przykładów naprawionych nagłówków. Znajdziesz tutaj szeroki wybór stylów i subtelnych odmian.
Tam Cai
Marlon Messam
Big Eye Creative
Balencic Creative Group
Ivo Mynttinen
Krista Ganelon
Creattica
Ian James Cox
Stwórz lepsze aplikacje
Matthew Carleton
Shweplantis
TruQua
Rodolphe Celestin
Gitary Holcomb
Trussystem
Naprawiono stopki
Być może najbardziej oczywistym przeciwieństwem stałego nagłówka będzie stała stopka. W takich przypadkach stopka strony przykleja się do dolnej części ekranu. Gdy użytkownik przewija, element pozostaje na swoim miejscu.
Podobnie jak w przypadku każdego innego stałego elementu, głównym celem jest stworzenie punktu centralnego. Co ciekawe, z takimi stopkami najczęściej chodzi o funkcję drugorzędną, która wciąż jest głównym celem.
Grupa bezołowiowa
Witryna grupy bezołowiowej jest tego najlepszym przykładem. Tutaj stała stopka zawiera elementy zorientowane na działanie i uderza w główny cel witryny. Najpierw zauważ, że wszystkie elementy tego paska są czynnością, którą może zrobić użytkownik: promuj je w mediach społecznościowych, telefonuj lub wysyłaj e-mailem. Po drugie, są to najważniejsze elementy, które agencja najprawdopodobniej chce, abyś wziął. Albo chcą, żebyś je promował, albo skontaktujesz się z nimi. Są to główne powody, by mieć taką stronę. Więc sensownie jest naprawić je w miejscu, w którym stopę będą przyciągać uwagę.
Envato
Witryna Envato ma również stałą stopkę. Pasek zawiera główne logo witryny, które zostało tutaj przeniesione z typowego lewego górnego rogu. Szczerze mówiąc, dla marki takiej jak Envato nie stanowi to problemu. Znajdziesz tu także menu rozwijane, które uruchamiają Cię w różnych usługach internetowych. Ta prosta funkcja jest ich prawdziwym celem. W rzeczywistości możesz powiedzieć, że ta strona profilu firmy nie jest tak naprawdę tam, gdzie chcą, aby ludzie skończyli. W związku z tym nacisk na przywrócenie Cię do witryn z treściami jest znaczący i nieunikniony.
Kiyuco
Dla wielu stron takich jak ta, ich programy do e-mail marketingu mają kluczowe znaczenie. W związku z tym posiadanie stałej umieszczonej stopki, która wyraźnie podkreśla formularz rejestracji, może znacznie przyczynić się do rozwoju takich list adresowych. Czy marketing e-mailowy może pomóc w promowaniu witryny przez dłuższy czas i skuteczniej ścigać klientów? Jeśli tak, być może ustalona stopka taka jak ta byłaby wspaniałym narzędziem.
Naprawiono paski boczne pozycji
Blokowanie elementów strony internetowej w miejscu nie jest czymś ograniczonym do nagłówków i stopek, choć mogą one być najbardziej popularne. Wygląda na to, że pasek boczny o ustalonej pozycji jest blisko sekundy.
Naprawiono boczne paski boczne często zawierają bardzo podobne informacje do tego, co można znaleźć w nagłówku. Obejmuje to takie elementy, jak logo, nawigacja i media społecznościowe. Oto kilka przykładów do rozważenia, jeśli chcesz zastosować to podejście.
Jorge Rigabert
Ta wspaniała strona jest doskonałym przykładem stylu w pracy. Tutaj pasek boczny zawiera podstawowe marki i opcje nawigacyjne. Takie podejście do paska bocznego jest świetne, ponieważ utrzymuje nawigację w widoku podczas przewijania strony, ale także dlatego, że nie przecina się z przenoszoną treścią. Choć może to być subtelne rozróżnienie, zapewnia niesamowicie gładki interfejs. Witryny takie jak ta prezentują elegancję, która wydaje się prosta, ale jest niezwykle trudna do złożenia.
Więcej zagrożeń Więcej bohaterów
Naprawdę podoba mi się sposób działania tej witryny. Naprawione elementy na pasku bocznym są podstawowymi funkcjami, które właściciele witryn chcą mieć. Bardziej niż czegokolwiek chcą, abyś usłyszał muzykę! Jako taka, widoczna i stale wyświetlana na ekranie funkcja "odtwarzania" jest gotowa i czeka. Nie mogę sobie wyobrazić bardziej krytycznego elementu na stronie, a żeby go tak dobrze zaprezentować, ma sens. I musisz pokochać, że nie został przedstawiony w nieznośny sposób; nawet nie gra automatycznie. Uznanie dla projektanta, który kontrolował tę pokusę.
Yowza
Czasami pożądane jest stworzenie pojedynczego lepkiego elementu, który promuje daną funkcję. Widzieliśmy to dzięki różnym opiniom i usługom wsparcia, które możesz podłączyć do swojej witryny. W takim przypadku na stronie witryny został umieszczony przycisk podobny do Facebooka. Pozostaje na miejscu podczas przewijania strony. To, oczywiście, zwraca uwagę użytkownika na element i zachęca go do korzystania z niego. Powiedziałbym, że pokazuje to siłę i znaczenie społecznych skierowań w takich firmach internetowych.
Na marginesie, uwielbiam tę stronę na 10-bitowej granicy, która stała się tak popularna. Tutaj element po prostu przewija się. To nie jest dramatyczna animacja, ale coś w tym jest zabawne i dodaje nowej stronie i życiu ciekawostkę.
Kolektyw Fat-Man
Ta strona zawiera wszystkie wzorce, które znaleźliśmy w naszych poprzednich próbkach. Ale wyróżnia się w ogromnym stopniu dzięki prostej animacji. Gdy przewijasz stronę w dół, postać na pasku bocznym animuje się i idzie. Ten element samodzielnie podnosi witrynę do wyjątkowej i niezapomnianej kategorii. Jak to możliwe, że coś tak trywialnego może mieć taki wpływ. To zajmuje tę prostą witrynę i pompuje ją pełną przepychu. Pokazuje, że agencja, która za tym stoi, uwielbia szlifowanie swojej pracy za pomocą wykończenia, za które każdy klient umrze.
Więcej stałych elementów paska bocznego
Oto kilka dodatkowych przykładów stałych pasków bocznych w pracy.
Głupie Wiersze
Colin McKinney
Informator
To jest Marcela
Janette D. Council
Tylko logo
Podejście, którego nie znajdujemy zbyt często, to logo o stałej pozycji. W tym przykładzie logo zostało zablokowane na miejscu, nawet gdy strona przewija się. To nietypowe podejście sprawia, że nazwa witryny jest najważniejsza. Takie projekty mogą być interesujące do rozważenia. Trudno zgadnąć, dlaczego mogliby to zrobić, ale można jedynie założyć, że kluczowe znaczenie ma marka główna. Być może mają dużo podobnej konkurencji? Może po prostu chcą się upewnić, że pamiętasz ich imię? Bez względu na to, jest to interesująca technika, o której warto pamiętać, jeśli dotyczy ona Twojego projektu.
"Powrót do góry"
Jeśli chodzi o naprawdę długie strony, fajną funkcją do dodania jest link prowadzący na górę strony. Za pomocą lepkich elementów możesz utworzyć taki link, który pozostaje w tym samym miejscu, w którym przewijasz stronę. Dokładnie to zrobiły próbki tutaj.
Najczęściej taki element umieszczany jest tuż poza układem. W ten sposób nie koliduje z niczym innym w projekcie, gdy przechodzi przez stronę. Zauważysz także, jak te elementy często mają strzałkę skierowaną w górę - być może oczywisty element, który należy uwzględnić, ale bardzo ważny, o czym należy pamiętać, ponieważ szybko informuje użytkowników o celu.
To podejście nieco kontrastuje z pojęciem lepkiego nagłówka. W tym przypadku nawigacja jest najczęściej tylko u góry strony. Powracanie tam jest ważne, ponieważ umożliwia szybkie odbicie stron internetowych. W przypadku witryn z jedną stroną może to być trochę irytujący dodatkowy krok.
Overlapps
Ten przykład pokazuje miłe dodatkowe dotknięcie, ponieważ nie pokazuje powrotu do najwyższego elementu, chyba że nie jesteś na samej górze strony. Być może oczywiste szczegóły, które należy uwzględnić, ale jak się okaże, nie zawsze tak jest. Częścią tego podejścia jest to, że samo jego pojawienie się zwraca na niego uwagę, aby zapewnić, że użytkownik jest tego świadomy.
Dwie kolejne próbki
Dwa poniższe przykłady mają powrócić do górnych przycisków, chociaż są widoczne przez cały czas. Ciekawe jest, że ten element jest najczęściej umieszczany w prawym dolnym rogu ekranu. Nie jest to najbardziej znacząca część projektu, więc być może jego drugorzędna natura jest korzystna dla tak mniej ważnego elementu. Oczywiście zauważysz, że element jest nadal podkreślony przez przełamanie granic i pogrubione kolory. Przypuszczam, że morale tej historii polega na rozważeniu jej znaczenia dla wykorzystania twojego projektu. Jeśli to robi różnicę, upewnij się, że jest widoczna.
Myślenie wieloznaczne
Dusanka i David
Wiele stałych elementów
W tym ostatnim przykładzie przyjrzymy się witrynie, która ma wiele stałych elementów na stronie. Pod wieloma względami ta strona zrywa z większością norm projektowania i układu strony. Z wyjątkiem logo w lewym górnym rogu, prawie nic nie jest na swoim miejscu.
Znamy elementy, które znamy na podstawie tego artykułu, takie jak stały pasek boczny. Jednak zauważysz, że dwa inne są dalekie od typowych. Na przykład stała stopka zawierająca łącza do witryny. Rzeczy takie jak polityka prywatności i zasady i warunki rzadko gwarantują taką widoczną pozycję na stronie. Jednak tutaj znajdziesz je umieszczone na stronie z kilkoma innymi ważnymi linkami nawigacyjnymi.
Naprawdę podoba mi się, jak powiązali linki do kont użytkowników w prawym górnym rogu. W tym miejscu są często umieszczane, ale rzadko są tam naprawiane niezależnie od przewijania, jak w tym przypadku. Podoba mi się to, ponieważ zapewnia to, że zawsze możesz szybko uzyskać dostęp do funkcji użytkownika witryny; coś, co być może skorzystają inne aplikacje i strony internetowe.
W sumie ta strona jest daleka od normalności, ale coś w niej działa niesamowicie dobrze i łatwo ją kochać. Jego nietypowy układ nie sprawia, że jest trudny w użyciu, a efekt końcowy jest wyraźnym i przyjemnym doświadczeniem.
Zasoby
Wreszcie, w tej rundzie chciałbym dołączyć kilka przydatnych jQuery wtyczki, które rozwiązują problem związany z naprawą elementów w określonej lokalizacji na stronie. Oferują różne funkcje, które będą pasować do różnych potrzeb, więc koniecznie zapoznaj się z nimi, aby znaleźć odpowiednie dopasowanie.
Wspaniałą rzeczą jest to, że wszystkie są wtyczkami jQuery i są bardzo proste w implementacji. Jeśli chcesz stworzyć ten styl, to przynajmniej sprawi, że będzie to łatwe zadanie.
Surykatka
Surykatka to jedno z moich ulubionych narzędzi do tej pracy. Jego zdolność do ukrywania sprawia, że jest świetnym narzędziem do wyświetlania treści promocyjnych lub ważnych funkcji, takich jak formularze rejestracji e-mail.
Stickyscroll
Stickyscroll to wtyczka, która pozwala tworzyć elementy przewijające się ze stroną, dopóki nie trafią w górę, a następnie pozostaną w miejscu. Ta wtyczka pomaga również upewnić się, że elementy nie przewijają się w obszarze stopki, nadając jej dolną granicę; fajna dodatkowa funkcja na pewno.
Punkty trasy
Punkty trasy umożliwia wyzwalanie zdarzeń jQuery, gdy użytkownik przewija do określonych punktów na stronie. Jest to przydatne, jeśli chcesz podświetlić lub zmienić nawigację zgodnie z lokalizacją użytkownika na stronie. Ale zabawa nie kończy się na tym, ponieważ istnieje niezliczona ilość rzeczy, które można zrobić na stronie lub projekcie, gdy użytkownik przewija się i wchodzi w interakcje.
Wniosek
Naprawione elementy są teraz wspólnym elementem, który projektanci mogą zastosować. Narzędzia do realizacji takich funkcji i pełna obsługa przeglądarki nie stanowią już problemu.
Jako taka, świetną techniką jest trzymanie paska narzędziowego i wyciąganie, gdy czas jest właściwy. Takie podejścia nie są oczywiście rzeczami używanymi codziennie, ale mogą być niesamowicie potężne, gdy są efektywnie wykorzystywane.