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

Пере­ходя от общих вопросов устройства сайта и формата веб-страницы к отдельным элементам дизайна, мы должны прежде всего разбить эти элементы на два примерно равных по важности класса: текстовые блоки и графические вставки (этим словосочетанием я попытался перевести английское 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

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

Не нашли, что искали? Воспользуйтесь поиском: