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

04.08.18

Разработка - Работа с интерфейсом

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

 

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

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

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

 

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С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61698    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54314    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    16623    21    4    

35

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    10563    745    elcoan    45    

106

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

2 стартмани

10.04.2023    9484    150    acces969    31    

115

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    3577    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12010    1    5    

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

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

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

Имеем то, что имеем, я стараюсь свои замечания выкладывать здесь:http://forum.infostart.ru/forum17/topic94345/
5. gull22 95 18.09.13 11:04 Сейчас в теме
Надеюсь будет полезна всем программистам, а то порой такую гамму цветов в отчетах и обработках делают, что смотреть не хочется.
Evgen.Ponomarenko; +1 Ответить
8. kiruha 388 23.09.13 11:31 Сейчас в теме
(5) gull22, - думал когда увидел статью - что речь будет именно об этом,
но именно применение цветовых палитр в 1С в отчетах и формах - не раскрыто (

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

Статья действительно носит общий характер, таким образом область её применения гораздо шире, чем 1С приложения. Принципы изложенные в статье применимы даже во время ремонта в квартире.
10. anchovy 24 25.11.13 14:20 Сейчас в теме
(5) gull22, Это действительно так. Мало кто утруждает себя шлифовкой интерфейса. Но как говорили нам на курсах: основную работы вы производите в модулях, но продаете вы интерфейс. И это действительно так, никому не нужен гениальный алгоритм, если его вызов сопровождается непонятными или неочевидными манипуляциями.
6. zaoallat 19.09.13 08:19 Сейчас в теме
Статья что надо. Я за стандартную цветовую схему в отчетах. Лишний раз пользователи не задают вопросы.
7. Evgen.Ponomarenko 565 19.09.13 22:42 Сейчас в теме
(6) zaoallat,
Я обычно использую 3 стандартных цветовых схемы:
1 Обычная
2 Спокойная - для участков, где у пользователей наблюдается повышенная нервозность
3 Беспокойная(контрастная) - для отдела продаж и прочих доходных участков ;)
11. lesenoklenok 35 14.02.14 11:12 Сейчас в теме
Спасибо за интересную статью. Когда то занималась разработкой сайтов. Там эта тема актуальна. В 1с такой необходимости нет.
12. Evgen.Ponomarenko 565 14.02.14 12:04 Сейчас в теме
(11) lesenoklenok,
))) я бы с вами согласился, если бы только, что не приминал решение о цвете линии подчеркивания. Выбирал, какую взять чисто серую или с оттенком бежевого. Выбрал бежевый и дело не в статье, а в ощущениях гармонии. А она как ни странно, универсальна ))) она либо есть, либо её нет. Если размышлять дальше, то цветовая гармония - есть отражения качества продукта. Как говорится "Если принцип не всеобщ, то и искусство не велико". К примеру на востоке искусство чайной церемонии ценится выше, чем боевые искусства.
Оставьте свое сообщение