👨‍🎨 👨🏿‍🔧 🤴🏼 Opium.Fill-通过程序员的眼光对颜色方案进行标准化 🧒🏾 🎢 🧒🏾

嘿。今天，我将向您展示过去两年中一直在使用的配色方案。发明它是为了摆脱有问题的项目中CSS中的大量变量。然后事实证明，这些原理几乎可以应用于任何项目。

总的来说，我将尝试解释设计师如何在UI中使用颜色，以及如何在不将设计师推入严格框架的情况下“键入”所有颜色。我将在React JS（针对开发人员）和Figma（针对设计人员）中给出实现示例。该方案没有对React和Figma的绑定，只是我对它们更加熟悉。

该方案中没有任何狡猾和独特的东西（也许只是一个名字）。所有的想法都悬而未决。您可以将其作为在应用程序中使用颜色的最佳实践。鸦片-填充-这些是将爱结合起来的通用原则，为所有事物赋予名称。

该系统可以与材料设计一起使用。

本文是为前端开发人员而写的，为设计人员写了一些。

1.我们要解决什么问题？

1.1。50级灰度

大概每个人都熟悉这个问题。通常可以在灰色阴影下看到它，但是在其他颜色（例如蓝色）下会发生这种情况。放在哪里，在哪里使用？甚至设计师对此也感到困惑。

1.2。设计师玩花

有时，设计师之所以可以提供新颜色，仅仅是因为旧的颜色累了并且不受欢迎（或者因为他错过了移液器）。这没有错；您不必责怪设计师。但是问题在于，开发人员并不总是知道这些更改。

在这种情况下，会累积许多颜色变量。毕竟，开发人员无法理解是否需要删除旧颜色，或者是否仍在使用旧颜色。在我所见过的项目中，记录是273个纯色变量。

在所有敏捷工作已经完成并且设计与开发同时发生变化的项目中，都可能发生类似情况。

1.3。每晚主题和品牌设计

这个问题源于前一个问题。如果项目中有很多无序的变量，则很难引入新的配色方案。

例如，您正在创建CRM。您的CRM可以使客户有机会根据客户的公司身份调整其配色方案。如果您没有清晰的配色方案，那么将很难做到。

但是，如果您需要该应用程序的深色主题怎么办？然后，“ Vasily，让我们使用我们的273个变量并将其系统化”这句话导致了这样一个事实：Vasily在填写应用程序的第10步打破了表格，与邻近部门的开发人员发生争执，并在一周后变得疯狂。

2.鸦片填充的意识形态

2.1。不要打扰设计师工作

Opium.Fill的发明是为了“解密”设计，而不是使设计人员负担。设计人员无需了解Opium.Fill的存在即可根据方案进行所有操作。

您不应该对设计师强加配色方案，最好等到他完成绘制应用程序的主要概念之后再进行。只有在那之后，才有必要告诉他是否有与配色方案不符的地方，并阐明是否可以纠正这些地方。在10个这样的问题中有9个，设计师说“ Pf，这不是问题，让我们替换它”或“哦，这通常是我不能接受的，谢谢您的注意。”

2.2。通过“眼睛”定义颜色

根据元素周期表，可以预测尚未发现的元素的存在。为此，预先分配了空单元。我们将在配色方案中使用此原理。制作一张桌子，并将一些单元格留空。但是对于其余的参数，您甚至可以通过眼睛了解那里应该是什么颜色。

2.3。如果不是一切都不要气

我们的任务是优化色彩处理中最大的常规部分。如果在开发应用程序时用100表示1的颜色（表示颜色），您发现遇到了不适合电路的问题，则认为这不是问题。

3.基本假设

3.1。每种颜色-一对

我们认为每种颜色都有两个“信息”。第一个饱和（有条件的为强）。第二个是不饱和的（有条件的是弱）。如果看到蓝色，则除了要变成蓝色外，还必须将其定义为“强”或“弱”。它是饱和的还是不饱和的？

3.2。按功能划分颜色

忘记颜色名称中的“天蓝色”，“金色”，“黑色”等。颜色的名称应反映其功能，而不是其十六进制。现在，我们使用以下名称：基本，模糊，重音，补语，批评，警告，成功。

3.3。三块

1号楼是最重要的。3号块是最不重要的。下面，我将描述每个块。这种分离是必要的，这样对于绘制界面来说不太重要的颜色对我们的干扰较小。

4.方块编号1.父色

4.1。名字

回到我们的新颜色名称。基本，微弱，口音，补充，批评，警告，成功。让我们一次来。

基础

它是黑色和白色的。或那些与它们相似的颜色在某种程度上令人困惑。它们是文本和背景的基础。

晕

因此，我们称其为灰色阴影。某些背景文字或灰色背景为淡淡。此处还包括具有透明性的黑色（如果被视为灰色）。

口音

这是主要的公司颜色或突出界面最重要元素的颜色。例如，如果您查看俄罗斯银行，则：Sberbank为绿色，VTB为蓝色（或红色，如您所见），Tinkoff为黄色，Alpha为红色。为了方便起见，让我们在表中的“ Accent”下引用蓝色阴影。

补充

这是可选的强调色。并非每个人都有。让我们看一下Airbnb-我会说它是深绿色：为方便起见，我将用紫色表示补色，这在下面的设计示例中对我们很有用。

危急

用于突出显示错误和其他非常重要的信息的颜色。通常是红色的东西。

警告

如果要与另一个同样重要但又不是致命的信息共享重要信息，则需要警告。通常这是一种橙黄色。

成功

有时，成功的操作足以显示出强调色。但是，如果口音是某种不寻常的颜色（红色），或者由于某种原因您想要引入一种新的颜色，那么这里就是成功。最有可能的是，它会变成绿色。已发布7种基本颜色名称。不必全部使用它们。当然，如果您有严重的理由，可以补充此设置。

4.2。颜色家族

您可能已经注意到，当我谈论颜色时，我并没有指出具体的含义，而是使用了“灰色阴影”，“红色”，“绿色”等字眼。这不仅是这样。让我们介绍“色彩系列”的概念。

就像我上面说的，我们将颜色成对地划分。仅重音符号不存在。确保具有强音和弱音。这些始终是构成家庭基础的两种颜色。就像爸爸妈妈一样。让我们想象一下我们的颜色是一对已婚夫妇。假设父母的性别无关紧要，主要是一个人坚强（强壮），第二个弱者（弱弱）。我们也将接受强项和弱项是性格特征，例如快脾气和镇定。

所以在这里。爸爸脾气暴躁。他经常因交通堵塞而紧张，在森林里踢刺猬。妈妈很冷静她是一名心理学家，并玩扑克。这是我们配色方案的基础。

基色已经被划分（黑色和白色）。将其余的分成几类：

5.第2.区块

5.1。语境

看看Bitbucket。然后，设计师认为左后角的蓝色对于文本来说有点暗。所以他把它照亮了。现在，所有文本虽然看起来是蓝色的（就像侧面菜单一样），但实际上在十六进制中具有不同的含义：任何颜色都有使用它的上下文。可以将颜色应用于背景，文本，线条，图标。这就是我们所说的上下文。在任何这些情况下，可能都需要以某种方式更改颜色，以便更好地适合上下文。我们称这种变化为Substitution。我们在表格中选择一个地方进行替换。每行都是一个上下文，我们可以为其添加替换。默认情况下，将有空单元格：

我们仅为强色添加了替换单元格。块＃2中的弱色显示该颜色在深色背景上的外观。虽然我们不会碰触它们，但最终我们将返回到它们。

如果未填充替换项，则文本，图标和其他所有内容的颜色
均取自第1块。

注意。我们只能在原始设计元素中替换颜色。该集合几乎是从设计师使用的图形编辑器中提取的：1：1。您可以在此处绘制一个矩形（背景），添加一段文本，绘制一条线或添加一些不寻常的形状，例如星号（阅读图标）。

5.2。花式的

还有另一种特殊的替代方法-替代梯度。我们称渐变为Fancy-“特殊场合”的上下文。花式是万能的。文本，图标等没有单独的渐变（理论上是可以的，但是由于这种罕见的情况，因此不值得使表格变得更加困难）。让我们在表格的底部突出显示“花式”的位置：我们根据情况准备了更改，设计师100％做到了。空单元格给我们一些灵活性。有时替换必须更频繁地执行，有时则不那么频繁。如果第2块几乎保持为空，这是正常现象（设计人员还尝试减少颜色数量）。

6.座数3.班次

有时，颜色需要稍微变深或变浅。但这不是因为上下文已更改，而是因为每种颜色都有两个附加状态：“较暗”和“较浅”。设计人员通常会使用它做出鼠标悬停的反应。我们称这种颜色变化为Shift。您可以上移（较暗）或下移（较轻）。现在，一个空表如下所示：

7.颜色反转

我故意没有立即谈论它，因为它很少见，并不是每个人都需要。有时您想在深色基材上写一些东西，但并非所有颜色都适合这种颜色。让我们看一下其中一种设计的示例：蓝色板上有文字，主观上被认为是Faint。我也将在Faint家族中定义的图标下有圆圈。如果骰子很轻，那么这两个元素很可能只是灰色。但是死是黑暗的。我们的表格中没有匹配的颜色，您可以添加它们。为此，您需要第2块中的Weak列。对于这种布局，表如下所示：

请注意，现在将用淡淡的淡淡强线绘制线条，这也反映在表格中。还为口音添加了渐变，为父级模糊添加了平移（它们很方便绘制搜索字段）。

注意。无需混淆倒置和夜间主题。夜间主题在颜色上有许多细微差别。因此，最好为它创建一个单独的表。

8.使用

8.1。CSS，React

让我们尝试绘制一个按钮，在纯CSS中，变量的组织方式如下：

:root {
  /*   */

  --base-strong: #000;
  --base-weak: #fff;

  --faint-strong: #8994A6;
  --faint-weak: #F6F8FB;

  --accent-strong: #0070FF;
  --accent-weak: #EBF4FF;

  --complement-strong: #8889E2;
  --complement-weak: #EEECFD;

  --critic-strong: #F74545;
  --critic-weak: #FDEDED;

  --warning-strong: #F8AE4F;
  --warning-weak: #FCEBCF;

  --success-strong: #27AE60;
  --success-weak: #DEF8E9;

  /* C   */
  --faint-strong-down: #A5ADBB;
  --faint-weak-up: #ECEEF5;
}

/*  */
/*      */

.back {
  --faint-weak: rgba(255, 255, 255, 0.15);
}

.text {
  --faint-weak: rgba(237, 241, 247, 0.5);
}

.line {
  --faint-strong: #EDEFF2;
}

.icon {}

.fancy {
  --accent-strong: linear-gradient(132deg, #3F89EE, #5447FF);

  /*  */
  --accent-strong-down: linear-gradient(132deg, #448FF3, #594CFF);
}


/*   */

.button {
  background: var(--accent-strong);
  color: var(--base-weak);
  /*    */
}

.button:hover {
  background: var(--accent-strong-down);
}

然后，要在HTML中创建按钮，您需要添加以下标记：

<button class="fancy button">
  <div class="text">
    Hello Button
  </div>
</button>

CSS中没有办法原生地跟踪上下文，然后您必须通过类手动指定它。当然，您可以尝试了解所用标签的上下文，但是此决定并不适合每个人。

在React上，代码可能如下所示：

class Button extends React.Component {
  render() {
    return (
      <Box fill="accentStrong" fancy className="button">
        <Font fill="baseWeak">Hello Button</Font>
      </Box>
    )
  }
}

//   
class Button extends React.Component {
  render() {
    return (
      <Box.Accent fancy className="button">
        <Font>Hello Button</Font>
      </Box.Accent>
    )
  }
}

// Box  Font —    ,     

//        Strong  Weak (      )
//       
//      

//    ,   
// ,    
//     ,     Opium.Fill
//       

//   'button'     
//

为了不与CSS绑定（您不只是为浏览器创建应用程序），可以将颜色变量存储在json中：

{
  "color": {
    "parents": {
      "baseStrong": "#000",
      "baseWeak": "#fff",

      "faintStrong": {
        "default": "#8994A6",
        "shiftDown": "#A5ADBB"
      },
      "faintWeak": {
        "default": "#F6F8FB",
        "shiftUp": "#EDEFF2"
      },

      "accentStrong": "#0070FF",
      "accentWeak": "#EBF4FF",

      "complementStrong": "#8889E2",
      "complementWeak": "#EEECFD",

      "criticStrong": "#F74545",
      "criticWeak": "#FDEDED",

      "warningStrong": "#F8AE4F",
      "warningWeak": "#FCEBCF",

      "successStrong": "#27AE60",
      "successWeak": "#DEF8E9"
    },

    "context": {
      "back": {
        "faintWeak": "rgba(255, 255, 255, 0.15)"
      },

      "text": {
        "faintWeak": "rgba(237, 241, 247, 0.5)"
      },

      "line": {
        "faintStrong": "#EDEFF2"
      },

      "icon": {},

      "fancy": {
        "accentStrong": {
          "default": "linear-gradient(132deg, #3F89EE, #5447FF)",
          "shiftDown": "linear-gradient(132deg, #448FF3, #594CFF)"
        }
      }
    }
  }
}

8.2。Figma中的配色方案

在我看来，将颜色划分为上下文是正确的，以便上下文名称可见。并将移位添加到这些块的末尾。如果该移位仅真正用于避风港，则您甚至不应将其添加到调色板中，以免再次分散您的注意力。

9.使用系统毫无意义时

9.1。不寻常的设计项目

Opium.Fill的设计应使基色为黑白（或在主观上与基色相似的地方，以至混淆）。如果您需要在一个界面中书写大量的蓝色和红色或不断使用各种颜色，那么Opium.Fill不是最佳解决方案。

9.2。小项目

对于小型项目，引入某种系统根本没有意义。将所有计数器颜色放入可用变量中会更快，但是最好使用设计者提供的列表。有时，所有事情都很简单，您可以直接设置样式的颜色，以免感到困惑。

9.3。您已经在使用其他东西

如果您的团队（不仅是）使用Material Design，并且每个人都对一切感到满意，那么更改或调整有效方法就没有意义。

10.批评

以下是Opium.Fill的一些常见问题。我将尝试回答一些说法。您可以将其视为开放主题。如果有人遇到困难，与您分享我会很高兴。

10.1。仍然有很多变数

好奇的读者已经计算出我们有252个变量的像元。有什么比刚开始时更好？

我可以向您保证，所有这些颜色都不会同时使用。它们有一个位置，但是它们是空单元格，就像元素周期表中未发现的元素一样。在实际项目中，我们设法“打开”多达30个元素。

如果您的桌子上堆积了50多个零件，则可能出了点问题，不幸的是，该方案无助于对其进行修复。

10.2。要填充图形，必须极大地扩展表格。

如果您有很多图表，或者需要用不同的颜色为产品类别着色（例如，有20种颜色），则必须添加新的颜色系列。我上面描述的七个部分还不够。

10.3。如果理论上所有需求都可以通过变化来满足，为什么还要添加替代品呢？

我从这样的想法出发：上下文替换是设计师如何使用颜色的更“高级”解释。因此，替代更易于理解和使用。

移位对于稀有花朵很有用，在以下情况下最好填充它们：

事件处理（例如Haver或Click）
当您需要额外的灰色阴影光谱时

结论

该概念出现在2018年初，此后没有太大变化。在我最喜欢的组织中，我们在设计和开发中都实施了Opium.Fill。有时有必要实施其他团队（来自其他组织）的设计，但这不会干扰颜色方案的使用，我们遇到了困难，但我们设法解决了这些问题。一些项目已经投产。

如果您很接近项目中的颜色管理主题，那么阅读其他选项可能会很有趣：材料设计，Atlassian设计

谢谢

我们想出了一个方案，并写了一篇文章-丹尼斯Elianovsky，JTC团队。
插图在头- 埃琳娜艾芬莫娃

Opium.Fill-通过程序员的眼光对颜色方案进行标准化

目录