Контрольные вопросы
Стр. 55 – От первого абзаца можно почитать.
«Цвет — один из самых эффективных способов передачи идентичности бренда».
Если тема страницы, ее концепция опираются на эмоциональное впечатление, то главным средством оформления будет являться именно цвет, а формообразование элементов оформления будет подчинено этому эмоциональному состоянию. В таком случае композиционный план опирается на систему цветовых пятен, которые и определят соотношение линий и форм в эргономике страницы. Ярким примером применения этого подхода являются web-проекты, выполненные в стиле «мондриан», в котором цветовые пятна и отношения между ними на плоскости определяют не только композицию, но и формы взаимодействия с пользователем.
Хроматическая сенситивность, или эффект цветовой тени. Следует иметь в виду, что при тесном соседстве на странице некоторые цвета имеют склонность принимать оттенок соседнего цвета, затрудняя восприятие своего содержимого. Способность менять оттенок под влиянием соседа — хроматическая сенситивность — не одинакова для всех цветов (наивысшая степень — у ахроматического серого). Важно, что сенситивность одного цвета способна изменяться в зависимости от соотношения площадей соседних цветовых пятен: при уменьшении зеленого пятна на рис. 41 наступает момент, когда зеленый квадрат приобретает оранжевый оттенок. Это создает трудности при восприятии контента с желтым или красным оттенком.
Эффект иррадиации под влиянием цвета. В некоторых случаях соседство цветов способно увеличивать (или, наоборот, снижать) воздействие форм друг на друга, что прекрасно иллюстрирует пример на рис. 43. Центральный круг на левой фотографии воспринимается как больший по размеру, чем аналогичный круг на правом. Однако реально оба круга равного диаметра. Данный эффект усиливается вследствие контраста высокой интенсивности, который, таким образом, может считаться фактором иррадиации.
Перцептивные эффекты цветовосприятия выступают своеобразной психологической базой для применения цветокомпозиции в эргономическом проектировании. При этом в качестве основного инструмента при выборе цветовой палитры медиа-проекта выступает цветовой двенадцатичастный круг И. Гете, прекрасно известный графическим дизайнерам и художникам (рис. 44).
В дизайн-проектировании главной целью целью подбора сочетаний является цветовая гармония — такой вариант соседства цветовых пятен, при котором возникают вполне определенные психологические переживания эстетической гармонии или дисгармонии. В эргономическом проектировании эстетическая гармония не приоритетна, гораздо важнее прагматические функции цвета — его способность влиять на представление контента, облегчать ориентацию на странице и физиологически освежать восприятие.
Стереохроматизм: граница цветовых пятен в зоне соприкосновения. Вторым важным перцептивным эффектом является способность некоторых цветов создавать для глаза тональную или цветовую границу, не существующую реально на изображении (рис. 42). Подобный эффект называют стереохроматизмом — глаз отказывается воспринимать непосредственный и резкий переход цветовых полей друг в друга и стремится создать между ними зону ахроматического. Цветовые поля при этом могут восприниматься в искусственной перспективе — как будто одно пятно лежит на фоне другого. Такая перспектива называется индуцированной. В наибольшей степени это характерно для цветов дополнительной контрастной гаммы.
Перцептивные эффекты цветовосприятия выступают своеобразной психологической базой для применения цветокомпозиции в эргономическом проектировании. При этом в качестве основного инструмента при выборе цветовой палитры медиа-проекта выступает цветовой двенадцатичастный круг И. Гете, прекрасно известный графическим дизайнерам и художникам (рис. 44).
В дизайн-проектировании главной целью целью подбора сочетаний является цветовая гармония — такой вариант соседства цветовых пятен, при котором возникают вполне определенные психологические переживания эстетической гармонии или дисгармонии. В эргономическом проектировании эстетическая гармония не приоритетна, гораздо важнее прагматические функции цвета — его способность влиять на представление контента, облегчать ориентацию на странице и физиологически освежать восприятие.
Именно поэтому особым статусом в юзабилити-проектировании обладает контраст как принцип создания цветовых сочетаний на страницах сетевого издания. По мнению экспертов в области веб-эргономики, «противоположные и взаимодополняющие принципы единства и контраста» «особенно важны для подбора цветов» [Кирсанов, 2008, с. 89]. В полном соответствии с целью эргономики контраст «обеспечивает полноту самыми экономными средствами. Именно это мы имеем в виду, когда говорим, что цвета контрастирующей пары тонов являются дополнительными, или дополняющими друг друга: один требует другого» [Арнхейм, 1974, с. 91].
В веб-эргономике выделяют два основных типа контрастных сочетаний — контраст цветовой и контраст светотени.
Контрольные вопросы
В практике дизайн-проектирования сложилась определенная типология контрастных проявлений в композиции страницы, основанная на различных экспрессивных, ассоциативных и семантических особенностях отдельных цветовых сочетаний.
Контраст высокой интенсивности, сопоставление чистых цветов (?), контраст низкой интенсивности, контраст светотени.
Основу контраста высокой интенсивности составляет так называемая гамма чистых цветов, благодаря которой колористические элементы, соседствующие на странице, смотрятся наиболее наглядно и эффектно. Им противостоит контраст низкой интенсивности, при котором соседство элементов не столь очевидно. Особенно это заметно в случае цветового акцентирования (рис. 48).
Гамма чистых цветов наглядно представлена на цветовом круге — она образует генетическое ядро, фундамент всей цветовой системы.
В базовой палитре цвета не содержат других оттенков и уровень цветообразующего признака в них максимален. Можно сказать, что перед нами чистые цвета первого порядка. При этом для эффективной цветовой композиции важно и количественное соотношение базовой цветовой палитры «желтый — красный — синий» — рекомендуемое соотношение составляет 3 : 6 : 8 соответственно.
Сопоставление чистых цветов создает ощущение особой пестроты жизни, порожденной стихийной силой, ощущение агрессивной яркости и свежести, чем объясняется активное использование такого контраста в орнаментальном фольклорном и средневековом изобразительном искусстве. В современном журнальном дизайне сохраняется стремление воздействовать на визуальное восприятие базовой гаммой подобно тому, как это делалось в средневековой книжной миниатюре (рис. 51).
Особое значение для юзабилити цветовой композиции имеет использование контраста светотени. Принципы составления сочетаний, представленные в данном случае, регулируют применение эффектов освещения на цветовом поле, способное повлиять на восприятие цветовых элементов.
В первую очередь это касается эффектов ахроматического затенения. В эту группу входят методы снижения слишком ярких цветовых акцентов, способных затруднить чтение или вызвать зрительную усталость реципиента.
Как правило, данное решение основано на сочетании различных цветов при помощи цвета-медиатора. При использовании цветов, сочетание которых выглядит напряженным (в случае высокой интенсивности обоих), в качестве разделителя к ним добавляют элемент ахроматического цвета (белый, черный, серый). Использование подобного решения позволяет сделать цветовое сочетание более спокойным и ровным (рис. 56).
Кроме того, существует возможность увеличения контрастности путем введения просветов между цветовыми зонами макета — в этом случае дополнительное осветление фона достигается появившимся «воздухом» между цветами переднего плана. Такое «разделение белым» известно как сепарация (рис. 63).
В первую очередь это касается эффектов ахроматического затенения. В эту группу входят методы снижения слишком ярких цветовых акцентов, способных затруднить чтение или вызвать зрительную усталость реципиента.
Как правило, данное решение основано на сочетании различных цветов при помощи цвета-медиатора. При использовании цветов, сочетание которых выглядит напряженным (в случае высокой интенсивности обоих), в качестве разделителя к ним добавляют элемент ахроматического цвета (белый, черный, серый). Использование подобного решения позволяет сделать цветовое сочетание более спокойным и ровным (рис. 56).
Примеры на рис. 57 демонстрируют, как с помощью ахроматического серого возможно смягчить резкость красного на белом фоне. Именно этот эффект часто используют дизайнеры “Time” для оформления обложек — очень часто в очередном номере журнала предпринимается попытка смягчить агрессию «фирменной» красной рамки серыми пятнами в поле контента.
Контрольные вопросы
Цветовой контраст в эргономическом проектировании выступает и одним из наиболее эффективных средств в управлении вниманием.
В этой связи выделяют следующие функции цветового контраста:
акцидентальная — привлечение внимания к важной информации;
аффордативная — указание на интерактивное назначение элемента;
селективная — использование контраста в целях цветового зонирования, отделяющего одни элементы от других;
аффективная — активизация с помощью контраста эмоций, способных сделать восприятие более эффективным.
В рамках акцидентальной функции яркие контрастные элементы стремятся обратить внимание на свое содержание и функциональное значение. Важно сохранять общий умеренный фон цветовой композиции, при котором контрастный элемент приобретает значение своеобразного превью к остальному контенту (рис. 65).
Аффордативная функция контраста помогает маркировать элементы, обеспечивающие интерактивную коммуникацию на медиа-ресурсе. Аффорданс — это элемент, в самом визуальном облике которого заложено указание о способе взаимодействия с ним. К таковым относятся кнопки, диалоговые формы для заполнения данных, поисковые инструменты и навигация. Очевидно, что яркий контраст небольшого по площади элемента привлекает к нему внимание и заявляет его активацию как призыв к действию. На рис. 66 единичные цветовые пятна (зеленые кнопки) на контрастном фоне выделяются особенно ярко и призывают их использовать.
Способность цветового контраста разделять площадь страницы на цветовые области определяет его селективные свойства при юзабилити-проектировании. На рис. 67 сверху показано контрастное расположение навигации на странице интернет-издания, снизу — контрастная врезка с контактной информацией.
(?) Завершая обзор перцептивных эффектов и эргономических принципов формирования цветовой палитры сетевого медиаресурса, следует отметить следующее. Безусловно, каждый web-дизайнер имеет и собственные цветовые предпочтения, обусловленные субъективными ассоциациями и эмоциональным состоянием. Но, как показывает практика, в большинстве случаев эффективность работы с медиаресурсом во многом зависит от рассмотренных закономерностей, непосредственно оказывающих влияние на внимание и работоспособность пользователя.
Особое значение контрастное зонирование может исполнять при разделении контента на определенные группы, обусловленном форматом и содержательной моделью издания. На рис. 68 показан один из вариантов использования контраста при рубрикации контента интернет-СМИ: рубрики «Действующие лица» и «Мнения» в правом поле страницы отделены от блока с актуальными новостями дня.