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

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

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

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

Особые случаи

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

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

Кроме выделения текущей кнопки иногда может понадо­биться убрать или добавить ссылок на панель в зависимости от контекста текущей страницы. Общую рекомендацию можно сформулировать так: не ленитесь делать разные

213

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

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

Динамическая навигация

Восприятие навигационной па­нели можно сделать более комфортным, применив простей­ший анимационный эффект, изменяющий изображение каждой кнопки, когда над ней проходит курсор мы­ши. Встроенный в страницу JavaScript-сценарий (стр. 65) может заменять при приближении мыши одно изображе­ние кнопки на другое, — переключая, скажем, ее цвет или яркость, добавляя тень или подсветку, заставляя ее выступать или, наоборот, утапливаться в плоскость стра­ницы (по-английски этот эффект называется rollover, т. е. «перекатывание»). Возможность самому поуправлять пре­вращениями графики на странице, хоть и не дает никакой практической выгоды, как правило, повышает субъектив­ную оценку дизайна пользователем: когда страница, затаив дыхание, следит за малейшими движениями вашей мыши, соблазн щелкнуть-таки в конце концов по ссылке значи­тельно возрастает. Даже если нигде больше на странице анимация не применяется, для особой по своей интерактив­ной роли области — панели навигации — вполне уместно применить и несколько особые методы оформления.

214

Кроме классической навигационной панели с графическими кнопками, иногда применяется простейшая разновидность HTML-бланка (стр. 30), состоящая из выпадающего списка с перечислением ссылок и расположенной рядом кнопки «Go» (или «Перейти»). Такой прием хорош своей компакт­ностью: в сложенном виде список занимает гораздо меньше места, чем панель с кнопками. Однако для основных, крити­ческих по важности или же неоднородных по охвату ссылок сайта пользоваться им не стоит. Разумнее всего вынести в такого рода меню достаточно длинный и притом часто меняющийся список одноуровневых и близких по тематике разделов (например, список «зеркал» или версий сайта на разных языках). Пара выпадающих списков в комбинации с JavaScript-сценарием позволяет компактно представить двухуровневую иерархию, сделав так, чтобы набор пунк­тов во втором меню зависел от того, какой пункт выбран в первом

Динамический HTML делает возможным еще более эффек­тивное представление двухуровневых иерархий — раскры­ваемые оглавления (expandable outlines). Сразу после загрузки страницы такое оглавление представляет собой список раз­делов верхнего уровня, каждый пункт в котором в ответ на щелчок мыши раскрывается, выводя список относящихся к нему подразделов и сдвигая вниз расположенные ниже разделы. Раскрытие другого раздела, как правило, возвраща­ет в исходное состояние предыдущий; иногда предусматри­вают также ссылку, позволяющую раскрыть одновременно все разделы. Этот прием, обеспечивающий компактное и обозримое представление большого количества информа­ции на ограниченной площади страницы, незаменим для контент-сайтов. (В броузерах, не поддерживающих динами­ческий HTML, все списки подразделов будут видны сразу же в раскрытом виде.)

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

215

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