Воспринимаемая яркость: важная концепция UI-дизайна


22.09.2021 Время чтения - 3 минуты 1059

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


Читайте нас в Telegram.


A palette of 6 colors: Red, Yellow, Green, Cyan, Blue and Magenta

Если вы сказали желтый: поздравляю. Вы только что открыли для себя яркость!

«Shine Bright Like a Diamond»

Для начала: в модели HSB (очень популярной в софте для дизайна) каждый цвет может быть определен по оттенку (0° – 360°), насыщенности (0% – 100%) и яркости (0% – 100%).

Эта модель довольно хороша:

  • Она соответствует тому, как люди думают об атрибутах цвета , что делает ее очень удобной для пользователя;
  • Она моделирует, как цвет отображается при свете (в отличие от HSL).

Однако есть проблема.

Компонент яркости HSB – это просто мера физической яркости цвета, но не воспринимаемой яркости (или свечения).

В самом деле, на изображении выше шесть кругов имеют одинаковые значения яркости на ползунах HSB. У всех 100%-я яркость. Но наши глаза показывают нам другую картину: одни круги выглядят явно более «интенсивными», чем другие. Мы быстро приходим к выводу, что у каждого цвета своя яркость:

The initial palette of colors, in Luminosity mode.

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

Палитра цветов с их уровнями яркости

А это уровни яркости каждого цвета от 0 до 100. Как мы видим, разница в воспринимаемой яркости огромна.

Почему мы должны об этом помнить

Ладно, это все очень интересно и, безусловно, классный факт, чтобы рассказать своим друзьям.

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

Быстрый практический пример: давайте нормализуем цвета в начальном изображении. Цель состоит в том, чтобы получить одинаковую воспринимаемую яркость во всей цветовой палитре: для этого нам нужно сначала установить цвета в режиме наложения Luminosity. Давайте стремиться к значению 50%, это хорошая золотая середина.

Палитра цветов с равной яркостью

Это те же цвета (или, я бы сказал, те же оттенки), которые были у нас в начале. Однако теперь они нормализованы по значению яркости 50%, благодаря чему имеют такую ​​же воспринимаемую яркость, что и у человеческого глаза.

Готовы увидеть результаты?

Нормализованная палитра цветов

Удивлены? Цветовая палитра сильно отличается от той, что была в начале. Особенно цвета при предельной яркости: желтый и голубой.

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

Наслаждайтесь цветом со всей ответственностью

Мы могли бы еще долго говорить о цвете.

Воспринимаемая яркость – важная, но часто упускаемая из виду концепция в UI-дизайне. Она позволяет нам довести цвета до совершенства и добиться хорошего контраста. А это имеет решающее значение для доступности.

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

Оригинал.

Читайте также: Трехмерность: скевоморфизм, плоский дизайн и неоморфизм


Читайте нас в Telegram.