Веб-дизайн - Дмитрий Кирсанов

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

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

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

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

ДИНАМИЧЕСКАЯ НАВИГАЦИЯ

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

Рис. 51 Выпадающие меню на первой странице сайта www.ibm.com реализованы с помощью динамического HTML

Кроме классической навигационной панели с графическими кнопками, иногда применяется простейшая разновидность HTML-бланка (стр. 30), состоящая из выпадающего списка с перечислением ссылок и расположенной рядом кнопкой «Go» (или «Перейти»). Такой прием хорош своей компактностью: в сложенном виде список занимает гораздо меньше места, чем панель с кнопками. Однако для основных, критических по важности или же неоднородных по охвату ссылок сайта пользоваться им не стоит. Разумнее всего вынеси в такого рода меню достаточно длинный и притом часта меняющийся список одноуровневых и близких по тематике разделов (например, список «зеркал» или версий сайта на разных языках). Пара выпадающих списков в комбинации с JavaScript–сценарием позволяет компактно представить двухуровневую иерархию, сделав так, чтобы набор пунктов во втором меню зависел от того, какой пункт выбрав в первом (пример см. наwww.webreference.com).

Динамический HTML делает возможным еще более эффективное представление двухуровневых иерархий — раскрываемые оглавления (expandable outlines). Сразу после загрузки страницы такое оглавление представляет собой список разделов верхнего уровня, каждый пункт в котором в ответ на щелчок мыши раскрывается, выводя список относящим к нему подразделов и сдвигая вниз расположенные них разделы. Раскрытие другого раздела, как правило, возвращает в исходное состояние предыдущий; иногда предусматривают также ссылку, позволяющую раскрыть одновременно все разделы. Этот прием, обеспечивающий компактное и обозримое представление большого количества информации на ограниченной площади страницы, незаменим для контент–сайтов. (В броузерах, не поддерживающих динамический HTML, все списки подразделов будут видны сразу же в раскрытом виде.)

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

Блоки текста

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

Однако вполне понятна и мотивация разработчиков броузеров, совсем не случайно обеспечивших такие особые условия именно для текста. Текст остается и всегда будет оставаться главным носителем информации в Интернете; и HTML, и XML — в первую очередь языки разметки текста, и только текстовая часть документов может быть без потерь и с гарантией адекватности перенесена в другие форматы и на невизуальные устройства вывода. А раз текстовое содержимое веб–страницы — основное, тогда как графика и программирование играют (с точки зрения обмена информацией) лишь вспомогательную роль, понятно, то именно для текста нужно в первую очередь обеспечить универсальную доступность.

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

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