Веб-дизайн

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

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

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

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

Рис. 49Приемы выравнивания навигационных кнопок с надписями неодинаковой длины

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

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

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

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