Анатомия идеального сайдбара

Animat House

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

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

Эта статья объясняет".Анатомия идеальной боковой панели.».

Определение и важность сайдбара

Сначала необходимо определить боковую панель. Следующее:.

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

Это не совсем мое собственное определение — я использовал материал из Википедии.

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

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

В качестве системы управления контентом (см.Система управления контентом — CMS), платформа WordPress определила боковую панель как "Область виджета» (Область виджетов). В этих областях разработчикам тем WordPress необходимо разместить виджеты.

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

Сколько сайдбаров должно быть в теме?

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

Боковые колонтитулы.

Боковые колонтитулы.

Это пример дизайна с использованием боковых панелей.22 темы WordPress

Это, пожалуй, самый популярный вариант оформления блога. Кроме того, одна такая строка может содержать 5-10 элементов, поскольку страница блога обычно содержит пост или длинный список контента с большими комментариями.

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

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

ЧИТАТЬ ЕЩЁ:  8 шагов по проведению контроля качества на сайте

Две боковые линии

Две стороны

Посмотрите пример сайта с двумя боковыми панелями.17 тем WordPress

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

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

Три или четыре боковые линии

Три или четыре боковые линии

Вот наглядный пример четырех боковых линий.smashingmagazine.com

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

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

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

Нет боковой линии

Нет боковой панели

Пример дизайна без боковых линий:.beyn.org

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

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

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

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

Отличные оттенки хорошего дизайна

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

ЧИТАТЬ ЕЩЁ:  5 решений для доступа к заблокированной панели администрирования WordPress

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

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

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

Ширина и высота боковой линии

Ширина и высота боковых линий

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

Как правило, ширина от 20% до 40% является оптимальным значением для одной боковой панели. Однако, если используется несколько боковых панелей, рекомендуется, чтобы общая ширина не превышала 50% (например, 20% + 20% или 15% + 35%).

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

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

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

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

Использование цветов и изображений

Использование цветов и изображений

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

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

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

ЧИТАТЬ ЕЩЁ:  20 ресурсов, на которых можно скачать векторные изображения бесплатно

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

Размер и расположение шрифта

Размер шрифта и расположение элементов

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

Я создаю боковые колонтитулы с размером шрифта, который на 10-20% больше основного содержания. Это привлекает посетителей, но не отвлекает их от основного содержания — а это именно то, к чему мы стремимся. Помните, что в некоторых случаях текст меньшего масштаба также может привлечь внимание.

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

Расположение элементов боковой панели

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

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

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

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

Заключение

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

Оцените статью