色彩设计/_色彩设计

色彩设计/

Color is a powerful force in the hands of a designer. It draws your eye, evokes emotion, and communicates meaning. To give you an idea of how important color is, in a widely cited study titled The Impact of Color on Marketing, researchers discovered that for some products, 90% of snap decisions people make about products could be based on color alone.

色彩是设计师手中的强大力量。 它吸引您的眼球，唤起情感并传达意义。 为了让您了解颜色的重要性，在一项被广泛引用的名为“颜色对市场的影响”的研究中，研究人员发现，对于某些产品，人们对产品做出的90％快速决策可能仅基于颜色。

So effectively using color is important to designs. But coming up with different color combinations is also hard. Each color has its own meaning, and there are an infinite number of combinations out there.

因此，有效使用色彩对于设计很重要。 但是想出不同的颜色组合也很困难。 每种颜色都有其自身的含义，并且有无限多种组合。

This article is designed to serve as a guide to help you come up with color palettes for your designs. It encourages you to explore more with color, which will help you develop an intuitive sense for good color combinations.

本文旨在用作指南，以帮助您提出用于设计的调色板。 它鼓励您使用颜色进行更多探索，这将有助于您形成直观的感觉，以获得良好的颜色组合。

As you explore more with color, you’ll develop an intuitive sense for good color combinations.

当您探索更多颜色时，您将形成一种直观的感觉，以获得良好的颜色组合。

选择调色板 (Choosing a color palette)

Sometimes a color palette is the result of sudden inspiration. But most of the time, it comes from taking a systematic approach.

有时调色板是突然灵感的结果。 但是大多数时候，它来自采取系统的方法。

确定目的 (Identify purpose)

Before doing anything else, first identify the purpose of your design. Good design aligns its color palette with its purpose.

在执行其他任何操作之前，首先要确定设计的目的。 好的设计使其调色板与其用途保持一致。

Ask yourself the following questions:

问问自己以下问题：

• What is the message that you want to convey with your design?
  您要传达的设计信息是什么？
• What is the purpose of your design? To be informative? To convince?
  您的设计目的是什么？ 要提供信息？ 说服？
• What emotions do you want your design to evoke?
  您希望您的设计引起什么情感？

The purpose of your design should serve as a guide for you as you choose your color palette.

选择调色板时，设计目的应为您提供指导。

确定您的受众 (Identify your audience)

People perceive colors differently. As Fairchild put it, color is a psychological phenomenon that arises within the observer. Colors have different effects on people based on their personal preference, cultural upbringing, and experiences. As such, in order to understand how people will react to your design, you need to identify your audience.

人们对颜色的理解不同。 正如Fairchild所说，颜色是观察者内部出现的一种心理现象。 颜色因人的个人喜好，文化养育和经历而对人产生不同的影响。 因此，为了了解人们对您的设计有何React，您需要确定您的受众。

While some meanings of color are universal across audiences, others are not. Green universally represents nature as it’s the color of vegetation. However, a color like red is interpreted differently across cultures. In the western world, red is associated with fire, violence, and warfare. It is also associated with love and passion. However, countries like China associate red with prosperity and happiness.

尽管颜色的某些含义在受众之间是通用的，但其他含义却并非如此。 绿色是植物的颜色，因此普遍代表自然。 但是，在整个文化中，像红色这样的颜色会有不同的解释。 在西方世界，红色与火，暴力和战争有关。 它也与爱和热情联系在一起。 但是，像中国这样的国家将红色与繁荣和幸福联系在一起。

Because colors have so many different meanings, it’s important to match the mental color models you have as a designer with the ones of your audience.

由于颜色具有多种不同的含义，因此重要的是将您作为设计师的心理颜色模型与您的听众匹配。

To read more about what colors mean across different countries and demographics, check out The Psychology of Color in Marketing and Branding and The Meaning of Color.

要了解有关颜色在不同国家和地区的含义的更多信息，请查看“营销和品牌中的颜色心理学”和“颜色的含义” 。

回顾色彩理论 (Review color theory)

When choosing a color palette, it’s sometimes helpful know a little color theory. Color theory is a logical structure and practical guide for mixing colors. It encompasses everything from the color wheel to the meaning of individual colors.

选择调色板时，了解一点颜色原理有时会很有帮助。 颜色理论是混合颜色的逻辑结构和实用指南。 它涵盖了从色轮到各个颜色含义的所有内容。

A good primer is Basic Color Theory by Canva and Color Theory 101 by Hubspot. You can read about an interesting application of color theory in Why Is Facebook Blue? The Science Behind Colors In Marketing.

很好的入门书是Canva撰写的Basic Color Theory和Hubspot撰写的Color Theory 101 。 您可以在“ 为什么是Facebook Blue？”中阅读有关颜色理论的有趣应用。 营销色彩背后的科学 。

寻找灵感 (Find inspiration)

Sometimes it’s hard to visualize the right color palette for your design. That’s okay, great artists steal. Or rather, they take inspiration from other artists.

有时很难为您的设计可视化正确的调色板。 没关系，伟大的艺术家偷了 。 或者更确切地说，他们从其他艺术家那里获得灵感。

The usual suspect for color palette inspiration are sites like Dribbble and Behance. If you want to find color inspiration for a specific design style like material design, you can use a site like MaterialUI. The flat design equivalent can be found at FlatUIColors.

经常受到调色板灵感启发的是Dribbble和Behance等网站。 如果要查找诸如材料设计之类的特定设计风格的色彩灵感，可以使用MaterialUI这样的网站。 可以在FlatUIColors找到等效的平面设计。

Those sites are useful, but try looking at designs that come from outside of the specific medium you are designing for. Doing so will help you come up with unexpectedly unique and pleasing color palettes. As an example, you could look at interior designs.

这些网站很有用，但是请尝试查看来自您要设计的特定媒体之外的设计。 这样做将帮助您提出意想不到的独特且令人愉悦的调色板。 例如，您可以查看室内设计。

If you want something different, look for color inspiration in the design of other cultures. For example, Korean music video set designs are known for their colorful and eye catching color palettes. Each frame can serve as a source of inspiration.

如果您想要不同的东西，请在其他文化的设计中寻找色彩灵感。 例如，韩国音乐录影带设计以其色彩鲜艳，醒目的调色板而闻名。 每个框架都可以作为灵感的来源。

You don’t have to go to Korea to find color inspiration. It’s everywhere, including your daily life. Next time you go out, stop to appreciate the colors around you.

您不必去韩国就可以找到色彩灵感。 它无处不在，包括您的日常生活。 下次您外出时，请停止欣赏周围的颜色。

When you find something that inspires you, create a color palette for it. You can use the eye dropper tool in your favorite design program to tease out a color palette and make adjustments if necessary.

当发现启发您的东西时，为其创建调色板。 您可以在自己喜欢的设计程序中使用滴管工具来调出调色板，并在必要时进行调整。

建立设计系统 (Establish a design system)

A design system, sometimes called a style guide, is a framework that encapsulates all the elements that go into your design. This includes everything from buttons to typography. Consider things like what kinds of buttons you will use and what your navigation bar looks like.

设计系统(有时称为样式指南)是一个框架，其中封装了设计中涉及的所有元素。 这包括从按钮到排版的所有内容。 考虑诸如您将使用哪种类型的按钮以及导航栏的外观之类的事情。

For an example of a design system, check out the design system of Salesforce. For even more examples, here is a list of 50 Meticulous Style Guides Every Startup Should See Before Launching.

有关设计系统的示例，请查看Salesforce的设计系统。 有关更多示例，这里列出了每个初创公司在启动前都应参阅的50种细致的样式指南 。

It’s helpful to establish a design system before choosing a color palette, even if it’s just a rough sketch. Doing so will give you an idea of what elements you have and how your colors could apply to them.

选择调色板之前建立设计系统非常有帮助，即使只是粗略的草图。 这样做将使您了解所拥有的元素以及颜色如何应用于这些元素。

When choosing a color palette for your design, it’s best to stick to the KISS (Keep it simple, stupid) principle. The fewer the colors, the better. For most design systems, the following structure is a good start:

在为设计选择调色板时，最好遵循KISS(保持简单，愚蠢)原则 。 颜色越少越好。 对于大多数设计系统，以下结构是一个好的开始：

• Background
  背景
• Primary accent
  主要口音
• Secondary accent
  次要重音
• Error color
  错误颜色
• Success color
  成功色

The primary color is the color you most often use for important buttons and accents. For many companies, this is also the color of their logo.

原色是您最常用于重要按钮和装饰的颜色。 对于许多公司来说，这也是其徽标的颜色。

The secondary color is the color you use to differentiate secondary actions from primary ones. For example, primary and secondary buttons. Error and success colors, typically red and green, convey design states. For example, success or error notifications.

次要颜色是用于区分次要操作和主要操作的颜色。 例如，主按钮和辅助按钮。 错误和成功颜色(通常为红色和绿色)传达设计状态。 例如，成功或错误通知。

选择一个调色板 (Choose a color palette)

Now that you are armed with inspiration and a rough sketch of a design system, it’s time to choose a color palette.

既然您已经有了灵感和设计系统的草图，现在该是选择调色板的时候了。

For a basic color palettes, I like to put my colors side by side, just like an artists would for their paint palette.

对于基本调色板，我喜欢将我的颜色并排放置，就像画家为其绘画调色板所做的那样。

This is the time to take all your color inspiration and create color palettes out of them. The more the better. Don’t be afraid to experiment with colors on your own as well.

现在是时候利用您所有的色彩灵感并从中创建调色板了。 越多越好。 也不要害怕自己尝试颜色。

When narrowing down your color palette options, think back to the first two sections where you identified the purpose and audience of your design. Ask yourself the following questions:

在缩小调色板选项的范围时，请回头看一下前两个部分，在其中确定了设计的目的和受众。 问问自己以下问题：

• What colors are accessible?

  什么颜色都可以访问 ？

• What colors have visual impact and draw your eye?
  哪些颜色具有视觉冲击力并吸引您的眼球？
• Do you need a light or dark color scheme? What time of the day will people use your product?
  您需要浅色还是深色方案？ 人们会在一天中的什么时候使用您的产品？
• What mood do you want your design to convey? Does any one color palette you have do this better than the others?
  您希望您的设计传达什么心情？ 您拥有的任何一种调色板都比其他调色板做得更好吗？

As I mentioned in the last section, colors will have different roles in your design system. This also means that each color caries a different weight in your system. For example, your background colors will be used more often than accent colors.

正如我在上一节中提到的，颜色在设计系统中将扮演不同的角色。 这也意味着每种颜色在您的系统中占有不同的权重。 例如，您的背景色将比强调色更常用。

Because of this, it’s sometimes a good exercise to create a throwaway design composed of shapes of different sizes, with each size roughly equaling the frequency of occurrence and average surface area of the color on a given page.

因此，有时创建一个由不同大小的形状组成的一次性设计是一个不错的练习，每个大小大致等于给定页面上颜色的出现频率和平均表面积。

As an example, here is Invision’s color palette.

例如，这是Invision的调色板。

A geometric representation could look something like this.

几何表示可能看起来像这样。

应用调色板 (Applying color palettes)

To give you an idea of how to apply colors to design systems, let’s take a look at Airbnb. Airbnb’s primary color is Rausch, named after the street the company originated from. Kazan serves as a secondary color and the two grays are used as backgrounds colors.

为了让您了解如何在设计系统中应用颜色，让我们看一下Airbnb 。 Airbnb的原色是Rausch，以公司起源的街道命名。 喀山用作第二色，而两种灰色用作背景色。

For most pages, Airbnb uses foggy grey as a background. You can see that they use the rausch as their primary color to accent important actions like requesting to book a listing.

对于大多数页面，Airbnb均使用雾灰色作为背景。 您会看到他们以粗俗为主要色彩来强调重要动作，例如要求预订房源。

Kazan, the turquoise color, is used to catch and engage your eye. Notice how it compliments the primary color.

喀山(绿松石)颜色用来吸引和吸引您的眼睛。 注意它如何补充原色。

For error messages, Airbnb uses a light red, arguably a shade of rausch. The red, along with the exclamation mark, immediately draws your eye and notifies you of the state of the system.

对于错误消息，Airbnb使用浅红色，可以说是浓淡的阴影。 红色以及感叹号会立即引起您的注意，并通知您系统状态。

Start off without any color in your design. Focus on layout and placement of elements. After you’re satisfied with what you have, then you can start applying your color palette to your design.

开始时您的设计没有任何颜色。 专注于元素的布局和放置。 对所拥有的东西感到满意之后，就可以开始将调色板应用于设计了。

Think of visual hierarchy in your design. Consider what design components you want to highlight and assign the appropriate color. Also, consider using different shades of your colors for things like hover and click states.

在设计中考虑视觉层次。 考虑要突出显示哪些设计组件并分配适当的颜色。 另外，请考虑将各种颜色的阴影用于悬停和单击状态。

结语 (Wrap up)

Color is all about experimentation and iteration. If you want to become better at working with color, the only answer is to do more work. Think of color as an additive. If you have the layout and functionality of your design down, then you can experiment with as many color palettes as you want.

颜色全是关于实验和迭代的。 如果您想变得更好地使用色彩，唯一的答案就是要做更多的工作。 将颜色视为添加剂。 如果您掌握了设计的布局和功能，则可以尝试使用任意数量的调色板。

Learning how to design with colors is infinitely valuable to a designer. As you get better at picking color palettes, you develop the ability to visualize colors combinations on a design before even touching a design program.

学习如何用颜色进行设计对于设计师来说是无价的。 随着您更好地选择调色板，您可以开发出可视化设计上颜色组合的功能，甚至无需触摸设计程序即可。

I would love to know know how you work with color. What’s your process? Feel free to leave a note or Tweet to me.

我想知道您如何处理色彩。 你的过程是什么？ 随时给我留言或发推文 。

P.S. If you liked this article, it would mean a lot if you hit the recommend button or share with friends.

附言：如果您喜欢这篇文章，那么如果您按“推荐”按钮或与朋友分享，那将有很多意义。

翻译自: https://www.freecodecamp.org/news/designing-in-color-abd358660a7b/

色彩设计/