Цвет

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

Цвет часто рассматриваются с точки зрения цветового пространства, где RGB (красный, зеленый, синий), HSL (оттенок, насыщенность, яркость) и HSV (оттенок, насыщенность, значение) являются наиболее часто используемыми цветовыми пространствами.

Цветовое пространство RGB можно визуализировать в виде куба.

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

В этом примере добавление красного к темно-голубому цвету делает его светлее, а не более красным. Цветовое пространство RGB не соответствует тому, как люди воспринимают цвет.

Цветовые пространства HSL/HSV состоят из трех компонентов: оттенок, насыщенность и яркость или значение. Эти цветовые пространства часто используются вместо RGB, так как они лучше соответствуют тому, как люди воспринимают цвет.

Цветовое пространство HSL образует двойной конус, который является белым сверху, черным снизу и нейтральным в середине:

• Оттенок: Основной цвет в цветовом круге в диапазоне от 0 до 360 градусов, где 0 и 360 градусов являются красными.

  

  Цветовой круг, где красный — 0 градусов, желтый — 60 градусов, зеленый — 120 градусов, голубой — 180 градусов, синий — 240 градусов, а пурпурный — 300 градусов.

• Насыщенность: Насколько чистый (и скучный) цвет, в диапазоне от 0 до 100, где 100 полностью насыщенный, а 0 — серый.

• Яркость: Насколько светлый цвет, в диапазоне от 0 до 100, где 100 является как можно более светлым (белый, независимо от оттенка и насыщенности), а 0 — как можно более темным (черный).

  

  Цветовое пространство HSL можно визуализировать как двойной конус.

Цветовое пространство HSV аналогично, за исключением того, что его пространство образует один конус:

• Оттенок: Основной цвет в цветовом круге в диапазоне от 0 до 360 градусов, где 0 и 360 градусов являются красными.

• Насыщенность: Насколько чистый (и скучный) цвет, в диапазоне от 0 до 100, где 100 полностью насыщенный, а 0 — серый.

• Значение: Насколько яркий цвет, в диапазоне от 0 до 100, где 100 является максимально ярким (это половина яркости в пространстве HSL), а 0 — максимально темным (черным).

  

  Цветовое пространство HSV можно визуализировать как один конус.

В пространствах HSL и HSV, если насыщенность равно 0, то яркость определяет оттенок серого. В Windows пространства HSL и HSV обычно сопоставляются с масштабом от 0 до 240, чтобы цвета можно было представить 32-разрядным значением.

Примечание: Рекомендации по шрифтам и специальным возможностям представлены в отдельных статьях.

Принципы проектирования

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

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

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

Как используется цвет

Цвет обычно используется в пользовательском интерфейсе для обмена данными:

• Смысл. Значение сообщения можно суммировать с помощью цвета. Например, цвет часто используется для обозначения состояния, где красный — это проблема или ошибка, желтый — предупреждение или предупреждение, а зеленый — хороший.
• Государства. Состояние объекта можно указать цветом. Например, Windows использует цвет для обозначения состояний выбора и наведения указателя мыши. Для ссылок на веб-страницах используется синий цвет для непросмотренных и фиолетовый для посещенных.
• Дифференциации. Люди предполагается, что между элементами одного цвета существует связь, поэтому цветовое кодирование является эффективным способом различения объектов. Например, в элементе панели управления области задач используют зеленый фон, чтобы визуально отделить их от main содержимого. Кроме того, Microsoft Outlook позволяет пользователям назначать сообщениям различные цветные флаги.
• Акцент. Цвет можно использовать для привлечения внимания пользователей. Например, Windows использует синие main инструкции, чтобы выделиться из другого текста.

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

Интерпретация цвета

Интерпретация цвета пользователем часто зависит от культуры. Например, в США свадебный наряд для невесты в значительной степени связан с белым цветом, а черный — с похоронами. Однако давным-давно в Японии цветовая символика была как раз наоборот: белый цвет был преобладающим цветом на похоронах, а черный считался цветом, который приносит удачу на свадьбах.

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

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

Специальные возможности цвета

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

Основные цвета, как это видно при нормальном цветовом зрении.

Основные цвета, как видно с Протанопией (1% мужского населения).

Основные цвета, как видно с Deuteranopia (6% мужского населения).

Основные цвета, как видно с Tritanopia (1% мужского населения).

Дополнительные сведения см. в статье Могут ли пользователи Color-Blind видеть ваш сайт?

Использование цвета для визуального усиления

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

• Текст. Краткий текст обычно является наиболее эффективным основным взаимодействием непосредственно в пользовательском интерфейсе или с помощью подсказки.

В этом примере текст подсказки используется для передачи значения значка.

• Дизайн. Значки легко отличить по макетам, особенно по их контуру.

В этом примере стандартные значки легко различимы по их макетам.

• Расположение. Также можно использовать относительное расположение, но этот подход слабее, чем альтернативные варианты. Чтобы быть эффективным, расположение должно быть стандартным и хорошо известным, как и в случае со светофорами.

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

Проектирование с использованием цвета

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

Использование тем или системных цветов

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

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

Если вы делаете только одно...

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

Правильное использование тем или системных цветов

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

В частности, всегда:

• Выберите цвета в зависимости от их назначения. Не выбирайте цвета в зависимости от их текущего вида, так как этот внешний вид может изменить пользователь или будущие версии Windows.
• Сопоставление цветов переднего плана с соответствующими цветами фона. Цвета переднего плана гарантированно будут разборчивыми только в соответствии с соответствующими цветами фона. Не смешивайте и не сопоставляйте цвета переднего плана с другими цветами фона или, что еще хуже, другими цветами переднего плана.
• Не смешивайте типы цветов. То есть всегда сопоставляйте цвета темы со связанными с ними цветами темы, системные цвета со связанными системными цветами и жесткие цвета с другими жесткими цветами. Например, цвет текста темы не гарантируется, что он будет удобочитаемым на жестком фоне.
• Если необходимо использовать жесткие цвета, обработайте режим высокой контрастности как особый случай.

Если вы делаете только одно...

Всегда выбирайте темы или системные цвета в зависимости от их назначения и сопоставляйте передний план с соответствующим фоном.

Использование других цветов

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

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

• Получите цвет фоновой темы окна RGB.
• Преобразуйте RGB в значение HSL.
• Уменьшите значение яркости (скажем, на 20 процентов).
• Преобразование обратно в значения RGB.

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

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

Тестирование цветов

Чтобы определить, доступно ли использование цвета в вашей программе и не используется ли в качестве основного метода связи, мы рекомендуем использовать Fujitsu ColorDoctor или служебные программы Vischeck для проверка для:

• Общая зависимость от цвета с помощью фильтра серой шкалы.
• Конкретные проблемы с путаницей цвета с помощью фильтров Protanopia, Deuteranopia и Tritanopia.

Чтобы определить, правильно ли запрограммировано использование цвета в вашей программе, протестируйте программу в следующих режимах:

• Темы включены с помощью темы Windows по умолчанию.
• Темы включены с использованием темы, отличной от темы по умолчанию.
• Темы отключены ("Классический стиль Windows" в параметрах темы в элементе Персонализация панель управления).
• Черная тема высокой контрастности (белый текст на черном фоне, известный как водная в Windows 11).
• Белая тема с высокой контрастностью (черный текст на белом фоне, известный как Пустыня на Windows 11).

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

Рекомендации

Общие сведения

• Никогда не используйте цвет в качестве основного метода общения, а как дополнительный метод для визуального усиления смысла.

Использование тем и системных цветов

• По возможности выберите цвета, выбрав соответствующий цвет темы или системный цвет. Таким образом, вы всегда можете учитывать предпочтения пользователей по цвету.
• Выберите цвета темы и системы в зависимости от их назначения. Не выбирайте цвета в зависимости от текущего внешнего вида, так как этот внешний вид может изменить пользователь или будущие версии Windows.
• Сопоставление цветов переднего плана с соответствующими цветами фона. Цвета переднего плана гарантированно будут разборчивыми только в соответствии с соответствующими цветами фона. Не смешивайте и не сопоставляйте цвета переднего плана с другими цветами фона или, что еще хуже, другими цветами переднего плана.
• Не смешивайте типы цветов. То есть всегда сопоставляйте цвета темы со связанными с ними цветами темы, системные цвета со связанными системными цветами и жесткие цвета с другими жесткими цветами. Например, цвет текста темы не гарантируется, что он будет удобочитаемым на жестком фоне.
• Если необходимо использовать цвет, который не является темой или системным цветом:
  • Предпочитать получать цвет от темы или системного цвета, а не жесткого его значения. Используйте процесс, описанный ранее в этой статье, в разделе Использование других цветов.
  • Обработка режима высокой контрастности в качестве особого случая.
• Обработка изменений темы. Изменения темы автоматически обрабатываются окнами с помощью стандартных оконных кадров и общих элементов управления. Окна с настраиваемыми рамками окна, пользовательскими элементами управления или элементами управления рисования владельцем и другими использованием цвета должны обрабатывать изменения темы явным образом.
  • Разработчики: Вы можете реагировать на события изменения темы, обрабатывая сообщение WM_THEMECHANGED.

Значение цвета

• Хотя вы должны использовать темы и системные цвета (или производные цвета) всякий раз, когда это возможно, убедитесь, что любое другое использование цвета совместимо со следующим использованием цвета в Windows.

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

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

Использование цвета с данными

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

• По умолчанию назначьте цвета, которые легко различить. Как правило, цвета легко различить, если они находятся далеко друг от друга в цветовых пространствах HSL/HSV, сохраняя при этом высокую контрастность с фоном:

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

    

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

  • Цвета имеют высокую контрастность, если есть большая разница в их оттенке, насыщенности или яркости.

    

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

  • Использование белого или очень светлого фона упрощает распознавание контрастных цветов переднего плана.

    

    В этом примере белый и светлый цвета фона упрощают распознавание цвета переднего плана.

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

• Разрешить пользователям помечать эти цветовые назначения. Это помогает упростить их идентификацию и поиск.

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

Документация

• Ссылаться на элементы пользовательского интерфейса по именам, а не по цветам. Такие ссылки недоступны, и системные цвета могут измениться. Если имя элемента пользовательского интерфейса недостаточно известно или недостаточно описательно, покажите снимок экрана для уточнения.

Правильно:

Неправильно:

В неправильном примере сообщение ссылается на информационную панель Windows Internet Обозреватель по цвету, а не по имени.