gifts2017

Из архивов Web-проектов: Основы теории цвета

Опубликовал Евгений Пономаренко (Evgen.Ponomarenko) в раздел Программирование - Работа с интерфейсом

Казалось бы, все сделано по уму: и ТЗ адекватное, и программа написана в соответствии. А глаз не радует... Для тех кому знакома ситуация, кому важна гармония во всем, посвящается:

 

 

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

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

Программу для визуального представления теории можно взять здесь

1. Микширование спектрального круга:

Красно-желто-голубое(RYB) микширование. 

  Традиционно, художники использовали спектральный круг, состоящий из основных цветов: красных, желтых, и синий. В настоящее время, красно-желто-голубая спектральный круг используется для визуального представления цветовой теории. Этот спектральный круг был изобретен Johannes Itten - швейцарским цветовым и художественным теоретиком. Вначале его использовали для смешивания пигментов. Однако, вскоре художники начали использовать эту палитру для того, чтобы создавать визуально гармоничные цветовые комбинации.

Красно-зелено-голубое(RGB) микширование.

  В противоположность классической версии спектрального круга, видимый спектральный круг основан на других основных цветах: красном, зеленом и синем (red-green-blue RGB). RGB палитра используются для мониторов, фото-видео камер, сканеров, и т.д. Из-за того факта, что человеческий глаз содержит RGB рецепторы, многие художники полагают, что для создания гармоничных сочетаний цвета следует использовать RGB палитру, нежели RYB. CMY (синий-сиреневый-желтый) вторичная палитра, основана на вычитании цветов и является стандартом для печати.

2. Классические цветовые схемы:

Монохроматическая цветовая схема

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

Комплементарная цветая схема 

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

Триадная цветовая схема

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

Смежная цветовая схема

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

Смежно-комплементарная цветовая схема

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

Тетриадная (дву-комплементарная) цветовая схема

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

3. Цветовосприятие:

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

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

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

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

Зеленый (Green)  
Зеленый - цвет природы. Он символизирует рост, гармонию, свежесть и изобилие. Зеленый имеет сильное эмоциональное соответствие безопасности. Темный зеленый обычно ассоциируется с деньгами. 
Зеленый цвет здоровья и спокойствия. Он лучше других успокаивает человеческий глаз, улучшает остроту зрения. Зеленый предполагает стабильность и выносливость. Иногда зеленый обозначает недостаток опыта. Например: "Молодо-зелено". В геральдике зеленый указывает на рост и надежду. Зеленый, в противоположность красному, означает безопасность; это - цвет свободного хода в дорожном движении. 
Используйте зеленый, чтобы указать безопасность когда рекламируете лекарства и медицинские препараты. Зеленый тесно связан с природой, используйте его для продуктов природы. Бледно-зеленый обычно связывается с деньгами, финансовым миром, банковским делом и Уолл Стритом. 

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

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

 4. Единство корпоративного стиля:

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

 

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

 

Всем, кому интресны простые и понятные определения рекомендую:

Архивы одного проекта. 1-сезон:

1-я серия: «Начало»

       эпизод 1-й: Бизнес процессы
       эпизод 2-й: Определение сделки
       эпизод 3-й: Этапы сделки
       эпизод 4-й: Классификация сделок
       эпизод 5-й: Ресурсы

2-я серия: «Три принципа оптимизации бизнес-процессов»

       эпизод 1-й: Первый принцип оптимизации бизнес-процессов
       эпизод 2-й: Типичные ошибки
       эпизод 3-й: Второй принцип оптимизации бизнес-процессов
       эпизод 4-й: Типичные ошибки
       эпизод 5-й: Третий принцип оптимизации бизнес-процессов
       эпизод 6-й: Типичные ошибки

3-я серия: «Иерархия целей компании» 

       эпизод 1-й: Иерархия целей компании
       эпизод 2-й: Ключевые цели по подсистемам (схема)
       эпизод 3-й: Закон синергии

См. также

Подписаться Добавить вознаграждение

Комментарии

1. Андрей Акулов (DrAku1a) 18.09.13 02:19
Хорошая и познавательная статья. Хотя и только косвенно связанная с 1С.
2. Евгений Пономаренко (Evgen.Ponomarenko) 18.09.13 10:14
(1) DrAku1a,
Вы правы, к 1С статья имеет косвенное отношение, хотя начинающим программистам будет очень полезна, к примеру интерфейс от первокурсника почти всегда содержит бирюзовые тона ;)))

Статья больше отношения имеет к инфорстарту.
К примеру мне нравится следующие кнопки:
1. Статьи и бесплатные файлы (free)
2. Разработки за стартмани ($m)
3. Программы с техподдержкой (руб)
Они соответствуют принципам цветовой гармонии.

И совсем не нравится, даже режет глаз, блок "Выбор экспертов".
Слишком большой контраст по яркости с окружением и внутренним содержимым, слишком большая разница по альфа каналу.
3. Андрей Акулов (DrAku1a) 18.09.13 10:26
Мне вообще новый дизайн не нравится. Старый http://old.infostart.ru/ лучше.
anchovy; Aleksey.Bochkov; sergnik; +3 Ответить 1
4. Евгений Пономаренко (Evgen.Ponomarenko) 18.09.13 10:49
(3) DrAku1a,
Хех... согласен. Его нужно было чуть-чуть подкрутить... а его грохнули! обухом по голове...

Имеем то, что имеем, я стараюсь свои замечания выкладывать здесь:http://forum.infostart.ru/forum17/topic94345/
5. юрий гулидов (gull22) 18.09.13 11:04
Надеюсь будет полезна всем программистам, а то порой такую гамму цветов в отчетах и обработках делают, что смотреть не хочется.
Evgen.Ponomarenko; +1 Ответить 2
6. zaoallat zaoallat (zaoallat) 19.09.13 08:19
Статья что надо. Я за стандартную цветовую схему в отчетах. Лишний раз пользователи не задают вопросы.
7. Евгений Пономаренко (Evgen.Ponomarenko) 19.09.13 22:42
(6) zaoallat,
Я обычно использую 3 стандартных цветовых схемы:
1 Обычная
2 Спокойная - для участков, где у пользователей наблюдается повышенная нервозность
3 Беспокойная(контрастная) - для отдела продаж и прочих доходных участков ;)
8. kiruha Дронов (kiruha) 23.09.13 11:31
(5) gull22, - думал когда увидел статью - что речь будет именно об этом,
но именно применение цветовых палитр в 1С в отчетах и формах - не раскрыто (

Тут даже на мисте был спор в связи 8.3 - часть народа утверждала что белые поля ввода на белом фоне, да еще белые кнопки (новый дизайн) плохо, часть - хорошо. Интересно как с точки зрения теории цвета ?
9. Евгений Пономаренко (Evgen.Ponomarenko) 24.09.13 14:08
(8) kiruha,
Дайте ссылку на ветку Миста... посмотреть о чем речь.

Статья действительно носит общий характер, таким образом область её применения гораздо шире, чем 1С приложения. Принципы изложенные в статье применимы даже во время ремонта в квартире.
10. Павел Парамонов (anchovy) 25.11.13 14:20
(5) gull22, Это действительно так. Мало кто утруждает себя шлифовкой интерфейса. Но как говорили нам на курсах: основную работы вы производите в модулях, но продаете вы интерфейс. И это действительно так, никому не нужен гениальный алгоритм, если его вызов сопровождается непонятными или неочевидными манипуляциями.
11. Елена Ситникова (lesenoklenok) 14.02.14 11:12
Спасибо за интересную статью. Когда то занималась разработкой сайтов. Там эта тема актуальна. В 1с такой необходимости нет.
12. Евгений Пономаренко (Evgen.Ponomarenko) 14.02.14 12:04
(11) lesenoklenok,
))) я бы с вами согласился, если бы только, что не приминал решение о цвете линии подчеркивания. Выбирал, какую взять чисто серую или с оттенком бежевого. Выбрал бежевый и дело не в статье, а в ощущениях гармонии. А она как ни странно, универсальна ))) она либо есть, либо её нет. Если размышлять дальше, то цветовая гармония - есть отражения качества продукта. Как говорится "Если принцип не всеобщ, то и искусство не велико". К примеру на востоке искусство чайной церемонии ценится выше, чем боевые искусства.
Для написания сообщения необходимо авторизоваться
Прикрепить файл
Дополнительные параметры ответа