Навигация сайта фото

Навігація сайту ➙ Широка вітрина дизайну ➙ Вибір правильної схеми навігації для сайту

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

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

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

ГОРИЗОНТАЛЬНИЙ

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

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

Горизонтальна навігація сайту фото

ВЕРТИКАЛЬНИЙ

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

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

ПРОСМОТРИТЕ НАШІ РЕКОМЕНДАЦІЇ ЩОДО СТВОРЕННЯ САЙТ ЛІКАРНІ

СУБ-НАВІГАЦІЯ

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

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

ВИПАДАЮЧИЙ СПИСКИ

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

Вони найкраще працюють на великих веб-сайтах, таких як сайти електронної комерції з безліччю категорій. Випадають меню з широким вибором і контентом зазвичай називаються «мега-меню».

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

Дізнайтеся більше про переваги використання SVG зображень і для чого вони потрібні

ХЛІБНІ КРИХТИ

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

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

МЕНЮ ФІКСОВАНОЇ / ПРОКРУТКИ

Фиксированный шаблон меню может быть полезен для сайтов с длинными страницами. Это состоит из навигации, которая остается «фиксированной» в верхней части страницы при прокрутке вниз. Другой популярный подход заключается в том, что фиксированная навигация сайта появляется только тогда, когда пользователь начинает прокручивать страницу.

Это позволяет пользователям перейти на другие страницы в любой момент во время просмотра страницы без необходимости прокрутки назад к началу навигации.

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

Постійна навігація сайту по прокручуванні дає користувачам легкий доступ до навігації в будь-який час.

СХОВАНЕ МЕНЮ

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

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

БЕЗ НАВІГАЦІЇ

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

КРЕАТИВНА НАВІГАЦІЯ

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

Креативна навігація Jardan фото
На цьому веб-сайті навігаційна панель відображається при наведенні курсору на різні розділи сторінки. Основна навігація на цьому веб-сайті знаходиться в нижній частині сторінки, поворот до традиційної горизонтальної навігаційної схемі.

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

Радимо прочитати вам 6 рекомендацій по створенню чуйного дизайну для веб-сайту

Leave a Reply

Your email address will not be published. Required fields are marked *