Невозможно отучить людей изучать самые ненужные предметы.
Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3
Надо знать обо всем понемножку, но все о немногом.
Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы
Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)
Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода
Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5
Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости
Справочник от А до Я
HTML, CSS, JavaScript
Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы
Помогли мы вам |
Заметка является переводом статьи с uxplanet, за нее авторам большое спасибо. меню и навигация);
Не обязательно все указанные пункты должны быть использованы. Следите за тем, чтобы дизайн хедера для сайта не перегружался лишней информацией, которая мешает посетителям сосредоточиться на основных аспектах.
Ниже приведены примеры размещения подобных элементов:
Bjorn Website (проект студии дизайна интерьера)
В верху макета находится фиксированная (прикрепленная) шапка сайта на странице, что позволяет ей оставаться постоянно видимой в процессе прокрутки. Слева она содержит логотип бренда, а справа — ссылки «Продукты», «Студия», «Новости» + иконку «Магазин». Центральная пустая область визуально разделяет эти два блока.
Event Agency Website
Здесь хедер сайта использует другой подход: логотип и бренд — в центре, а левая и правая сторона имеют по две ссылки, позволяющие пользователям быстро перейти к нужным разделам. UI/UX дизайнеров, специалистов по контенту и продвижению продуктов.
Как указывается в статье Богдана Санду, «сайт должен притягивать взгляд сразу, иначе он станет всего лишь большим провалом».
Не смотря на все важные замечания из статьи, следует отметить, что далеко не каждый веб-ресурс нуждается в данном элементе. Во многих креативных дизайнах шапка сайта и ее функции связаны с другими зонами макета. выбору шрифта шапки и цвета ее фона. Пользователь должен замечать и воспринимать всю информацию максимально быстро и без особых усилий.
Daily Bugle magazine
В концепте текущего новостного шаблона увидите меню в шапке сайта с двумя активными ссылками на категории публикаций, линком на «живой» эфир и полем поиска. Логотип по центру, как в одном из примеров выше.
The Big Landscape
Здесь используется популярный тренд веб-дизайна 2017 с разбитой абстрактной сеткой, а header для сайта удачно его дополняет: левая часть визуально длиннее, состоит из логотипа и трех ссылок; правая — покороче, с элементами поиска и подписки.
Нужно помнить о том, что в процессе перемещения пользователя по странице шапка сайта может по разному себя вести:
Популярное дизайнерское решение, которое прячет базовые ссылки на разделы за соответствующей кнопкой. В блоге мы уже рассматривали эту фишку в статье про гамбургер-меню и его альтернативы.
Данная кнопка сегодня часто является полноценным элементом в хедере сайта, и многие пользователи уже в курсе, что за ней скрывается основное меню. Такой подход освобождает пространство, делая макет минималистским и легким, а также сохраняя больше места другим объектам. К тому же это позволяет создать гармоничный интерфейс для различных типов устройств.
Здесь показан вариант «компактного» меню в шапке сайта, содержащего много ссылок и поддерживающего простой общий стиль шаблона. Кроме него в хедере имеется две области: слева выделены красным цветом бренд и краткая информация о проекте; в правой зоне размещены иконки социальных сетей и значок поиска. Центральная часть остается свободной, добавляя легкость и баланс всему макету.
В структуре страницы слева много пустого места, а логотип и название фирмы находятся в верхнем углу, откуда начинается движение глаз. Далее в дизайне шапки расположена иконка гамбургер меню и линки на основные разделы. Подобный вариант позволяет скрыть множество ссылок и организовать хорошую визуальную иерархию.
И хотя данное решение все еще вызывает активные споры, оно по-прежнему используется в качестве навигации header’а сайта. Его противники указывают на то, что этот блок может запутать неопытных интернет-пользователей новичков. Именно поэтому желательно принимать решение о внедрении «гамбургер» кнопки только после исследования целевой аудитории.
Текущий подход повышения удобства и юзабилити полезен для проектов с большим объемом контента на веб-страницах. Он предлагает пользователям доступ к навигации в любом месте экрана. Если интересно, смотрите коды с примерами реализаций.
Здесь макет имеет фиксированный блок в самом верху, не скрывающийся при прокрутке. В нем содержится название, иконка лупы для поиска и кнопка «гамбургер».
Ниже представлен еще один пример творческого подхода к эффективному дизайну шапки сайта. При первом входе видна только минималистичная ее реализация с иконками соц.сетей и поиском (никакого меню и т.п.). Но в процессе прокрутке образуется фиксированная полоска с традиционным набором элементов.
Навигация в шапке сайта может состоять из двух разных меню. В современных вордпресс шаблонах это стандартный ход.
На гифке ниже увидите «липкий» хедер, состоящий из двух «строк»:
Иерархия хедера делает все элементы четкими и легко читаемыми, обеспечивая надежное взаимодействие с пользователем.
Итого
Шапка сайта является стратегически важной зоной в дизайне макета. Безусловно, каждый конкретный случай требует своего подхода и (возможно) проведения исследования пользователей, однако базовые нюансы, рассмотренные выше, всегда нужно учитывать.
Если есть что добавить по статье из личного рабочего опыта, пишите ниже — интересно почитать. Какой вариант реализации header вам больше понравился?
|
|