Текст книги "Шаблоны проектирования веб-приложений"

FIXED-WIDTH LAYOUT (МАКЕТ С ФИКСИРОВАННОЙ ШИРИНОЙ)

Проблема

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

Решение

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

Рис. 12.4. Blinksale применяет центрованный макет с фиксированной шириной. Если пользователи просматривают страницу в окне браузера большего размера, фон заполняется градиентом

Зачем

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

Как

Макеты с фиксированной шириной, как правило, проектируются путем указания ширины страницы в пикселах – абсолютной единице измерения для размеров текста. Отрицательной стороной такого подхода является то, что макет не очень хорошо масштабируется у пользователей, которые установили размер текста больше или меньше, чем было предусмотрено проектировщиком. Распространенной альтернативой является использование единицы измерения относительной к размеру текста, т. е. в em или ex. Этот макет, как правило, называют эластичным макетом, поскольку такой макет изменяет свой размер, основываясь на размере текста, установленном пользователями. Тем не менее на проекты с использованием эластичного макета по-прежнему не влияет ширина окна браузера и, таким образом, они являются проектами с фиксированной шириной.

Оптимальное разрешение экрана для определения ширины макета является важным вопросом при проектировании макетов с фиксированной шириной. Чтобы он подошел наибольшему числу пользователей без введения горизонтальной прокрутки, проектируйте разрешение 800x600. Ширина макета, тогда, как правило, устанавливается 750 или 770 пикселов (с 30–50 пикселами, выделенными на хром браузера). В ситуациях, когда проектирование ориентировано на разрешение экрана 1024x768, контейнер с фиксированной шириной устанавливается на 960 или 980 пикселей. Цель, конечно, заключается в предупреждении горизонтальной прокрутки для подавляющего большинства пользователей вебприложения. Исследование Бэкдела (Baekdal, 2006) показывает, что проекты с фиксированной шириной для низкого разрешения (т. е. 800x600) будут поддерживаться у приблизительно 95 % пользователей, в то время как те, что предназначены для более крупных разрешений (например, 1024x768) будут поддерживать только от 80 до 85 % пользователей.

Центрируйте макет на странице

Сократите восприятие пустого пространства для пользователей с более высокими разрешениями экрана путем центрирования макета таким образом, чтобы пустое пространство было распределено поровну в виде правого и левого полей. Например, при просмотре проекта, оптимизированного для разрешения 800x600 (т. е. 770 пикселов шириной) на экране с разрешением 1024x768 отобразится пустое пространство примерно в 100–110 пикселов с каждой стороны отцентрированного макета или 200–220 пикселов справа от макетов, выровненных по левому краю (рис. 12.5).

Рис. 12.5. Target центрирует страницу так, чтобы было равное количество белого пространства по обе стороны от этой страницы

Заливайте фон страницы для более крупных окон браузера

Как и центрирование макета, заливка фона страницы соответствующим цветом, рисунком или фактурой делает пустое пространство более приемлемым и страницы визуально более привлекательным (рис. 12.6).

Рис. 12.6. Backpack (из 37 сигналов) заполняет пустое пространство цветами фона заголовка и основной части

Создавайте страницы для печати

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

Отдельная таблица стилей для печати может быть определена одним из следующих способов:

1. Использование внешнего файла каскадных таблиц стилей (CSS), который может работать как глобальная таблица стилей и может быть связан с любой страницей в приложении:

<link href="print.css" rel="stylesheet" type="text/css"

media="print" />

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

<style type="text/css" media="print">

… впечатайте сюда конкретные селекторы …

</style>

Очевидным недостатком является то, что таблицы стилей для печати должны находиться на каждой странице.

Другие способы указать таблицы стилей для печати включают правила @media и @import. Однако они не всегда поддерживаются браузерами. Например, @media поддерживается с ошибками в IE 6.0 и IE 7.0 (см. www.reference.sitepoint.com/css/at-media).

Связанные шаблоны проектирования

Проектировщики, возможно, захотят учесть прогрессивный макет (PROGRESSIVE LAYOUT), который предлагает компромисс, что хотя он и предоставляет пользователям определенный контроль над проектом, позволяя макету приспособиться к ширине окна браузера, он также позволяет проектировщикам наложить ограничения минимальной и максимальной ширины и по-прежнему обеспечивает значительный контроль над внешним видом страницы.

PROGRESSIVE LAYOUT (ПРОГРЕССИВНЫЙ МАКЕТ)

Проблема

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

Решение

Используйте прогрессивный макет[27]27
  Понятие прогрессивного макета, используемое в данной главе, отличается от того, которое используют разработчики Adobe Flex. Их определение относится к постепенному отображению контента приложения по мере инициализации, не дожидаясь загрузки всего приложения (Szeto, 2004).


[Закрыть] с определенной минимальной и максимальной шириной для сохранения удобочитаемости и эстетической целостности страницы.

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

(а)

(б)

(в)

Рис. 12.7. В данном примере представлен прогрессивный макет с фиксированной шириной при ширине окна браузера менее 540 пикселов (а), с изменяемой шириной при ширине окна браузера между 540 и 1024 пикселами (б), и фиксированной при ширине более 1024 пикселов (в). Максимальная ширина данного проекта устанавливается на 850 пикселов. (Источник: Fulciniti, 2005.)

Зачем

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

Как

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

Реализация такого проекта возможна с помощью установки правил стиля минимальной и максимальной ширины. Однако поскольку версии 6 и 7 браузера Internet Explorer не поддерживают атрибуты минимальной и максимальной ширины, необходимо применить JavaScript для корректной работы проекта на всех браузерах (Fulciniti, 2005; Jesse, 2007a, 2007b).

Связанные шаблоны проектирования

Прогрессивные макеты (PROGRESSIVE LAYOUT) предлагают изящное решение для контраргументов против проектов с использованием макетов с фиксированной или изменяемой шириной. Однако в зависимости от характера контента, представленного в приложении, более подходящими могут оказаться макет с фиксированной шириной (FIXED-WIDTH LAYOUT) или автомасштабируемый макет (LIQUID-WIDTH LAYOUT), которые стоит принимать во внимание в процессе проектирования.

GRID STRUCTURE (СЕТЧАТАЯ СТРУКТУРА)

Проблема

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

Решение

Для размещения и выравнивания элементов веб-страницы используйте систему, основанную на сетке, создавая внешнюю структуру вебстраниц и последовательность и облегчая пользователям понимание организации контента (рис. 12.8).

Рис. 12.8. Использование сетчатой структуры (GRID STRUCTURE) для размещения и выравнивания компонентов страницы на данной странице совершенно очевидно. Это не только делает страницу приятной внешне, но также облегчает распознавание визуальной иерархии компонентов страницы (см. шаблон визуальная иерархия (VISUAL HIERARCHY) ниже)

Зачем

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

Как

При использовании сетки страницы делятся на строки и столбцы, а линии сетки используются для размещения и выравнивания элементов веб-страницы. Сама по себе сетка из строк и столбцов может быть создана с помощью правила третей или с использованием модульных сеток, создающих позиции, кратные трем (рис. 12.9; Baird, 2007; Vinh and Boulton, 2007).

(а)

(б)

Рис. 12.9. Среди распространенных для макета веб-страницы модульных сеток имеются сетки, основанные на правиле третей, разделяющем страницы на строки и столбцы (а) или использующие только модульные сетки или разделы из трех или четырех частей (б)

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

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

Если макету приходится адаптироваться к различному объему контента на страницах, сохраните относительное расположение элементов на странице.

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

Подумайте об использовании «Золотого сечения»

Золотое сечение, также известное как божественная пропорция – это такое отношение между двумя сегментами, когда меньший сегмент (bc) соотносится с большим сегментом (ab) так же, как больший сегмент соотносится с суммой двух сегментов (ac) или bc/ab = ab/bc = 0,618 (рис. 12.10; Lidwell et al., 2003).

Рис. 12.10. Золотое сечение (bc/ab = ab/bc = 0,618)

В целом макеты, выполненные на основе золотого сечения, считаются привлекательными с эстетической точки зрения. Хотя эстетическое преимущество проектов на основе золотого сечения имеет мало доказательств (Markowsky, 1992), многие проектировщики считают их лучшими и проектируют сетки макетов в соответствии с ними. И хотя проекты вовсе не обязательно должны соответствовать золотому сечению, по возможности, его следует учитывать (Lidwell et al., 2003).

Для использования золотого сечения в проекте с двумя колонками с фиксированной шириной в 770 пикселей, например, умножим 770 пикселов х 0,618. В результате получим около 475 пикселей, что может составлять ширину основной колонки контента. Оставшаяся часть в 295 пикселей шириной (например, 770–495) может быть использована для второй колонки, которая может быть использована для навигации или другого второстепенного контента (Baird, 2007; Clarke, 2007).

Подобный подход также может быть применен для более широких макетов (рис. 12.11).

Рис. 12.11. Этот пример страницы корпорации Apple демонстрирует отличный пример золотого сечения. Ширина контента страницы примерно 980 пикселов. Содержимое колонки Select your Macbook Air (Выберите свой Macbook Air) использует ширину 605 пикселов (980x0,618), а под изображение отводится 375 пикселов

Выравнивайте элементы страницы по линиям сетки

Выровняйте элементы страницы по линиям сетки и относительно друг друга по вертикали или по горизонтали.

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

Создание эффективного выравнивания также помогает в процессе разработки, объединяя связанные элементы на странице (см. шаблон VISUAL HIERARCHY ниже). Использование выравнивания последовательно на всех страницах в рамках веб-приложения делает страницу более предсказуемой в рамках проекта.

Создавайте многоразовые шаблоны

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

Связанные шаблоны проектирования

Одна из важных причин использования сетчатой структуры (GRID STRUCTURE) заключается в предоставлении гарантий того, что окончательный проект приведет к логической и предсказуемой организации, улучшит понимание и облегчит пользователям поиск нужной информации (VISUAL HIERARCHY).

VISUAL HIERARCHY (ВИЗУАЛЬНАЯ ИЕРАРХИЯ)

Проблема

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

Решение

Проектируйте страницы так, чтобы визуальная иерархия была очевидна пользователям. То есть используйте визуальные подсказки, с тем чтобы четко указать группировку и порядок элементов на веб-странице и помочь провести пользователей по странице, так чтобы они поняли цель страницы, осмыслили ее организацию и правильно определили степень важности различных ее элементов (рис. 12.12). По мнению Линча и Хортон (Lynch and Horton, 1999): «Графическое проектирование – это управление визуальной информацией с помощью инструментов макета страницы, разметки текста и иллюстраций для того, чтобы провести взгляд читателя по странице».

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

Зачем

Установка визуальной иерархии выполняет несколько важных функций (Wroblewski, 2002):

• создает центр интереса для привлечения внимания пользователей;

• создает ощущение порядка и баланса;

• устанавливает шаблон движения для проведения пользователей по различным элементам страницы.

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

Как

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

Рис. 12.13. На домашней странице Google логотип является наиболее значимым (в верхней части визуальной иерархии), так как он крупнее, жирнее и красочнее; сильно контрастирует с фоном; окружен большим свободным пространством и находится в центре верхней части страницы

Используйте контраст для создания визуальной иерархии

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

Яркость – не единственный способ, как два элемента могут контрастировать друг с другом. Контраст также может быть создан с использованием одного или нескольких из следующих свойств: формат, структура, положение, форма, цвет и ориентация (рис. 12.14).

Рис. 12.14. Основные формы контраста. (Источник: Rutledge, 2007.)

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

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

Рис. 12.15. Blogger устанавливает хорошую визуальную иерархию с помощью большого, красочного, контрастного логотипа, а затем перемещает внимание пользователей к центральной области с ярким призывом к действию Create Your Blog Now (Создайте собственный блог прямо сейчас), а затем к изображениям и т. д.

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

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

Визуально группируйте дополнительную информацию

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

Рис. 12.16. Crazy Egg объединяет различные области на странице с помощью цвета, размера шрифта и пустого пространства не только для того, чтобы установить хорошую визуальную иерархию, но также чтобы придать странице более простой и визуально привлекательный вид

Визуальная иерархия важна как среди групп, так и среди элементов внутри групп. Решив сосредоточить внимание на логической группе, пользователи должны быть способны понять значение элементов в группе. На рисунке 12.16 Crazy Egg выделяет различные элементы внутри группы, чтобы показать степень их важности. Например, в разделе Let’s Get Started (Начнем работу) функция Create a Test (Создать тест) находится в визуальной иерархии выше, чем текст Setting up a test… (Загрузка теста…).

Размещайте постоянные элементы в одних и тех же местах

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

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

Рис. 12.17. Blinksale размещает заголовок, основные средства навигации, вспомогательные средства навигации, контент страницы и связанные действия в одних и тех же местах

Связанные шаблоны проектирования

Выравнивание элементов страницы чрезвычайно важно для создания надлежащей визуальной иерархии (VISUAL HIERARCHY) и для проведения пользователей по элементам страницы. Сетчатая структура (GRID STRUCTURE), как правило, используется для обеспечения надлежащего выравнивания элементов страницы и помощи при беглом просмотре контента. Знание визуальной иерархии страницы также очень важно для семантической разметки (SEMANTIC MARKUP) (см. главу 11). Порядок элементов в разметке страницы должен отражать желаемую визуальную иерархию, чтобы при отображении страницы без таблиц стилей и изображений визуальная иерархия элементов страницы по-прежнему поддерживалась.