Aggiungi segnali visivi al tuo sito

Sep 15, 2025
Come si fa

È fastidioso per gli utenti del sito web fare clic su un collegamento solo per scoprire che la pagina Web non è di interesse, sprecando il loro tempo. L'utilizzo di un'immagine nella pagina Background è un ottimo modo per offrire agli utenti un'indicazione di cosa aspettarsi da un collegamento prima di impegnarti a caricare la pagina. Puoi vedere un grande esempio di questa tecnica in uso sul Sito di vita di Ivan Aivazvsky .

L'utilizzo della pagina Background può anche aiutare i lettori dislessici o coloro che parlano inglese come linguaggio aggiuntivo. In questi casi è possibile comunicare ulteriori informazioni all'utente senza sovraccaricarle con troppi testo.

  • 10 passaggi per creare un'esperienza utente coinvolgente

Come con qualsiasi effetto che combina il testo con le immagini di sfondo, assicurarsi che il tuo testo rimane leggibile in ogni momento. Questo può essere ottenuto posizionando un colore semitrasparente sui tuoi collegamenti di navigazione. Considera anche la leggibilità UX per questioni come la cecità dei colori che influiscono su come gli utenti sono in grado di interpretare il testo colorato.

Ecco che ti mostreremo come creare un display di navigazione interattivo con utile e accessibile Segnali visivi.

Scarica i file per questo tutorial Qui .

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website)

Il sito di vita Ivan Aivazvsky cambia le immagini di sfondo mentre si aggirano i collegamenti (clicca sull'immagine per andare al sito Web)

01. Creare il documento HTML

Creare il modello di documento HTML principale, che consiste nel contenitore HTML che memorizza la sezione della testa e del corpo.

La sezione della testa memorizza le informazioni di descrizione come il titolo del documento, nonché i collegamenti a risorse esterne - ovvero CSS e JavaScript.

Il corpo memorizza il contenuto del documento. Una caratteristica significativa del corpo è l'attributo "Data-theme" che ha applicato - da modificare da JavaScript per attivare le modifiche alla presentazione CSS. 

 & lt ;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; navigazione background & lt; / title & gt;
& lt; lt; link rel = "stilsheet" type = "testo / css" href = "stili.css" / & gt;
& lt; script type = "testo / javascript" src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; tema dei dati del corpo e GT;
*** PASSO 2
& lt; / corpo e GT;
& lt; / html & gt;

02. Aggiungi navigazione html

Il contenuto della pagina è costituito da un contenitore di navigazione contenente collegamenti. L'ID di navigazione ei titoli dei collegamenti figlio verranno utilizzati da JavaScript per ascoltare le interazioni e alterare l'attributo "Data-theme" definito come parte del contenitore del corpo. 

 & lt; nav id = "mainnav" & gt;
& lt; a href = "#" Titolo = "Pagina 1" & GT; Pagina 1 & lt; / A & GT;
& lt; a href = "#" Titolo = "Pagina 2" & GT; Pagina 2 & lt; / A & GT;
& lt; A href = "#" Titolo = "Pagina 3" & GT; Pagina 3 & lt; / A & GT;
& lt; / nav & gt;

03. Avviare il file CSS

Il contenuto HTML è ora completo, quindi crea un nuovo file chiamato 'stili.css'. Questo file memorizza le regole di formattazione CSS che controllano la presentazione visiva. Avviare questo file con regole per presentare il documento HTML e il suo corpo per apparire sullo schermo intero utilizzando uno sfondo bianco e un testo nero. 

 HTML, Body {
  blocco di visualizzazione;
  Larghezza: 100%;
  Altezza: 100%;
  Margine: 0;
  Imbottitura: 0;
  Fammon-family: Helvetica, sans-serif;
  Colore: # 000; }

04. Imposta regole per immagini

Un componente importante per l'effetto è l'uso dell'attributo "DATA-TEME" applicato al corpo del documento. Una regola è impostata per definire il comportamento predefinito dei dati - che utilizzeremo per il posizionamento in background e il passaggio della transizione.

Ciò evita la necessità di ripetere queste definizioni di regola per ogni singolo tema, il che rende le tue pagine Web più facili da mantenere. 

 [DATA-TEME] {
  Transizione: sfondo 1s;
  Sfondo: Centro Centro NO-ripetitivo;
  Dimensioni di sfondo: copertina; }

05. Progetta il tema

La progettazione di ciascun tema è impostata utilizzando il valore dell'attributo TEME DATA-TEME.

Per raggiungere l'effetto desiderato, stiamo impostando un'immagine di sfondo diversa per ogni versione del tema. Il passaggio precedente si prende cura di tutte le impostazioni predefinite che questi temi erediteranno. 

 [DATA-TEME = "Pagina 1"] {
  Immagine di sfondo: URL (image1.jpg);
}
[DATA-TEME = "Pagina 2"] {
  Immagine di sfondo: URL (image2.jpg);
}
[DATA-TEME = "Pagina 3"] {
  Immagine di sfondo: URL (image3.jpg);
}

06. Aggiungi un contenitore di navigazione

Il contenitore di navigazione viene utilizzato per assicurarsi che i collegamenti siano presentati con una larghezza coerente posizionata nel mezzo dello schermo. Viene applicata una larghezza del 50% e il calcolo automatico utilizzato per il margine orizzontale. Questo approccio fornisce una garanzia di coerenza indipendentemente dalla risoluzione / dimensione dello schermo dell'utente. 

 #Mainnav {
  blocco di visualizzazione;
  Larghezza: 50%;
  Margine: 0 Auto 0 Auto; }

07. Collegamenti di navigazione in stile

I collegamenti all'interno del contenitore di navigazione devono essere visualizzati come blocchi impostati per adattarsi alla larghezza del contenitore. Ciò significa che la loro larghezza del 100% è definita dalla larghezza del contenitore. Si applicano anche imbottiture, bordi e coloranti in background per assicurarsi di distinguersi dalle immagini di sfondo. 

 #Mainnav a {
  blocco di visualizzazione;
  Larghezza: 100%;
  Sfondo: RGBA (255.255.255.3);
  Colore: # 000;
  Imbottitura: 1em;
  Margine-Top: .5em;
  Confine: 1 px solido; }
#Mainnav A: Hover {
  Sfondo: RGBA (0,0,0, .5);
  Colore: #FFFF; }

08. link listener eventi

Il CSS è ora completo, quindi crea un nuovo file chiamato 'code.js' per il JavaScript.

L'effetto richiede ciascun collegamento all'interno della navigazione per ascoltare e reagire a un evento del mouseover in cui l'utente aleggia su un collegamento. Questo ascoltatore applica il valore "Titolo" del collegamento all'attributo del tema DATA del corpo del documento - quindi innescando gli stili nel CSS.

Dopo aver caricato la finestra della pagina, i nodi di collegamento di navigazione vengono inseriti in un array, su cui viene utilizzato A per loop per applicare l'ascoltatore dell'evento. 

 Finestra.AddeventListener ("Carica", funzione () {
  var nodes = document.queryelectorall ("# mainnav a");
  per (var i = 0; i & lt; nodes.length; i ++) {
  Nodi [I] .ADDeventListener ("Mouseover", funzione () {
  document.body.setattribute ("dati-tema", questo.getattribute ("titolo"));
  }););
  }
});

Questo articolo è stato originariamente apparso nel numero del web designer 262. Compralo qui !

Articoli Correlati:

  • 10 Tendenze di navigazione del sito Web per il 2017
  • 10 passaggi per creare un'esperienza utente coinvolgente
  • Léonie Watson on Perché accessibilità deve essere parte integrante dei processi di web design

Come si fa - Articoli più popolari

22 migliori strumenti di progettazione UI

Come si fa Sep 15, 2025

(Immagine di credito: Invirazione) Una selezione dei migliori strumenti di progettazione dell'UI aiuterà con quasi t..

Come disegnare una rosa: suggerimenti per principianti e avanzati

Come si fa Sep 15, 2025

Come disegnare una rosa - Come disegnare un video rosa - Come disegnare una rosa: principianti - C..

Crea un effetto anaglifo antico-scuola

Come si fa Sep 15, 2025

(Immagine di immagine: Travis Knight) Un effetto anaglifo è il nome corretto per lo stile 3D classico in cui è nece..

Dipingi su una maglia 3D con lo strumento Polypaint di Zbrushcore

Come si fa Sep 15, 2025

Polypaint in. Zbrushcore. è uno strumento fantastico che consente di aggiungere colori e trame al modello quando ..

Scarica file per 3D World 232

Come si fa Sep 15, 2025

Per scaricare i file di accompagnamento per il numero 3D 3D 232, fai semplicemente clic sul collegamento sotto ogni articolo e un..

Come creare effetti sorprendenti con forme CSS

Come si fa Sep 15, 2025

Gli sviluppatori di frontend tendono a pensare in rettangoli; Rettangoli all'interno dei rettangoli all'interno dei rettangoli al..

Come progettare interfacce mobili user-friendly

Come si fa Sep 15, 2025

Alcuni disegni mobili soffrono di un problema: potrebbero sembrare benissimo in superficie, ma iniziare a usarli e scoprire prest..

Dipingi una scena epica di New York

Come si fa Sep 15, 2025

Per questo workshop dipingendo una delle mie materie preferite: un ponte di New York. Ho dipinto il ponte di Brooklyn molte volte in diverse luce, quindi per questo progetto ho scelto il pont..

Categorie