Webové prvky s pevnou pozicí
Použití pevných polohových prvků se zvětšilo v popularitě a stalo se běžným prvkem na webu.
Tato technika zahrnuje fixaci některého prvku v prohlížeči, zatímco zbývající stránka se posouvá. Nejčastěji se to dělá na hlavičkových prvcích včetně hlavní navigace pro web. Toto je také oblíbený přístup na stránkách s jednou stránkou, kde musí být navigace stránek vždy přítomná. Dále nalezneme různé prvky webových stránek zablokované pomocí takových technik.
Existuje mnoho situací, které můžeme najít tam, kde je určení prvku na stránce dobrou věcí, ale vše se vrací k jedinému účelu. Takřka ve všech těchto situacích fixní prvek stále drží důležitou část stránky před uživateli.
Důležitost těchto prvků se liší, ale do jisté míry je základním cílem udržení určité části stránky neustále v pohledu portu.
Jak se domníváte, že používáte tuto techniku, důrazně doporučuji pečlivě zvážit, proč a jak to děláte. Mějte na paměti, že bez ohledu na to, jakou část vaší stránky se nebude pohybovat, bude automaticky čerpat spoustu pozornosti. Takže se ujistěte, že ho dáte do práce. Pojďme se ponořit!
Pevné záhlaví
Pevné záhlaví jsou zdaleka nejobvyklejším fixním prvkem, takže jsem ve skutečnosti musel do této sbírky začít přidávat, aby se předešlo příliš velkým množstvím vzorků. Nejčastěji je záhlaví nastavena na místě, aby bylo zajištěno, že navigace stránek bude někdy přítomna. Jak jsem již zmínil, je to obzvláště pravda, když se jedná o webovou stránku o jediné stránce.
Existuje mnoho jemných variací v tom, jak můžete pracovat s pevnými záhlavími, abychom si pro tento přístup přečetli některé ukázky různých nápadů.
Frekvence a hezký
To je to, co považuji za klasický příklad této techniky. Při procházení stránkami je záhlaví pevně nastavena. To zahrnuje logo a hlavní navigační prvky. Dále je to jediná stránka. Kliknutím na hlavní navigaci se dostanete na příslušnou část stránky.
V takovém případě, když tato slepá hlavička umožňuje procházet stránky jedné stránky přímo vpřed. Rovněž se vyhýbá jednomu z více otravných aspektů mnoha webových stránek s jednou stránkou: když je navigace pouze v horní části stránky, ale posouvá se po celé věky. Jako takový, pevný záhlaví nejen vypadá hezky a udržuje hlavní značku místa vpředu a středu, ale také zajišťuje, že místo je snadno použitelné.
Mapalong
Tento příklad používá pevnou záhlaví, ale svou vlastní nepatrnou změnou. Tento web je také rozvržení jedné stránky, ale chybí v navigaci na stránce. V tomto případě obsahuje pevná záhlaví hlavní logo a tlačítko pro přihlášení, které jsou oba velmi důležité prvky. Ale dokonce lépe než to, když se procházíte dolů po stránce, hlavní volání k akci se přesune do záhlaví, když se vynoří. Výsledkem je, že primární konverzní bod webu je vždy viditelný. A přesto, dokonce lépe než to, čin volání po akci, který se zhoršuje, vyvolává pozornost uživatele a dále zdůrazňuje konverzní bod v návrhu! Podle mého názoru je brilantní využití tohoto přístupu.
Kisko Labs
Dalším chytrým přístupem k hlavičce pevné pozice je technika, kterou volám snímku a držet. Na stránkách laboratoře Kisko pouze část záhlaví. Při procházení stránky se posouvá i hlavní navigace. To dokud nenarazí na horní část obrazovky, pak se tam drží. Navigační snímky (nebo roluje) tak normálně, pak se drží nahoře.
Další detail, který je opravdu pěkný, je, jak navigace zvýrazňuje část stránky, kterou právě prohlížíte. Vzhledem k tomu, že se jedná o návrh jediné stránky, je užitečné, aby aktuální část stránky byla označena jako normální stav "aktuální stránky" jakékoliv navigace.
Zvedněte střechu
Společným rozšířením tohoto stylu je začlenění určité úrovně průhlednosti do lepivé vrstvy. V mnoha příkladech, které se zde vyskytují, se jedná o to, že má jednoduše nerovný okraj k lepivému prvku. Někdy se to děje tím, že prvek vyčnívá z pevné lišty, jindy se zubatou hranou. Na pozici Zvednout střechu byla provedena velmi organická a téměř náhodná hranice.
V tomto vzorku nalezneme zajímavý vizuální výsledek. Prostřednictvím použití překrývajících se prvků vytvoří stránka vizuální hloubku, protože obsah se posouvá za záhlaví. To je dále zdůrazněno měsícem v pozadí, který je také pevný. Konečným výsledkem jsou tři vizuální vrstvy. Taková hloubka přispívá ke značnému vizuálnímu zájmu a může vytvořit vizuálně nápadný design.
Vítejte do vody
Místo Vítejte na vodě je spíše neobvyklé stvoření. Velmi málo tohoto webu vyhovuje normám webového layoutu a návrhu. Zvláštní zájem o téma tohoto článku je pevná záhlaví. Na tomto webu tento pevný prvek slouží jako navigační nástroj k webu. Ale v mnoha ohledech má na ni více nástrojů.
Další vzorky pevných záhlaví
Zde jsou některé další příklady pevných záhlaví. Najdete tu širokou škálu stylů a jemných variací.
Tam Cai
Marlon Messam
Kreativní Big Eye
Balencic Creative Group
Ivo Mynttinen
Krista Ganelonová
Creattica
Ian James Cox
Udělat lepší aplikace
Matthew Carleton
Shweplantis
TruQua
Rodolphe Celestin
Holcomb kytary
Trussystem
Pevné zápatí
Snad nejvhodnějším opakem pevného záhlaví bude pevná zápatí. V takových případech je zápatí stránky přilepené na spodní část obrazovky. Jakmile uživatel posouvá, element zůstane na svém místě.
Stejně jako každý jiný pevný prvek je i nadále primárním cílem vytvořit ohnisko. Je zajímavé, že s takovými zápatí se nejčastěji jedná o sekundární funkci, která je stále primárním cílem.
Bezolovnatá skupina
Stránka s názvem Bezolovná skupina je dobrým příkladem toho. Tu fixní zápatí obsahují prvky, které jsou orientovány na akce a zasahují do jádra cíle. Nejprve si všimněte, že všechny položky v tomto panelu jsou věci, které uživatel může udělat: propagovat je na sociálních médiích, telefonovat nebo zasílat jim e-maily. Za druhé, jsou to primární akční body, které agentura s největší pravděpodobností chtěla podniknout. Oni chtějí, abyste je propagovali, nebo je kontaktovat. To jsou hlavní důvody k tomu, aby se takové stránky nacházely. Takže je to dobrý smysl, abych je opravil na místě, kde jsem měl zápěstí, kde jim bude věnovat spoustu pozornosti.
Envato
Místo Envato také má pevnou páteř. Zde je v baru umístěno primární logo webu, které bylo zajímavě přemístěno z typické horní levice. Upřímně řečeno, pro značku jako Envato to není problém. Také najdete řadu rozbalovacích nabídek, které vás zavedou na své webové stránky. Tato jednoduchá funkce je jejich skutečný cíl. Ve skutečnosti byste mohli říci, že tato stránka obchodního profilu není opravdu tam, kde chtějí, aby lidé skončili. Zaměření na to, aby jste se vrátili zpět na své obsahové stránky, je prominentní a nevyhnutelný.
Kiyuco
Pro mnoho webů, jako je tento, jejich programy e-mailového marketingu mají zásadní význam. Jako takový, mít pevně umístěné zápatí, které prominentně zvýrazní registrační formulář může jít dlouhou cestu k pěstování takových mailing listů. Může e-mailový marketing pomoci vám propagovat vaše stránky po delší časové období a účinněji sledují klienty? Pokud ano, možná by pevná päta, jako je tato, by byla skvělým nástrojem.
Postranní lišty s pevnou polohou
Zablokování prvků webové stránky není nijak omezeno na záhlaví a zápatí, i když mohou být nejoblíbenější. Zdá se, že postranní panel s pevnou pozicí je blízko.
Postranní lišty s pevným místem často obsahují velmi podobné informace, které najdete v hlavičce. Patří sem například loga, navigace a nástroje pro sociální média. Zde je několik příkladů, které chcete zvážit, pokud chcete tento přístup použít.
Jorge Rigabert
Tento úžasný web je dokonalým příkladem stylu v práci. Boční postranní panel obsahuje hlavní značky a možnosti navigace. Tento přístup typu bočního panelu je skvělý, protože udržuje navigaci v pohledu při rolování stránky, ale také proto, že se nepřekrývají s obsahem, jak se pohybuje. Ačkoli to může být jemné rozlišení, dělá to neuvěřitelně hladké rozhraní. Stránky, jako je tato, zobrazují eleganci, která se zdá jednoduchá, ale je neuvěřitelně obtížná.
Další nebezpečí Další hrdinové
Já opravdu miluju způsob, jakým tato stránka funguje. Pevné prvky v postranním panelu jsou hlavní funkce, které majitelé stránek chtějí podniknout. Více než cokoli, co chcete, abyste slyšeli hudbu! Jako takový je prominentní a trvale na obrazovce "play" funkce připravena a čeká. Nedovedu si představit pro tuto lokalitu kritičtější prvek a mít tak jasně zobrazený text má smysl. A musíte milovat, že to nebylo prezentováno nepříjemným způsobem; to dokonce ani auto hraje. Kudos k návrháři, který řídil toto pokušení.
Yowza
Někdy je žádoucí vytvořit jediný lepící prvek, který podporuje určitou funkci. Viděli jsme to s různými zpětnovazebními a podpůrnými službami, které můžete připojit k vašemu webu. V tomto případě bylo na straně stránky připojeno tlačítko podobné jako Facebook. Při procházení stránky zůstává na svém místě. To samozřejmě přitahuje pozornost uživatele k prvku a povzbuzuje je, aby ho používali. Řekl bych, že to ukazuje sílu a význam sociálních doporučení v internetovém podnikání, jako je toto.
Jako vedlejší poznámku se mi líbí to, jak se stránky naklonily na 10px horní hranici, která se stala tak populární. Zde se element jednoduše posouvá. Není to dramatická animace, ale něco o tom je zábavné a přidává na webovou stránku vrstvu zájmu a života.
Fat-Man Collective
Tato stránka následuje všechny vzory, které jsme našli v našich předchozích vzorcích. Ale v důsledku jednoduché animace je obrovský. Při procházení stránky se postava na postranním panelu animuje a prochází. Tento prvek jednoznačně vyzdvihuje lokalitu do jedinečné a nezapomenutelné kategorie. Jak je možné, že něco tak triviálního může mít takový dopad. Vychází z tohoto jednoduchého místa a pumpuje to plné úžas. Ukazuje, že agentura, která stojí za ní, si láká svou práci s typem dokončovacích akcí, kterými klient zažije.
Více pevné postranní prvky
Zde jsou některé další příklady pevných bočních panelů v práci.
Hloupé básně
Colin McKinney
Informátor
Tohle je Marcela
Janette D. Rada
Pouze logo
Přístup, který nenajdeme všude, je často pevným logem. V tomto příkladu bylo logo zablokováno na místě, i když se stránka posouvá. Tento atypický přístup udržuje název webu vpředu a středu. Takové vzory mohou být zajímavé. Je opravdu těžké odhadnout, proč to mohli udělat, ale lze předpokládat, že hlavní značka má zásadní význam. Možná, že mají spoustu podobné konkurence? Možná se jen chtějí ujistit, že si pamatujete jejich jméno? Bez ohledu na to je zajímavá technika, která stojí za to mít na paměti, pokud se týká vašeho projektu.
"Zpět na začátek"
Pokud jde o opravdu dlouhé stránky, hezká funkce, kterou přidáte, je odkaz, který vás zavede do horní části stránky. A díky lepkavým prvkům můžete vytvořit takový odkaz, který zůstane na stejném místě jako stránka, kterou procházíte. To je přesně to, co zde poskytly vzorky.
Nejčastěji je tento prvek umístěn těsně mimo rozvržení. Tímto způsobem nezasahuje do žádného jiného dílu v návrhu, když prochází stránku. Také si všimnete, jak tyto prvky často mají šipku směřující nahoru - možná zřejmý prvek, který je třeba zahrnout, ale je velmi důležité mít na paměti, protože informuje uživatele rychle, pokud jde o jeho účel.
Tento přístup poněkud kontrastuje s pojmem lepivého záhlaví. V tomto případě je navigace nejčastěji pouze v horní části stránky. Takže návrat je důležitý, protože umožňuje lidem rychle se odrazit kolem obsahu stránek. Pokud se jedná o stránky s jedním stránkem, může to být trochu nepříjemný krok.
Překrývání
Tento příklad ukazuje příjemný extra dotek tím, že nezobrazuje návrat k hornímu prvku, pokud nejste skutečně v horní části stránky. Možná je to zřejmý detail, ale jak zjistíte, není to vždycky. Součástí síly v tomto přístupu je, že samotný akt, který se objevuje, upozorňuje na to, aby se zajistilo, že uživatel o tom ví.
Další dvě vzorky
Následující dva příklady se vracejí k horním tlačítkům, ačkoli jsou viditelné po celou dobu. Je zajímavé, že tento prvek je nejčastěji umístěn v pravém dolním rohu obrazovky. Nejde o nejvýznamnější součást designu, takže možná je to druhotná povaha pro takový méně důležitý prvek. Samozřejmě si všimnete, že tento prvek je stále zvýrazněn tím, že překročíte hranice a odvádíte výrazné barvy. Předpokládám, že morálkou příběhu je zvážit jeho důležitost pro použití vašeho designu. Je-li to všechno důležité, ujistěte se, že je viditelná.
Divoké myšlení
Dusanka a David
Více pevných prvků
V tomto posledním příkladu se podíváme na stránky, které mají na stránce mnoho pevných prvků. V mnoha ohledech tato stránka porušuje většinu norem návrhu a rozvržení webu. Kromě loga v levém horním rohu téměř není nic na svém obvyklém místě.
Nalezneme některé prvky, které jsme na tomto článku obeznámeni, jako je pevná postranní lišta. Všimnete si však, že dva další nejsou daleko typické. Například pevná zápatí, která obsahuje některé odkazy na webu. Věci, jako jsou zásady ochrany osobních údajů a podmínky, zřídka zaručují takové prominentní postavení na stránce. Tady je však najdete na stránce s jinými poměrně důležitými navigačními odkazy.
Moc se mi líbí, jak se připojili k odkazům na uživatelské účty v pravém horním rohu. To je místo, kde se často nacházejí, ačkoli jsou zde zřídka uchyceny bez ohledu na rolování, jako v tomto případě. To se mi líbí, protože zajišťuje, že si můžete vždy rychle získat přístup k funkcím člena webu; něco, proč by mohly využít některé další aplikace a webové stránky.
Vše ve všech těchto stránkách je daleko od normálu, ale něco o tom funguje neuvěřitelně dobře a je snadné milovat. Jeho neobvyklé rozložení neumožňuje těžké použití a konečný výsledek je zřetelný a příjemný zážitek.
Zdroje
Konečně, s touto kulatostí bych chtěl přidat některé užitečné jQuery pluginy, které řeší potřebu upevnění prvků na určité místo na stránce. Nabízejí různé funkce, které budou vyhovovat různým potřebám, které byste mohli mít, a proto se ujistěte, že je prozkoumejte všechny, abyste našli správné nastavení.
Skvělá věc je, že jsou všechny jQuery pluginy a jsou velmi jednoduché implementovat. Pokud chcete tento styl vytvořit, bude to přinejmenším snadné.
Meerkat
Meerkat je jedním z mých nejoblíbenějších nástrojů pro tuto konkrétní práci. Jeho schopnost být skrytá činí skvělý nástroj pro zobrazování propagačního obsahu nebo důležitých funkcí, jako jsou například e-mailové formuláře.
Stickyscroll
Stickyscroll je plugin, který umožňuje vytvářet prvky, které se posouvají se stránkou, dokud nedosáhnou vrcholu, a pak se drží na místě. Tento plugin také pomáhá zajistit, aby se prvky nepohli do oblasti zápatí tím, že by to daly dolní hranici. hezké extra funkce jistě.
Trasové body
Trasové body umožňuje spustit události jQuery, když uživatel posouvá určité body stránky. To je užitečné, pokud chcete zvýraznit nebo změnit navigaci tak, aby odpovídala poloze uživatele na stránce. Ale zábava zde nekončí, jelikož na stránce nebo designu můžete udělat spoustu věcí, jelikož je s ním uživatel posouvá a interaguje.
Závěr
Pevné prvky jsou nyní společným prvkem, který mohou návrháři dát do práce. Nástroje pro dosažení takových funkcí a plnou podporu prohlížeče již nejsou problémem.
Jako taková je skvělou technikou držet se v nástroji a vytahovat, když je správný čas. Takové přístupy samozřejmě nejsou typem věcí, které používáte každý den, ale mohou být neuvěřitelně silné, pokud jsou používány efektivně.