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)

Framer成幀器

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)

me我

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.com/colors

  Dribbble.com/colors

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.co

  Coolors.co

Coolors is a great place to browse popular color palettes and quickly copy them into designs.

Coolors是瀏覽流行調色板并將其快速復制到設計中的好地方。

• Shaderade

  陰影

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上關注我，以獲取更多與設計相關的內容。

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/10-principles-for-color-usage-in-ui-design-65174b213004

ui設計顏色的使用

總結

以上是生活随笔為你收集整理的ui设计颜色的使用_UI设计中颜色使用的10条原则的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。