Подробное объяснение цветовой системы интеллектуального замысла

Текст / Департамент Али ТаоF(x) Team- Четыре секунды

Человеческий глаз и цветовые модели

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

Конусы и световые волны

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

Все мы знаем, что свет состоит из световых волн с разной длиной волны. Когда свет отражается от объекта, некоторые длины волн поглощаются, а другие отражаются в человеческом глазу. Благодаря трем типам фоторецепторных клеток (S-колбочки, M-колбочки и L-колбочки) в клетках колбочек мы можем получить восприятие цвета. Каждая из этих трех фоторецепторных клеток чувствительна к диапазону длин волн. Например, колбочка M гораздо более чувствительна к зеленому, чем колбочка L, а колбочка S почти нечувствительна к зеленому. Следовательно, наше восприятие цвета состоит в том, что эти колбочки стимулируются световыми волнами и сообщают нашему мозгу, какой это цвет, а не потому, что в физическом мире существует световая волна, называемая «пурпурной» или «бледно-розовой». На самом деле в физическом мире гораздо больше цветов, чем мы, люди, можем воспринимать.

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

Давайте посмотрим, сколько цветов видят животные в природе:

• Монохроматы: все морские млекопитающие, ночные обезьяны и австралийские морские львы имеют монохроматическое зрение, поэтому для китов, смотрящих телевизор, достаточно черно-белого изображения.
• Бихроматы: большинство млекопитающих (кроме человека) имеют бихроматическое зрение, поэтому для кошек и собак достаточно двухцветных телевизоров.
• Трихромазия: у приматов, млекопитающих и людей развилась трехцветная зрительная система.
• Тетрахроматы: многие птицы, рыбы, земноводные, рептилии, насекомые и некоторые млекопитающие.

Хотите знать, являетесь ли вы одной из немногих женщин в мире, которые являются тетрахроматическими? попробуй открыть этоВидео станции BПроверьте, сможете ли вы пройти все тесты (не забудьте отключить режим защиты глаз). Так что, если ваша девушка хочет поговорить с вами об оттенках губной помады, поверьте, что она, скорее всего, сможет различать сотни разных оттенков голыми руками~

Имейте в виду, что у большинства насекомых пять или шесть типов колбочек, а у некоторых ракообразных даже 12! Так что в глазах этих жуков мы, обычные люди, тоже дальтоники.

Мир глазами дальтоников

Количество дальтоников в моей стране составляет около 60 миллионов, а количество дальтоников — 20 миллионов. Заболеваемость дальтонизмом в моей стране составляет от 5% до 8% у мужчин и от 0,5% до 1% у женщин. Около 6% населения имеют трихроматическое зрение (дальтонизм), около 2% населения имеют дихроматическое зрение (дальтонизм) и очень немногие имеют монохроматическое зрение (ахроматопсия). Ахроматопсия и ахроматопсия, которые мы сейчас хорошо понимаем, возникают из-за отсутствия определенных типов фоторецепторов в колбочках. Слабость цвета связана с плохим разрешением определенного цвета (фитохромы совпадают в ненормальном количестве).

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

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

общая цветовая модель

Цветовая модель — это математическая модель для описания цветов как кортежей значений. Цветовая модель CMYK обычно используется в современной печати, а цветовые модели, обычно используемые в продуктах для трафаретной печати: RGB, HSV и HSL.

В модели RGB три основных цвета — красный, зеленый и синий — смешиваются для получения определенного цвета. Например, 100% красного и зеленого смешиваются для получения желтого цвета. При использовании мы сопоставляем красный, зеленый и синий цвета с осями x, y, z в трехмерном пространстве, образуя куб. Хотя RGB — это цветовая модель, принятая большинством дисплеев, она совершенно непонятна людям. Потому что наше восприятие цвета часто основано на следующем: Какой это цвет? Насколько он яркий? Насколько он яркий? Какое значение будет использоваться для градиента от светло-фиолетового к темно-фиолетовому? Как найти дополнительный цвет голубого? Модели RGB трудно дать нам интуитивный ответ, потому что люди не видят цвет как смесь красного, зеленого и синего света.

Таким образом, HSL/HSB (HSV) — это улучшенная цветовая модель, основанная на RGB, которая более удобна для человека, масштабируема и проста в использовании. Две цветовые модели HSL и HSV по существу одинаковы, но определения яркости/яркости несколько отличаются:

• HSL: Hue H (оттенок), Saturation S (насыщенность), Lightness L (яркость)
• HSB(HSV): Hue H (оттенок), Saturation S (насыщенность), Lightness B (яркость) или V (значение)

Определение оттенка H в HSL и HSB точно такое же, но насыщенность S отличается, а яркость L и яркость B также различаются:

• S в HSL не имеет ничего общего с черно-белым, насыщенностьюНетУправляет степенью черного и белого в цвете
• S в HSB управляет смешиванием сплошных цветов.белыйсумма, стоимостьбольше, чем меньше белого, тем меньше цветачем чище
• L в HSL управляет черным и белым цветами, смешиваемыми в сплошной цвет.
• B в HSB управляет смешиванием сплошных цветов.чернитьсумма, стоимостьбольше, чем меньше черного, тем светлеевыше

Например, для одного и того же значения цвета #FF5000 значения HSB и HSL будут следующими:

Стоит отметить, что HSL поддерживается в CSS, так что не поймите неправильно.

CIELAB — это абсолютное цветовое пространство, определенное CIE (Международной комиссией по освещению) в 1976 году и задуманное как единое для восприятия пространство, не зависящее от устройства. L* обозначает воспринимаемую яркость, aи бЧетыре уникальных цвета, которые представляют человеческое зрение: красный, зеленый, синий и желтый. Все цвета, которые может воспринимать человеческий глаз, можно найти на этом 2D-изображении. каждая группа LaЗначение b* определяет точный цвет, хотя и является абстрактным значением, которое выглядит точно так, как ожидается на точном устройстве отображения и при правильных условиях просмотра.

В то время как RGB или CMYK зависят от устройства, одно и то же значение RGB может выглядеть по-разному на разных мониторах. Обычно при использовании его необходимо преобразовать в определенный общий стандарт, такой как sRGB или Adobe RGB.

В практических приложениях использование режима Lab в PS очень плавно и удобно, потому что он лучше всего соответствует режиму, воспринимаемому нашим человеческим глазом.

Пусть машины понимают и генерируют цвет

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

Учитывайте влияние привычек использования цвета и семантики

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

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

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

Влияние размера элемента на цвет

Размер элемента оказывает существенное влияние на использование насыщенности цвета, а также на значение контраста. В психофизике существует понятие «минимальное воспринимаемое различие», которое относится к наименьшему изменению, которое человек или животное может воспринять к определенному сенсорному раздражителю. При визуализации информации необходимо настроить выбор цветов в соответствии с размером графической области, чтобы можно было четко различать выражение двух видов информации. Коннор Грамазио сделал одинИнтерактивная демонстрация, можно увидеть степень влияния на каждый канал в цветовой модели CIELAB при разных размерах. Точно так же при расчете контраста элементов пользовательского интерфейса нам также необходимо смотреть на соотношение размеров между передним планом и фоном.С точки зрения чтения информации, то есть размер шрифта напрямую влияет на конечное значение контраста. Что касается использования размера шрифта, мы подробно поговорим об этом в главе, посвященной шрифтам интеллектуального дизайна.

Как создается цвет

Тона: Тень, Оттенок, Тона

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

Лучше всего различать выбранную плотность в светлом и темном режимах.

многоцветный

Вообще говоря, на цветовом круге (цветовой спектр соединен встык) научная система выбора цвета имеет следующие методы выбора:

• Дополнительный цвет

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

• Разделить дополнительные цвета

Чуть меньше напряжения, чем дополнительные цвета,

• Соседний цвет Аналог

Естественная унифицированная цветовая система

• Триада Триада

• Прямоугольный тетрадный

Лучше всего выбрать один из них в качестве основного цвета, а остальные — в качестве дополнительных.

• Монохроматический Монохроматический

Добавьте черный или белый к основному цвету, чтобы получить различные оттенки света.

Несколько сценариев применения

генерация кожи

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

Во-первых, у каждого скина должен быть свой цвет темы, например, у "High Cool Blue" цвет темы #3173E5 (H:218, S:79, B:90). Так как же нам заменить цвет темы оформления для кнопки поиска вверху, значка, области Кинг-Конга внизу и даже различных элементов на различные «цвета бизнес-бренда» на всей странице?

Например, новый значок головы кошки на Tmall состоит из градиентных цветов (H:11, S:75, B:100 - H:347, S:100, B99). насыщенность и B Яркость неизменны, а оттенок H преобразуется в значение H цвета темы этого скина, которое равно 218, и после скина можно получить иконку.

В это время кто-то должен выскочить и сказать, а как же бизнес-ум? Это основной фирменный цвет нашего бизнеса, и нам необходимо донести до потребителей последовательный деловой менталитет! Этот вопрос на самом деле зависит от того, хотим ли мы сделать продукт с лучшим внешним видом и ощущениями, или же некоторые субъективные требования бизнеса, рациональность которых необходимо обсудить, могут заставить опыт уступить место. На самом деле, очень разумно требовать, чтобы цвет значка соответствовал цвету кожи, выбранному пользователем, потому что, просто взглянув на значок головы красного кота, невозможно понять, что это новый продукт на Tmall.

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

Генерация программы доступности

Для решений доступности основная концепция заключается в том, что коэффициент контрастности должен достигать определенного значения, иначе это повлияет на чтение информации пользователем. WCAG (Руководство по доступности веб-контента) Руководство по доступности интернет-контента 2.0 рекомендует, чтобы коэффициент контрастности переднего плана и фона был не ниже 4,5:1, что соответствует уровню AA. Расширенная версия AAA должна обеспечивать соотношение 7:1. Как обнаружить контраст? Есть много онлайн-проверок контраста, которые могут это сделать, например:Color review WebAIM CONTRAST CHECKER

И Помощник в Sketch тоже может получить результат напрямую:

Итак, после получения результатов контраста, как мы можем позволить машине выполнить автоматическую коррекцию? Сначала давайте посмотрим, как рассчитывается «контрастность»:

Контрастность на самом деле является значением сравнения относительной яркости двух цветов.Формула расчета: (L1 + 0,05) / (L2 + 0,05), а диапазон значений составляет от 1:1 до 21:1. L1 — это относительная светлота более светлых цветов, а L2 — относительная светлота более темных цветов. Обратите внимание, что относительная яркость здесь — это не L в модели HSL, а нормализованное значение от самого темного 0 до самого яркого белого 1. Вычисление, данное WCAG, преобразовано из значений RGB (потому что сегодня это также модель цветового кодирования для большинства веб-систем):

For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 *R+ 0.7152 *G+ 0.0722 *B

whereR,GandBare defined as: if RsRGB<= 0.03928 thenR= RsRGB/12.92 elseR= ((RsRGB+0.055)/1.055) 2.4 if GsRGB<= 0.03928 thenG= GsRGB/12.92 elseG= ((GsRGB+0.055)/1.055) 2.4 if BsRGB<= 0.03928 thenB= BsRGB/12.92 elseB= ((BsRGB+0.055)/1.055) 2.4

and RsRGB, GsRGB, and BsRGBare defined as: RsRGB= R8bit/255 GsRGB= G8bit/255 BsRGB= B8bit/255

Таким образом, чтобы новый цвет соответствовал коэффициенту контрастности, просто переместите цвет переднего плана или фона ниже AA (4,5) или AAA (7).

В отрасли уже есть несколько зрелых решений. Например, Chrome DevTools предоставляет интеллектуальные рекомендации по цвету на основе критериев контрастности в инспекторе:

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

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

Поэтому в сценариях практического применения необходимо только выбрать, следует ли изменить цвет переднего плана или цвет фона в соответствии с результатом проверки контрастности (обычно мы выбираем цвет текста или значка переднего плана), и использовать этот метод расчета для генерации новое значение цвета элемента, соответствующее AA или AAA. Вот и все.

темный режим

Когда мы переключаемся в темный режим, фон меняется с ярко-белого или светло-серого на черный или темно-серый. Однако большинство модулей и элементов переднего плана не меняют цвет соответствующим образом. Это приводит к тому, что во многих случаях информация не видна на темном фоне. Например, в маленьком сером квадрате на картинке ниже цвета A и B выглядят сильно по-разному? Но через палитру цветов мы можем обнаружить, что все их значения цвета #808080. Причина, по которой нас обманывает мозг, заключается в том, что даже один и тот же цвет может изменить наше восприятие в зависимости от цвета фона.

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

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

Поэтому, если нам нужно улучшить работу в темном режиме, нам нужно внести некоторые изменения в яркость и насыщенность значения цвета элемента переднего плана. Это также требует от нас быть адаптируемыми и изменчивыми при создании системы веб-дизайна. ЛеонардоdemoРеализовано общее автоматическое изменение цветности со светлого на темный режим.

Рендеринг новых цветовых схем на основе среды и поведения пользователя

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

Создайте цветовую систему для интеллектуального дизайна и производства

Сказав так много поз и сценариев применения, как создать цветовую систему, которую можно было бы эффективно и гибко использовать в рамках интеллектуальной системы проектирования и производства? ​

Базовый образец дизайна

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

Существующие инструменты и методы

TinyColors.js предоставляет ряд методов для вычисления и генерации значений цвета одного и нескольких оттенков.Adobe colorЭто мощный инструмент, позволяющий дизайнерам генерировать выбор цвета, создавать образцы изображений и безбарьерную симуляцию цвета.ColorBoxЭто инструмент для дизайнеров Lyft, позволяющий создавать образцы на основе Json, а также экспортировать новые образцы в Json и превращать их в пакеты NPM. При создании градиентных цветовых палитр дизайн Ant попытался напрямую создать оттенок/оттенок с концентрацией (1.x), использовать кривую Безье для получения значения основного цвета и вращать цветовой круг с моделью HSL в соответствии с холодными и теплыми цветами для создания (2.x), до сегодняшнего дня 3.x использует модель HSV для уменьшения/увеличения трех значений H, S и V соответственно. Но есть еще некоторые ямки, где контраст и разные оттенки несовместимы в крайних оттенках.ПодробностиЭто хорошие автономные инструменты, но я не видел много случаев применения к конкретным бизнес-сценариям. ​

инженерный подход

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

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

//无特殊语义的基准色板定义
purple100: rgb(184, 121, 240); // 淡紫色
purple200: rgb(159, 101, 208); 
purple300: rgb(130, 80, 170);  // 深紫色

//有一些基础语义
primaryBackgroundColor: $purple200; // 背景
primaryTextColor:       $purple300; // 文字颜色

//具体场景
primaryButtonBackgroundColor: primaryBackgroundColor; // 主按钮背景色
primaryButtonQuietTextColor:  primaryTextColor; // 主按钮文字颜色

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

---