Меню сайта слева: Top 30 Inspiring Website Sidebar Design Examples in 2020

30 лучших примеров дизайна боковой панели веб-сайта в 2020 году

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

Зачем вам боковая панель веб-сайта?

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

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

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

30 Вдохновляющий и креативный дизайн.

1. Энтони Дж. Рейберн


Энтони Дж. Рейберн — это веб-сайт, на котором можно найти множество вдохновляющих фотографий. У него есть боковая панель справа для демонстрации логотипа, ссылки для посетителей, ссылки на страницы в социальных сетях и контактные данные.

2. Dollyave

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

3. Грейс Чуанг

Грейс Чуанг — это сайт-портфолио, на котором представлены проекты Грейс. Этот сайт имеет 3-х колоночную компоновку: слева находится боковая панель с логотипом, ссылки для перехода посетителя на другие страницы сайта и ссылки на страницы в социальных сетях, в центре фото дизайнера, а на справа введение дизайнера.

4. Kate Vass Galerie

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

5. Nicecream

Вы любите мороженое ручной работы? Nicecream — это веб-сайт, который вы не должны пропустить. Боковая панель хорошо сочетается со всем интерфейсом. Он предлагает удобную навигацию для посетителей сайта.

6. Jasmine Star

Jasmine Star — это веб-сайт, который помогает предпринимателям создавать успешные бренды. Его боковая панель для навигации находится слева. Положение типографики на боковой панели особенное. Белый фон помогает выделить боковую панель. Кроме того, есть возможность закрыть его.

7. Quinnton Harris

Quinnton Harris — визуально привлекательный личный веб-сайт. Он демонстрирует историю жизни владельца с большими изображениями и текстом. Он использует точки на боковой панели для навигации.

8. Майк Келли

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

9. Ленивец

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

10. Love Billy

Love Billy использует жирный шрифт на боковой панели своего веб-сайта. Он служит в качестве навигации для посетителей и дает обзор всего интерфейса.

11. Sophie Kahn

Sophie Kahn — это арт-сайт, созданный Софи Кан, цифровым художником и скульптором. Он использует обычную боковую панель со ссылками на страницы социальных сетей.

12. Дини Чен

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

13. Церковь «Жизнь сегодня»

«Церковь жизни сегодня» — это веб-сайт для детей. Он имеет обычную простую боковую панель. Весь дизайн чистый и красивый.

14. Матье Стерн

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

15. Чарли Уэйт

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

16. Нишевый модуль

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

17. CCCOG

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

18. Дилан Перло

Дилан Перло представляет множество фотопроектов моды. Его боковая панель находится слева, чтобы помочь посетителям. Кроме того, есть выпадающие меню для более подробной навигации.

19. Томас Деферт

Томас Деферт использует подробную боковую панель для демонстрации своих работ.

20. Goltz Group

Goltz Group продает высококачественные фоторамки и предоставляет индивидуальное обслуживание. Его боковая панель имеет слегка прозрачный эффект.

21. Intechnic

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

22. Wiggs Photo

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

23. Pedro n The World

Pedro n The World — это одностраничный веб-сайт. Он имеет строку меню в центре интерфейса. Навигация отображается слева на всех остальных страницах сведений, а логотип — сверху.

24. Gresham Smith

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

25. Rose Datoc Dall

Rose Datoc Dall — это веб-сайт, на котором представлены произведения искусства. Боковая панель справа рядом с произведениями искусства отображает последние сообщения с красивыми миниатюрами и типографикой.

26. Пол Дэвид

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

27. Куки и Кейт

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

28. Остин Клеон

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

29. Паскаль Ван Гемер

Паскаль Ван Гемер использует боковую панель справа, чтобы указать, на что смотрят посетители. На главном экране есть стрелка в качестве указателя направления, которая помогает посетителям прокручивать страницу вниз. При прокрутке вниз появится вертикальная панель навигации.

30. Элизабети Лин

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

 Как создать боковое меню?

Боковые панели играют важную роль на веб-сайтах, но создать хорошую боковую панель — непростая задача. Их много принципы дизайна навигационного меню сайта и другие необходимые факторы, которые следует учитывать. Это видео на YouTube, которое научит вас создавать боковую панель с помощью HTML, CSS и jQuery.

Однако, если у вас нет опыта работы с каким-либо языком разработки, вы все равно можете использовать инструменты дизайна для создания боковой панели с нуля. Инструмент прототипирования Mockplus может быть полезным инструментом для этого. Кроме того, могут быть полезны шаблоны панели навигации .

Масштабируемость, отзывчивость и простота сканирования

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

Автор: Пейдж Лаубхаймер

  • Стр. Лаубхаймер

на 2021-05-16 16 мая 2021 г.

Темы:

Навигация, информационная архитектура, визуальный дизайн, гамбургер, размер экрана

  • Навигация Навигация,
  • Информационная архитектура, 
  • Визуальный дизайн

Поделиться этой статьей:

Каждый раз, когда я говорю о широких иерархиях в нашем курсе UX Conference по информационной архитектуре, возникают два вопроса:

  1. Можно ли иметь более 7-9 категорий верхнего уровня в глобальной навигации? (Осторожно, спойлер: все в порядке, вам просто нужно спланировать это соответствующим образом. )
  2. Если мы используем большое количество категорий верхнего уровня, они не помещаются на горизонтальной панели навигации. Куда им идти?

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

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

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

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

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

Преимущества вертикальной навигации

Большинство преимуществ этого пользовательского интерфейса навигации проистекает из его способности размещать множество категорий высшего уровня.

  1. Определенные категории повышают вероятность поиска и снижают стоимость взаимодействия.

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

  1. Вертикальная навигация предлагает пространство для роста.

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

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

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

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

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

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

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

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

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

Logitech использовала левостороннюю вертикальную навигацию для параметров локальной навигации на различные страницы в разделе определенного продукта, что является очень распространенным подходом в Интернете.
  1. Вертикальная навигация естественным образом переносится на мобильные устройства. Преобразование горизонтальной строки меню в дизайн, удобный для мобильных устройств, может потребовать некоторой доработки, поскольку строка меню обычно преобразуется в вертикальную навигацию (часто отображается под меню-гамбургером).
    Напротив, использование вертикальной навигации для настольных компьютеров и мобильных устройств позволяет команде применять одни и те же варианты визуального дизайна с относительно минимальной адаптацией. Границы, тип, интервалы, порядок категорий и пользовательский интерфейс для категорий второго уровня могут быть общими для разных устройств.
Вертикальная навигация heywoodgolf легко адаптируется с настольных компьютеров к мобильным сайтам с небольшими изменениями дизайна, необходимыми для того, чтобы дизайн выглядел, работал и чувствовался в соответствии с платформой.

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

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

Вертикальная навигация требует больше места

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

Nua Bikes старого и нового дизайна. (Слева) Предыдущий дизайн Nua Bikes использовал вертикальную левостороннюю навигацию с соотношением контента и хрома приблизительно 5:1. (Справа) редизайн сайта, перенесенный на горизонтальную панель навигации с соотношением контента и хрома 12:1 на экране того же размера. Хотя новый дизайн предоставляет гораздо меньше категорий верхнего уровня в видимой навигации, он занимает гораздо меньше места для контента.

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

IBM Watson Studio: на очень большом дисплее влияние вертикальной навигации на соотношение контента и хрома незначительно, поскольку сайт добавляет пробелы (или, в данном случае, пустое темное фоновое пространство) слева и справа.

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

Рекомендации по использованию вертикальной навигации

  1. Разместите вертикальную навигацию слева и используйте заметный дизайн.

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

Кроме того, убедитесь, что навигация визуально выделяется. Различные цвета текста или фона и границы могут выделить его среди других элементов страницы.

Дизайн-система Audi использовала высокую контрастность и темный фон, чтобы обеспечить заметную левостороннюю навигацию и читаемость ссылок.
  1. Не дублировать меню как по вертикали, так и по горизонтали.

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

BDO Advisory использовал два дублирующих интерфейса глобальной навигации: горизонтальную полосу и меню-гамбургер в правой части экрана. Эти два меню содержат одни и те же элементы, но меню-гамбургер также включает элементы из служебной навигации сайта (Местоположения, События, Новости, и т. д.). Это дублирование является ненужным и сбивает с толку.
  1. Не прячьте навигацию за значками.

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *