Главная страница
Библиотека (скачать книги)
Скачать софт
Введение в программирование
Стандарты для C++
Уроки по C#
Уроки по Python
HTML
Веб-дизайн
Ассемблер в среде Windows
ActiveX
Javascript
Общее о Линукс
Линукс - подробно
Линукс - новое
Delphi
Паскаль для начинающих
Турбопаскаль
Новости
Партнеры
Наши предложения
Архив новостей





Урок 24. Другие примеры

А теперь перейдем к следующему экспонату. Это сайт мехового салона, расположенный по адресу kat-krasnodar.ru.

Верстка по-настоящему необычна, изобразительный ряд прямо сообщает о том, чему посвящен сайт. Но при первом взгляде на сайт неясно, как же добраться в салон. Адрес дан только внизу страницы, да и то картинкой без альтернативного текста. Телефонов и электронного адреса нет. Большое количество свободного пространства съедено иллюстративно-декоративной графикой, а на текст места почти не осталось.

 

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

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

Как построить навигационное меню, чтобы посетитель смог пользоваться им, почти не думая?

 

Тут работает несколько принципов.

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

Во-вторых, названия пунктов меню должны быть внятными. Это либо действия («Написать письмо», «Сделать заказ», «Прочитать документацию»), либо понятия («Компания» или «О компании», «Новости», «Заказ»): нужно быть последовательным, но не доводить это до крайности («Почитать о компании», «Познакомиться с руководством»). Некоторые разработчики создают нестандартные пункты меню («Наше все» вместо «Портфолио»), что допустимо, только если сайт достаточно популярный.

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

Совсем удалять этот пункт из меню удалять нежелательно, чтобы не менять размер меню. Визуально этот «неактивный пункт меню» должен выделяться: если упор делается на неактивности, то цвета пункта должны быть более бледными, если этот пункт меню по совместительству и заголовок страницы, то он должен быть более активным по цветам и размеру, возможно, полужирный или с рамкой. Иногда дизайнеры используют для неактивных пунктов меню бледный фон.

 

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

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

 

Эти правила созданы в основном для того, чтобы их нарушать. Судите сами: если вы с помощью выпадающего меню глубиной в 17 уровней хотите просто поиграть с посетителем, чтобы он уже не чаял, когда доберется до его конца, неужели вы откажете себе в этом удовольствии и лишите такого удовольствия визитера? А если в одном из разделов меню состоит из 24 пунктов одного уровня просто потому, что каждый пункт меню ведет на страницу с описанием того или иного устройства, которое производит компания, почему нужно урезать это меню и придумывать искусственное деление? Далее, если в основу дизайна сайта положена какая-то идея (концепция), которой подчиняется каждый элемент, разве вы захотите следовать догмам и использовать шаблонные наименования? И если навигационное меню имеет характерный запоминающийся вид, почему бы, если это соответствует задумке, не размещать его в разных частях страниц?

 

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

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

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

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

При взгляде на такие логотипы, несомненно, выглядящие привлекательно, вспоминается фраза: «Все побежали, и я побежал» (фильм «Джентльмены удачи»). Необязательно копировать то, что использует половина Рунета.

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



     
 

Библиотека программиста. 2009.
Администратор: admin@programmer-lib.ru