Lägg till visuella signaler till din webbplats

Sep 10, 2025
Hur

Det är irriterande för webbplatsanvändare att bara klicka på en länk för att finna att webbsidan inte är av intresse, slösa sin tid. Att använda en bild på sidan Bakgrund är ett bra sätt att ge användarna en indikation på vad man kan förvänta sig av en länk innan du förbinder dig med att ladda sidan. Du kan se ett bra exempel på den här tekniken som används på Ivan Aivazvsky Life Site .

Att använda sidbakgrunden kan också hjälpa dyslexiska läsare eller de som talar engelska som ett extra språk. I dessa fall kan du kommunicera ytterligare information till användaren utan att överbelasta dem med för mycket text.

  • 10 steg för att skapa en engagerande användarupplevelse

Liksom med någon effekt som kombinerar text med bakgrundsbilder, se till att din text alltid är läsbar. Detta kan uppnås genom att placera en halvtransparent färg på dina navigeringslänkar. Tänk också på UX-läsbarhet för problem som färgblindhet som påverkar hur användarna kan tolka färgad text.

Här visar vi hur du skapar en interaktiv navigeringsdisplay med användbar och tillgänglig visuella signaler.

Ladda ner filerna för den här handledningen här .

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

Ivan Aivazvsky Life-webbplatsen ändrar bakgrundsbilderna när du svänger över länkar (klicka på bilden för att gå till webbplatsen)

01. Skapa HTML-dokumentet

Skapa huvud HTML-dokumentmallen, som består av HTML-behållaren som lagrar huvud och kroppsdel.

Huvuddelen lagrar beskrivningsinformation som dokumenttitel, liksom länkar till externa resurser - dvs CSS och JavaScript.

Kroppen lagrar dokumentinnehållet. Ett betydande egenskap hos kroppen är attributet "Data-tema" som det har tillämpat - att ändras av JavaScript för att utlösa CSS-presentationsförändringar. 

 & lt;! Doktype html & gt;
& lt; html & gt;
& lt; huvud & gt;
& LT; Titel & GT; Navigering Bakgrund & LT; / Titel & GT;
& lt; länk rel = "stylesheet" typ = "Text / css" href = "stilar.css" / & gt;
& lt; skripttyp = "Text / javascript" src = "code.js" & gt; & lt; / script & gt;
& LT; / Head & GT;
& LT; Kroppsdata-tema och GT;
*** STEG 2
& LT; / Body & GT;
& lt; / html & gt;

02. Lägg till navigering html

Sidinnehållet består av en navigeringsbehållare som innehåller länkar. Navigeringens ID och titlarna på barnlänkarna kommer att användas av JavaScript för att lyssna på interaktioner och ändra "data-temat" -attributet som definieras som en del av kroppsbehållaren. 

 & lt; nav id = "mainnav" & gt;
& lt; en href = "#" titel = "sidan 1" & gt; sidan 1 & lt; / a & gt;
& lt; en href = "#" title = "sidan 2" & gt; sidan 2 & lt; / a & gt;
& lt; en href = "#" titel = "Page 3" & GT; Page 3 & LT; / A & GT;
& lt; / nav & gt;

03. Initiera CSS-filen

HTML-innehållet är nu färdigt, så skapa en ny fil som heter 'Styles.css'. Den här filen lagrar CSS-formateringsreglerna som styr den visuella presentationen. Starta den här filen med regler för att presentera HTML-dokumentet och dess kropp att visas över hela skärmen med en vit bakgrund och svart text. 

 HTML, BODY {
  Visa: Block;
  Bredd: 100%;
  Höjd: 100%;
  Marginal: 0;
  Padding: 0;
  Font-familj: Helvetica, sans-serif;
  Färg: # 000; }

04. Ange regler för visuella

En viktig komponent för effekten är användningen av attributet "Data-tema" som tillämpas på dokumentkroppen. En regel är inställd för att definiera datas standardbeteende - som vi använder för bakgrundsställning och ändring övergång.

Detta undviker behovet av att upprepa dessa regeldefinitioner för varje enskilt tema, vilket gör dina webbsidor enklare att behålla. 

 [Data-tema] {
  Övergång: Bakgrund 1s;
  Bakgrund: No-Repeat Center Center;
  Bakgrundsstorlek: Skydd; }

05. Designa temat

Utformningen av varje tema är inställd med värdet på datamedigattributet.

För att uppnå önskad effekt ställer vi en annan bakgrundsbild för varje version av temat. Det föregående steget tar hand om alla standardinställningar som dessa teman kommer att ärva. 

 [Data-tema = "Sida 1"] {
  Bakgrund-Bild: URL (Image1.jpg);
}
[Data-tema = "sidan 2"] {
  Bakgrund-Bild: URL (Image2.jpg);
}
[Data-tema = "sidan 3"] {
  Bakgrund-bild: URL (image3.jpg);
}

06. Lägg till en navigeringsbehållare

Navigeringsbehållaren används för att se till att länkarna presenteras med en konsekvent bredd placerad i mitten av skärmen. En bredd på 50% och automatisk beräkning som används för horisontell marginering tillämpas. Detta tillvägagångssätt ger en garanti för konsekvens oavsett användarens skärmupplösning / storlek. 

 #mainnav {
  Visa: Block;
  Bredd: 50%;
  Marginal: 0 Auto 0 Auto; }

07. Style navigeringslänkar

Länkarna i navigeringsbehållaren ska visas som block som är inställda för att anpassa sig till behållarens bredd. Detta innebär att deras 100% bredd definieras av behållarens bredd. Padding, gränser och bakgrundsfärg används också för att se till att de sticker ut från bakgrundsbilderna. 

 #mainnav a {
  Visa: Block;
  Bredd: 100%;
  Bakgrund: RGBA (255,255,255, .3);
  Färg: # 000;
  Padding: 1EM;
  Margin-top: .5EM;
  gräns: 1px solid; }
#mainnav A: Hover {
  Bakgrund: RGBA (0,0,0, 5);
  Färg: #fff; }

08. Länk händelse lyssnare

CSS är nu färdigt, så skapa en ny fil som heter "code.js" för javascript.

Effekten kräver att varje länk i navigeringen lyssnar och reagerar på en mouseover-händelse där användaren svänger över en länk. Denna lyssnare tillämpar länken "titeln" av länken till datamedelsattributet för dokumentkroppen - därmed utlösande stilar i CSS.

När sidfönstret hade laddats placeras navigeringslänknoderna i en array, på vilken A för slinga används för att applicera händelseslyssaren. 

 Window.Addeventlistener ("ladda", funktion () {
  var nodes = document.queryselectorall ("# mainnav a");
  för (var i = 0; i & lt; nodes.length; i ++) {
  noder [i] .addeventlistener ("mouseover", funktion () {
  document.body.SetAttribute ("data-tema", denna .getattribute ("titel"));
  });
  }
});

Denna artikel uppträdde ursprungligen i Web Designer Issue 262. Köp det här !

Relaterade artiklar:

  • 10 Webbplatsnavigeringstrender för 2017
  • 10 steg för att skapa en engagerande användarupplevelse
  • Léonie Watson på varför tillgänglighet måste vara en integrerad del av webbdesignprocesserna

Hur - Mest populära artiklar

Hur man förbereder en fil för utskrift

Hur Sep 10, 2025

Som en konstarbetare på Wieden + Kennedy London, jag Design för tryck regelbundet. Det finns viss..

Hur man konstruerar responsiva och anordning-agnostiska former

Hur Sep 10, 2025

Oavsett om det är ett anmälningsflöde eller en multi-view-steg, är formulär en av de viktigaste komponenterna i digital prod..

Hur smälter du ett 3D-objekt med tre.js

Hur Sep 10, 2025

Webben som vi vet det, förändras och utvecklas ständigt. Det vi fortfarande kan komma ihåg som ett enkelt och enkelt medium f..

15 Fantasy Porträtt Tips

Hur Sep 10, 2025

Sida 1 av 2: Sida 1 Sida 1 Sida 2 ..

Hur man blandar färgpennor

Hur Sep 10, 2025

Att lära sig att blanda färgpennor hjälper dig att få mer från dina verktyg. I stället för att förlita sig på individen, platt färg på varje penna, kan vi blanda dem tillsammans f�..

Skapa en reagerande instrumentpanel med Figma

Hur Sep 10, 2025

Figma är ett grafikverktyg för UI-designers. Det har ett enkelt gränssnitt och gör att du kan samarbeta på jobbet med dina lagkamrater. Om du vill arbeta offline kan du välja att använ..

Hur man utformar ett promo för ett imaginärt varumärke

Hur Sep 10, 2025

Vid utformning av ett varumärke, oavsett om det är en etablerad en eller en uppstart som du tar den kreativa ledningen, är konsistens över alla pekspunkter nyckeln. Det är..

Hur man lägger till data till dina skissdesigner

Hur Sep 10, 2025

Skärmdesign har kommit långt under de senaste åren. Heck, vi sade inte ens "skärmdesign" för några år sedan. Som poäng av..

Kategorier