.

Рационально используйте графические элементы

В дизайне печатных изданий можно широко использовать графические элементы. Однако в Web-дизайне большие фотографии и сложная графика, которая занимает всю Web- страницу, могут оказаться “неуклюжими слонами” для пользователей с низкой скоростью интернет-соединения. Большие фотографии предполагают большой размер файла, который будет медленно загружаться. При проектировании Web-страниц попытайтесь комбинировать небольшие повторяющиеся графические элементы (фоновые изображения и надписи в ячейках) с маленькими изображениями и графикой, сгенерированной в HTML. В качестве такого примера можно привести цветные надписи и текст 7.6. Такой комбинированный подход делает страницу графически богаче и, кроме того, рациональнее.

Использование системы разметки страницы

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

В отличие от дизайна печатных изданий, где допустима наклонная разметка (рис. 7.8), таблицы, HTML-код и CSS (каскадные таблицы стилей) ограничивают сетку разметки Web-страницы горизонтальными и вертикальными линиями.

Можно избежать горизонтального и вертикального выравнивания, поместив Rash- анимацию на Web-страницу с наклонным макетом. В отличие от Н TML-кода, Rash предоставляет гораздо больше свободы при создании макетов. Rash-анимация просто bi граивается на HTML-страницу, как обычное изображение, и в конечном счете выравнивается системой разметки страницы.

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

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

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

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

Стратегия “крупный, средний, мелкий”

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

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

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



Hosting Ukraine
Hosting Ukraine


Предложить

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

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

×