Додайте візуальні сигнали до вашого сайту

Sep 13, 2025

Як

Це дратує для користувачів веб-сайтів, щоб натиснути посилання, щоб знайти, що веб-сторінка не цікавить, витрачаючи свій час. Використання зображення на фоні сторінки - це чудовий спосіб дати користувачам вказівку про те, що очікувати від посилання, перш ніж здійснити завантаження сторінки. Ви можете побачити чудовий приклад цієї техніки у використанні на Іван Айвазвський Життєвий сайт .

Використання фону сторінки також може допомогти читачам дискресинки або тих, хто володіє англійською мовою як додаткову мову. У цих випадках ви можете повідомити додаткову інформацію користувачеві, не перевантажуючи їх занадто великим текстом.

10 кроків до створення захоплюючого досвіду користувача

Як і будь-який ефект, який поєднує в собі текст з фоновими зображеннями, переконайтеся, що ваш текст постійно читається. Це може бути досягнуто шляхом розміщення напівпрозорого кольору на ваших навігаційних посиланнях. Також розгляньте читаність UX для таких питань, як кольорова сліпота, яка впливає на те, як користувачі здатні інтерпретувати кольоровий текст.

Ось ми покажемо, як створити інтерактивний навігаційний дисплей з корисним і доступний візуальні сигнали.

Завантажте файли для цього підручника тут .

The Ivan Aivazvsky life site changes the background images as you hover over links (click the image to go to the website) — Іван Айвазвський Життєвий сайт змінює фонові зображення, як ви наводите посилання (натисніть на зображення, щоб перейти на веб-сайт)

01. Створіть документ HTML

Створіть головний шаблон документа HTML, який складається з HTML-контейнера, зберігаючи розділ голови та тіла.

Розділ Head зберігає інформацію, таку як назва документа, а також посилання на зовнішні ресурси - IE CSS та JavaScript.

Тіло зберігає вміст документа. Значною особливістю тіла є атрибут "Тема даних", який він застосував, - бути змінений JavaScript для тригера CSS-презентації.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; Навігація Background & lt; / title & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; тип сценарію = "текст / javascript" src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; the body data-theme & gt;
*** Крок 2
& lt; / body & gt;
& lt; / html & gt;

02. Додати навігацію HTML

Вміст сторінки складається з навігаційного контейнера, що містить посилання. Ідентифікатор навігації та назви дитинствих посилань будуть використані JavaScript для прослуховування взаємодій та змінити атрибут "DATA-Theme", визначений як частина контейнера для тіла.

 & lt; nav id = "mainnav" & gt;
& lt; href = "#" title = "Сторінка 1" & gt; Сторінка 1 & lt; / a & gt;
& lt; href = "#" title = "Сторінка 2" & gt; Сторінка 2 & lt; / a & gt;
& lt; href = "#" title = "сторінка 3" & gt; сторінка 3 & lt; / a & gt;
& lt; / nav & gt;

03. Ініціюйте файл CSS

Вже вміст HTML тепер завершується, тому створіть новий файл під назвою "Styles.css". Цей файл зберігає правила форматування CSS, які контролюють візуальну презентацію. Почніть цей файл за допомогою правил, щоб представити документ HTML та його тіло, щоб з'явитися через повний екран, використовуючи білий фон та чорний текст.

 HTML, тіло {
  Дисплей: блок;
  Ширина: 100%;
  Висота: 100%;
  маржа: 0;
  підкладка: 0;
  Шрифт-Сім'я: Helvetica, Sans-Serif;
  Колір: # 000; }

04. Встановіть правила для візуальних даних

Важливим компонентом для ефекту є використання атрибуту "DATA-Theme", що застосовується до тіла документа. Правило встановлено, щоб визначити поведінку за замовчуванням даних, яка ми будемо використовувати для позиціонування фону та зміна переходу.

Це дозволяє уникає необхідності повторення цих правил для кожної окремої теми, що робить ваші веб-сторінки легше підтримувати.

 [Тема даних] {
  Перехід: фон 1s;
  Фон: центральний центр No-Repeat;
  Розмір фон: обкладинка; }

05. Дизайн теми

Дизайн кожної теми встановлюється за значенням атрибута тематики даних.

Для досягнення бажаного ефекту ми встановлюємо інше фонове зображення для кожної версії теми. Попередній крок піклується про всі налаштування за замовчуванням, які ці теми будуть успадковувати.

 [Тема даних = "Сторінка 1"] {
  фонове зображення: URL (image1.jpg);
}
[Тема даних = "Сторінка 2"] {
  фонове зображення: URL (image2.jpg);
}
[Тема даних = "Page 3"] {
  фонове зображення: URL (image3.jpg);
}

06. Додайте навігаційний контейнер

Навігаційний контейнер використовується для переконаного, що посилання представлені з послідовною шириною, поміщеною в середині екрана. Наноситься ширина 50% та автоматичного розрахунку, що використовується для горизонтальної маржі. Цей підхід забезпечує гарантію узгодженості незалежно від роздільної здатності / розміру екрана користувача.

 #mainnav {
  Дисплей: блок;
  Ширина: 50%;
  Маржа: 0 Авто 0 Авто; }

07. Стиль навігаційних посилань

Посилання всередині навігаційного контейнера відображаються як блоки, встановлені для адаптації до ширини контейнера. Це означає, що їх 100% ширина визначається шириною контейнера. Заповнення, межі та фонове забарвлення також застосовуються, щоб переконатися, що вони виділяються з фонових зображень.

 #mainnav a {
  Дисплей: блок;
  Ширина: 100%;
  Фон: РГБА (255,255,255 ,,3);
  Колір: # 000;
  підкладка: 1EM;
  маржа :.5em;
  Кордон: 1px твердий; }
#mainnav a: hover {
  Фон: RGBA (0,0,0, .5);
  Колір: #fff; }

08. Слухачі подій

CSS тепер завершено, тому створіть новий файл під назвою "code.js" для JavaScript.

Ефект вимагає кожного посилання всередині навігації, щоб слухати та реагувати на подію миші, де користувач підходить над посиланням. Цей слухач застосовує значення "заголовка" посилання до атрибуту тематики даних, що викликає стилів у CSS.

Після завантаження сторінки завантажено, вузли навігаційних посилань поміщаються у масив, після чого А для петлі використовується для застосування слухача подій.

 Window.addeventlistener ("Навантаження", функція () {
  var nodes = document.queryseelcall ("# mainnav a");
  для (var i = 0; i & lt; вузли .length; i ++) {
  вузли [i] .addeventlistener ("миші", функція () {
  document.body.Steattribute ("тема даних", це.getttribute ("назва");
  });
  }
});

Ця стаття спочатку з'явилася в веб-дизайнері 262. Купити його тут !

Пов'язані статті:

10 Тенденції навігації веб-сайту на 2017 рік
10 кроків до створення захоплюючого досвіду користувача
Léonie Watson, чому доступність повинна бути невід'ємною частиною процесів веб-дизайну

Додайте візуальні сигнали до вашого сайту

01. Створіть документ HTML

02. Додати навігацію HTML

03. Ініціюйте файл CSS

04. Встановіть правила для візуальних даних

05. Дизайн теми

06. Додайте навігаційний контейнер

07. Стиль навігаційних посилань

08. Слухачі подій

Як - Найпопулярніші статті

Як редагувати відео на Tiktok

Як прискорити та оптимізувати веб-сайти WordPress

Створити сторінку цільової сторінки WebGL

Як створити світяться кольори з масляними фарбами

, що загострює жорстке моделювання в 3DS MAX

Як прототип мобільного додатку з студією орігамі

Як скульптувати 3D-друковану гобліну

Як поєднуватися з скульптурними та пофарбованими картами переміщення

Категорії