Все новости 10 апреля 2025 Все теги

Секреты дизайна в Nethouse. Часть 9. Топбар.

Рекомендации по оформлению сайтов на нашей платформе предоставляет Григорий Левин, руководитель студии дизайна "Интегра", первый агент Nethouse. С предыдущими частями "Секретов" можно ознакомиться по ссылке.

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

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

Почти без ограничений: как мы применяем новый топбар в студии

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

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

Первое впечатление и с чего начать

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

Включается топбар просто: в панели управления откройте Дизайн → Настроить → Меню и нажмите "Новая версия топбара". Не переживайте: если что-то пойдет не так, вы всегда можете вернуться к старой версии меню.

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

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

Настройки, которые стоит попробовать

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

Во вкладке "Дизайн" вы можете выбрать, как будет позиционироваться топбар:

поверх блоков (накладывается на первый экран);
перед блоками (занимает свое собственное место).

Выбирайте, что лучше смотрится в вашем макете — результат виден сразу.

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

Далее идут тонкие настройки:

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

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

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

Как устроен топбар: представьте себе таблицу

Чтобы проще понять, из чего состоит новый топбар, представьте таблицу 3×3 — сетку из трех строк и трех колонок.

по вертикали — это строки: Верхняя строка, Средняя строка, Нижняя строка;
по горизонтали — это колонки в каждой строке: Левая колонка, Центральная колонка, Правая колонка.

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

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

Учитывайте отображение элементов на разных устройствах

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

на десктопе;
на мобильных устройствах;
или сразу в обеих версиях.

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

Важно: проверяйте результат не только в редакторе, но и на живом сайте.

Откройте сайт в браузере на компьютере, в новой вкладке, чтобы убедиться, что топбар на десктопе работает корректно. Параллельно откройте сайт на смартфоне и проверьте мобильную версию: не наслаиваются ли элементы, не "прыгают" ли строки, удобно ли нажимать кнопки.

Это особенно актуально, если вы, например, используете разные версии одного и того же блока (контакты, ссылки, поиск) под разные устройства — такая гибкость часто спасает от перегруженности.

Средняя строка — главный элемент нового топбара

После настройки шаблона и дизайна, вы увидите вкладки:

верхняя строка;
средняя строка;
нижняя строка.

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

Попробуйте так и сделать:

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

Структура средней строки

Средняя строка, как и другие, состоит из левой, центральной и правой колонок. Вот рекомендации из нашей студийной практики:

левая колонка: классически сюда помещается логотип;
центральная колонка: если это интернет-магазин, мы размещаем здесь каталог и поиск, если это сайт компании, здесь может быть блок ссылок — привычное меню со ссылками на страницы сайта;
правая колонка: для интернет-магазинов — иконка личного кабинета, корзина, а для сайтов услуг — кнопка звонка, номер телефона, запись на консультацию или другие важные CTA-элементы.

Обязательно обратите внимание на бургер-меню (выпадающее меню с иконкой из трех горизонтальных полоск) — оно может быть универсальным элементом как для десктопа, так и для мобильной версии.

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

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

Верхняя строка: информационный уровень

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

Чтобы активировать верхнюю строку:

зайдите в раздел "Верхняя строка";
включите отображение;
настройте ее внешний вид и содержимое.

Как мы используем верхнюю строку:

левая колонка: часто размещаем адрес магазина или офиса, ссылку на форму обратной связи, иногда — блок ссылок, если нужно вывести навигационные элементы отдельно, как это делают крупные интернет-магазины;
центральная колонка: пока используем редко, но считаем, что здесь отлично будет смотреться график работы, часы приема, или другая важная информация. В одном из примеров мы используем центральную строку для размещения ссылок RUS | ENG для перехода к версии сайта на английском языке;
правая колонка: номер телефона — один из самых частых элементов, иконки соцсетей и мессенджеров (WhatsApp, Telegram, VK и пр.).

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

Важно: верхняя строка должна быть вспомогательной, а не отвлекать от основного меню.

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

Нижняя строка: опционально и по необходимости

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

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

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

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

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

Примеры из нашей практики

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

производитель катеров и яхт "Albakore"

Используется одна строка топбара (средняя строка). В левой колонке — логотип, в центральной — навигационное меню, в правой — бургер-меню.

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

база отдыха "Онегин Хутор"

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

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

сеть детских футбольных школ "Юниор"

Используется две строки топбара. Верхняя строка: в левой колонке — информация о филиалах и ссылка "Напишите нам", в правой колонке — номер телефона, кнопка "Заказать звонок", иконки мессенджеров. Средняя строка: левая колонка — логотип, центральная — основное меню с разделами, правая — кнопка "Бесплатное занятие" и бургер-меню.

Классический пример шапки для сайта с услугами. Топбар решает сразу несколько задач: информирует, упрощает навигацию и направляет к целевому действию. Благодаря новому редактору шапка остается визуально легкой, несмотря на обилие элементов.

производственная компания "Окна Рядом"

Используется две строки топбара. Верхняя строка: левая колонка — информация о сети салонов, email, правая — номер телефона, иконки мессенджеров и соцсетей. Средняя строка: левая колонка — логотип, центральная — кнопка "Каталог", строка поиска по каталогу и навигационное меню, правая — кнопка "Бесплатный замер".

Пример реализации шапки для сайта услуг с элементами e-commerce. Каталог, поиск, навигация и призыв к действию расположены логично, без визуальной перегрузки.

производитель исследовательских приборов "АИП"

Используется две строки топбара. Верхняя строка: левая колонка — ссылки на страницы сайта, центральная колонка — переключатель языковой версии (Рус/Eng), правая колонка — адрес, телефон, WhatsApp. Средняя строка: левая колонка — логотип, центральная колонка — кнопка "Каталог" и поиск по каталогу, правая колонка — кнопка "Консультация" и бургер-меню.

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

интернет-магазин бытовой техники "KitchenAid"

Используется две строки топбара. Верхняя строка: левая колонка — ссылки на страницы сайта, правая колонка — адрес, номер телефона, иконки мессенджеров. Средняя строка: левая колонка — логотип, центральная — кнопка "Каталог" и строка поиска, правая колонка — личный кабинет и корзина.

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

официальный дилер кухонной техники "Omoikiri"

Используется три строки топбара. Верхняя строка: левая колонка — два адреса, правая колонка — номера телефонов, иконки мессенджеров. Средняя строка: левая колонка — логотип, центральная — кнопка "Каталог товаров" и строка поиска, правая колонка — личный кабинет и корзина. Нижняя строка: центральная колонка — блок ссылок на основные разделы сайта.

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

В завершение

Новый топбар — это не просто обновление одного блока. Это мощный инструмент, который открывает перед вами совершенно новый уровень в оформлении сайта. Теперь верхнее меню можно адаптировать под любые задачи: от минималистичного лендинга до масштабного интернет-магазина.

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

Мы в студии "Интегра" уже активно применяем его в реальных проектах и продолжим изучать и расширять практику. Следите за нашими обновлениями:

- на сайте integradesign.ru;

- в Telegram-канале;

- в группе ВКонтакте.

Подписывайтесь, вдохновляйтесь и обязательно пробуйте новый редактор топбара на своих сайтах — он действительно того стоит".

Поделиться новостью

Секреты дизайна в Nethouse. Часть 9. Топбар.

Последние новости

7 способов продвижения сайтов в 2025 году + месяц продвижения в подарок

Как Telegram-бот помогает автоматизировать рассылку фотографий после мероприятий

15 лет домену .РФ

Структура сайта: что это такое, какие виды существуют и как создать структуру сайта