neo4j图形算法综合指南_网页设计中色彩使用的综合指南

neo4j图形算法综合指南

There is a lot of material about color to be found online. But none of us has the time to search and read lengthy series of articles to cover the topic. That’s why I wanted to create this comprehensive guide for applying color in web design. In this post we’ll cover:

在线上有很多关于颜色的材料。 但是我们谁也没有时间去搜索和阅读冗长的文章来讨论这个话题。 这就是为什么我要创建此综合指南，以在网页设计中应用颜色 。 在这篇文章中，我们将介绍：

• Color psychology
  色彩心理学
• Color terminology
  颜色术语
• Color rules
  颜色规则
• How to build and apply a color palette in web design
  如何在网页设计中构建和应用调色板
• Useful tools and resources
  有用的工具和资源

入门 (Getting started)

So, you have a web design project on your hands. One of the first steps you’ll probably have to take in order to kickstart the process is choosing a color palette. If you’re working for an existing brand, then probably your color scope will be limited, especially if this company has a brand guideline. However, if so far you only have a black and white sketch of a brand, waiting for definitions such as color, then keep reading.

因此，您手上有一个Web设计项目。 为了启动该过程，您可能必须采取的第一步就是选择一个调色板 。 如果您正在使用现有品牌，那么您的色彩范围可能会受到限制，尤其是在该公司有品牌准则的情况下。 但是，如果到目前为止，您只有一个品牌的黑白素描，等待诸如颜色的定义，然后继续阅读。

The first thing I recommend doing is performing a small exercise with your client or the project’s stakeholders. The exercise consists in having these stakeholders write a short list of attributes that they believe their new brand should have. If you can be on-site for the exercise (I personally work remotely from Argentina for clients in Europe and the US), then have them write each attribute on a sticky note. Then gather all sticky notes and put them on a whiteboard. Soon, you’ll start noticing patterns. Pick up and reorganize the sticky notes so as to cluster the notes that relate to one another. Then, you can name each cluster. In this case, since this is a small exercise, the name would probably be a single word that comprises all those related attributes. In other words, a consensual attribute.

我建议做的第一件事是与您的客户或项目的涉众进行一次小型练习。 练习包括让这些利益相关者写一个他们认为他们的新品牌应该具有的属性的简短列表。 如果您可以在现场进行练习(我亲自为阿根廷和欧洲的客户在阿根廷以外的地方工作)，那么请他们在便笺上写下每个属性。 然后收集所有便签纸并将其放在白板上。 很快，您将开始注意到模式。 整理并重新整理便签，以便将彼此相关的便笺聚在一起。 然后，您可以命名每个群集。 在这种情况下，由于这是一个小练习，因此名称可能是包含所有这些相关属性的单个单词。 换句话说， 共识属性 。

色彩心理学 (Color psychology)

When you finish with this mini-workshop you should have in your hands a list of consensual attributes. Your aim is to get the brand to evoke these attributes. For that, a very strong tool is color psychology. You shouldn’t define a brand’s color just because you (or someone else) likes it. Whichever color you use will surely have an impact on your audience. There is a lot to be said about audiences, enough to cover it in a separate post. For now, let’s just say that your audience matters and that you should design specifically for it.

当您完成此微型车间的准备时，您手中应该有共识的属性列表。 您的目标是让品牌唤起这些特性。 为此， 色彩心理学是一个非常强大的工具。 您不应仅仅因为您(或其他人)喜欢它来定义品牌的颜色。 无论使用哪种颜色，都会对听众产生影响。 关于受众有很多话要说，足以在单独的帖子中介绍。 现在，我们只说您的听众很重要 ，您应该为此专门设计。

Back to color psychology. To summarize, color affects people and evokes certain ideas/attributes. The way we relate ideas to colors depends on our culture. Different cultures have different color interpretations (see, I told you the audience matters). There is material to be found on color psychology for many countries/areas of the world. Here is a resource I found.

回到色彩心理学。 总而言之，色彩会影响人并唤起某些想法/属性。 我们将想法与颜色联系起来的方式取决于我们的文化。 不同的文化对颜色有不同的解释(看，我告诉你听众很重要)。 世界上许多国家/地区都有关于色彩心理学的资料。 这是我找到的资源。

In this post, we’ll cover western color interpretations:

在这篇文章中，我们将介绍西方色彩的解释 ：

• Red: Love, danger, anger, war. A darker red could be related to elegance.

  红色：爱，危险，愤怒，战争。 较深的红色可能与优雅有关。

• Orange: Energy, vitality, autumn.

  橙色：能量，活力，秋天。

• Yellow: Warning, happiness, cowardice, or wealth, in a golden shade.

  黄色：金色阴影中的警告，幸福，怯ward或财富。

• Pink: Femininity, romance, sensitivity. Could also convey energy and innovation.

  粉红：女人味，浪漫，敏感。 也可以传达能量和创新。

• Purple: Royalty, luxury, creativity, spirituality.

  紫色：皇室，奢华，创造力，灵性。

• Blue: Sadness, calm, reliability, trust, corporate.

  蓝色：悲伤，平静，可靠，信任，公司。

• Green: Nature, luck, cleanliness (depending on the shade).

  绿色：自然，幸运，清洁(取决于阴影)。

• Grey: Conservative, modernity, luxury.

  灰色：保守，现代，奢华。

• Black: Elegance, power, strength.

  黑色：优雅，力量，力量。

• White: Purity, cleanliness, elegance.

  白色：纯净，清洁，优雅。

It is important to note that the shade of the color will also affect its interpretations. But then again, not only the “shade”.

重要的是要注意，颜色的阴影也会影响其解释。 但话又说回来，不仅是“阴影”。

颜色术语 (Color terminology)

Let’s speak properly. If we are going to work with color, we should know how to speak about it, and because of that, how to manipulate it to fit our design needs. Let’s get acquainted with a couple of terms:

让我们说正确 。 如果要使用颜色，我们应该知道如何谈论颜色，因此，应该如何操作颜色以满足我们的设计需求。 让我们熟悉一些术语：

• Hue: This is the color.

  色相：这是颜色。

• Saturation/Chroma: This refers to the purity of a color. A color is most pure when it lacks gray.

  饱和度/色度：这是指颜色的纯度。 当缺少灰色时，颜色是最纯净的。

• Value: Refers to the lightness or darkness of a color.

  值：指颜色的明暗度。

With these three parameters, we can create many “versions” of a color. To better explain it, let’s look at the Munsell Sphere:

使用这三个参数，我们可以创建颜色的许多“版本”。 为了更好地解释它，让我们看一下孟塞尔球体 ：

The “versions” I was referring to earlier actually have names. Yes, more color terminology to learn!

我之前提到的“版本”实际上有名称。 是的，需要学习更多的颜色术语！

• Tone: When you add gray (desaturate) a color or hue.

  色调：添加灰色(降低饱和度)时的颜色或色调。

• Shade: When you add black (lower the value) of a color or hue.

  阴影：添加颜色或色相的黑色(较低的值)时。

• Tint: When you add white (increase the value) of a color or hue.

  色调：添加颜色或色相的白色(增加值)时。

创建调色板 (Creating a color palette)

So, a quick recap. Until now you have:

因此，快速回顾一下。 到现在为止，您已经：

1. Defined a list of attributes for your brand.
   定义了品牌的属性列表。
2. Selected a color to reflect these attributes, through the use of color psychology.
   通过使用颜色心理学选择一种颜色来反映这些属性。
3. Determined a more specific “version” (tone, shade or tint) of your color, through your knowledge of the Munsell Sphere.
   通过了解孟塞尔球体，确定颜色的更具体“版本”(色调，阴影或色调)。

Great! Now, it’s time to build a color palette for your website. To do that, we’ll take your brand’s new color as the central color to base your palette on. The next step is to choose some colors to accompany your main color, and therefore, create your palette. In order to do it, there are several color rules that you can choose from and apply. These rules are built upon the Chromatic Circle or Color Wheel, a very useful tool to create color combinations.

大！ 现在，该为您的网站构建调色板了。 为此，我们将采用您品牌的新颜色作为调色板的基础色。 下一步是选择一些颜色来配合您的主要颜色，并因此创建您的调色板。 为了做到这一点，您可以选择并应用几种颜色规则 。 这些规则基于“ 色环”或“ 色轮” ，这是创建颜色组合的非常有用的工具。

互补色 (Complementary colors)

These are colors that are located at opposing sides of the Chromatic Circle.

这些颜色位于色环的相对两侧。

类似颜色 (Analogous colors)

These are colors that are next to each other on the Chromatic Circle.

这些是色环上彼此相邻的颜色。

三色系颜色 (Triadic colors)

These are colors obtained by overlapping an equilateral triangle to the Chromatic Circle.

这些是通过将等边三角形与色环重叠而获得的颜色。

分补色 (Split-complementary colors)

This combination is obtained by matching the main color to the two colors adjacent to its complementary.

通过将主色与与其互补色相邻的两种颜色进行匹配，可以获得这种组合。

正方形颜色 (Square colors)

These are colors obtained by overlapping a square to the Chromatic Circle.

这些是通过将正方形与色环重叠而获得的颜色。

更多组合 (More combinations)

The same as with the triadic and square color combinations, you can create even larger palettes by using other geometrical figures such as pentagon, or a hexagon.

与三重和方形颜色组合相同，您可以使用其他几何图形(例如，五边形或六边形)来创建更大的调色板。

提示：谨防颜色振动 (Tip: Beware of color vibration)

When you create a palette, especially a complementary palette, it’s not only necessary to define the hues. You also need to take into account the saturation/chroma and the value of your colors, in order to get a harmonious palette. Otherwise, you risk your colors vibrating. Literally.

创建调色板(尤其是互补调色板)时，不仅需要定义色相。 您还需要考虑到饱和度/色度和你的颜色值 ，为了得到一个和谐的调色板。 否则，您可能会冒着颜色振动的危险。 从字面上看。

There are some colors, that when placed next to each other, produce a disturbing effect on our eyes. They seem to vibrate. This happens especially with colors that at opposite in the Chromatic Circle, and that have the same level of saturation.

有些颜色彼此并排放置时会对我们的眼睛产生干扰。 他们似乎在振动。 特别是在色环中相反的颜色和相同的饱和度的情况下，会发生这种情况。

在网页设计中应用颜色 (Applying colors in web design)

Now that we have one central color and some notions about color rules, we can choose a strategy and define our color palette for our website design. Let’s start from the beginning.

现在，我们有了一个中心色和一些有关颜色规则的概念，我们可以选择一种策略并为我们的网站设计定义调色板。 让我们从头开始。

有几种颜色？ (How many colors?)

The truth is you can have as many colors as you like, but you should keep in mind that larger color palettes are harder to implement effectively. It may also affect the ability to have a consistent design system in place. However, it’s your choice. I would personally recommend having a simple color palette, especially if you’re just starting.

事实是，您可以根据需要选择任意多种颜色，但是请记住，较大的调色板很难有效实现。 它还可能会影响拥有一致的设计系统的能力。 但是，这是您的选择。 我个人建议您使用简单的调色板，尤其是在您刚刚开始的时候。

我的调色板应包括哪些颜色？ (Which colors should my palette include?)

To start, your palette should include a very light color and a very dark color. The idea is that these two colors have a great contrast (I will leave tools to measure contrast at the end of the article). For example, black and white (yes, white counts as a color). Why? Because you will need a color for backgrounds and a color for text. Just that simple. Personally, I prefer choosing neutral colors for this. Neutral colors are versatile and elegant and can compliment any given color palette.

首先，您的调色板应包括非常浅的颜色和非常暗的颜色。 想法是，这两种颜色具有很大的对比度(我将在文章结尾处留下用于测量对比度的工具)。 例如，黑白(是的，白色算作一种颜色)。 为什么？ 因为您将需要背景颜色和文本颜色。 就这么简单。 就个人而言，我更喜欢为此选择中性色。 中性色是通用且优雅的，可以与任何给定的调色板互补。

Bottom line, your color palette shouldn’t only include very live and interesting colors. You need base colors too.

最重要的是，您的调色板不仅应包含生动有趣的色彩。 您还需要基色。

成品调色板 (The finished color palette)

Let’s say that in total we’re going to have 5 colors in our palette. We already know that one color should be really light (e.g. white) and another color should be very dark (e.g. black). That leaves us three open spots for some interesting colors. We also know that we have the main color and that the other two colors will relate to this main color through the use of color rules.

假设总的来说，我们的调色板中将有5种颜色。 我们已经知道一种颜色应该真的很浅(例如白色)，而另一种颜色应该很暗(例如黑色)。 这为我们留下了一些有趣的颜色的三个空白点。 我们也知道我们拥有主色，而其他两种颜色将通过使用颜色规则与该主色相关。

Let’s pretend our main color is blue. Here are some possible palettes with blue as the main color.

假设我们的主要颜色是蓝色。 以下是一些可能的调色板，其中蓝色为主要颜色。

Complementary palette

互补调色板

Analogous palette

类似调色板

Triadic palette

三重调色板

我应该如何将这些颜色应用于设计？ (How should I apply these colors to my design?)

Of course, there are no set rules, and different designers might obtain very different results using the same colors, fonts and so on. This is only meant as a guide for getting started. In other words, if you have no clue whatsoever on what to do with your new color palette.

当然，没有固定的规则，不同的设计人员使用相同的颜色，字体等可能会获得非常不同的结果。 这仅是入门指南。 换句话说，如果您不知道如何处理新调色板。

Let’s continue with our made up palette. Suppose we chose to use the complementary palette.

让我们继续我们的化妆调色板。 假设我们选择使用互补调色板。

我们如何应用它？ (How can we apply it?)

• White: can be used as a base/background color. Of course, you can use other light neutrals (like gray) for some backgrounds, or even a bright color from your palette, but in general, for legibility sake, you should probably have more white real estate in place.

  白色：可用作底色/背景色。 当然，对于某些背景，您也可以使用其他中性光(例如灰色)，甚至可以使用调色板中的亮色，但是通常，为了便于阅读，您可能应该有更多的白色房地产。

• Black: Can be used for text. Again, you can have quotes or highlighted text in another color.

  黑色：可用于文本。 同样，您可以使用其他颜色的引号或突出显示的文本。

• Light blue: Pick a color that is very different from the text color but has a good contrast with the main background color. In this case, that color would be the light blue. This color will be perfect for hyperlinks. You want links to be distinguishable from your text, but readable.

  浅蓝色：选择一种与文本颜色非常不同但与主要背景颜色具有良好对比度的颜色。 在这种情况下，该颜色将是浅蓝色。 此颜色非常适合超链接。 您希望链接与文本可区分，但可读。

• Blue: This is your main color, so it will probably set the tone for your design. You will probably use it for some backgrounds, buttons, graphs and so on.

  蓝色：这是您的主要颜色，因此可能会为您的设计设定基调。 您可能会将其用于某些背景，按钮，图形等。

• Orange: This would be your accent color. You could use it to add a touch of color to your design. Could be used on some buttons, miscellanea, icons, and graphs.

  橙色：这是您的强调色。 您可以使用它为设计添加色彩。 可用于某些按钮，其他，图标和图形。

好的，但是一致性又如何呢？ (Ok, but what about consistency?)

I like rules. Rules for me are what separate designing with a rationale/objective/justification from designing just what you feel like. So, when I was starting I would look for rules to use color. For example:

我喜欢规则。 对我来说，规则是将具有基本原理/目标/合理性的设计与仅设计您的感觉分开的设计。 因此，当我开始时，我会寻找使用颜色的规则。 例如：

• Should all (primary) buttons have the same color?
  所有(主要)按钮应该具有相同的颜色吗？
• Should all clickable elements look the same?
  所有可点击元素都应该看起来一样吗？
• Should all clickable elements have the same color?
  所有可点击元素都应具有相同的颜色吗？

And so on. The truth is there is no rule (in this case). You could have (primary) buttons of different colors, and you could use the same color for clickable and non-clickable elements. Not all clickable elements need to look like links or buttons. Something that is necessary is that you clearly show which elements are clickable and which are not. You can achieve this by defining hover states.

等等。 事实是没有规则(在这种情况下)。 您可以具有不同颜色的(主)按钮，并且可以为可单击和不可单击元素使用相同的颜色。 并非所有可点击元素都需要看起来像链接或按钮。 必要的事情是您清楚地显示哪些元素是可单击的，哪些元素不是可单击的。 您可以通过定义悬停状态来实现。

Also, however you decide to design your UI elements, you need to make sure that you will keep the design consistent throughout the platform. To do this, you could create:

另外，无论您决定设计UI元素，还是需要确保在整个平台上都保持一致的设计。 为此，您可以创建：

• A kitchen sink (if you manage HTML/CSS)

  厨房水槽 (如果您管理HTML / CSS)

• A style guide

  风格指南

• Symbols in your design software (e.g. Sketch symbols). So whenever you need an element, you don’t create it from scratch, you just use an existing symbol. If you make a change on a symbol, this change will reflect on all instances of the symbol.

  设计软件中的符号 (例如草图符号 )。 因此，只要需要元素，就不必从头开始创建它，而只需使用现有的符号即可。 如果对符号进行更改，则此更改将反映在符号的所有实例上。

颜色的实际用途 (Practical uses of color)

Color is not only meant to make your design attractive. It is also used to convey meaning. For example:

颜色不仅意味着使您的设计更具吸引力。 它也用于传达含义。 例如：

• You can use Red/yellow on warnings/notices.

  您可以在警告/通知上使用红色/黄色。

• You can implement color coding (e.g. all content of X topic will have X color).

  您可以实现颜色编码 (例如X主题的所有内容都将具有X颜色)。

• You can show status (green could mean active, red inactive and so on).

  您可以显示状态 (绿色可能表示活动，红色不活动等)。

This is great and it helps users understand and decode the information you’re showing them. However, you shouldn’t rely solely on color. Why? Because you need to consider color-blind users, who represent an 8% of the world’s population. For their sake, always try to include clear labels and/or icons to convey meaning, and use color to support this meaning.

这很棒，它可以帮助用户理解和解码您显示给他们的信息。 但是，您不应该仅依赖颜色。 为什么？ 因为您需要考虑色盲用户，他们占世界人口的8％。 为了他们的缘故，请始终尝试包括清晰的标签和/或图标来传达含义，并使用颜色来支持该含义。

更复杂的调色板 (More complex palettes)

Like we said before, you can have more complex palettes, with more colors. For example a square palette, or an analogous palette with a higher number of colors. It can work out perfectly, but as always, the decision to use more colors should be based on things like the objective of your website and its target audience. Let’s look at a couple of examples:

如我们之前所说，您可以拥有更复杂的调色板和更多颜色。 例如，正方形调色板或具有更多颜色的类似调色板。 它可以完美地工作，但是一如既往，使用更多颜色的决定应基于网站目标及其目标受众等因素。 让我们看几个例子：

松弛 (Slack)

slack.com

slack.com

条纹 (Stripe)

stripe.com

stripe.com

工具和资源 (Tools and resources)

You’ve reached the end of this article, congratulations! (and thank you for reading). I hope you found this article helpful. We’ve covered a lot of ground, but in a summarized way (yes, it could have been longer).

恭喜，您已经到了本文的结尾！ (并感谢您的阅读)。 希望本文对您有所帮助。 我们已经涵盖了很多基础知识，但是以一种概括的方式(是的，它可能更长一些)。

Please find some tools and resources to work with color in web design below:

请在下面找到一些在色彩设计中使用色彩的工具和资源：

选择颜色 (Choosing colors)

• FlatColorsUI

  FlatColorsUI

• ColorSupplyyy

  颜色供应

• Adobe Color Wheel

  Adobe色轮

• Coolors

  冷却器

• ColorDrop

  色彩下降

• Oto255

  Oto255

• Custom CSS builder

  自定义CSS构建器

检查对比 (Check contrast)

• ContrastChecker

  对比检查器

• ContrastFinder

  对比查找器

• Color contrast tips and tools for accessibility with this contrast checker

  彩色对比提示和工具，可使用此对比检查器 进行访问

色盲 (Color-blindness)

• ColorOracle: With one click see what people with common color vision impairments will see.

  ColorOracle ： 只需单击一下，就会看到常见的色觉障碍人士会看到什么。

You can read more of my blog posts at uxagustina.com.

您可以在uxagustina.com上阅读我的更多博客文章。

翻译自: https://www.freecodecamp.org/news/comprehensive-guide-for-color-usage-in-web-design-e2a9afce09fb/

neo4j图形算法综合指南