Очень простая горизонтальная панель навигации. Панель навигации в фотошопе

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

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

Перечень инструментов

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

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

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

Расположение

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

Панель инструментов на главной странице сайта IBM располагается в правом верхнем углу, в середине страницы (иконки социальных сетей) и в футере (ссылка Contact Us).

Правый верхний угол детально.

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

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

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

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

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

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

2. Размещайте инструменты там, где люди ожидают их найти. Самые просматриваемые места: правый верхний угол страницы либо область до и после статьи. Можете встроить эти инструменты и в общее меню, в общую навигационную панель, потому как люди имеют склонность внимательно ее просматривать, если они ищут что-либо.

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

5. Обязательно встраивайте инструменты для подписки. Сделайте максимально простым процесс подписки на какого-либо автора или в целом на блог.

6. Для отображения используемого языка достаточно указать его название символами соответствующего алфавита.

7. Формы подписки на ресурс и входа на сайт должны располагаться рядом друг с другом.

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

Примеры расположение навигационной панели инструментов:

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

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

Например, в результате вызова команды Склады в рабочей области будет открыт список складов (рис. 1.10).

Рисунок 1.9 – Панель навигации командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8 в режиме Конфигурация

Рисунок 1.10 – Вызов навигационной команды командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8

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

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

Рисунок 1.11 – Вызов навигационной команды с открытием нескольких списков командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8

Команды в панели навигации, как правило, расположены в трех стандартных группах (рис. 1.12).

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

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

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

Рисунок 1.12 – Вызов навигационной команды с открытием нескольких списков командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8

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

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

Если разделы программы образуются подсистемами первого уровня, то группы команд в панели навигации образуются подсистемами второго и более низких уровней (рис. 1.14).

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

Рисунок 1.13 – Дополнительные группы команд командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8

Рисунок 1.14 – Соответствие групп команд и командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8

Пользователь имеет возможность настроить состав панели навигации: добавить или удалить команды, изменить их порядок следования. Например, он может убрать группы команд Характеристики и Цены , а команду Корректировки остатков перенести в группу См. также (рис. 1.15) . Программа автоматически запоминает настройки, выполненные пользователем, и в следующий раз будет показывать панель навигации такой, как ее настроил пользователь

Рисунок 1.14 – Пользовательская перенастройка командного интерфейса Рабочего стола управляемого приложения 1С:Предприятие 8

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

Итак, разберемся еще раз с ролями:

Фотошоп - это ваш самолет!

Вы - пилот!

Ваш штурвал - панель навигации!

Для управления изображением в Photoshop мы используем навигационную панель.
Если навигационная панель не видна, то ее нужно активировать в меню Window (Окна) - выбрать (Навигатор).

Давайте приглядимся к навигационной панели:

В области отмеченной буквой A мы видим редактор масштаба.

В данный момент изображение имеет масштаб 81.97% от настоящего размера.

Здесь можно вводить значения от 0.11% до 1600% .

Мы также можем использовать ползунок (отмечен буквой E ):

перетаскивая вправо - увеличиваете , влево - уменьшаете .

Кликая на значок (отмечен буквой В ) мы можем уменьшить постепенно небольшими шажками.

А этот значок (отмечен буквой С ) увеличивает. Красный квадратик, отмеченный буквой D , говорит нам о том, какая часть изображения видна в документе.

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

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

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

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

Посмотрите на скриншоты:

на верхнем - мы не можем передвигать красный квадрат, на нижнем можем без проблем:

Важно отметить, что саму навигационную панель мы тоже можем увеличивать.

Просто потяните за нижний правый угол панели (отмечен красным цветом на скриншоте):

Это позволит увидеть больше деталей:

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

Приятного путешествия!

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

Начнем с определения.

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

1. Одноуровневый список

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

Этот тип панелей навигации условно можно условно разделить на три подтипа:

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

1.1. Горизонтальный одноуровневый список

Панель навигации в виде горизонтального одноуровневого списка располагается вверху страницы. На некоторых сайтах горизонтальную панель располагают в двух местах: вверху и внизу страницы.

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

Достоинства:

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

Недостатки:

1. На панели нельзя разместить много элементов.
2. При большом количестве элементов списка их приходится размещать в несколько строк.

Пример:

На сайте студии Артемия Лебедева в качестве панели навигации применяется горизонтальный одноуровневый список.

1.2. Вертикальный одноуровневый список

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

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

Достоинства:

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

Недостатки:

1. Под панелью навигации часто остается много неиспользованного пространства.
2. При большом количестве элементов списка они не все видны на странице одновременно (для просмотра некоторых элементов необходимо прокручивать страницу по вертикали).

Пример:

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

2. Двухуровневый список

Двухуровневая панель навигации представляет собой панель, в которой каждой ссылке первого (корневого) уровня соответствует несколько ссылок второго уровня.

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

2.1. Двухуровневый список с фиксацией

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

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

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

Достоинства:

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

Недостатки:

1. При активном перемещении по разделам сайта происходит слишком большое количество перезагрузок страниц.

Пример:

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

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

Она, например, использовалась на сайте компании РусАрт (сейчас Individ). К сожалению, на данный момент старый сайт компании недоступен.

2.2. Динамический двухуровневый список

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

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

Достоинства:

1. Позволяет быстро получить доступ к любому элементу.
2. Занимает мало места на странице.

Недостатки:

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

Примеры:

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

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

2.3. Развернутый двухуровневый список

Идея применения развернутого двухуровневого списка — показать на странице все ссылки второго уровня. При этом ссылки первого уровня могут играть роль заголовков (иногда они не являются ссылками).

Достоинства:

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

Недостатки:

1. Панель занимает много места на странице.

Пример:

На сайте интернет-агентства Promo.ru ссылки навигационной панели объединены в одну из четырех групп. В каждой группе содержится 4-5 ссылок, что соответствует рекомендуемым значениям.

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

2.4. Полуразвернутый двухуровневый список

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

Достоинства:

1. Эффективное использование площади сайта. Все наиболее существенные ссылки доступны с главной страницы.

Недостатки:

1. Одни элементы найти очень просто, а другие — совсем нет.

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

Создание навигации

Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка

, где в каждом пункте
• содержится одна ссылка . В HTML5 для навигации ввели отдельный тег