Веб-дизайн

Рис. 50 Тема прямых линий с засечками в двухуровневой навигации на сайте www.revo.com

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

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

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

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

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

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