Если тебе дадут линованную бумагу — пиши поперек

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

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

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

Ступеньки ригидности

Интересно проследить, как меняется отношение страницы к описанным ограничениям формата в зависимости от назначения сайта и стиля дизайна. Для страниц, оформленных в строгом академическом стиле (с использованием только тегов HTML 2.0, стр. 150), размеры окна вообще не имеют значения, так как HTML 2.0 просто не позволяет задавать размеры или расположение чего бы то ни было в пикселах (в нем нет даже атрибутов height и width для указания размеров изображений). В отсутствие таблиц и других приемов позиционирования материала колонка текста верстается враспор от левого поля до правого (и, естественно, переверстывается при изменении ширины окна). Иными словами, академический HTML легко приспосабливается к любому разрешению экрана — причем без малейших усилий со стороны автора. Следующая ступень после академического стиля — так называемый «резиновый» дизайн, при котором для разме­щения текста и изображений уже используются таблицы (стр. 234), но ширина этих таблиц задана не в пикселах, а в процентах от ширины окна. Это позволяет оставлять вокруг текста поля, значительно облегчающие чтение, вер­стать текст в несколько колонок и достаточно свободно размещать графику. Главное же достоинство «резиновой» страницы — то, что она позволяет столбцам текста свободно

растягиваться и сжиматься, тем самым и приспосабливаясь к минимальным (и даже меньше минимальных) размерам экрана, и эффективно используя пространство на экранах шире среднего. Это свойство «резиновых» страниц особенно ценно для контент-сайтов (пример — первая страница сайта www.webreference.com ).

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

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

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

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

Заглавия и заголовки

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

Конечно, не так уж редко на веб-страницах встречаются и более экзотические объекты — поля бланков, Java-апплеты. Однако именно текст и графика остаются и всегда будут оставаться основными носителями информации в Ин­тернете. Все, что нужно знать веб-дизайнеру об оформлении текстовых блоков, собрано в одном из разделов этой главы (стр. 215). Создание веб-графики — тема более обшир­ная, и ей целиком посвящена гл. IV (стр. 243). Здесь же мне хотелось бы отметить, что противопоставление текста и графики, как частное проявление дуализма содержания и представления в дизайне, особенно наглядно проявляется именно в дизайне заголовков.

Заглавие

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

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

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

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

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

Заголовки: логика

После стоящего несколько особняком заглавия (title) логично перейти к иерархии заголовков (headings) на самой странице. Вообще говоря, у большинства страниц никакой «иерархии» нет — после основного заголовка вверху страницы редко когда можно встретить заголовки второго и тем более третьего уровня. Отчасти поэтому стан­дартные в HTML заголовки шести уровней (теги HI—H6) редко используются за пределами академического стиля. (Верно и обратное: если вам требуется больше двух-трех уровней заголовков, это следует считать аргументом в поль­зу перехода к академическому стилю.) Однако в первую очередь непопулярность тегов Н* объясняется параметрами их оформления, принятыми по умолчанию в визуальных броузерах, — параметрами, чаще всего неприемлемыми для страниц с минимальными художественными запроса­ми (к примеру, HI оформляется полужирным начертанием повышенного кегля).

В то же время нужно отдавать себе отчет в том, что теги Н*, как и большинство тегов академического стиля, являются в гораздо большей степени средствами логической, нежели визуальной, разметки (стр. 22). Поэтому пользоваться ими (даже в том случае, когда на странице всего один заголовок) следует в первую очередь ради улучшения переносимости вашего документа, для приведения его разметки в соответ­ствие с его логической структурой, а не для сопутствующих визуальных эффектов (вроде изменения шрифта). Стандарт HTML не возбраняет помещать между <Н1> и </Н1> не строки текста, а графические изображения заголовков со всеми требуемыми причудами оформления, alt-тексты которых (стр. 35) будут играть роль заголовков в неграфических броузерах. Такое решение — казалось бы, удовлетворительное и с логической, и с визуальной точек зрения — не всегда выполнимо из-за нежелательных вертикальных отступов, которые оба графических броузера оставляют вокруг элементов Н* (из чего бы они ни состоя­ли — из текста или изображений). Единственный законный способ изменять параметры оформления стандартных тегов, включая теги заголовков, — использование CSS; к сожале­нию, из-за несовершенств реализации подавить эти отступы с помощью CSS удается только в одном из броузеров (в MSIE).

Надо сказать, что стандартные заголовки HTML не удо­влетворяют многим требованиям, важным именно для ака­демического типа документов, — так, броузер не может самостоятельно нумеровать их, из них невозможно собрать автоматически обновляемое оглавление документа. Все эти возможности доступны для ХМL-документов со стилевыми спецификациями на XSL (стр. 53).

Заголовки: дизайн

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

в этой области. Заголовки могут также заимствовать кое-какие приемы и подходы дизайна логотипов (стр. 264).

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

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

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

В примере 4 основное содержимое страницы состоит из нескольких заголовков, «сшитых» в единое целое актив­ными вертикальными и горизонтальными линиями, стро­гой системой выравниваний, общим шрифтом и ярким фотографическим фоном (он же визуал), чья второплановость подчеркнута размывкой. Здесь же, кстати, мы видим редкий пример гармонизации вычурного каллиграфически-рукописного шрифта (надпись Tori Amos) с достаточно

своеобразным, хотя и близким к рубленому шрифтом остальных заголовков.

Разделители

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

Очень часто вместо заголовков следующих уровней на веб-страницах используются нетекстовые разделители. Академи­ческий HTML предлагает для этой цели тег HR, призванный отделять друг от друга разнородные фрагменты текста. Пы­таясь придать визуальную привлекательность этому, вообще говоря, чисто логическому средству разметки, авторы пер­вого графического броузера Netscape поступили так, как поступил бы на их месте любой дизайнер-любитель: сделали соответствующие этому тегу горизонтальные линейки псев­дотрехмерными — не то выпуклыми, не то вдавленными в плоскость страницы. Создатели MSIE заимствовали этот прием оформления, хотя и в менее «агрессивном» варианте (рис. 48).

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

Рис. 48

Псевдотрехмер­ность под микроскопом: концы линеек HR в NC (слева) и MSIE (справа)

Поэтому, сказав «а», создатели броузера Netscape вынуждены были сказать и «б» — им пришлось сразу же добавить к тегу HR атрибут noshade, дающий простую плоскую ли­нейку без каких бы то ни было украшений (если не считать закругленных концов). Тем не менее даже и плоская, подо­бранная по толщине (атрибут size) и длине (атрибут width) линейка вряд ли станет украшением вашей страницы — и не только с эстетической, но и с логической точки зрения. Очень часто желание поставить <HR> есть верный признак того, что либо визуальная, либо содержательная структура страницы в этом месте недостаточно продумана.

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

Баннеры

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

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

С другой стороны, на контент-сайтах (да и не только на них) реклама есть воистину «осознанная необходимость», единственный способ окупить затраты на создание и под­держку сайта. Разумеется, пользователи давно уже привыкли

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

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

Навигация

Если нелинейность содержимого — главное отличие веб-сайта от более традиционных видов публика­ций, то навигационная система есть необходимое каждому сайту средство ориентировки и перемещения в этом не­линейном пространстве. Каждая страница сайта должна, помимо всех прочих предъявляемых к ней требований, отвечать посетителю на два неизбежно возникающих у не­го вопроса — «где я нахожусь?» и «куда мне отсюда идти?»

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

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

Общий обзор

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

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

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

в последнее время, — с помощью динамического HTML (www.ibm.com ). На особо разветвленных древовидных сайтах (www.yahoo.com ) каждая страница ссылается на всех своих «родителей» — членов цепочки, ведущей от корня сайта к данной странице.

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

Семантика

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

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

Привычнее всего выглядит вертикальное (как правило, слева от основного содержимого) расположение панели ма­териалов и горизонтальное (вверху или внизу страницы) — панели инструментов. Иногда на панель инструментов доба­вляют ссылку, ведущую с подчиненных страниц на первую страницу сайта (по-английски она называется «Ноте», по-русски — «В начало» или «К началу»), и кнопку со ссылкой на почтовый адрес автора или владельца сайта («Feedback», «Contact Us» или «Пишите нам»). Если эти две кнопки при­сутствуют, то они обычно занимают в панели крайне левое и крайне правое положение соответственно. Чаще, впрочем, почтовая ссылка включается не в навигационную панель, а в состав блока подписи внизу страницы; для ссылки же на первую страницу сайта нередко «по совместительству» используется изображение логотипа сайта или фирмы, ко­торое большинство сайтов размещают в одном и том же положении на каждой странице.

Дизайн

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

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

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

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

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

Рис. 49

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 50

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

www.revo.com

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

Особые слу<