Теоретичні відомості. Зручна, зрозуміла для користувача навігація є важливою складовою сторінки

Навігація по сайту

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

Система навігації повинна бути єдиною для всіх сторінок сайту. Вдала навігація є передбачуваною і дозволяє користувачам відчувати себе впевнено при переміщенні по сторінках сайту. Їм не потрібно нічого вивчати або запам'ятовувати, у продуманому дизайні все осмислено і впорядковано і не доводиться сумніватися, де шукати елементи сайту.

Значна зміна елементів навігації при переході від однієї сторінки сайту до наступної дезорієнтує користувача і відволікає його увагу.

Посилання на головну сторінку

Бажано мати посилання до головної сторінки на всіх сторінках сайту. Загальноприйнятим правилом є додавання до логотипу сайту посилання до головної сторінки.

Меню (навігаційні панелі)

Меню є основним функціональним елементом сайту, що складається з набору посилань на різні сторінки. Кожне таке посилання називається пунктом меню і призначене для переходу до відповідного розділу сайту. Навігаційну панель, що містить посилання на основні розділи сайту (і, можливо, на підрозділи поточного розділу), бажано мати на кожній сторінці.

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

Головне меню сайту

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

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

Додаткове меню сайту

Як правило, має ієрархічну структуру і буває 3-х видів:

1.Випадне меню. Автоматично випадає при наведенні вказівника мишки на пункт меню.

2.Меню, що розкривається.При натисненні на меню розкривається перелік пунктів.

3.Розкрите меню. Статичне меню, де відразу відображено всі пункти, часто має деревовидну структуру

Меню ієрархії документів

Досить зручним для відвідувачів сайту є зазначення місця сторінки в структурі сайту. Це можна реалізувати рядком у верхній частині сторінки приблизно такого вигляду:

Головна -> Розділ -> Підрозділ -> Назва поточної сторінки

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

Меню послідовної навігації

Якщо сторінка містить великий об’єм тексту (наприклад, книгу), краще роздрібнити цей об’єм на менші логічні частини. Тоді, після, а іноді і перед текстом виводиться меню послідовної навігації приблизно такого вигляду:

попередня сторінка * зміст * наступна сторінка

Іноді замість послідовної навігації застосовують пряму навігацію:

Частина 1 | Частина 2 | Частина 3 | Частина 4 | Частина 5 | Частина 6

Гіперпосилання

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

За об’єктом, на якій посилаються, розрізняють:

· Зовнішнє гіперпосилання. Гіперпосилання, яке вказує на об’єкт, що розташований поза даним сайтом.

· Внутрішнє гіперпосилання. Гіперпосилання, яке вказує на об’єкт, що розташований в даному сайту.

· Непрацююче (зіпсоване) гіперпосилання. Гіперпосилання, яке вказує на недоступний або неіснуючий об’єкт.

За виконанням гіперпосилання бувають:

· Текстовими.

· Графічними.

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

Графічні гіперпосилання (кнопки)– це картинка, якій призначено адресу іншого об’єкта.

При наведенні вказівника мишки на текстове чи графічне гіперпосилання, він змінює свій вигляд. За замовченням - це іконка руки , яка є стандартною і звичною для всіх користувачів Інтернету. Іноді, заради новизни чи в плані експерименту дизайнери можуть змінити стандартне зображення на інше і збентежити відвідувачів сайту. Чи варто наголошувати, що подібних «експериментів» слід уникати.

Інтерактивність гіперпосилань

Часто до гіперпосилань застосовують елементи інтерактивності. Вони відображають реакцію гіперпосилання на різні події, найчастіше на наведення користувачем вказівника мишки та на натиснення (вибором).

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

1. Гіперпосилання, що досі не використовувалося.

2. Гіперпосилання, на яке наведено вказівник мишки.

3. Активне гіперпосилання — гіперпосилання в момент натискання на ньому.

4. Переглянуте гіперпосилання — гіперпосилання, за яким вже було здійснено перехід. Такий колір браузер може зберігати відповідно до терміну зберігання журналу переглянутих сторінок, за замовченням цей термін складає 20 днів.

Для графічних гіперпосилань – це заміна зображення елементу іншим зображенням, з певним ефектом (зсув, підсвічування, тінь).

	Вигляд кнопки після завантаження сторінки.
	Вигляд кнопки при наведенні вказівника мишки.
	Вигляд кнопки при натисненні вказівником мишки.

Відповідно, для такої інтерактивної кнопки дизайнер має підготувати відповідно 3 різні картинки.

Хід роботи

1. Відкрийте програму Adobe Photoshop і створіть новий документ під назвою «Меню» розміром 450×550 пікселів.

2. Задайте основному кольору значення # 1c1c1c та залийте полотно за допомогою інструменту Заливка

3. Використайте інструмент Прямокутник , далі перейдіть до вкладки Параметри інструмента «Прямокутник» (Параметры інструмента «Прямоугольник») та виберіть опцію «Заданий розмір» («Заданный размер»). Вкажіть в полі ширина значення 300 пікселів, а в полі висота – 450 пікселів. Також задайте значення кольору заливки прямокутника: #313131 та розмість фігуру по центрі полотна.

4. Перейдіть до вкладки Шари «Слои» та оберіть шар з прямокутником. Змініть стиль цього шару так, як показано на скріншотах.

Для параметру Тінь (Тень):

Для параметру Внутрішня тінь (Внутренняя тень):

Для параметру Накладання градієнту (Наложение градиента):

Результат зміни параметрів стилю шару:

5. Створіть новий шар. Повторно використайте інструмент Прямокутник, перейдіть до вкладки Параметри інструмента «Прямокутник» (Параметры інструмента «Прямоугольник») та знову виберіть опцію «Заданий розмір» («Заданный размер»). Вкажіть в полі ширина значення 290 пікселів, а в полі висота – 440 пікселів. Також задайте значення кольору заливки прямокутника: #313131 та розмість цей прямокутник в центрі іншого.

6. Необхідно також змінити стиль цього шару так, як показано на скріншотах..

Для параметру Внутрішня тінь (Внутренняя тень):

Для параметру Накладання градієнту (Наложение градиента):

Для параметру Обведення (Обводка):

Результат зміни параметрів стилю цього шару:

7. Створіть ще один новий шар. За допомогою інструменту Прямокутна область (Прямоугольная область) створіть виділення для кнопки та залийте її кольором зі значенням #262626 використавши інструмент Заливка (Заливка).

8. Змініть стиль шару нашої кнопки так, як показано на скріншотах.

Для параметру Накладання градієнту (Наложение градиента):

Для параметру Обведення (Обводка):

Результат:

9. Створіть новий шар, знову використовуючи інструмент Прямокутна область (Прямоугольная область) зробіть виділення на половину кнопки, залийте його білим кольором. Змініть параметр шару Непрозорість (Непрозрачность) на 10%.

10. На новому шарі зробіть виділення інструментом Прямокутна область (Прямоугольная область) нижче кнопки і залийте його за допомогою радіального градієнта(перехід чорного в біле), для цього необхідно розпочати нанесення градієнту від центру прямокутника .Непрозорість шару необхідно змінити на 30%.

11. Об’єднайте всі шари що відносяться до кнопки за допомогою комбінації Ctrl+E, перейменуйте шар, що утворився на «Кнопка». Скопіюйте цей шар, стільки раз, скільки кнопок вам необхідно для вашого меню. Щоб скопіювати шар перейдіть в меню Шари (Слои) та оберіть підпункт Створити копію шару (Создать дубликат слоя). Далі розмістіть за допомогою інструменту Переміщення(Перемещение) шари з кнопками так, щоб утворилося меню з кнопками.

12. Нанесіть на наше навігаційне меню направляючу і розташуйте її так як показано нижче

12. Створіть новий шар, непрозорість якого задайте в 75%. Оберіть інструмент Довільна фігура (Произвольная фігура) . В підпункті Форма растрової точки (Форма растровой точки), що знаходиться нижче від головного меню програми, оберіть фігуру ромба , колір фігури задайте #f4f3f3. Розмістіть фігуру на верхній кнопці справа по направляючій.

13. Анологічні дії повторіть з іншими кнопками, тільки непрозорість шарів потрібно задати в 40%.Приберіть направляючу з меню.

14. Перейдіть в вкладку Шари (Слои). Затисніть на клавіатурі кнопку Ctrl та виділіть всі шари з кнопками та ромбом і натисніть по цих виділених шрах правою кнопкою миші та оберіть пункт Об’єднати шари (Объединить слои). Перейменуйте шар, що утворився, на «Кнопки».

15. Додайте на меню направляючу. Розмістіть її так як показано нижче.

16. Щоб додати надпис на верхню кнопку використайте інструмент Горизонтальний текст (Горизонтальный текст) . Шрифт оберіть Сambria розміром 20 pt, колір - #f4f3f3. Розмістіть текст «Головна» на верхній кнопці справа по направляючій. Шару з текстом задайте непрозрачність 80%.

17. Аналогічно додайте інші надписи «Новини», «Форум», «Фотографії», «Відео», «Музика», «Про нас», «Статті», «Гостьова книга», тільки прозорість шарів задайте 45%.

18. Результат: