Сайдбар это

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

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

В этой статье, мы поговорим об «анатомии идеального сайдбара».

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

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

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

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

Сайдбар – то есть боковая панель – содержит контекстные элементы, соответствующие текущему контенту, или общие для всего сайта, такие как: навигационные меню, формы поиска или виджеты подписки. Они могут также содержать не-контекстные элементы, такие как реклама или «цитата дня».

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

Как система управления контентом (content management system – CMS), платформа WordPress определяет сайдбар, как «область виджетов» (Widget Area). В этих областях, разработчикам тем для WordPress следует размещать виджеты (widgets).

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

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

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

Один сайдбар

Вот пример дизайна с одной боковой панелью: Twenty Twelve WordPress Theme

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

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

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

Два сайдбара

Взгляните на пример сайта с двумя сайдбарами: Seventeen WordPress Theme

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

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

Три или четыре сайдбара

Вот пример дизайна с четырьмя сайдбарами: SmashingMagazine.com

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

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

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

Без сайдбаров

Пример дизайна без применения сайдбаров: Beyn.org

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

Оставшиеся кнопки вы можете расположить в нижней части страницы. Также, можете попытаться отобразить их в верхней части, но есть риск, что при этом основной контент «съедет» вниз, за пределы видимой части экрана.

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

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

Тонкости хорошего дизайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Перевод статьи «Anatomy of a Perfect Sidebar» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Sidebar: что это за компонент Windows?

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

sidebar что это

Теперь непосредственно о том, что это за компонент и зачем он нужен. Для понимания этого просто переведите английский термин. Он означает «боковая панель». Что она собой представляет? Это вертикальная область, располагающаяся по умолчанию в правой части «Рабочего стола», на которой показаны дополнительные иконки приложений (так называемые виджеты), которые позволяют осуществлять быстрый доступ к некоторым стандартным системным приложениям вроде календаря, информационного погодного или новостного блока и т.д.

Как работает боковая панель и почему появляются ошибки?

Такова панель Sidebar. Что это такое, разобрались. Теперь посмотрим, как это все работает. Несмотря на то что исполняемый файл, отвечающий за одноименный процесс, находится в автозагрузке Windows и активен в «Диспетчере задач», на самом деле панель нужно вызывать отдельно.

sidebar xp

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

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

Что делать при высокой нагрузке на ресурсы?

В работающей системе для одноразовой остановки службы можно воспользоваться завершением процесса Sidebar.exe в «Диспетчере задач».

sidebar для windows 7

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

sidebar для windows xp

Для его исключения из указанного раздела необходимо использовать команду msconfig в консоли «Выполнить», после чего в вызванном конфигураторе перейти к искомой вкладке и снять флажок со строки панели. Рестарт системы после сохранения настроек обязателен.

Как отключить Sidebar для Windows 7 полностью?

Но даже такой подход полной уверенности в отключении боковой панели не дает (мало ли когда она может активироваться самостоятельно).

sidebar что это

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

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

В заключение

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

Тем не менее многих интересует вопрос использования панели не только в «Висте» или «семерке». Да, такая возможность есть. Для этого необходимо скачать и установить Sidebar для Windows XP, 8 или 10 (использовать можно и официальный ресурс Microsoft, и собственные разработки юзеров, входящих в группы поддержки). Но при условии наличия XP-модификации следует учесть, что это может спровоцировать повышение нагрузок, а сама система станет работать намного медленнее. Так что, сто раз подумайте, прежде чем заниматься подобными вещами и неоправданно перегружать процессор и ОЗУ.

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

fb.ru

Коротко о Webix

Прежде чем перейти непосредственно к коду, давайте обмолвимся коротко, что это за библиотека такая. Итак, Webix представляет из себя библиотеку UI компонентов разной сложности, от простой кнопки до Spreadsheet Widget, с помощью которого можно создавать онлайн таблицы в стиле Excel. Помимо собственно компонентов, в наличии механизм обработки событий, поддержка оффлайн-режима, интеграция с jQuery, AngularJS, Vue.js, Backbone.js, online инструменты: Skin builder, Form builder. Заявлена совместимость с Angular 2.

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

Подключаем необходимые файлы

Если вы загрузите архив с библиотекой, внутри папки codebase вы обнаружите необходимые js и css файлы:

<link rel="stylesheet" href="./codebase/webix.css"> <script src="./codebase/webix.js"></script>

Также можно использовать CDN:

<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css"> <script src="http://cdn.webix.com/edge/webix.js"></script>

Или NPM:

npm install webix

Или даже NuGet:

nuget install Webix

Или если вы предпочитаете Bower:

bower install webix

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

<script src="//cdn.webix.com/components/sidebar/sidebar.js"></script> <link rel="stylesheet" href="//cdn.webix.com/components/sidebar/sidebar.css">

Сайдбар на примере e-mail клиента

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

image

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

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

view: "button"

Для инициализации Webix-приложения нам понадобится следующий код:

// опционально. код выполнится после загрузки страницы  webix.ready(function(){  // конструктор  webix.ui({  // описание приложения  view: "button",  }); });

Код выше создаст страницу, состоящую из одной кнопки. Поскольку наше приложение состоит из нескольких компонентов, нам нужно задуматься о создании лэйаута. Для этого используются свойства rows и cols, которые служат для создания рядов и колонок.

Например:

webix.ui({  cols: [  { view: "button"},  { view: "button"}  ] });

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

Теперь мы можем перейти к сайдбару. Он основан на компоненте Tree и также использует формат JSON для описания своей структуры. Для удобства лучше хранить такое описание в отдельной переменной.

Наш сайдбар будет состоять из следующих пунктов меню:

var menu_data = [  {id: "inbox", icon: "envelope", value: "Inbox"},  { /* прочие пункты */ },  {id: "tags", icon: "tags", value:"Tags", data:[  { id: "friends", value: "Friends"},  { id: "work", value: "Work"},  { id: "news", value: "News"}  ]} ], 

Каждый элемент должен иметь уникальный ID. value определяет, каким будет текст пункта меню, а icon – иконку. Webix использует набор иконок Font Awesome. Обратите внимание на пункт Tags. Он содержит вложенные подменю, которые будут открываться по клику.

Итак, суммируя все вышесказанное, мы можем перейти к нашему приложению:

webix.ui({  cols:[  /* первая колонка, сайдбар */  {   view: "sidebar",  data: menu_data,   },  /* вторая колонка */  { /* dataview component */ }  ] });

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

В результате мы получили вот такой сайдбар:

image

Пример кода и демку можно посмотреть здесь.

Добавляем кнопку для скрытия сайдбара

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

webix.ui({  rows:[  { /* здесь будет тулбар */},  {cols:[  { /* сайдбар */ },  { /* наши имейлы */ }  ]}  ] });

Давайте разберемся с кодом, который нам понадобится для создания заголовка. Как и было сказано, тип создаваемого компонента определяется значением свойства view. В данном случае этим значением будет toolbar. Его содержимое определяется значением свойства elements. В нашем случае мы поместим на тулбар следующие элементы: кнопку-гамбургер, заголовок и несколько иконок-уведомлений:

{view: "toolbar", elements: [  /* кнопка-гамбургер */  { view: "button", type: "icon", icon: "bars",  width: 37, align: "left", css: "app_button",   click: function(){  $$("$sidebar1").toggle()  }  },  /* заголовок */  { view: "label", label: "Webix E-Mail CLient"},  { /* добавляем пустое пространство */ },  /* уведомление 1 */  { view: "button", type: "icon", icon: "envelope-o",  width: 45, css: "app_button", badge:4},  /* уведомление 2 */  { view: "button", type: "icon", icon: "bell-o",  width: 45, css: "app_button", badge:10}  ] },

Свойства type: "icon" и icon: «icon-name» создают кнопки-иконки. Свойство click позволяет определить функцию, которая будет вызываться по клику. В данном случае, она переключает состояния сайдбара. К двум последним кнопкам мы добавили свойство badge, которое позволяет использовать оранжевые бейджи с номерами, соответствующими значению свойства.

Вот что получилось в итоге:

image

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

Раскрытый сайдбар имеет уже привычный нам вид:

image

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

Попробовать этот пример и поиграть с кодом можно по этой ссылке.

Заключение

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

habr.com

Формат боковой панели

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

На сайте sidebar может быть размещен слева или справа от контента.

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

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

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

sidebar1.jpg

пример использования 2 сайдбаров на www.facebook.com (слева и справа от ленты)

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

Зачем нужны сайдбары на сайтах

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

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

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

wiki.rookee.ru

You May Also Like

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.