Рубрика: Статьи по дизайну

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

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

Оттенки

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

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

«Простое может быть сложнее, чем сложное: вам нужно усердно работать, чтобы очистить свое мышление, чтобы сделать его простым. Но в конце концов это того стоит, потому что, добравшись туда, вы сможете сдвинуть горы ». — Стив Джобс.

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

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

Семантическое именование — «Что оно представляет? ”

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

  const colorPalette = {
 primary: '# 4040FF', 
 вторичный: '# A640FF', 
 третичный: '# FF40DC', 
 primaryForeground: '# 333333', 
 primaryForeground: '# 333333', 
 tertiaryForeground: '# 444444', 
 primaryBackground: '#FFFFFF', 
 primaryBackground: '#FFFFFF', 
 tertiaryBackground: '# F3F3F3', 
 active: '#FFFFFF', 
 предупреждение: '# FF4040' 
}  

Декларативное именование — «Что это?»

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

  const colorPalette = {
 white: '#FFFFFF', 
 красный: '# FF4040', 
 black: '# 000000' 
}  

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

Давайте рассмотрим компонент Tree-Element :

Начальная тема

const initialTheme = {
цвет: primaryForeground, // # 333333 [19459028ground] фон: основной , // #FFFFFF
borderWidth: '1px',
borderStyle: 'solid',
borderColor: primary // # 4040FF
};

Основная тема

const primaryThem e = {
color: active, // #FFFFFF
background: primary, // # 4040FF
borderWidth: '1px',
borderStyle: 'solid',
borderColor: primary / / # 4040FF
};

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

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

Окончательный стиль объекта, который будет скомпилирован в чистый CSS, будет выглядеть this:

  const style = {
 color: theme.color, 
 background: theme.background, 
 borderWidth: theme.borderWidth, 
 borderStyle: theme.borderStyle , 
 borderColor: theme.borderColor 
};  

Если вы хотите изменить основной тема элемента в вторичную, вам нужно только передать определенное свойство:

  React component ->   

const virtualTheme = {
цвет: активный, // #FFFFFF
фон: дополнительный, // # A640FF
borderWidth: '1px',
borderStyle: 'solid',
borderColor: Secondary // # A640FF
};

[Простыекакэто:стилизоватькомпонентыНокакяужеупоминалвышевыдолжныбытьосторожнысназваниямицветовНапримересливыиспользуетедекларативныйспособописанияактивногоцветатакогокакбелый(#FFFFFF)иприменяетеегоповсеместновсвоихтемахдлясвойствразличныхкомпонентов(напримерграницзначковицветовтекста)вампотребуетсяизменитьеговручнуювездекактольковырешитеизменитьзначениецветовойпалитрысбелого(#FFFFFF)надругойцвет

  const secondTheme = {
 цвет: белый, // #FFFFFF 
 ... другие объявления CSS 
}; 
  

Тематические оттенки

Для создания оттенков мы используем первичные или вторичные цвета и меняем только параметр альфа. Вы также можете использовать третичные цвета, но помните правило простоты. Чтобы создать редактируемое состояние для компонента Tree-Element, мы использовали простую библиотеку цветов, и вы можете сделать то же самое с чистым CSS, используя альфа-параметр или функцию транспарентизации SCSS.

Editable Theme

// Стилизованные компоненты const opacity = {
primaryOpacity: 0,50, [1945primaryOpacity:025
} const backgroundColor = color (primary)
.alpha (primaryOpacity)
.rgb ()
.string (); const editableTheme = {
color: styles.active,
background: backgroundColor
}; // SCSS
$ primaryOpacity: 0.5; .selector {
фон: транспарентизация ($ primaryForeground, $ primaryOpaci ти);
}

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

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

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