Методи обробки навігації в адаптивному дизайні
Навігація є критично важливим елементом адаптивного дизайну. Це пов’язано з тим, що мірою корисності адаптивного дизайну веб-сайту значною мірою є легкість переходу між макетами для мобільних пристроїв і комп’ютерів.
Ефективна адаптивна навігація вимагала б плавного зміни розміру до нижчої роздільної здатності, а потім збільшення до більших екранів, таких як настільні комп’ютери.
Яка навігація корисна для адаптивного дизайну?
Існують різні тенденції та техніки в управлінні навігацією на веб-сайтах.
Цей підхід до навігації вважається мінімалістичним, оскільки над навігацією виконується мінімум роботи, щоб забезпечити плавне та чисте перемикання. Перемикання в навігації не є різким; досить делікатно зроблено, оскільки розмір екрана зазнає змін. Отже, підхід такий, що мінімальна переробка елементів навігації виконується для досягнення максимального, елегантного та тонкого ефекту. Розмір навігаційних посилань зведений до мінімуму та добре вписується у сторінку. Цей підхід можна використовувати для веб-сайтів, які хочуть зосередитися на елегантності та простоті та вирішують рекламувати деякі вибрані функції. Наприклад, веб-сайт CrossTreesпоказує дуже просте навігаційне меню, зосереджене на головному та зберігаючи основне місце для демонстрації вмісту зображень. Зміщує фокус користувача на основну тему, яку вони хочуть передати, і не дозволяє користувачеві втратити фокус. Окрім сайтів нерухомості, такими веб-сайтами можуть користуватися художники, дизайнери та фотографи.
Як бачите, на цьому веб-сайті підкреслюється мінімалізм; Основна увага зосереджена на зображенні та слогані «Офісні приміщення в таунхаусі для оренди в Глазго». Легкий доступ до навігаційної панелі мінімізований, але зрозумілий.
Іншим прикладом є веб-сайт веб-дизайну Hashtag17, який також пропонує багато інших послуг. Завдання полягає в тому, щоб продемонструвати всі пропоновані послуги на одній сторінці, не захаращуючи сторінку. Технологія, адаптована агентством, полягала в тому, щоб показати знімок усіх служб у нижній частині веб-сайту на білому тлі, що допоможе користувачеві перейти до будь-якої з 17 сторінок із цієї єдиної області.
Перевагою тут є те, що один погляд покаже глядачеві всі 17 послуг, які пропонує ця компанія. Білий фон не відволікає увагу, і користувачі можуть одразу помітити область, у якій їм потрібна допомога.
Більшість адаптивних веб-сайтів розміщують навігаційне меню вгорі. Це має очевидні переваги, такі як простота впровадження, відсутність залежності від JavaScript і простий CSS. Однак це не оптимальне розташування для мобільних телефонів, де нерухомість є проблемою. Цікавим способом керування навігацією в адаптивному дизайні веб-сайту є розміщення її внизу сайту, як пропонує автор Люк Врублевскі. Панель навігації займає менше місця на робочому столі, тому її можна розмістити зверху. Більше того, саме тут користувачі також його шукатимуть. Але на менших пристроях ідеально заштовхнути його вниз, щоб він не займав багато місця. Список навігації розміщується в нижньому колонтитулі веб-сайту або безпосередньо над ним. На нього є якірне посилання в заголовку сайту.
#access li a {
padding: 0;
margin: 0;
font-size: 16px;
height: 57px;
}
.container {
padding-bottom: 549px;
position: relative;
}
.nav-strip {
position: absolute;
bottom: 0;
}Перевагою цього є простір для більшого вмісту у верхній частині веб-сайту; водночас навігація легша, доступна та непомітна. Додатковою перевагою є те, що користувач може прочитати весь вміст і прокрутити сторінку донизу, де знаходиться панель навігації. Це дасть їм більше можливостей для натискання. Іншими перевагами є те, що цей підхід не потребує використання JavaScript і, отже, ним легше керувати та виправляти неполадки. Цей метод легший для розробки адаптивних веб-сайтів, оскільки положення верхнього та нижнього колонтитулів (які є фіксованими) дозволяє легко переходити.
Незручність такого розташування елемента навігації полягає в тому, що людині потрібно стрибати вперед і назад, щоб отримати доступ до посилань. Отже, це незручний тип взаємодії, який може бути досить громіздким на мобільному пристрої та може перешкоджати плавності мобільної навігації. Іншим недоліком є те, що якщо користувач не читає вміст, він може не прокрутити донизу екрана, і тому може пропустити панель навігації, а тепер знати, де її шукати.
Тут меню відкривається в самому заголовку та надає чистий, елегантний вигляд із функцією показу/приховування. Його легко кодувати та це плавний перехід. Але проблема полягає в тому, що Android може не забезпечити такий плавний перехід із анімацією CSS.
Гарним прикладом використання Toggle є Starbucks :
Крім того, якщо меню велике, воно може зайняти багато місця. Цю проблему можна вирішити, створивши різні меню для різних пристроїв. Ефективним способом зробити це є використання плагіна Responsive Select Menu.
На відміну від інших методів навігації, ця техніка передбачає використання Javascript. Це робить нас властивістю форми. Він перетворює список меню на елемент вибору. Хоча це може бути найефективнішим елементом у кожному веб-переглядачі, оскільки вони походять із спадних меню, дизайнери можуть вважати їх обмеженими через складність налаштування в різних веб-переглядачах. Найбільша перевага цих меню в адаптивному дизайні веб-сайтів полягає в тому, що вони працюють. Іншим позитивним моментом є те, що їх можна використовувати для керування навігаційними посиланнями, коли їх надлишок; це може бути проблемою для підходу TopNav. Вони також звільняють багато місця на веб-макеті, який можна використовувати для веб-дизайну. Меню вибору можна адаптувати до різних пристроїв – різні мобільні браузери оброблятимуть меню вибору по-різному.
Простий спосіб використання меню «Вибрати» — це плагін JQuery TinyNav.
Додайте файл JS після завантаження вашої версії jQuery, а потім напишіть такий код:
<script>
$(function() {
$("#nav").tinyNav();
});
</script>Додайте кілька рядків до свого CSS. Приховати клас tinynav. Налаштуйте його для відображення в будь-якій точці зупинки:
/* styles for desktop */
.tinynav { display: none }
/* styles for mobile */
@media screen and (max-width: 600px) {
.tinynav { display: block }
#nav { display: none }
}Недоліком є те, що вони можуть бути не такими акуратними та естетичними, як інші методи навігаційного меню. Вони найкращі на простих сторінках із односторінковим макетом, наприклад у ApacheCoube.
Управління вмістом має вирішальне значення для ефективної навігації адаптивних веб-сайтів. Під час планування каркасу для адаптивного веб-сайту визначте, який вміст потрібен для настільного комп’ютера, а який – для мобільного макета. Переконайтеся, що розміщено лише той вміст, який відповідає конкретним цілям. У цьому відношенні навігація може використовувати подібний підхід. Щоб оптимізувати адаптивні навігаційні меню для мобільних пристроїв, переконайтеся, що в мобільному навігаційному меню відображаються лише найважливіші посилання; менш важливі потрібно виключити. Таким чином, мобільні користувачі можуть просто бачити те, що вони хочуть, на своїх веб-сайтах.
Вам потрібно буде визначити, який вміст є абсолютно критичним для розміщення в тій частині веб-сайту, яку люди найбільше спостерігають, будь то на комп’ютері чи мобільному пристрої, і зробіть це.
Є певні ключові моменти, про які слід пам’ятати під час роботи над адаптивним веб-сайтом, щоб забезпечити плавну навігацію:
- Уніфікований дизайн: деякі типи дизайну залишаються однаковими для різних пристроїв і розмірів екранів. Вибір такого дизайну не викликає клопоту, ви отримуєте плавну навігацію та все ще можете реагувати. Такий дизайн використовує хорватська компанія Flip .
- Випадаючі меню: спадні меню, особливо з багатошаровим ефектом, прості та ефективні. Вони займають мінімальний простір на екрані, і натискання однієї кнопки відкриває інші підкнопки в багаторівневому спадному списку. Цей стиль використовується Microsoft.
- Пріоритезуйте вміст: показуйте лише те, що є необхідним і дійсно важливим. Пропустіть вміст, який не є корисним або може відволікати на маленьких екранах.
- Використовуйте піктограми: використання чистих і простих піктограм може уникнути використання великого об’ємного тексту.
-
Адаптуйте свій дизайн: ваш дизайн повинен мати можливість естетично адаптуватися до різних розмірів екрана, навіть якщо це означає, що розташування дизайну буде відрізнятися залежно від пристрою. Старіша версія Oliver Russell мала гнучкий дизайн, який адаптувався відповідно до розміру екрана.
![]()
З якими труднощами постає адаптивний дизайн на великих веб-сайтах?
Великі веб-сайти представляють інше завдання для адаптивного дизайну. Прості параметри неможливі, оскільки навігація досить складна, оскільки обсяг вмісту, який потрібно представити, досить великий. Крім того, є рівні навігації, якими потрібно керувати, і є багато екранів, якими потрібно керувати. Розробка навігації для адаптивної навігації на складних веб-сайтах вимагає широкого обговорення з персоналом і потребує більш тонкого налаштування та обговорення всіх аспектів з клієнтами. Кроки, щоб подолати це, зводяться до розуміння того, що потрібно комплексному веб-сайту, щоб забезпечити свою цільову аудиторію. Тому етапи включають дослідження аудиторії, щоб визначити очікування аудиторії щодо того, що вони хотіли б бачити на веб-сайті. Це може призвести до великої кількості вмісту, і тип вмісту для представлення потрібно ретельно вибирати. Таке дослідження та робота була проведена при розробці комплексного веб-сайту для лікарень.
Одним із способів створення адаптивного дизайну для великих веб-сайтів є використання шаблонів і компонентів. Це можна зробити, розділивши функціональність і варіації вмісту на менші компоненти, а потім перевіривши, як кожен компонент виглядатиме на маленькому екрані. Цей метод проектування був адаптований компанією Quidco, яка використала 40 компонентів для раціоналізації варіацій їх вмісту. Великі веб-сайти мають бути гнучкими завдяки своїм функціям. Наприклад, панель чату у Facebook змінює своє положення залежно від розміру вікна перегляду.
Веб-сайти електронної комерції, особливо великі, також стикаються з проблемою забезпечення плавної навігації. Виконання певних ключових кроків може допомогти покращити взаємодію з користувачами на таких сайтах. Одним із таких кроків є створення візуальної ієрархії продуктів, щоб користувачі могли чітко бачити продукти, які їх цікавлять. Необхідно використовувати більше білих просторів з мінімальним безладом. Використовуйте чіткі шрифти та правильний розмір шрифту. Утримайтеся від використання довгих текстових блоків. Розташуйте важливі функції та розмістіть їх на першому місці, наприклад рядок пошуку та кошик для покупок. Сортування продуктів за ціною, релевантністю або рейтингом також має бути легко доступним. Також приділіть увагу сферам, які, імовірно, знадобляться клієнтам, наприклад деталям обслуговування клієнтів.
Керування навігацією – це сфера, яку дизайнери та розробники можуть постійно вдосконалювати для покращення взаємодії з користувачем. Важливо те, що ви вибираєте потрібний стиль на основі галузі, в якій ви працюєте, і демографічних показників ваших покупців.