Навигация по сайту — примеры как сделать навигацию удобной

Практические советы по созданию понятного сайта

Рассказываем, как помочь пользователю легко ориентироваться с помощью навигации по сайту. Статья будет полезна дизайнерам, предпринимателям и маркетологам, которые хотят создать удобный сайт самостоятельно. Поможет в этом продуманная навигация по сайту.

Мы рассмотрим 13 способов улучшения навигации на сайте с помощью простых инструментов за минимальное количество времени. В Тильде есть много готовых блоков с элементами навигации, из которых можно выбрать наиболее подходящий для вашего проекта вариант.

Содержание

Сделать меню навигации для сайта лаконичным
Поставить ссылку на главную страницу на логотип
Сделать меню на одностраничном сайте
Зафиксировать меню
Выделить активный пункт меню для постраничной навигации
Добавить индикаторы (точки) для определения местоположения
Показать процесс загрузки и прокрутки страницы
Выделить кнопку с более важным действием
Скрыть часть контента
Добавить кнопку навигации «Наверх»
Проследить, чтобы в конце страницы не было «тупика»
Задать понятный URL адрес страницы
Сделать «хлебные крошки»
Подведение итогов

Сделать меню навигации для сайта лаконичным

Меню — один из главных инструментов навигации на сайте. Его удобство будет критическим.

При создании меню старайтесь использовать не более 4−5 пунктов и в целом не перегружать его большим количеством элементов. Если пунктов меню все-таки получается много, как вариант, можно использовать меню «гамбургер».

Советы и инструкции по дизайну удобного меню сайта

sistersbakery.ru

www.linelo.ru

fyrclothes.tilda.ws/story01

Поставить ссылку на главную страницу на логотип

Пункт «Главная» в меню — это пережитки навигации сайта 90-х. Вместо этого сделайте кликабельный логотип.

Сейчас уже сложилась устойчивая модель: при клике на логотип происходит переход в начало главной страницы. Поэтому смело удаляйте «Главная» из меню и не забывайте добавить ссылку для логотипа.

Кстати, чтобы на Тильде сделать ссылку на главную страницу, достаточно поставить просто косую черту (/) вместо полного адреса в настройках блока.

Слеш ( / ) в поле «ссылка» будет вести на первый экран главной страницы сайта.

Сделать меню на одностраничном сайте

Меню также может быть навигатором внутри одной страницы, когда вы делаете лендинг или лонгрид.

Если информации много, добавьте меню с ссылками на разделы страницы — это упростит навигацию.

Чтобы сделать на Тильде меню с ссылками на разные блоки внутри страницы, в настройках контента меню пропишите в ссылках номера этих блоков (номер каждого блока указан в его настройках), либо используйте якорные ссылки.

Якоря и ссылки внутри страницы

Зафиксировать меню

Чтобы посетитель в любой момент мог найти нужный раздел, можно сделать фиксированное меню — оно всегда будет оставаться в поле зрения при скролле. Такая навигация для сайта будет хорошим решением.

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

Выделить активный пункт меню для постраничной навигации

Меню может показывать в каком разделе сайта находится пользователь, выделяя пункт, который относится к данному разделу.

В настройках Тильды можно установить дополнительные параметры отображения активного пункта меню. Есть несколько вариантов выделения активного пункта меню: можно изменить его насыщенность, непрозрачность и цвет. Кроме того, активный пункт меню можно подчеркнуть или зачеркнуть.

Такие же настройки можно применить и для пункта меню, на который наведена мышь. Не стоит переусердствовать, пункт меню достаточно выделить одним или двумя параметрами.

Добавить индикаторы (точки) для определения местоположения

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

На Тильде у таких навигаторов есть также всплывающая подсказка с названиями разделов для удобной навигации по сайту . Блок находится в категории «Меню» под номером ME604.

Показать процесс загрузки и прокрутки страницы

Анимация загрузки страницы подскажет пользователю, что процесс идет, и контент загружается.

На Тильде блок индикатора находится в категории «Другое» под номером Т228. Чтобы индикатор работал, разместите блок в самом верху страницы.

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

Индикатор прокрутки страницы — очень наглядный пример навигации. Он подсказывает, в каком месте страницы находится пользователь, и загружается по мере прокрутки страницы вниз. Использовать индикатор прокрутки страницы есть смысл, когда длина страницы превышает 3−4 экрана.

Чтобы добавить индикатор прокрутки на Тильде, используйте блок T333 из категории «Другое». В настройках блока можно задать цвет и толщину индикатора.

Выделить кнопку с более важным действием

Из двух соседних кнопок более важная должна визуально выделяться.

Обычно первая кнопка целевого действия страницы, например — «Записаться на мероприятие», «Купить курс», «Посетить первый урок бесплатно». Вторая кнопка менее значительна, в большинстве случаев это ссылка на дополнительную информацию: «Подробнее», «О нас», «Как это работает».

archskills.ru

Самое простое — использовать яркий цвет для фона кнопки. Она должна быть контрастной по отношению к кнопке меньшего значения. Для второй кнопки достаточно использовать цветной бордюр без заливки, либо фон нейтрального цвета.

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

Скрыть часть контента

Много однотипных элементов просматривать утомительно. Используйте кнопку, которая скроет часть элементов и покажет их только по клику.

Хороший прием — написать на кнопке какое именно количество элементов, она скрывает.

Скрыть часть контента можно несколькими способами:

Кнопка «Показать еще». Она находится в разделе «Форма и кнопка» под номером BF703.

Текст в раскрывающихся блоках. Отличный вариант для длинных списков с услугами или ответами на вопросы. Его можно найти в разделе «Текстовый блок» под номером TX16.

Вкладки с раскрывающимся контентом. Находятся в разделе «Меню» под номерами ME602 и ME603. Эти блоки позволяют создавать на странице несколько вкладок и показывать разный контент по клику на соотвествующую вкладку в рамках одной страницы.

Кнопка «Показать еще»

Текст в раскрывающихся блоках

Вкладки с раскрывающимся контентом

Добавить кнопку навигации «Наверх»

Кнопка «Наверх» помогает пользователю из любого места страницы быстро попасть в ее начало.

Она особенно полезна для удобной навигации на страницах со статьями и большим количеством контента. С ее помощью можно избежать долгой и нудной прокрутки вверх вручную или при помощи скроллбара.

В Тильде блок с кнопкой «Наверх» находится в разделе «Форма и кнопка» под номером BF702.

Проследить, чтобы в конце страницы не было «тупика»

Не бросайте пользователя, который добрался до конца страницы. Как минимум, дайте возможность быстро вернуться к началу, либо перейти на главную или на следующую страницу.

Если вы сделали лендинг — самое время повторить призыв к действию. Если на странице находится статья, в конце можно поставить ссылки на другие статьи похожей тематики. В Тильде для этой цели можно использовать блоки из разделов «Плитка и ссылка» либо «Список страниц».

piece-of-cake.ru/absorption

britishsummer.tilda.ws/page2203.html

togdazine.ru/project/airzero

ayuev.com/estetica

fyrclothes. tilda.ws/2016

ohmy.moscow/books2

Задать понятный URL адрес страницы

URL (Uniform Resource Locator) — это единообразный адрес, указывающий путь к интернет ресурсу. Иными словами, это ссылка, которая отображается в адресной строке браузера.

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

Для понятных упорядоченных URL адресов существует термин ЧПУ (человекопонятный URL). ЧПУ состоит из понятных пользователю слов, а не из системного адреса (в Тильде системный адрес страницы будет выглядеть, например, так: /page4652188. html).

Пример, как устроена структура адреса:

https://www. mysite.com/shop/men/shirts

Первая часть (https://) показывает метод, который используется для получения доступа к интернет ресурсу. Протокол HTTP используется чаще всего.

Вторая часть адреса — это имя вашего домена, адрес, по которому сайт можно найти в сети. Если сайт многостраничный, www.mysite.com будет адресом главной страницы, все остальные разделы и подразделы по порядку прибавляются к адресу через косую черту.

Если это одностраничный лендинг с разделами, лучше использовать якорные ссылки с понятными названиями, например #about или #contacts, так как они тоже отображаются в адресной строке.

Адрес страницы в Тильде можно поменять в разделе «Настройки страницы». Если вы хотите использовать несколько слов в адресе страницы, прописывайте их через дефис «-» либо через символ подчеркивания «_». Например, /about-us или /our_works.

Сделать «хлебные крошки»

«Хлебные крошки» (навигационная цепочка) — это навигационный элемент, который помогает пользователю отслеживать свой путь перемещения по сайту.

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

С помощью хлебных крошек, попав в конец цепочки, можно в один клик вернуться к разделам, ближним к главной странице. Если посетитель зашел на сайт не через главную страницу, увидев хлебные крошки, он может быстро разобраться в структуре сайта.

Хлебные крошки выглядят таким образом:

Главная страница > Раздел сайта > Подраздел сайта > Страница

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

www.adidas. ru/muzhchiny-botinki

www.lamoda.ru

www.tehnosila.ru

Для того, чтобы сделать путь из хлебных крошек на Тильде, достаточно добавить на страницу блок ME605 «Хлебные крошки» из раздела «Меню». Разместить его можно, например, под обложкой. В контенте блока пропишите названия пунктов и проставьте ссылки на соответствующие страницы. Блок можно копировать из одной страницы и вставлять в другую, добавляя по одному новому пункту навигационной цепочки.

Подведем итоги

Уделите внимание структуре и дизайну меню сайта. Не загромождайте его большим количеством элементов и выделяйте активные пункты меню.

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

Используйте индикатор загрузки страницы, который подскажет пользователю что контент в процессе загрузки и вот-вот появится.

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

Кнопка «Наверх» поможет пользователю быстро вернуться в начало страницы. Используйте ее на страницах с большим количеством контента для удобной навигации на сайте.

Избегайте «тупика» в конце страницы. Предложите пользователю просмотреть похожие материалы по теме страницы либо установите ссылки, которые ведут на главную, следующую или предыдущую страницы.

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

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

Текст: Ира Смирнова и Юлия Засс
Иллюстрации, дизайн и верстка: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо!

Читайте также:

Белое пространство: способы вёрстки контента на сайте

Виджеты для сайта бесплатно — Прокачай Тильду!

Картинки для сайта — как подбирать фото и изображения на фотостоках

Как создать презентацию: правила создания эффективных презентаций

Где скачать иконки для сайта бесплатно?

Где найти фото — руководство по поиску картинок для сайта или статьи

Анализ и подготовка контента при создании сайта

Как написать текст для лендинга — создание текста для landing page

Шрифт для сайта — как выбрать или поменять шрифты

Размеры изображений для 9 социальных сетей — справочник

Как создать сайт. Пошаговое руководство

дизайнер на тильде, разработка сайта на Tilda.cc • freelance job for a specialist • category Web programming ≡ Client Dmitro Bogatir

Switch to English version?

Yes

Переключитись на українську версію?

Так

Переключиться на русскую версию?

Да

Przełączyć się na polską weкrsję?

Tak

3 of 3

project expired

1. publication

2. open for proposals

3. project expired

Ищу подрядчика, которому буду отдавать много проектов на ТИЛЬДЕ.

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

Работа в Zero Block

Буду отдавать в месяц около 5 заказов

Лендинг: до 6000 грн

Корпоративный: до 10-12 тыс грн

Сроки: до 15 дней

ОБЯЗАТЕЛЬНО: скидывайте свои проекты на тильде (ссылку)

• Proposals

  14

date
online
rating
cost
time to complete

1. proposal concealed by freelancer

2. 13180

    200  4

   1 day10 000 UAH

   Kiril S.

   1 day10 000 UAH

   готов сотрудничать на постоянной основе.
   ПРимеры:
   https://werdebox.com/
   http://www.manfred.club/

3. 7 days10 000 UAH

   7 days10 000 UAH

   Добрый день! Занимаюсь созданием сайтов на платформе Tilda. Прикрепляю последние два сайта, сделанных мной на данной платформе (собраны по шаблонам):
   http://olyacakes.tilda.ws
   http://dpichugina.ru

   Вот это самая последняя работа, закончила сегодня (сделана в Zero Block): http://presium.production.tilda.ws/
   Буду очень рада помочь Вам в создании сайта))

4. 5 days10 000 UAH

   5 days10 000 UAH

   Добрый день, Кирилл.

   Занимаюсь разработкой сайтов на Тильде. Знаю Zero Block и анимацию.

   Вопрос, проекты будете передавать в виде прототипа/текста или нужно будет и эту часть работы брать на себя?

   Вот пример моего личного сайта на этом конструкторе: vitaliypanchenko.pro
   Сделан почти полностью на Zero Block. Кастомный только раздел вопрос-ответ. Даже форма интегрирована в нулевой блок.

   …
   Там же можно увидеть и другие кейсы по дизайну.

   Занимаюсь проектированием и дизайном сайтов с 2011 года.

   Кирилл, давайте скорее обсудим условия и я приступлю к работе! Для этого напишите в личку или свяжитесь удобным способом.

   Мои контакты:
   E-mail: [email protected]
   Skype: panchenko-smilebz
   Telegram: @panchenko_smilebz
   Viber/tel.: +38 (093) 10-10-306
   Facebook: /panchenkovitalij
   Vk: /vitaliy.panchenko

   С уважением,
   Виталий Панченко

5. 1 day10 000 UAH

   1 day10 000 UAH

   Здравствуйте.
   Более 40 проектов на Тильде.
   Реализую любой проект, детали можем обсудить в ЛС.
   Контакты:
   телеграм: artem_wlass
   vk: https://vk.com/vlasenko_tema
   skype: grovewp_sport

6. 21976

    258  0

   Work samples:

   10 days10 000 UAH

   Oleksii Fedorov

   10 days10 000 UAH

   Здравствуйте!
   Меня зовут Алексей, я профессиональный дизайнер. Специализируюсь на минималистичных и лаконичных сайтах с адаптивным дизайном. Такой дизайн будет актуален еще много лет.
   Оперативная обратная связь будет способствовать быстрому выполнению заказа.
   Я активно работаю на Тильде в платной версии с зеро блоками. Также делаю несложную анимацию на Тильде. По ценам примерно так как вы и написали. Как пример мой личный сайт. сайты заказчиков могу скинуть в личку, если интересно.
   Работая со мной, вы будете спокойны за свой проект. Я всегда на связи, не меньше 15 часов в сутки. Работаю продуктивно и быстро. Все правки вношу в течении суток.
   Больше обо мне вы можете узнать на моем сайте: http://oleksiifedorov.tilda.ws/hello
   Буду рад ответить на ваши вопросы.
   С уважением Алексей.
   P.S. Мы вместе разработаем достойный дизайн, которым вы будете гордиться.

7.  freelancer isn’t working in the service any longer

8. 10 days10 000 UAH

   10 days10 000 UAH

   Добрый день. Я профессионально занимаюсь созданием лендингов и сайтов. Работаю в Adobe Muse, Tilda, WordPress. Пишите, договоримся. Портфолио http://peremot.tilda.ws

9. 10 days10 000 UAH

   10 days10 000 UAH

   Здравствуйте. Готов обсудить все условия. Буду рад сотрудничеству.

10. proposal concealed by freelancer

11. 7 days10 000 UAH

    7 days10 000 UAH

    Меня заинтересовало ваше предложение. Буду рада сотрудничеству

12. proposal concealed by freelancer

13. 3 days10 000 UAH

    3 days10 000 UAH

    Добрый день!
    Работаю на платформе Тильда. Сделаю лендинг или многостраничный сайт, интернет-магазин. Более подробно можно узнать на моём сайте abendus.ru/mysite — он на Тильде. С удовольствием приступлю к работе!
    Сроки и стоимость обсуждаются.

14. 5 days9000 UAH

    5 days9000 UAH

    Уважаемые предприниматели и те, кто только собирается заниматься бизнесом.

    Мы предлагаем создание и продвижение вашего сайта с рекламой в поисковиках, социальных и медийных сетях, настроенной на тех людей, которые уже готовы купить ваш товар или услугу.

    Ваш сайт будет выполнен в фирменном стиле вашего предприятия, будет прост и понятен в использовании для потенциального клиента. Сайт расскажет о вашем товаре, передаст его преимущества, донесет ценность вашего бизнеса и заставит клиента купить здесь и сейчас.

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

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

4 years ago

284 views

• tilda
• тильда
• сайт на тильде
• разработка на тильде
• дизайнер на тильде

Разбиение на страницы Grails – 1 Ответ

Задавать вопрос

спросил
9 лет, 11 месяцев назад

Изменено
7 лет, 8 месяцев назад

Просмотрено
11 тысяч раз

Привет, я вернулся с еще одним утомительным вопросом!

Пытаюсь разбить таблицу на страницы. В таблице 12 пользователей. Вот моя функция контроллера

 def listDuplicates(params) {
       результат определения = User.getAllWithDuplicateIDs()
       def totalDupCount = результат.размер()
         /*вызов для устранения неполадок */
        System.out.println("Дубликат:" + result.ID + " " + result.username)
       params.max = Math.min(params.max ? params.int('max') : 10, 100)
       вернуть [resultList: результат, totalDupCount: totalDupCount, params:params]
}
 

Вот мой взгляд

 

        <набор полей>
            

                

            
            
Обнаружены повторяющиеся идентификаторы!
                <таблица>
                    
                        
                            
                            
                            
                        
                    
                    <тело>
                        
                            
                                <тд>
                                    ${resultDuplicate. имя пользователя}
                                
                                <тд>
                                    ${resultDuplicate.id}
                                
                                <тд>
                                    ${resultDuplicate.accountStatus}
                            
                        
                    
                    
                        
                            <дел>