Переходим к новой теме связанной с дизайном веб-страниц. Сегодня публикуется
первая часть большой статьи связанной с тем, как отделять один элемент от другого
и привлекать внимание к нужным объектам. Пока на сайте этой статьи нет, когда
допишу, тогда и выложу.
Гештальт-психология и акцентирование элементов веб-страниц
На веб-странице достаточно часто возникает задача визуально отделить одну информацию
от другой, например, выделить текстовый блок и акцентировать на нем внимание.
Подобный вопрос возникал еще до эпохи Интернета и нашел свое отражение в трудах
по гештальт-психологии. Применяя подобный опыт в дизайне веб-страниц, можно
быть уверенным, что мы действуем с учетом человеческого восприятия, что подтверждается
трудами классиков, опытом и экспериментами.
Теоретические основы
Макс Вертгеймер, а вслед за ним Вольфганг Кёлер описали следующие наблюдения,
касающиеся восприятия человеком групп точек и линий. Если нарисовать ряд точек
и установить между ними поочередно разное расстояние (рис. 1), тогда они
будут восприниматься как группы по две точки.
Рис. 1. Группирование точек
В группу входят точки, между которыми меньшее расстояние, соответственно одна
группа отделяется от другой большей дистанцией. Чтобы результат был выразительнее,
заменим точки вертикальными линиями, к тому же линии образуют более устойчивые
группы, чем точки (рис. 2).
Рис. 2. Группирование линий с помощью расстояния между ними
Глядя на рисунок, легко представить себе группу из двух линий, расстояние между
которыми минимально. Если же попытаться мысленно сгруппировать линии, удаленные
друг от друга на большее расстояние, то для этого придется приложить определенные
усилия. Таким образом, можно сформулировать утверждение, что группа формируется
за счет пустого пространства, которое разделяет группы между собой. Подобный
эффект более выразителен для линий, поскольку они служат определенной границей,
четко выделяющую внутреннюю область группы.
Согласно В. Кёлеру группирование линий получается не только за счет изменения
одного расстояния между линиями, но и с помощью других факторов, которые подробнее
описаны далее.
Форма и размер
Оставим расстояние между линиями одинаковым и начнем менять форму линий. Очевидно,
что чем сильнее контраст между линиями, входящими в разные группы, тем выразительнее
будет разница между группами. Так, на рис. 3 приведено изменение толщины
линий.
Рис. 3. Группирование за счет изменения толщины линий
Понятно, что толстые линии образуют одно сочетание, а тонкие линии —
другое. Тем не менее, контраст не столь явный и чтобы его усилить, можно использовать
и другие приемы, например, изменить форму линии, ее высоту и стиль. На рис. 4
показано, что модификация вида линии приводит к повышению контраста между линиями,
что в свою очередь усиливает разницу между двумя группами линий.
Рис. 4. Группирование за счет изменения формы линии
Цвет
Применение цвета для выделения особенно актуально в тех случаях, когда другие
виды акцентирования использовать нецелесообразно. К тому же добавление цвета
расширяет возможности по оформлению элементов. На рис. 5 показаны два типа
линий — черная и красная.
Рис. 5. Использование цвета
Линии одного цвета относятся к одной группе, причем разница между ними будет
тем заметнее, чем контрастнее цвета применяются.
Фон
Добавляя цветной прямоугольник под линиями, получаем четкую группу, которая
ограничена фоновой областью (рис. 6).
Рис. 6. Цвет фона для выделения группы
На рис. 6 наблюдается пять различных групп, часть из них образуется за
счет фоновой области под линиями, а часть расположена между ними.
В следующий раз речь пойдет о том, какие существуют способы отделять один блок
на веб-странице от другого.