Уеб дизайнерите винаги трябва да намерят баланс между използваемост и визуална привлекателност, когато проектират уебсайт. Без този баланс един уебсайт ще бъде приятен за гледане, но труден за навигация. Или няма да е приятно за окото, но с лесна навигация. Имайки това предвид, балансирането между привлекателна навигация и използваемост не изглежда чак толкова трудно. За да ви помогнем да генерирате нови идеи и вдъхновение, докато създавате персонализирани менюта, ето 30 страхотни примера както за красиви, така и за удобни за потребителя навигационни менюта.
Typographica
Този сайт съчетава простотата на атрактивно меню, което в същото време предоставя на потребителя безспорно много лесна навигация. Ако задържите курсора на мишката над заглавието под логото, ще видите, че думата „Тип“ остава маркирана, като задържите курсора на мишката над останалите думи ще ви позволи да изберете точно съответния раздел от сайта, който искате да посетите.
Контраст.т.е
Навигацията на Contrast.ie е пример за уникален подход за създаване на креативни менюта. Всички бутони са поставени в нарисуваните фигури за коментари и изскачат при задържане на курсора на мишката.
Търсене във видео
Навигацията на този сайт ясно ви води през стрелките, докато задържате курсора върху тях. Ефективната навигация оставя след себе си сложен дизайн. Изглежда, че този сайт е напълно съобразен с този израз.
Този сайт празнува творческата навигация. Ако погледнете наляво и задържите курсора на мишката върху човека, ще видите как ще се усмихне, ако задържите курсора на мишката върху иконите и картинките, веднага ще видите описание до показалеца на мишката.
Forty използва креативна навигация, базирана на изображения. Стрелките привличат вниманието на потребителя към бутоните и го насърчават да кликне върху тях.
healogix
Healogix задава най-важните въпроси с огромни букви, които привличат вниманието на потребителите. Кога, какво, защо и кой? На всички въпроси се отговаря с едно кликване от начална страница.
Идеи върху идеите
Сайтът има само една връзка към главната страница, но е едновременно удобен и креативен. Линкът хваща окото и дори "говори" на потребителя. И повечето потребители харесват страници, с които могат да взаимодействат.
Сара Лонгнекер
Навигацията в този уебсайт е проста и лесна за използване. Банерите зад избраната страница правят навигационните елементи лесно различими от останалата част на страницата.
Произведено от Elephant
Made by Elephant използва голямо и лесно за използване меню за навигация. Синият текст също контрастира добре с по-тъмните червени и черни цветове.
Работа в игра
Докато навигирате през елементите на менюто на този сайт, ще забележите, че фоновата позиция и цветът на цялата страница се променят бързо.
ясно ляво
Менюто на този сайт изглежда като лепкава бележка, когато задържите мишката върху връзките. Шаблонът на този сайт е изцяло изграден върху тази концепция.
Pattern Tap
Веднага щом влезете в сайта, ще бъдете посрещнати от зелена стрелка, която ви предоставя информация за всяка секция, която влизате в сайта. Това позволява на потребителите лесно да взаимодействат със сайта.
Неудържим робот нинджа
Навигацията е толкова готина, колкото и името на този сайт. Нещо повече, той също подобрява много дизайна.
Ден на червения нос
Полярно злато
Това текстово меню за навигация съчетава ярко и привличащо вниманието външен видс удобството на използвайки Javascript, но вместо това с помощта на Flash.
Уеб страница FX блог
Уникален и интересен поглед върху навигацията. Връзки към начална страницаи блог се вмъкват в изречението в заглавката на страницата. Това не нарушава принципите на използваемост, страницата е лесна за четене и много ефективна.
Opera Ma-g?
Елементите на навигационното меню са лесни за намиране, зеленото подчертаване създава ефекта на единството на навигационните елементи и останалата част от страницата.
Owltastic
Owltastic е пример за страхотно потребителско изживяване. Всеки навигационен елемент реагира с анимация, когато задържите курсора на мишката върху него. Подобно на други примери в този списък, навигацията е красива и лесна за използване.
Гийом Пачеко
Подобно на Owltastic, този уебсайт взаимодейства с потребителя, когато задържи над него различни елементистраници. Шаблонът на сайта е добре изпълнен и лесен за навигация.
Пълномаслено мляко
Пълномасленото мляко използва ясна текстова навигация. Когато задържите курсора на мишката над връзките, горната част на страницата се маркира. Това е чудесен пример за навигация, която е приятна както за потребителите, така и за търсачките.
Хотел Arca Lui Noe
Навигацията на този сайт е красива и лесна за използване. Много е стилен и пасва добре на цялостния дизайн на страницата.
Суши и роботи
Sushi and Robots използва елегантен дизайн, за да създаде красиво и атрактивно меню за навигация, което се отличава от останалите.
Sharify използва монохромно персонализирано меню за навигация, което е приятно за окото и удобно поради контраста между белия текст и небесносиния фон.
Стивън Кейвър
Тук навигацията е първото нещо, което забелязвате, когато влезете в сайт. Той е "чист" и лесен за използване. Освен това употребата свободно пространствоНавигацията е отлична.
Мисъл и теория
Този сайт е възприел минималистичен подход към навигацията и той просто работи. На страниците няма нищо излишно, което да разсейва потребителите.
Малко повече
Отново, високият контраст на черно и бяло дава на този сайт повече използваемост. При задържане на курсора на мишката, навигационните елементи светят в ярко синьо, добавяйки интерактивност и естетическа стойност на сайта.
Бакалин в Ълстър
Навигацията използва ярки цветове, лекота на използване и хармония на съдържанието на страницата със син фон.
Сайтът на Adaptd използва креативна, ясна и красива навигация. Най-забележителният аспект на тази навигация е в секцията за портфолио. Когато поставите курсора на мишката върху бутоните, етикетите стават прозрачни и се сливат с фона на сайта.
Sac Jazz Festival 2009
Този сайт има меню за навигация, което потребителят дори не трябва да разбира. В допълнение, подходящите цветове на менюто добавят още повече цвят към цялата страница. Дизайнерските елементи се вписват безупречно.
- В момента 1.00/5
В тази статия ще говорим за това какво трябва да бъде добра навигацияна сайта и как да го направите наистина ефективен. Материалът е полезен предимно за тези, които искат да създадат свой собствен уебсайт.
Навигацията е методите, триковете и специалните елементи, които ви позволяват да се движите между нейните страници.Всичко зависи от това колко добре е обмислено: както преобразуването, така и успехът на популяризирането на ресурса.
Това може да се сравни с оформлението на къща. Ако оформлението е добро, тогава можете лесно да намерите стаята, от която се нуждаете, не бъркайте входа на кухнята с входа на хола. Ако има много ходове, коридори и врати, тогава можете да се изгубите в такава къща.
По същия начин с уебсайтовете. Ако навигацията е лоша, има много връзки, които не водят до правилното място или не е ясно къде ще отведат, потребителите са объркани и не могат да намерят нужните страници и информацията, от която се нуждаят.
За търсачкидобрата, логична навигация също е важна. търсачкатрябва да разбира ролята на тази страница на вашия сайт. Добре проектираната навигация също се подобрява поведенчески факторитъй като потребителите могат да намерят необходимата им информация по-бързо.
Основни елементи и техники за навигация
Предлагам ви първо да се запознаете с основните елементи, които ви помагат да навигирате в сайта.
Навигацията в широк смисъл включва много техники и елементи, чиято основна задача е да позволят на потребителя да отиде до желаната страницаи да получите информация.
Един от тези елементи, който отдавна е задължителен в сайта, ефирмено лого, при щракване стигаме до.
Например, тук е достатъчно да кликнете върху логото, за да се върнете на началната страница.
Тази техника вече е позната на потребителите и ви позволява да се върнете към началната страница от всяка страница на сайта.
Вторият "класически" елемент еГорно меню .
Той се намира под хедъра и се състои от бутони или линкове, които водят до основните раздели на сайта. Такова меню може да бъде по-сложно, с падащи списъци, които водят до подсекции или отделни страници.
През последните няколко години друга техника стана популярна - това еменю за хамбургери, в който всички връзки са скрити в схематичните три хоризонтални чертички. Този елемент първо е живял само на мобилни устройства, но сега се среща все по-често в настолни версии на сайтове:
Също така в някои сайтове можете да видитевертикално меню. Използва се най-често, ако горното меню не може да побере всичко необходимо или ако трябва да улесните потребителите да навигират до някои заглавия.
Или може да живее самостоятелно, без хоризонтално менюв горната част на страницата. И дори може да има няколко такива менюта, както тук - отляво и отдясно:
(микро маркиране) е друг навигационен елемент, който не само задава йерархията на страниците, но също така улеснява връщането към желания раздел, или към главната страница, от която и да е страница:
Връзки в статиикъм други страници на сайта – това също са елементи за навигация. Например това са:
Те не само ви помагат да продължите напред, но и са добри от SEO гледна точка – тази техника ви позволява да увеличите броя на разглежданите страници.
Връзки в долния колонтитул(футър, долен колонтитул) е друг елемент за навигация. Обикновено в долния колонтитул се поставя връзка към контакти, потребителско споразумение, правила за използване на сайта и др. И понякога можете да видите много връзки към различни страницисайтове, групирани по категории:
На дълги целеви страници, както и на някои сайтове, можете да видите в горната частлента за напредъка, което показва докъде сте превъртели дадена страница:
Лентата за напредъка може да бъде намерена и във формуляра за кандидатстване и регистрация, ако формулярът е дълъг и разделен на няколко стъпки.
Това улеснява навигацията в самата страница - можете да видите колко до края. Това е и малък психологически трик, който тласка посетителя да довърши започнатото.
На дълги страниции на целевите страници можете да намерите друг страхотен елемент за навигация -бутон за бързо връщане в горната част:
Този бутон ви позволява бързо да се върнете в горната част на страницата.
Към горно меню, контакти или др важна информациябяха постоянно пред очите ни, се използва така нареченият „sticky header“ или „sticky navigation bar“. Постоянно остава в горната част на страницата, докато потребителят превърта надолу.
Тук винаги имаме търсене пред очите си, лого с възможност за връщане към главната страница и малко меню.
Как да използваме всички тези елементи с разум и полза?
Как да направим навигацията в сайта лесна
Когато работите върху навигацията на вашия сайт, запомнете и се опитайте да използвате едно просто правило:от главната страница до всяка страница на сайта, потребителят трябва да достигне до максимум три кликвания. И обратно.
1. Позиционирайте логото на началната страница в горния десен ъгъл.
Това е общоприет стандарт и има защо: именно на това място логото веднага хваща окото. И потребителят не трябва да търси върху какво да кликне, за да се върне.
2. Помислете за първични и вторични елементи.
Горното меню може да бъде основно. Вторични - странична лента, допълнителни връзки вътре в текста, в долния колонтитул. Навигационните трохи могат да действат и като вторични елементи за навигация.
Тук горното меню е основният навигационен елемент, а галетата са спомагателни.
Преместете най-важните раздели на сайта в главното меню.
3. Помислете кои страници могат да бъдат групирани.
Ако всичко не се побира в горното (или страничното) меню. Например, често можете да намерите опция, когато някои раздели на сайта са скрити под един бутон „Информация“, „Още“, „Още“ и т.н.
Така пощата на Mail.ru "скри" проектите на компанията:
4. Намерете добро място за информационни връзки.
Информационни връзки са като „Контакти“, „Публична оферта“ и други подобни. Потребителят трябва да намери тези връзки на всички страници на сайта. Затова най-подходящото място за тях е долният колонтитул (footer).
Ето ярък пример за такова поставяне на информационни връзки:
5. Не забравяйте дизайна.
Всички навигационни елементи трябва да са ясно видими и трябва да е ясно, че връзката е връзка, а бутонът е бутон. Маркирайте връзките с цвят, направете ги удебелени или подчертайте. Важно е потребителят да разбере, че пред него има кликващ елемент, който ще го препрати към друга страница от сайта.
Тук не мога да нарека менюто успешно. Твърде малък шрифт. Но тук има различен подход - направо от главната страница можете да отидете в каталога на любимата си марка или да видите отстъпки:
6. Не отваряйте страници в нови прозорци.
Това обърква потребителите.
7. Допълнителни елементи.
Помислете за допълнителни елементи като„Свързани продукти“, „Препоръчано съдържание“ или „Свързани статии“, което ще помогне на потребителя да намери това, от което се нуждае по-бързо.
8. Подсказки.
Опростете навигацията сподсказки за да помогне на потребителя да разбере за какво служи бутонът или иконата:
9. Оставете менюто на видно място.
Опитайте се да сте сигурни, че посетителят не трябва да търси ново меню на всяка страница. Не променяйте и не премахвайте менюта на вторични страници.
10. Не крийте контактите си надалеч.
Оставете телефонния си номер в заглавката. Уверете се, че бутоните за обратно повикване и чатът с онлайн асистента се виждат веднага - най-често в долната част на страницата отляво или отдясно, но не отстрани.
Адресът може да бъде оставен както в горния, така и в долния колонтитул. Не принуждавайте посетителя да търси цялата тази информация из целия сайт.
Всички тези техники значително ще опростят навигацията в сайта, ще я направят по-лесна и по-ефективна.
Изберете хостинг за сайта:
Когато работите върху навигацията, помислете преди всичко за потребителя.Със сигурност ще успее ли да намери всичко, което търси, за възможно най-кратко време? Всичко ли е ясно на човек, който за първи път се сблъсква не само с вашия сайт, но и с вашата област като цяло? Далече ли са скрити страниците, възможно ли е да стигнете до всяка с максимум три клика?
Помислете сами кои сайтове са най-лесни за навигация и се учете от най-добрите.
Успех в разработването на собствен интернет ресурс!
Здравей Bikepost!
Сезонът идва и мнозина се замислят за навигация с мотоциклет за дълги разстояния. След като изпробвах много опции, се спрях на един не най-евтиният, но надежден вариант, за който ще ви разкажа по-долу.
Същността на тази система е в телефона и неговия прикачен файл, но тъй като често няма връзка с чужбина, затова използвам офлайн навигация. Но защо просто не използвате телефона си?! - питаш, а аз ще ти отговоря:
- Можете да сменяте личния си телефон доста често (няма да го вземете за всеки монтаж, защото универсалният монтаж е много неудобен)
- Какво трябва да направя, ако получа обаждане или трябва да се обадя? Навигацията се губи + трябва да премахнете стойката, след което да я върнете на място - това не е удобно, ако няма слушалки или каската е свалена
- Често, личен телефонструва значително по-високо от използвания iPhone 5
- Загубата/счупването на телефон за навигация няма да е толкова обидно, колкото вашият чисто нов и скъп смартфон + в този случай ще имате резервна опциянавигация
- Винаги е добре да имате допълнителен телефон с камера, когато пътувате
- Ужасно качество на екрана
- Огромен размер на тялото и масивен монтаж
- Спирачки, нестабилна система и неточен GPS
- Продуктивно устройство, което няма да ви разочарова или да замръзне в неподходящия момент
- Страхотен екранкоето се вижда и при най-трудните условия
- мултимедиен плейър
- Резервен телефон
- резервна камера
- Смяна на шаси без смяна на устройство
От какво можете да спестите, без да загубите много в качеството?За начало това е монтаж, но не ви съветвам да избирате опции, по-евтини от $ 20, защото, както показва практиката, такива монтажи често са много неудобни. Имате нужда от стойка, която да фиксира стабилно телефона вътре и да се сваля лесно, защото често на бензиностанциите ще трябва да вземем телефона със себе си. Ето някои аналози на по-ниска цена: iBikeConcole - $39.99; Tigra Sport BikeConsole Bike - 37.90; LifeProof - $29.95; Givi S955B Стойка за смартфон и iPhone 5 - 37 lbs. Не забравяйте, че лекотата на използване на тази система зависи от избора на монтаж, така че не трябва да спестявате твърде много по този въпрос.
Втората точка за запазванетова е навигационен софтуер. Тук има два варианта: най-евтиният, но по-сложен, безплатни и по-малко надеждни. Евтино е да се сложи на iPhone бягство от затвораи изтеглете хакнати версии на софтуера, но може да има проблем с актуализирането на картите. Безплатна опциятова е използването на безплатен софтуер за навигация, но и тук всичко не е толкова просто, тъй като Никога не разчитам само на един навигационна програмаИ винаги имам още няколко.
Надявам се да намерите моя опит за полезен. С тази система пътувах 3 сезона и не разкрих никакви обективни недостатъци, освен цената. Нека ви напомня, че същността на тази система се крие в добрия хардуер, екран, стойка, така че ако намерите наистина добра стойка за смартфони с Android, споделете го в коментарите, т.к. Android смартфонивсе още могат да носят функцията на бордови компютър, но това е съвсем друга история :).
Няколко снимки от Google, за да добиете представа как изглежда такава група на мотоциклет.
Навигацията на уебсайтове се превърна във важен аспект на UX дизайна - тя може или да помогне, или да навреди на вашия сайт. Навигацията може да се сравни с поддръжката на къща. Ако планът на основата не е добре разработен, излагате на риск цялата сграда.
Навигацията може да варира от сайт на сайт; няма конкретни инструкции как да го направите правилно.
Какво е навигация?
Терминът „навигация“ може да се тълкува по различни начини. Като цяло, това е ключова част от сайта, която позволява на потребителите да намерят това, което търсят, без допълнителни кликвания. Той ще доведе вашите посетители до най-важната информация.
Какви въпроси ще ви помогнат да подготвите вашата навигационна карта?
Кой е вашият целевата аудиторияИ каква е целта на вашия сайт?
Каква информация и какви информационни модули трябва да има на сайта?
Как трябва да се групира информацията според нейната важност за потребителя?
Как да организираме функционални и информационни модули в дървовидна структура?
Планиране на навигацията
Как да организираме съдържанието? Как да именуваме и подреждаме елементи?
От самото начало обсъдете задълбочено йерархията, в която трябва да се показва информацията:
Работа със съдържание. Сортирането на карти може да се използва, за да помогне на дизайнерите да намерят отговори на въпроси, преди дори да започнат да проектират.
След това се погрижете за структурата. Създайте карта на сайта или списък с различни ниваинформация. Навигацията трябва да е възможно най-лесна. Претоварените страници с неясни заглавия на менюто усложняват използването на сайта. Когато създавате навигационни менюта, говорете с потребителите на техния език.
И накрая, дефинирайте елементите на менюто за навигация, типа и дизайна.
Не забравяйте, че няма стандарт, който да определя как трябва да изглежда навигацията на вашия сайт. По-скоро е важно да разберете какъв сайт правите, какво послание искате да предадете на потребителите и каква цел трябва да постигнете с него. Например, когато създавате сайт на онлайн магазин, можете да използвате алгоритми, които позволяват на посетителите да намерят правилния продукт или услуга възможно най-скоро и да го купят. Що се отнася до промоционалния сайт, можете да се съсредоточите върху бързо търсене на информация, да включите потребителя процес на играи опростете основните елементи за по-лесна навигация.
Тенденции в дизайна на лентата за навигация
Има няколко популярни типа навигация на сайта, които можете да използвате за вашия проект. Кое да изберете зависи от вас.
Хоризонтално или вертикално?
Изборът между хоризонтална и вертикална навигация се определя от няколко фактора въз основа на характеристиките на дизайна, използваемостта и предназначението на съдържанието. Най-често се предпочитат малки сайтове хоризонтален панелнавигация в заглавката на страницата, докато големите корпоративни сайтове използват както хоризонтални, така и вертикални ленти.
Големи падащи списъци
Мащабираните падащи менюта са лента с менюта, която „изпада“ или „излита“ от основната лента за навигация. Този тип навигация не е подходящ за всеки сайт. Основното предимство на падащите списъци е, че ви позволяват да показвате много връзки наведнъж. И така, в какви случаи може да са необходими? Големите падащи списъци са много подходящи за онлайн магазини с обемен списък от категории, който е малко вероятно да се побере в стандартно меню за навигация. Съответно други сайтове, предлагащи широк набор от услуги, могат успешно да използват такава навигация.
Фиксиран („лепкав“)
Фиксираната или залепваща лента за навигация не изчезва, когато страницата се превърта. Правилно, такава навигация се използва на сайтове, където призивите за действие са разположени на главния панел.
Обемен колонтитул
Свикнали сме да виждаме връзки към правна информация, уиджети с абонамент за бюлетин или икони на социални медии в долния колонтитул. Много сайтове имат голям футър, ако съдържат много съдържание или са онлайн магазини, за които е важно да посочите икони с начини на плащане.
Адаптивен дизайн навигация
Отзивчивата навигация прави вашия сайт да изглежда добре различни устройства. На мобилни устройства лентата обикновено се свива в меню за хамбургери. Иконата на менюто се състои от три хоризонтални ивици, а при отваряне елементите са разположени един под друг, образувайки така наречения „хамбургер“. Този вид меню е създадено, за да улесни навигацията на мобилни устройства, без да заема твърде много място.
Свързване на логото с началната страница
Звучи очевидно, но все още има сайтове, които пренебрегват това правило. Когато щракнат върху логото, потребителите очакват да бъдат отведени до началната страница - това е обичайна практика.
Основно / Средно
Най-често първичната навигация се състои от основни елементи, които
изглеждат еднакво в целия сайт. Обикновено основните менюта са разположени в горната част на страницата в центъра, отляво или отдясно. Вторичната навигация се състои от допълнителни елементи и обикновено се намира в средата на страницата и не е подчертана от съответния дизайн.
Нека да разгледаме топ 10 идеи за дизайн на навигация на уебсайтове.
Тип: вертикален, адаптивен.
Кликнете върху иконата на менюто вляво и главното меню ще се премести в центъра на страницата.
2.WE3
Тип: фиксиран, вертикален; разположен горе вдясно.
Дизайнът на сайта е интерактивен. При превъртане на страницата се появява нова информация.
Тип: адаптивен, вертикален; разположен вляво.
Навигацията в левия панел, която се разширява от иконата на менюто, е подобна на тази, която сте свикнали да виждате на мобилни версиисайт. Навигацията се намира вляво от секцията за качване и е лесно видима.
4 Кенеди център
Тип: хоризонтален, падащ списък.
Можете да навигирате в уебсайта на JFK Center по два начина: чрез плъзгане на изображения или чрез използване на хоризонталното меню.
5. B&O игра
Тип: фиксиран, адаптивен, хоризонтален.
Сайтът грабва вниманието на потребителя със своя продукт, така че лентата за навигация е доста проста.
Тип: фиксиран, хоризонтален, 3D долен колонтитул, отзивчив, падащо меню.
Дългото превъртане на страницата с основните функции и голям падащ списък ще насочи потребителите към желаната страница.
7. Адриатически луксозни хотели
Тип: фиксиран, хоризонтален, мащабируем падащ списък, 3D долен колонтитул.
На този сайт можете да намерите това, от което се нуждаете, като просто превъртите страницата надолу или използвате фиксираното меню.
Тип: фиксиран, адаптивен, хоризонтален, 3D долен колонтитул.
Навигацията на Kalios се намира горе вляво. Като щракнете върху иконата на менюто, можете да получите информация за продуктите, като задържите курсора на мишката върху желания продукт.
Този сайт може да се управлява чрез щракване върху стрелките. Потребителят може да се разхожда из сайта като в музей. Можете да превъртите страницата на всяка стая, за да получите информация.
10 Австралийски балет
Тип: фиксиран, адаптивен, голям падащ списък
Заключение
Има много видове навигация, които можете да използвате на сайта си. В същото време няма универсален начин за създаване на перфектната навигация; всичко зависи от вашите нужди или желанията на вашия клиент. Надяваме се, че нашите примери са ви вдъхновили, а екипът на AGENTE от своя страна ще ви помогне да реализирате и най-смелите си идеи.