.

Остерегайтесь линии перегиба

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

Ниже перечислены некоторые методы, которые позволяют “расширить” ваш макет и создать больше свободного пространства для пользователей.

Используйте с умом свободное пространство. Свободное пространство — это области белого цвета или светлых тонов вокруг ваших элементов дизайна. Это, как свежий воздух для человека, который дает ощущение комфорта. Неплохо было бы оставить свободным от графики 25% страницы. Еще один совет: оставьте побольше места вокрут наиболее важных областей страницы, что позволит выделить их визуально. Web-сайт фирмы Apple www.apple, com знаменит широким использованием свободного пространства.

Конечно, те же принципы применимы, когда вы создаете Web-сайт с использованием черного или какого-либо темного фона. Однако чувства, которые связаны с темными цветами, несколько иные. Свободное пространство вокруг объектов на фоне темного цвета вызывает чувство драматизма и волнения. 7.14 приведен пример использования графических объектов на темном фоне.

Создайте несколько “плавающих” элементов. Как правило, макеты Web- страниц имеют геометрически правильные очертания прямоугольной формы. И хотя выравнивание элементов на Web-странице с помощью сетки считается правилом хорошего тона, страница может выглядеть с лишком строгой. если четко придерживаться сетки. Чтобы придать Web-странице визуальную привлекательность, поэкспериментируйте с самым главным элементом на странице. Дайте возможность главному элементу не следовать строго правилам разметки. Это позволит выделить главный элемент. Обратите внимание на дизайн элемента, который расположен одновременно в двух колонках макета (рис. 7.15).

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

Окно Web-страницы действительно очень мало, чтобы отображать большой объем информации. Просмотр Web-страницы на обычном мониторе сродни использованию бинокля, когда вы пытаетесь охватить взглядом захватывающий вид с углом обзора в 180° — в каждый конкретный момент вы можете видеть только одну небольшую часть. Когда вы смотрите через такое маленькое окно, легко потерять контекст и вообще забыть, в каком разделе вы находитесь. Вот почему так важно снабдить пользователей интерфейсом, который бы направлял их действия на вашем сайте в нужное русло.

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

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

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

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

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

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

Шаблоны для графики

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

Для обеспечения однотипности всех графических элементов (от фотографий и маркеров списка до интерактивных кнопок) также необходимо создать набор рабочих шаблонов. Как для макетов, так и для рабочих файлов используйте программы наподобие Fireworks или Photoshop и сохраните файлы в формате, присущем данному программному продукту (PNG и PSD соответственно).

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

Руководство по стилю

Для того чтобы предусмотреть все возможные варианты текста, как графического, так и HTML, необходимо разработать что-то вроде руководства по стилю для команды разработчиков. Это руководство может быть выполнено в виде обычного текстового документа, определяющего гарнитуру, кегль и цвет шрифта, любое специфичное форматирование и примеры. Посмотрите 7.19, где представлен пример руководства по стилю текста.

Используя программу типа Macromedia Dreamweaver, вы можете запросто опре- делить набор стилей текста в CSS-документе. Технология CSS, или каскадные таблицы стилей, является наиболее предпочтительным методом определения стилей текста и цвета для HTML-элементов. Один CSS-документ позволяет определить все стили в пределах сайта. Каждая Web-страница сайта ссылается на этот один CSS-файл, откуда берет информацию по стилям. Например, если вы определили стиль “Headline” в исходном CSS-документе как текст полужирного начертания шрифтом Verdana, 14 кегля и темно-красного цвета, то все текстовые элементы на Web-сайте, которые определены внутри тега “Headline”, будут отображаться именно таким образом. Это очень удобно. Например, вы можете заменить красный цвет на темно-синий в исходном CSS-файле, и все заголовки на Web-сайте автоматически будут обновлены.



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×