Kiinteät verkkoelementit
Kiinteiden sijaintielementtien käyttö on kasvanut suosionaan ja siitä tulee verkon yhteinen elementti.
Tässä tekniikassa on kiinnitettävä osa elementtiin selaimeen, kun taas loput sivut liikkuvat. Useimmiten tämä on tehty otsikon elementeillä, mukaan lukien sivuston päävalikko. Tämä on myös suosittu lähestymistapa yksittäisten sivujen sivustoihin, joissa sivunavigointi on aina läsnä. Löydämme myös erilaisia web-sivujen osia, jotka on lukittu paikallaan tällaisten tekniikoiden avulla.
On monia tilanteita, joissa voimme löytää, mistä elementin kiinnittäminen sivulle on hyvä asia, mutta kaikki palaa yhteen tarkoitukseen. Lähes kaikissa näissä tilanteissa kiinteä elementti on aina kriittinen osa sivua käyttäjien edessä.
Näiden elementtien merkitys vaihtelee, mutta jossain määrin perustavoitteena on, että osa sivusta pysyy pysyvästi näköalapaikassa.
Kun harkitset tämän tekniikan käyttämistä, suosittelen, että harkitsette tarkkaan, miksi ja miten teet niin. Muista, että mikä osa sivustasi ei liiku, kiinnittää paljon huomiota. Joten varmista, että laitat sen toimimaan. Let's sukeltaa sisään!
Kiinteät otsakkeet
Kiinteät otsakkeet ovat selvästi yleisimpi kiinteä sijainti -elementti, joten tosiasiassa minun piti aloittaa lisääminen tähän kokoelmaan liian monien näytteiden välttämiseksi. Yleensä otsikko on kiinnitetty paikalleen varmistaakseen, että sivuston navigointi on aina läsnä. Kuten aiemmin mainitsin, tämä pätee erityisesti silloin, kun käsitellään yhtä sivua.
On olemassa monia hienovaraisia muunnelmia siitä, miten voit käsitellä kiinteitä otsikoita, joten tarkastelemme joitakin näytteitä erilaisista ideoista tässä lähestymistavassa.
Freckles & Handsome
Tätä pidän klassikkona esimerkkinä tästä tekniikasta. Otsikko on kiinnitetty paikalleen, kun selaat sivua. Tämä sisältää logon ja tärkeimmät navigointielementit. Lisäksi se on yhden sivun verkkosivusto. Napauttamalla päävalikkoa voit vierittää sivun oikeaan osaan.
Tällaisessa tapauksessa tahmea otsikko tekee yhden sivun selaamisen suoraan eteenpäin. Lisäksi vältetään monien yksittäisten sivujen ärsyttävämpiä osia: kun navigointi on vain sivun yläosassa, se rullataan ikuisesti. Sellaisena kiinteä otsikko ei vain näytä hyvältä ja pitää sivuston tärkeimmän brändin edessä ja keskellä, mutta myös varmistaa, että sivusto on helppokäyttöinen.
Mapalong
Tämä esimerkki käyttää kiinteää otsikkoa, mutta sen omalla pienellä kierteellä. Tämä sivusto on myös yhden sivun asettelua, mutta siinä ei ole mitään sivun navigointiin. Tässä tapauksessa kiinteä otsake sisältää päälogon ja kirjautumisnappulan, molemmat erittäin tärkeät elementit. Mutta jopa parempi, kun vierität sivua alas, pääpuhelu toimintaan siirtyy otsikkoon, kun se rullaa pois näkyvistä. Tämän seurauksena sivuston ensisijainen muuntopiste on aina näkyvissä. Ja vieläkin parempaa, haastatteluprojektin toiminto, joka haalistuu näkymään, kutsuu käyttäjän huomion siihen, mikä korostaa muunnospistettä suunnittelussa! Mielestäni lähestymistavan loistava käyttö.
Kisko Labs
Toinen älykäs lähestymistapa kiinteään sijaintiotsikkoon on tekniikka, jota kutsun liukuu ja kiinni. Kisko Labs -sivustolla vain osa otsikon tikkuista. Kun vierität sivua alaspäin, pääavigointi liikkuu myös. Eli kunnes se osuu näytön yläosaan, se tarttuu siihen. Siten navigointi liukuu (tai rullaa) normaalisti, sitten pysyy yläosassa.
Erittäin yksityiskohta, joka on todella mukava tässä, on, miten navigointi korostaa sen osan sivua, jota parhaillaan katselet. Koska tämä on yhden sivun suunnittelu, on hyödyllistä, että sivun nykyinen osa tunnistetaan tavallisella "nykyisellä sivulla" navigoinnin tilalla.
Nosta katto
Tämän tyylien yhteinen laajennus on sisällyttää tietty taso läpinäkyvyyteen tahmeaan kerrokseen. Monissa näissä esimerkeissä tämä tapahtuu yksinkertaisesti sillä, että sillä on epätasainen reunus tahmealle elementille. Joskus tämä tapahtuu siten, että elementti työntyy ulos kiinteästä palkista, muina aikoina rei'itetyllä reunalla. Raise the Roof -sivustossa on tehty hyvin orgaaninen ja lähes satunnainen raja.
Tässä näytteessä löytyy mielenkiintoinen visuaalinen tulos. Käyttämällä päällekkäisiä elementtejä sivusto luo visuaalisen syvyyden, kun sisältö kulkee otsikon taakse. Tätä korostaa myös taustalla oleva kuu, joka on myös kiinteä. Lopputuloksena on kolme visuaalista kerrosta. Tällainen syvyys lisää suurta visuaalista kiinnostusta ja voi luoda visuaalisesti silmiinpistävän suunnittelun.
Tervetuloa vesiin
Tervetuloa vesistöön on melko epätavallinen luomus. Hyvin vähän tästä sivustosta sopii verkon ulkoasun ja suunnittelun normit. Erityisen kiinnostunut tämän artikkelin aiheesta on kiinteä otsikko. Tällä sivustolla kiinteä elementti toimii navigointityökaluna sivustolle. Monilla tavoilla se kuitenkin tuntuu enemmän työkaluriviltä.
Lisätäytteitä kiinteistä otsikoista
Seuraavassa on muutamia esimerkkejä kiinteistä otsikoista. Löydät laajan valikoiman tyylejä ja hienovaraisia muunnelmia täältä.
Tam Cai
Marlon Messam
Big Eye Creative
Balencic Creative Group
Ivo Mynttinen
Krista Ganelon
Creattica
Ian James Cox
Tee parempia sovelluksia
Matthew Carleton
Shweplantis
TruQua
Rodolphe Celestin
Holcomb-kitarat
Trussystem
Kiinteät alatunnisteet
Ehkä ilmeisin vastakohta kiinteään otsikkoon olisi kiinteä alatunniste. Tällöin sivun alatunniste on juuttunut näytön alaosaan. Kun käyttäjä vierittää, elementti pysyy paikallaan.
Paljon kuin mihin tahansa muuhun kiinteään elementtiin luodaan keskipiste on edelleen ensisijainen tavoite. Mielenkiintoista huolimatta tällaisilla alustoilla on useimmiten toissijainen tehtävä, joka on edelleen ensisijainen tavoite.
Lyijytön ryhmä
Lyijyttömän ryhmän sivusto on erinomainen esimerkki tästä. Tässä kiinteä alatunniste sisältää elementtejä, jotka ovat toimintasuuntautuneita ja törmäävät sivuston ydintoimintoon. Ensinnäkin huomaa, että kaikki tämän palkin kohteet ovat asioita, joita käyttäjä voi tehdä: mainostaa niitä sosiaalisessa mediassa, soittaa puhelun tai lähettää heille sähköpostia. Toiseksi ne ovat ensisijaisia toimenpiteitä, joita virasto todennäköisesti haluaa sinun ottavan. He haluavat joko mainostaa heitä tai ottaa heihin yhteyttä. Nämä ovat ensisijaisia syitä tällaisen sivuston luomiseen. Joten on järkevää korjata ne paikalleen, kun alat kiinnittää paljon huomiota.
Envato
Envato-sivustolla on myös kiinteä alatunniste. Tässä palkissa on sivuston ensisijainen logo, joka on mielenkiintoisesti siirretty täältä tyypillisestä ylhäältä vasemmalta. Suoraan sanottuna Envaton brändille tämä ei ole ongelma. Lisäksi löydät valikoiman pudotusvalikoita, jotka käynnistävät sinut eri web-ominaisuuksille. Tämä yksinkertainen tehtävä on niiden todellinen tavoite. Itse voit sanoa, että tämä yritysprofiilisivu ei ole oikeastaan, mihin he haluavat ihmisten päätyvän. Sellaisena, keskittyminen auttamaan sinut takaisin niiden sisältö sivustoja on näkyvä ja väistämätön.
Kiyuco
Monien sivustojen, kuten tämän, niiden sähköpostiohjelmat ovat erittäin tärkeitä. Koska sellainen, jolla on kiinteästi sijoitettu alatunniste, joka korostaa näkyvästi kirjautumislomaketta, voi pitkään kasvattaa tällaisia postituslistoja. Voiko sähköposti markkinointi auttaa sinua mainostamaan sivustosi pitemmän ajan ja tehokkaammin jatkamaan asiakkaita? Jos näin on, ehkä tällainen kiinteä alatunniste olisi hyvä työkalu.
Kiinteät asemat
Web-sivun lukituselementit paikoilleen eivät ole vain otsikoihin ja alatunnisteisiin rajatut, vaikka ne saattavat olla suosituimpia. Näyttäisi siltä, että kiinteä sijainnin sivupalkki on lähellä toista.
Kiinteät paikanpalkit sisältävät usein hyvin samankaltaisia tietoja kuin mitä otsassa olisi. Tämä sisältää esimerkiksi logoja, navigointi- ja sosiaalisen median työkaluja. Seuraavassa on joitain näytteitä harkitsemaan, haluatko käyttää tätä lähestymistapaa.
Jorge Rigabert
Tämä upea sivusto on täydellinen esimerkki tyylistä työssä. Tässä sivupalkki sisältää sivustot ensisijaiset tuotemerkit ja navigointiasetukset. Tämä sivupalkkityyppinen lähestymistapa on loistava, koska se pitää navigoinnin näkyvänä sivun vieressä, mutta myös siksi, että se ei risteä sisältöön, kun se liikkuu. Vaikka tämä saattaa olla hieno erotus, se tekee uskomattoman sileästä käyttöliittymästä. Tällaiset sivustot näyttävät tyylikkäältä, joka näyttää yksinkertaiselta, mutta on erittäin vaikea koota yhteen.
Lisää vaarat enemmän sankareita
Rakastan todella tämän sivuston toimivuutta. Sivupalkin kiinteät elementit ovat ydinfunktioita, jotka sivuston omistajat haluavat sinun ottavan. Enemmän kuin mitä he haluavat kuulla musiikkia! Sellaisena, näkyvä ja pysyvästi näytössä "play" -ominaisuus on valmis ja odottaa. En voi kuvitella kriittisempiä elementtiä sivustoon, ja jotta se näkyvästi näkyvissä, on vain järkevää. Ja sinun on rakastettava sitä, että sitä ei ole esitetty hämmentävällä tavalla; se ei edes autoa pelata. Kudos suunnittelija, joka valvoi tämän kiusauksen.
Yowza
Joskus on toivottavaa luoda yksi tahmea elementti, joka edistää tietyn funktion. Olemme nähneet tämän erilaisilla palaute- ja tukipalveluilla, jotka voit liittää sivustoosi. Tällöin on kiinnitetty Facebook-tyyppinen painike sivun puolelle. Se pysyy paikallaan vierittämällä sivua. Tämä luonnollisesti kiinnittää käyttäjän huomion elementtiin ja kannustaa heitä käyttämään sitä. Sanoisin, että tämä osoittaa sosiaalisten viittausten voiman ja merkityksen tällaisessa verkkopohjaisessa liiketoiminnassa.
Sivuvirheenä rakastan sivuston kääntöä 10-kertaiseksi ylimpään reunaan, joka on tullut niin suosittu. Tässä elementti yksinkertaisesti vierittää. Ei dramaattinen animaatio, mutta jotain siitä on hauskaa ja lisää sivustoon kiinnostuksen ja elämäkerroksen.
Fat-Man Collective
Tämä sivusto seuraa kaikkia aiemmissa näytteissämme löydettyjä kuvioita. Mutta se erottuu valtavassa mielessä yksinkertaisen animaation ansiosta. Kun vierit sivua alaspäin, sivupalkin merkki animaa ja kävelee. Tämä elementti yksinkertaisesti korottaa sivuston ainutlaatuiseksi ja mieleenpainuvaksi luokaksi. Kuinka jotain niin vähäpätöistä voi olla tällainen vaikutus. Se vie tämän yksinkertaisen sivuston ja pumput täynnä awesomeness. Se osoittaa, että sen takana toimiva virasto haluaa kiillottaa työtään viimeistelytyyppien kanssa, minkä tahansa asiakkaan on kuoltava.
Lisää kiinteitä sivupalkin elementtejä
Seuraavassa on muutamia esimerkkejä kiinteistä työtasoluista.
Silly Poems
Colin McKinney
Ilmiantaja
Tämä on Marcela
Janette D. Neuvosto
Logo vain
Lähestymistapa, jota emme löydä kaikkea usein kiinteä asema -logo. Tässä esimerkissä logo on lukittu paikalleen, vaikka sivu rullaisi. Tämä epätyypillinen lähestymistapa pitää sivuston nimen edessä ja keskellä. Tällaiset mallit voivat olla kiinnostavia. On todella vaikeaa arvata, miksi he olisivat voineet tehdä tämän, mutta voi vain olettaa, että tärkein tuotemerkki on erittäin tärkeä. Ehkä heillä on paljon samanlaista kilpailua? Ehkä he vain haluavat varmistaa, että muistat heidän nimensä? Riippumatta on mielenkiintoinen tekniikka, joka pitää mielessä, jos se koskee projektia.
"Takaisin alkuun"
Kun kyseessä on todella pitkä sivu, mukava lisäominaisuus on linkki, joka vie sinut sivun yläreunaan. Ja tahmeilla elementeillä voit luoda sellaisen linkin, joka pysyy samassa paikassa kuin vierität sivua. Juuri tässä esitetyt näytteet ovat tehneet.
Useimmiten tällainen elementti on sijoitettu ulkoasun ulkopuolelle. Tällä tavoin se ei häiritse mitään muuta suunnittelussa, koska se kulkee sivun läpi. Huomaat myös, miten näillä elementeillä on usein nuoli ylöspäin - ehkä ilmeinen elementti sisällyttää, mutta on tärkeää pitää mielessä, koska se ilmoittaa käyttäjille nopeasti sen tarkoituksesta.
Tämä lähestymistapa on jossain määrin ristiriidassa tahmean otsikon käsitteen kanssa. Tässä tapauksessa navigointi on useimmiten vain sivun yläosassa. Niinpä palaaminen on tärkeää, koska se sallii ihmisten nopeasti selata sivuston sisältöä. Yhden sivun sivustoissa tämä voi kuitenkin olla hieman ärsyttävää ylimääräistä askelta.
Overlapps
Tämä näyte näyttää mukavan ylimääräisen kosketuksen, koska siinä ei näytetä paluuta yläosaan, ellei et todellakaan ole sivun yläreunassa. Ehkä ilmeinen yksityiskohti on sisällytettävä, mutta kuten huomaat, se ei aina ole. Osa valta tässä lähestymistavassa on se, että sen juuri näyttävä tekijä kiinnittää huomiota siihen varmistaakseen, että käyttäjä on tietoinen siitä.
Kaksi muuta näytettä
Kaksi seuraavaa esimerkkiä ovat palanneet yläpainikkeisiin, vaikka ne näkyvät koko ajan. Minulle on mielenkiintoista, että tämä elementti on useimmiten ruudun oikeassa alakulmassa. Se ei ole muotoilun näkyvin osa, joten ehkä se on toissijainen luonne, joka on hyvä tällaiselle vähemmän tärkeälle elementille. Huomaat tietenkin, että elementti on edelleen korostettu rikkomalla rajoja ja rohkeilla väreillä. Oletan, että tarinan moraali on ottaa huomioon sen merkitys suunnittelusi käytössä. Jos se tekee kaiken eron, varmista, että se on näkyvissä.
Jääkorttien ajattelu
Dusanka & David
Useita kiinteitä elementtejä
Tässä viimeisessä esimerkissä tarkastelemme sivua, jolla on useita kiinteitä elementtejä sivulta. Monin tavoin tämä sivusto rikkoo suurimman osan web-suunnittelun ja layoutin normeista. Lukuun ottamatta logoa vasemmassa yläkulmassa lähes mitään ei ole tavallisessa paikassa.
Me löydämme joitain elementtejä, jotka tunnemme tämän artikkelin perusteella, kuten kiinteän sivupalkin. Huomaat kuitenkin, että kaksi muuta eivät ole tyypillisiä. Esimerkiksi kiinteä alatunniste, joka sisältää joitakin sivuston leveitä linkkejä. Asiat, kuten tietosuojakäytännöt ja käyttöehdot, antavat harvoin tällaisen näkyvän sijainnin sivulle. Silti näet, että ne kiinnittyvät sivulle muuallakin tärkeällä navigointiyhteydellä.
Pidän todella siitä, miten he ovat yhdistäneet käyttäjätilin linkit oikeaan yläkulmaan. Siellä ne ovat usein paikallaan, mutta ne ovat harvoin kiinnitettyjä, riippumatta siitä, miten rullaa, kuten tässäkin tapauksessa. Pidän tästä, koska se takaa, että voit aina nopeasti päästä jäsenen sivuston ominaisuuksiin; jotain, jonka ehkä jotkut muut sovellukset ja verkkosivustot voisivat hyötyä.
Kaiken kaikkiaan tämä sivusto ei ole tavallista, mutta jotain siitä toimii uskomattoman hyvin ja on helppo rakastaa. Sen epätavallinen asettelu ei vaikeuta käyttöä ja lopputulos on selkeä ja miellyttävä kokemus.
voimavarat
Lopuksi, tällä kierroksella haluan sisällyttää joitakin käteviä jQuery plugins, jotka käsittelevät kiinnityselementtien tarvetta tiettyyn paikkaan sivussa. Ne tarjoavat erilaisia ominaisuuksia, jotka sopivat erilaisiin tarpeisiin, joten muista selvittää ne kaikki oikean sovituksen löytämiseksi.
Suuri asia on, että ne ovat kaikki jQuery-laajennuksia ja ne ovat erittäin helppoja toteuttaa. Jos haluat tuottaa tätä tyyliä, ne ainakin tekevät siitä helppoa työtä.
meerkat
meerkat on yksi suosituimmista työkaluista tähän työhön. Se on kyky piilottaa, joten se on erinomainen työkalu mainosmateriaalin tai tärkeiden ominaisuuksien, kuten sähköpostiosoitteiden, esittämiseen.
Stickyscroll
Stickyscroll on plugin, jonka avulla voit luoda elementtejä, jotka vierivät sivun kanssa, kunnes ne osuvat päälle, ja sitten ne pysyvät paikallaan. Tämä plugin auttaa myös varmistamaan, että elementit eivät selaa alatunnisteen alueelle antamalla sille pohjan rajan; mukava lisäominaisuus varmasti.
reittipisteet
reittipisteet voit käynnistää jQuery-tapahtumia, kun käyttäjä selaa tiettyihin pisteisiin sivulla. Tämä on kätevää, jos haluat korostaa tai muuttaa navigointi vastaamaan käyttäjän sijaintia sivulla. Mutta hauskuus ei pääty sinne, sillä on olemassa lukemattomia asioita, joita voit tehdä sivulle tai muotoilulle, kun käyttäjä selaa ja vuorovaikuttaa sen kanssa.
johtopäätös
Kiinteät elementit ovat nyt yhteisiä elementtisuunnittelijoita, jotka voivat työskennellä. Työkalut tällaisten ominaisuuksien ja täyden selaintuen tukemiseksi eivät enää ole ongelma.
Sellaisena se on hieno tekniikka pitää työkalu vyö ja vetää ulos, kun aika on oikea. Tällaiset lähestymistavat eivät luonnollisestikaan ole tyypin mitä käytät päivittäin, mutta ne voivat olla uskomattoman tehokkaita, kun niitä käytetään tehokkaasti.