UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Руководство по цвету в UX/UI дизайне. Как выбирать, смешивать и сочетать цвета
Редакція
Редакція

Опубліковано

Руководство по цвету в UX/UI дизайне. Как выбирать, смешивать и сочетать цвета

#ux

Советы, теория и передовой опыт от moonlearning.io.

Эта статья – отрывок из моего курса по основам UX / UI дизайна на moonlearning.io. Здесь вы можете найти видео-превью.

Цвет – один из основных элементов дизайна интерфейса. Он может сместить первое впечатление о вашем продукте от крутого изысканного до сумасшедшего и дикого. Речь идет не о смешивании красивых цветов, речь идет о создании системы. Но давайте начнем с основ и продвинемся до профессионального уровня:

Значения цвета. Когда какой формат цвета использовать

Цвета можно записывать по-разному, и самые распространенные варианты, с которыми вы, вероятно, столкнетесь – это Pantone, CMYK, HEX и RGB. В цифровом дизайне мы используем только HEX и RBG, но все же важно понимать разницу, поскольку вы, скорее всего, также будете иметь дело с брендом офлайн.

Pantone → Используется в ПОЛИГРАФИИ

Образцы Pantone. Источник: официальный сайт Pantone

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

CMYK → Используется в ПОЛИГРАФИИ

CMYK

Смешивание четырех цветов: голубого (cyan), пурпурного (magenta), желтого (yellow) и основного (key, по сути, черного) – является основой для остальных цветов в печати. Это также четыре цвета, которые можно найти в домашнем принтере и в профессиональных типографиях.

RGB → Используется в UI дизайне

RGB

RGB означает красный (red), зеленый (green) и синий (blue). Монитор излучает эти цвета, поэтому они состоят из света, а не чернил. Цветовой спектр света больше, чем у печатной продукции. Из-за различных систем цвета печатный и цифровой дизайн никогда не будут совпадать на 100%. Это не проблема, пока палитры гармоничны внутри себя. Просто помните об этом.

В UI-дизайне RGB-значения находится в диапазоне от 0 до 255. Например, R = 255, G = 255, B = 255 или RBG = 255,255,255 – белый цвет, а RGB = 0, 0, 0 – черный.

RGBA → Используется в UI-дизайне

То же, что и RGB, A означает дополнительный альфа-канал. Альфа регулирует прозрачность от 0,0 (полностью прозрачный) до 1,0 (полностью непрозрачный).

Так, например, RGBA = 255, 255, 255, 0,5 будет белым цветом с 50% прозрачностью.

HEX→ Используется в UI-дизайне ?

RGB – это прекрасно, но его немного утомительно записывать, поэтому HEX – это всего лишь его краткая форма, и он всегда будет отображать тот же цвет, что и RBG аналог. Благодаря строковому формату его немного проще обрабатывать, копировать, вставлять и делиться.

Hex-значение состоит из 6 цифр с хешем перед ним. Первые две цифры соответствуют R, вторые две – G, а третья пара – B. Вот почему RGB и Hex идентичны.

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

Преобразование цветов между печатью и экраном

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

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

Здесь вы можете выбрать Hex, RGB или CMYK, и вам будет предложен соответствующий Pantone цвет. Щелкните по нему, и вам сообщат все связанные значения цвета. Если вы хотите преобразовать Pantone в Hex, просто используйте раздел «Pantone to Pantone» в левом меню (да, запутанная формулировка, но это работает).

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

Сколько цветов в UI дизайне?

Три цвета – концепция дизайна интерьера

Несмотря на то, что в UI дизайне нет технических ограничений, лучше всего ограничить количество цветов максимум двумя-тремя.

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

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

Как выбирать, смешивать и сочетать цвета в UI-дизайне

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

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

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

Мы используем цветовое колесо RGB с его 12 цветовыми сегментами (состоящими из так называемых первичных, вторичных и третичных цветов). Я разбил круг на разделы, чтобы упростить примеры. Обычно вы видите колесо в программе проектирования с мягкими переходами цвета. У Adobe также есть отличный инструмент «цветовой круг», который может помочь вам с настройкой цветов.

Монохроматическая схема (Monochromatic)

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

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

Аналоговая схема (Analogous)

Аналоговый подход

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

Дополнительная схема (Complementary)

Дополнительная схема

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

Расщепленные дополняющие цвета (Split Complementary)

Расщепленные дополняющие цвета

Или продвиньтесь еще дальше и добавьте аналоговый цвет для большей яркости. Это называется расщепленными дополняющими цветами.

Эти три подхода должны помочь вам создать свою палитру, есть и другие подходы, такие как триада (triadic) и прямоугольная схема (tetradic), которые вы можете попробовать, но для их использования нужно немного больше опыта.

Поэкспериментируйте с тоном, оттенком, тенью, тональностью

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

Тон, оттенок, тень, тональность

Тон (Hue) это чистый цвет, без тени, оттенка или тональности. Поэтому, если мы отойдем от внешней части цветового круга, мы изменим тон.

Тень (Shade) тон, к которому добавили черный.

Оттенок (Tint) тон, к которому добавили белый

Тональность (Tone) тон, к которому добавили серый

Используйте варианты цвета

Цвета, с которыми вам действительно стоит поэкспериментировать для большей глубины – это так называемые варианты. Вы можете изменить тон (hue) вручную или использовать такой инструмент, как цветовые палитры Material Design.

Цветовые палитры Material Design

Примечание: Буква «P» в круге указывает, читается ли цвет текста перед фоном. Белый цвет означает, что белый текст читается на цветном фоне. Черный цвет означает, что черный текст читается на цветном фоне.

Варианты цвета

Добавьте hex-значение, и инструмент создаст для вас варианты. Вы можете использовать столько вариантов, сколько нужно для вашего дизайна. Обычно я использую от 3 до 5, но вполне нормально использовать до 9 вариантов. Они не обязательно должны быть точными «соседями», вы можете выбрать, любой контраст для своего дизайна, и просто не учитывать некоторые из них. Если вас интересуют числа, я объясню это в следующем разделе, посвященном наименованиям.

Плагин Color Shades для Figma

Недавно я нашел замечательный плагин под названием Color Shades для Figma, который создает все цветовые оттенки в вашем файле.

Источник: Скриншот Сообщество Figma

Как правильно называть цвета

Наименования цветов

Выбрав цвета и варианты, вы должны задокументировать их в таблице стилей и / или в своей дизайн-системе.

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

Цветовые обозначения

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

Варианты наименования

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

Варианты наименований

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

Однако не называйте их 1 2 3 4 и т. д. причина в том, что вы можете захотеть добавить промежуточные варианты на более позднем этапе, и тогда возникнет беспорядок. Так что дайте себе место на случай непредвиденных обстоятельств.

Таблица стилей цвета с системными цветами

Не забывайте системные цвета для ошибок, предупреждений, информации и успеха, обычно красный, оранжевый, синий и зеленый. Вы можете настроить их, чтобы они соответствовали цветам вашего бренда, если хотите. Просто убедитесь, что ошибка отображается ВСЕГДА красным цветом!

Добавив “On-color”, сделайте его доступным!

Еще одна вещь, которую стоит добавить – это так называемый on-color – цвет, используемый поверх другого цвета, например, типографика или иконки. Сознательное использование on-color имеет два основных преимущества.

Добавление on-color

  1. Вы получите напоминание о необходимости проверить доступность дизайна по цветовому контрасту. Либо используйте плагин в выбранном инструменте дизайна, либо онлайн-средство проверки контраста, подобноеэтому. Кстати, по закону вы обязаны сделать свою страницу доступной в соответствии с требованиями WCAG.

Проверьте контраст на доступность

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

Поэкспериментируйте в Figma!

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

Таблица стилей Figma

Правило распределения цвета 60, 30, 10

Распределение цвета

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

60% для основного цвета, 30% для вторичного цвета и 10% цвета выделения для призывов к действию.

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

Правило 60, 30, 10

Как видите, вы получаете довольно прочную основу и выделяете призывы к действию.

Спасибо!

Если вам понравилась эта статья, посетите сайт moonlearning.io, где автор рассказывает о UX / UI дизайне в видеоформате.


Перевод статьи uxplanet.org

Топ коментарі (0)