Un sito con la navigazione a posizione fissa è uno che non consente mai all'utente di perdere il sito dei collegamenti di directory mentre scorrono.
Questo semplice trucco rende un sito incredibilmente facile da navigare ed è ideale per specifici tipi di contenuti. Di seguito daremo un'occhiata ad entrambi gli usi più comuni e più unici della navigazione fissa nel web design.
Blog
Uno dei luoghi più comuni che trovi la navigazione fissa è sui blog, in particolare sui blog Tumblr. Il motivo per cui questo formato funziona così bene per i blog è che sono notoriamente lunghi e quindi richiedono molto scorrimento. L'applicazione di una posizione fissa alla navigazione consente agli utenti di navigare il tuo sito da tutto il modo in fondo a una pagina, eliminando la fastidiosa necessità di scorrere verso l'alto. Ecco un elenco di diversi blog che ho trovato utilizzando questa tecnica.
Brian Casel
In questo sito, entrambi i link nella parte superiore e la navigazione a sinistra rimangono con te mentre scorri, rendendo davvero facile l'accesso a qualsiasi cosa di cui hai bisogno da qualsiasi punto del sito. La navigazione a sinistra non ti porta a una parte diversa del sito ma piuttosto filtra il contenuto in modo da poter visualizzare solo post di blog, citazioni, video, ecc.
David Appleyard
Il blog personale di David Appleyard di Design Shack (shhhhh, non ha idea che lo includa). David ha inserito una barra di ricerca, informazioni sui social media e vari collegamenti ad altri siti nella sua barra laterale fissa, rendendo più facile avere un rapido sguardo sulla sua intera vita digitale.
Doug Neiner
La pagina Tumblr di Doug Neiner segue lo stesso formato di David con i link social e le informazioni varie fissate sul lato sinistro dello schermo. Doug ha anche creato un'interfaccia di grande impatto per i suoi post che utilizza pali metallici e diversi allegati a seconda del tipo di post. Nel complesso, un design davvero unico!
Jaype
In contrasto con i pali metallici di Doug Neiner, Jaype usa un approccio molto più femminile con trame blu chiaro e bordi scrapbook-ish. La navigazione barra laterale utilizza un buon effetto fisarmonica per espandere ogni sezione per ulteriori opzioni. Un altro bel tocco, la barra di ricerca è fissata nella parte inferiore della pagina in modo che rimanga con te mentre ridimensiona la finestra.
Mark Jardine
In questo blog vediamo di nuovo che la barra laterale non viene usata tanto per la navigazione all'interno del sito stesso, ma per indicare i siti di social media e il contenuto associato. Mark è un designer per Tapbots, un team di sviluppatori di due uomini che crea alcune delle più belle app disponibili per l'iPhone.
Navigazione a destra
Posizionare la navigazione sul lato destro della pagina è piuttosto raro ed è in effetti un ottimo modo per far arrabbiare i nazisti dell'usabilità. L'applicazione di una posizione fissa alla tua navigazione di destra aumenta la sua visibilità in quanto l'utente interagisce con il tuo sito e riduce le possibilità di confusione per dove trovare più contenuti. Ecco alcuni esempi.
Collettivo di Fat-Man
Fat-Man Collective è il mio sito preferito in assoluto in questo post per un semplice motivo: l'uomo grasso. È questo personaggio pazzo di CG che si blocca in alto a destra dello schermo. E 'abbastanza divertente da voler amare il sito solo per questo, ma mentre scorrendo il sito l'uomo grasso ha iniziato a camminare! Ho riso forte quando ho visto questo personaggio paffuto e dalle proporzioni strane che camminava con la cravatta che sbatteva avanti e indietro. Clicca su uno dei link sotto i suoi piedi e la pagina salta in una posizione specifica, che ovviamente fa saltare l'uomo grasso. Un saluto affettuoso ai ragazzi che hanno creato questo sito; irradia con nerd awesomeness.
Piensa en Pixels
Per quel che ne so, il contenuto di questo sito è così divertente da essere in cima all'uomo grasso (improbabile). Vedendo come non riesco a leggere una sola parola, suppongo che contenga informazioni sul portfolio piuttosto semplici. Piensa en Pixels è un sito semplice ma attraente con collegamenti a diversi progetti che corrono lungo il lato destro della pagina.
Sisu
Sisu è una piccola azienda di design con alcuni clienti GRANDI. La loro navigazione fissa è contenuta all'interno di una banda in modo tale che il contenuto a sinistra e le illustrazioni a destra scorrono entrambi mentre i collegamenti rimangono. È davvero un bell'effetto e diventa utile quando stai sfogliando i numerosi premi che hanno vinto.
Siti orizzontali
È sempre un po 'rinfrescante trovare un sito che rompa la tipica forma di scorrimento verticale. Questi siti utilizzano la navigazione fissa per assicurarsi che la natura orizzontale dell'esperienza non ti faccia perdere la strada.
Netontwerp
Netontwerp utilizza jQuery per gestire l'animazione laterale che si verifica quando si fa clic su un collegamento. Mentre scorre il sito, la navigazione rimane fissa a sinistra e si adatta perfettamente al design di ogni pagina in modo incredibilmente uniforme. Adoro la natura contenuta di questo sito, che si adatta perfettamente al forte design basato sulla griglia.
f $ dsign
f $ dsign è un'altra dose di azione orizzontale tramite JavaScript. Questo sito ha quattro sezioni, facilmente raggiungibili utilizzando la navigazione fissa sul lato sinistro della pagina. Le illustrazioni pazze rendono divertente la corsa in rapido movimento!
Prendimi se ci riesci
Alcuni progettisti di siti desiderano la funzionalità di navigazione fissa senza la natura noiosa e statica di un elemento fisso. La soluzione è di consentire alla navigazione di venire avanti durante il viaggio mentre si scorre, ma di costruire in un ritardo quindi c'è una sorta di "recupero"? effetto.
Astrel Creative
Questo sito originale presenta una sezione di navigazione che scompare. Mentre scorri verso il basso, la navigazione scompare. Quando smetti di scorrere, riappare magicamente con una bella transizione. È un po 'sottile di animazione che aumenta davvero il fattore? Wow? del sito.
Il Molitor
Il Molitor adotta un approccio diverso alla navigazione finale che enfatizza il "recupero"? un'idea un po 'di più.Mentre scorri verso il basso, sembra che la navigazione rimarrà nella parte superiore della pagina. Tuttavia, mentre si rallenta o si interrompe, la navigazione diventa visibile e si ferma fino a fermarsi. Questo è divertente da giocare e vale circa sei secondi di divertimento.
Ancora di più!
Vuoi un po 'di ispirazione nav-fisso? Chiedi e riceverai il mio amico. Qui ci sono un sacco di altri esempi, opportunamente ordinati in ordine decrescente di quanto siano belli e / o unici penso che siano (tutte sono ottime selezioni). Godere.
Irvine Acosta
caramella fondente
Tenuta Nera
Vai Media
Sì, ho detto Sì
Ryan Dean-Corke
Domani Studios
Cadere su
Lato banchina
Cosa pensi?
Mi ci è voluto per sempre per trovare molti siti che utilizzano la navigazione fissa, quindi spero davvero che ti sia piaciuto il post. Altrimenti ho sprecato la parte migliore di una giornata alla ricerca sul Web quando avrei potuto fare ciò che normalmente faccio in un dato giorno? che sicuramente non sta sfogliando blog di design e gallerie CSS come un grande nerd. Ok, sto mentendo, è esattamente quello che faccio sempre.
Lame scherza a parte, usa i commenti qui sotto per farci sapere cosa pensi della navigazione a posizione fissa in generale e quale esempio ti è piaciuto di più. Sentiti libero di condividere qualsiasi esempio che trovi.