Разновидности одинаковости

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

210

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

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

По ту сторону кнопок

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

И наоборот, если страница и без того насыщена фотогра­фическими текстурами и криволинейными формами, имеет смысл вспомнить о популярной в современном дизайне теме прямых линий (стр. 93), часто применяемой для объедине­ния кнопок панели навигации в единое целое. На рис. 50 показаны фрагменты трех последовательных страниц, на­чиная с заглавной, сайта www.revo.com . Мотив прямых линий с засечками на концах, ограничивающих навигаци­онную панель и выделяющих ее на фоне доминирующих на странице плавных дуг и градиентов, вводится уже на первой странице (а). Сайт этот содержит двухуровневую иерархию страниц, и на подчиненных страницах дизайнер из тех же прямых линий строит элегантную и интуитивно прозрачную двухэтажную навигационную панель (б, в).

Символы и метафоры

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

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

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

Рис. 50

Тема прямых ли­ний с засечками в двухуров­невой навигации на сайте

www.revo.com

212

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