本文介绍了UI设计中颜色使用的10条关键原则，帮助设计师更好地理解和应用色彩在用户界面设计中的作用。
ui设计颜色的使用
重点 (Top highlight)
1.颜色术语 (1. Color Terminology)
Color terminology forms our foundation of color knowledge. Think of color terms like hue, tint, and shade as tools that we can employ to develop unique color palettes.
颜色术语构成了我们颜色知识的基础。 将诸如色调，色调和阴影之类的颜色术语视为我们可以用来开发独特调色板的工具。
•色相 (• Hue)
Hue is a technical term for color. Hue refers to the parent color — a saturated color without white or black added to it.
色相是色彩的技术术语。 色相是指父色-一种饱和色，没有添加白色或黑色。
•色调 (• Tint)
A tint is created when white is added to a hue.
将白色添加到色调时，将创建色调。
•阴影 (• Shade)
A shade is created when black is added to a hue.
将黑色添加到色调时，将创建阴影。
•音调 (• Tone)
A tone is created when gray, both tint (white) and shade (black), are added to a hue.
当将色调(白色)和阴影(黑色)都添加到色调时，会创建一个色调。
•价值 (• Value)
Value refers to the lightness or darkness of a color. It indicates the quantity of light reflected.
值是指颜色的明暗程度。 它指示反射的光量。
•饱和度 (• Saturation)
Saturation refers to the brilliance and intensity of a color. Highly saturated colors are vibrant and radiant, while low saturated colors are dull.
饱和度是指颜色的亮度和强度。 高度饱和的颜色充满活力和光芒，而低饱和度的颜色则暗淡。
2.层次结构 (2. Hierarchy)
When an element’s appearance contrasts with its surroundings, it indicates that element has higher importance. We can use color and color weight to establish a hierarchy within an interface.
当元素的外观与其周围环境形成对比时，表明该元素具有更高的重要性。 我们可以使用颜色和颜色权重在接口内建立层次结构。
By using tints of color, we can assign varying levels of importance to elements.
通过使用色彩，我们可以为元素分配不同的重要性级别。
If an element is more important than another, it should be of a higher visual weight. This makes it easy for a user to quickly skim the page and distinguish between the important and less important information.
如果一个元素比另一个元素更重要，则它应该具有更高的视觉重量。 这使用户易于快速浏览页面并区分重要和次要信息。
The more prominent, bolder information is what the user’s eyes will be drawn to first, and then they will move on to the supporting information below it.
更加醒目，大胆的信息是首先要吸引用户的眼睛，然后他们将继续浏览其下方的支持信息。
3.富有表现力 (3. Expressive)
Show brand colors at memorable moments that reinforce your brand’s unique style.
在令人难忘的时刻展示品牌色彩，以增强您品牌的独特风格。
Think of your brand colors like salt and pepper on a plate of avocado toast. Too much salt and it overpowers the natural flavors, too little and it’s bland.
考虑一下您的品牌颜色，例如一盘鳄梨吐司上的盐和胡椒粉。 盐分过多，会压倒自然风味，而盐分过少，则平淡无奇。
When adding colors to reinforce your brand to the interface, be thoughtful about when and where it’s added.
在添加颜色以增强品牌在界面上的效果时，请考虑添加时间和位置。
4.包容性 (4. Inclusivity)
Designing a product is similar to building a public building like a library or a school — it needs to be inclusive to all. Just ask Domino’s, they were sued by a blind man who could not access their website because it wasn’t accessible. Don’t be like Domino’s, design for accessibility.
设计产品类似于在图书馆或学校之类的公共建筑中建造建筑-它必须包含所有人。 只是问问Domino， 他们被一个盲人起诉，因为无法访问他们而无法访问他们的网站 。 不要像Domino那样设计可访问性。
Web Content Accessibility Guidelines (WCAG) have recommendations to ensure colors in our interface are accessible to people with motor, auditory, and cognitive disabilities. For example, their standard for text requires at least a 4.5:1 contrast ratio.
Web内容可访问性指南(WCAG)提出了一些建议，以确保运动，听觉和认知障碍者可以访问我们界面中的颜色。 例如，他们的文字标准至少需要4.5：1的对比度。
To ensure you’re meeting these standards, download Stark which will check if your designs are accessible or not. You can also simulate color blindness and adjust as needed with their plugin.
为了确保您符合这些标准，请下载Stark ，它将检查您的设计是否可访问。 您还可以模拟色盲并根据需要使用其插件进行调整。
Often we’re trying to design what looks good and neglect to consider the different users that will be interacting with our product.
通常，我们会尝试设计看起来不错的产品，而忽略了将与我们的产品进行交互的不同用户。
As I’ve matured as a designer, I’ve come to terms with all the various constraints that will undermine my idea of perfect design. ADA compliance is one of such constraints.
随着我逐渐成为一名设计师，我已经接受了所有会破坏我的完美设计理念的各种限制。 ADA合规性就是这样的限制之一。
We can get away with this when we’re trying to score Dribbble likes, but it’s not a good practice when developing a product for real humans.
当我们尝试给Dribbble的喜欢度打分时，我们可以避免这种情况，但是在为真实人类开发产品时，这不是一个好习惯。
5.意义 (5. Meaning)
Colors evoke different feelings or emotions, so by understanding the psychology of color, we can utilize brand colors that resonate with our target audience.
颜色会引起不同的感觉或情感，因此，通过了解颜色的心理，我们可以利用与目标受众产生共鸣的品牌颜色。
It’s important to realize who your audience is and remember, the perception of colors varies from culture to culture and region to region. For example, in western culture, white is often associated with weddings, while in southeastern culture, white color is perceived as the color of mourning.
重要的是要认识到您的观众是谁，并记住他们， 对颜色的感知因文化而异，因地区而异 。 例如，在西方文化中，白色通常与婚礼有关，而在东南文化中，白色被视为哀悼的颜色。
The more you understand about color and it’s meanings, the more powerful it can be.
您对颜色及其含义了解得越多，功能就越强大。
Companies use colors in their branding and marketing as a tactic to influence our emotions all the time. Notice how almost every fast food restaurant uses red and yellow in its branding? That’s because red triggers stimulation, appetite, hunger, and it attracts attention — while yellow triggers feelings of happiness and friendliness.
公司在品牌和行销活动中都使用色彩作为一种策略，以随时影响我们的情绪。 请注意，几乎每家快餐店的品牌都使用红色和黄色？ 这是因为红色触发刺激，食欲，饥饿，并引起人们的注意，而黄色触发快乐和友善的感觉。
6.极限颜色 (6. Limit color)
By limiting the use of color in your app, the areas that do receive color receive more attention, such as text, images, and individual elements like buttons.
通过限制在应用程序中使用颜色，可以使确实接收颜色的区域受到更多关注，例如文本，图像以及按钮等单个元素。
You’ll notice in many apps that have a lot of colorful posts and unpredictable content like Instagram or Twitter, their interface tends to be pretty plain. This is subtle, but it takes the focus away from the interface and focuses it on the content.
您会注意到，在许多应用程序中，发布了很多色彩丰富的帖子，并拥有不可预测的内容，例如Instagram或Twitter，它们的界面往往非常简洁。 这是微妙的，但它使焦点从界面移开，并将其聚焦在内容上。
7.状态 (7. State)
Color can provide information about the state of an app, its components, and elements.
颜色可以提供有关应用程序状态，其组件和元素的信息。
Color is one way that we can display the change of state in our interface. By muting the colors of a button, it can indicate that a button is disabled or by highlighting it in red, it signals an error. We should also accompany our error colors with an error message and an icon to ensure clarity and to appeal to color-blind users.
颜色是我们可以在界面中显示状态变化的一种方式。 通过静音按钮的颜色，可以指示按钮已禁用，或者通过将其突出显示为红色来表示错误。 我们还应该在错误颜色旁边添加错误消息和图标，以确保清晰度并吸引色盲用户。
8.一致性和上下文 (8. Consistency & context)
Color usage in an interface should be consistent, so colors always mean the same thing even when the context changes.
接口中的颜色用法应保持一致，因此即使上下文发生变化，颜色也始终是同一件事。
If red is used in our branding, then we should avoid using it to notify about error states. We can use an alternative color like yellow to avoid confusion.
如果在我们的商标中使用红色，则应避免使用它来通知错误状态。 我们可以使用其他颜色(例如黄色)来避免混淆。
This is an easy problem to solve, so there’s no reason to avoid using red or yellow in our branding.
这是一个容易解决的问题，因此没有理由避免在我们的品牌中使用红色或黄色。
9.调色板 (9. Color Palettes)
Now the million-dollar question, how do I get the perfect color palette?
现在，价值数百万美元的问题， 如何获得完美的调色板？
It starts with a simple understanding of color theory and basic tools.
它从对颜色理论和基本工具的简单理解开始。
第1步-原色和系统颜色 (Step 1 — Primary & system colors)
I like to start with a primary color that I will determine based on preference, research, or the color meanings that I shared above in #5.
我喜欢从将根据偏好，研究或我在上面＃5中分享的颜色含义确定的原色开始。
The primary color that I choose is my brand color.
我选择的主要颜色是我的品牌颜色。
Once I have a primary color, I need colors for text, background, containers, and so on.
一旦有了原色，就需要为文本，背景，容器等添加颜色。
Typically I’ll select a dark color that I’ll use for my text and a light greyish color for my background.
通常，我会选择用于文本的深色和用于背景的浅灰色。
第2步-创建调色板 (Step 2 — Creating a palette)
Once I have selected my base colors for my UI, I put those colors into the Google color tool (near the bottom) to get the different shades and tints of that color.
为UI选择基本颜色后，我将这些颜色放入Google颜色工具 (位于底部附近)中，以获取该颜色的不同阴影和色度。
This isn’t always perfect, but it’s a simple way of generating a near-perfect color palette that I can add to or adjust later as needed.
这并不总是完美的，但是它是生成近乎完美的调色板的一种简单方法，我可以根据需要添加或稍后进行调整。
If I need complementary colors or to test accessibility, I can do all of that with the Google color tool. It’s a one-stop-shop.
如果我需要补充颜色或测试辅助功能，则可以使用Google颜色工具完成所有这些操作。 这是一站式商店。
步骤3 —绑在一起 (Step 3 — Tie it all together)
10. 60–30–10规则 (10. The 60–30–10 rule)
60% is your dominant color, 30% is a secondary color, and 10% is for accent color.
60％是主色，30％是辅助色，10％是主色。
I first learned about this concept from Wojciech Zieliński article, How to use colors in UI Design:
我首先从WojciechZieliński的文章， 如何在UI设计中使用颜色了解了这一概念：
“This interior design rule is a timeless decorating technique that can help you put a color scheme together easily. The 60% + 30% + 10% proportion is meant to give balance to the colors. This formula works because it creates a sense of balance and allows the eye to move comfortably from one focal point to the next.”
“这种室内设计规则是一种永恒的装饰技术，可以帮助您轻松地将配色方案组合在一起。 60％+ 30％+ 10％的比例是为了使颜色平衡。 这个公式之所以有效，是因为它创造了一种平衡感，并使眼睛舒适地从一个焦点移动到另一个焦点。”
Similar to tips I’ve mentioned previously, like using color sparingly to add emphasis and reinforce branding, 60–30–10 is a rough tool for ensuring we don’t go over the top with color.
与我之前提到的技巧类似，例如少量使用颜色来增加强调和加强品牌烙印，60–30–10是确保我们不会在色彩上占上风的粗略工具。
I also like to take a few steps back from my interface and squint my eyes. The blurred image will give me a better idea of the hierarchy, and if I’m using too much color.
我还想从界面上退后几步，and起眼睛。 如果我使用的颜色过多，模糊的图像将使我对层次结构有更好的了解。
奖励：色彩工具和资源 (Bonus: Color Tools & Resources)
Color Tool Material Design (scroll near the bottom to find it)
色彩工具材料设计 (在底部附近滚动以找到它)
This is the best tool I know of for color palette generation. It utilizes an algorithm that creates palettes that are accessible and aesthetically pleasing.
这是我所知道的用于生成调色板的最佳工具。 它利用一种算法创建可访问且美观的调色板。
Dribbble is my favorite place to get UI inspiration. Their search by color feature makes it simple to get ideas for how other designers are using specific colors in their designs.
Dribbble是我最喜欢获得UI灵感的地方。 通过颜色搜索功能，可以轻松了解其他设计师如何在设计中使用特定颜色。
Coolors is a great place to browse popular color palettes and quickly copy them into designs.
Coolors是浏览流行调色板并将其快速复制到设计中的好地方。
Shaderade is a fast and easy tool for generating monochromatic color schemes utilizing numerically accurate tints and hues.
Shaderade是一种快速简便的工具，可利用数值精确的色彩和色调生成单色配色方案。
👋 Let’s be friends! Follow me on Twitter and Dribbble and connect with me on LinkedIn. Don’t forget to follow me here on Medium as well for more design-related content.
be 让我们成为朋友！ 在Twitter和Dribbble上关注我，并在LinkedIn上与我联系。 别忘了在Medium上关注我，以获取更多与设计相关的内容。
翻译自: https://uxdesign.cc/10-principles-for-color-usage-in-ui-design-65174b213004
ui设计颜色的使用
扫一扫
569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
