Visual Cues hozzáadása a webhelyére

Sep 12, 2025

kézikönyv

Ez bosszantó a weboldal felhasználói számára, hogy csak egy linkre kattintsunk, hogy megtalálja, hogy a weboldal nem érdekes, elvesztette az idejét. A képen lévő kép használata A háttér egy nagyszerű módja annak, hogy a felhasználóknak jelezzék, hogy mit várhatunk az oldal előtt az oldal betöltése előtt. A technika nagyszerű példáját láthatja a Ivan Aivazvsky Life Site .

Az oldal hátterének használata segíthet a diszlexiás olvasóknak vagy azoknak, akik további nyelvként beszélnek angolul. Ezekben az esetekben további információkat tud továbbítani a felhasználónak anélkül, hogy túl sok szöveget túlterheltek volna.

10 lépés a vonzó felhasználói élmény létrehozásához

Mint minden olyan hatással, amely ötvözi a szöveget háttérképekkel, győződjön meg róla, hogy a szöveg mindig olvasható marad. Ezt úgy érhetjük el, hogy félig átlátszó színt helyeznek a navigációs linkekre. Is figyelembe UX olvashatóságot az olyan kérdések, mint a színvakság befolyásolja, hogy a felhasználók képesek értelmezni színes szöveget.

Itt megmutatjuk, hogyan lehet létrehozni egy interaktív navigációs kijelzőt hasznos és hozzáférhető Visual Cues.

Töltse le a fájlokat a bemutatóhoz itt .

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website) — Az Ivan Aivazvsky Life Site megváltoztatja a háttérképeket, amint lebegnek a linkeken (kattintson a képre, hogy menjen a webhelyre)

01. Hozzon létre a HTML dokumentumot

Hozzon létre egy fő HTML dokumentum sablont, amely a fej- és testrészt tároló HTML tartályból áll.

A HEAD SECTION tárolja a leírási információkat, például a dokumentum címét, valamint a külső erőforrásokhoz való hivatkozásokat - azaz a CSS-t és a JavaScriptet.

A test tárolja a dokumentum tartalmát. A test jelentős jellemzője az "adat-téma" attribútum, amelyet alkalmaztak - a JavaScript által módosítani kell a CSS-prezentáció változásait.

 & lt;! Html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; cím & gt; navigációs háttér & lt; / title & gt;
& link rel = "stylesheet" type = "szöveg / css" href = "styles.css" / & gt;
& lt; Script Type = "Text / JavaScript" src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; test adat-téma & gt;
*** 2. LÉPÉS
& lt; / test & gt;
& lt; / html & gt;

02. HTML hozzáadása

Az oldal tartalma linkeket tartalmazó navigációs konténerből áll. A navigációs azonosítót és a gyermekkapcsolatok címeit a JavaScript használja a kölcsönhatások meghallgatásához, és megváltoztatja a testtartály részeként meghatározott "adat-téma" attribútumot.

 & lt; NAV ID = "Mainnav" & gt;
& lt; egy href = "#" cím = "Page 1" & gt; Page 1 & lt; / a & gt;
& lt; egy href = "#" cím = "Page 2" & gt; Page 2 & lt; / a & gt;
& lt; egy href = "#" cím = "Page 3" & gt; Page 3 & lt; / a & gt;
& lt; / nav & gt;

03. Kezdje el a CSS-fájlt

A HTML-tartalom most befejeződött, így hozzon létre egy új fájlt "styles.css". Ez a fájl tárolja a vizuális bemutatót szabályozó CSS formázási szabályokat. Indítsa el ezt a fájlt a szabályokkal, hogy bemutassa a HTML-dokumentumot és testét, hogy megjelenjen a teljes képernyőn, fehér háttérrel és fekete szöveggel.

 HTML, test {
  Kijelző: blokk;
  Szélesség: 100%;
  Magasság: 100%;
  Margó: 0;
  Padding: 0;
  Font-Család: Helvetica, Sans-Serif;
  Szín: # 000; }

04. Állítsa be a vizuális szabályokat

A hatás fontos összetevője az "adat-téma" attribútum használata a dokumentum testületére. A szabály az adatok alapértelmezett viselkedésének meghatározására van beállítva - amelyet a háttérbeállítás és az átmenet megváltoztatására használunk.

Ezzel elkerülhető, hogy meg kell ismételni ezeket a szabálymeghatározásokat minden egyes témához, amely megkönnyíti a weboldalait.

 [Adat téma] {
  Átmenet: Háttér 1S;
  Háttér: No-Repeate Center Center;
  Háttér méret: fedél; }

05. Tervezze meg a témát

Az egyes témák kialakítása az adat-téma attribútum értékével van beállítva.

A kívánt hatás eléréséhez különböző háttérképet állítunk be a téma minden verziójához. Az előző lépés gondoskodik az összes alapértelmezett beállításról, amelyet ezek a témák örökölnek.

 [adat-téma = "Page 1"] {
  Háttérkép: URL (image1.jpg);
}
[adat-téma = "Page 2"] {
  Háttérkép: URL (image2.jpg);
}
[Adat téma = "Page 3"] {
  Háttérkép: URL (image3.jpg);
}

06. Navigációs konténer hozzáadása

A navigációs tartályt arra használják, hogy megbizonyosodjon arról, hogy a linkek a képernyő közepén helyezett konzisztens szélességgel kerülnek bemutatásra. A vízszintes margináláshoz használt 50% -os szélességet és az automatikus számításokat alkalmazzák. Ez a megközelítés biztosítja a konzisztencia garanciáját, függetlenül a felhasználó képernyőfelbontását / méretétől.

 #mainnav {
  Kijelző: blokk;
  Szélesség: 50%;
  Margó: 0 Auto 0 Auto; }

07. stílusú navigációs linkek

A navigációs tartályon belüli linkeket blokkokként kell megjeleníteni, hogy alkalmazkodjunk a tartály szélességéhez. Ez azt jelenti, hogy 100% -os szélességüket a tartály szélessége határozza meg. A párnázást, a határokat és a háttérszínt is alkalmazzák, hogy megbizonyosodjanak arról, hogy kiemelkednek a háttérképekből.

 #mainnav a {
  Kijelző: blokk;
  Szélesség: 100%;
  Háttér: RGBA (255,255,255 ,.3);
  Szín: # 000;
  Padding: 1em;
  Margin-Top: .5em;
  Határ: 1px szilárd; }
#mainnav a: Hover {
  Háttér: RGBA (0,0,0, 0,5);
  Szín: #FFF; }

08. Link esemény hallgatók

A CSS most befejeződött, ezért hozzon létre egy új fájlt a JavaScript "code.js" -nek nevezve.

A hatás eléréséhez szükséges minden link belsejében a navigációs hallgatni, és reagálnak a egéráthúzási rendezvény, ahol a felhasználó fölé egy link. Ez hallgató alkalmazza a „cím” a értéke a kapcsolat az adatokkal téma attribútum a dokumentum test - így kiváltó stílus a CSS.

Miután a lap ablak volt betöltve, akkor a navigációs linkre csomópontok helyezünk egy tömb, amelyre a hurok használjuk fel, hogy az esemény hallgató.

 ablak.addeventlistener ("terhelés", funkció () {
  var csomópontok = Document.QuerySelectorall ("# Mainnav A");
  a (var i = 0; i & lt; nodes.lengnth, i ++) {
  csomópontok [i] .addeventlistener ("Mouseover", funkció () {
  document.body.setattribute ("Data téma", this.getattribute ("Cím"));
  });
  }
});

Ez a cikk eredetileg a 262 webes tervezőben jelent meg. Vásárolja meg itt !

Kapcsolódó cikkek:

10 Weboldal Navigációs trendek 2017-re
10 lépés a vonzó felhasználói élmény létrehozásához
Léonie Watson, hogy miért kell hozzáférhetővé tenni a webes tervezési folyamatok szerves részét

Visual Cues hozzáadása a webhelyére

01. Hozzon létre a HTML dokumentumot

02. HTML hozzáadása

03. Kezdje el a CSS-fájlt

04. Állítsa be a vizuális szabályokat

05. Tervezze meg a témát

06. Navigációs konténer hozzáadása

07. stílusú navigációs linkek

08. Link esemény hallgatók

kézikönyv - Most Popular Articles

Hogyan kell beállítani és optimalizálni az Smugmug StoreFront-ot

Hogyan érhető el skála a festményekben

Affinity Designer: Hogyan kell használni az export személyt

Hogyan kell beolvasni egy személyt kevesebb, mint öt perc alatt

Hogyan tervezzen egy könyvborítót az InDesign-ben

Hozzon létre perspektívát a Photoshop textúráinak elhajlásával

Komplex geometria modellezése: 5 top tippek

Hogyan adhat hozzá adatokat a vázlattervekhez

Kategóriák