ux設計中的各種地圖

Color is the mother tongue of the subconscious.

顏色是潛意識的母語。

— Carl Jung

—榮格

Color has more to say than meets the eye. As a building block of visual language, color highlights, guides attention, and unifies elements. In UX, color reinforces the functional and aesthetic qualities of a product.

顏色比眼睛更具說服力。 作為視覺語言的組成部分，顏色突出顯示，引導注意力并統一元素。 在UX中，顏色增強了產品的功能和美學品質。

Color wears many hats. Branding sees color as mood and perception. Development sees color in terms of SASS and LESS functions. UX design sees color as a consistent system across platforms. Overall, color is a versatile tool in conveying different types of information.

顏色戴很多帽子。 品牌將色彩視為心情和知覺。 在SASS和LESS功能方面，開發看到了顏色。 UX設計將色彩視為跨平臺的一致系統。 總體而言，色彩是傳達不同類型信息的通用工具。

To improve color decisions, let’s cover how to: pick a palette, prioritize colors, consider data visualization, and test accessibility.

為了改善顏色決策，讓我們介紹如何：選擇調色板，確定顏色優先級，考慮數據可視化以及測試可訪問性。

使用顏色理論選擇調色板 (Pick palette using color theory)

Understanding a few color elements will help you pick the right colors for your palette. The color wheel, a derivative of Newton’s experiments with light, will help you.

了解一些顏色元素將幫助您為調色板選擇正確的顏色。 色輪是牛頓的光實驗的衍生產品，將為您提供幫助。

色相飽和度 (Hue & Saturation)

Hue is a specific color or degree on the color wheel.

色相是色輪上的特定顏色或等級。

Saturation means the intensity of a color. At 100% saturation, color is at its purest.

飽和度是指顏色的強度。 在100％飽和度下，色彩是最純凈的。

色調，色調和陰影 (Tint, tone, & shade)

Mixing pure color with neutrals creates lighter and darker variations.

將純色與中性相混合會產生較淺和較深的變化。

Tint — color mixed with white

淡色 —顏色與白色混合

Tone — color mixed with grey

色調 -與灰色混合的顏色

Shade — color mixed with black

陰影 -顏色與黑色混合

和諧的調色板 (Harmonious palettes)

“All colors are the friends of their neighbors and the lovers of their opposites.” — Marc Chagall

“所有顏色都是鄰居的朋友和對立的情人。” —馬克·夏加爾

Based on the color wheel, these palettes consist of colors that work harmoniously together.

這些調色板基于色輪，由和諧地協同工作的顏色組成。

We’ll go over monochromatic, analogous, complementary, split-complementary, and triadic palettes.

我們將介紹單色，相似，互補，分裂互補和三重調色板。

Monochromatic consists of tints, tones, and shades of one hue.

單色由色調，色調和一種色調的陰影組成。

Monochromatic單色

Create an analogous palette from three colors sitting next to each other.

用彼此相鄰的三種顏色創建類似的調色板。

Analogous類似的

Complementary contains two opposite colors, which creates high contrast.

互補色包含兩種相反的顏色，可產生高對比度。

Complementary補充

Split-complementary consists of three colors, with two next to the opposite of one.

分補互補色由三種顏色組成，其中兩種顏色相鄰于另一種顏色。

Split- complementary分裂互補

A triadic palette has three hues equally spaced around the wheel.

甲三元調色板具有三個色調圍繞車輪等距隔開。

Triadic三聯體

獲得靈感 (Get inspired)

Here’s a few ways to get started on your own color palette.

這是您開始使用自己的調色板的幾種方法。

Create gradients: play with creating gradients from an harmonious palette.

創建漸變：從和諧調色板創建漸變。

gradients from a split-complementary palette分割互補調色板中的漸變

Use photographs: choose a photograph that moves you and pick colors from it.

使用照片：選擇能移動您的照片并從中選擇顏色。

Try Coolors: it’s a color tool that easily generates different palettes and lets you fine-tune choices.

嘗試Coolors ：這是一種色彩工具，可以輕松生成不同的調色板，并讓您微調選擇。

優先處理主要和次要 (Prioritize primary & secondary)

Prioritize and define the colors in your design system. Like an intuitive library, organized colors help your internal team find what they’re looking for. They also help your team create visual consistency for your users. Aim for precise primary colors, sufficient secondary colors, and clear names for each (Treder, 2017).

在設計系統中確定顏色的優先級并進行定義。 就像直觀的庫一樣，有條理的顏色可以幫助您的內部團隊找到他們想要的東西。 它們還可以幫助您的團隊為用戶創建視覺一致性。 力求精確的原色，足夠的輔助色和清晰的名稱(Treder，2017年) 。

主 (Primary)

Primary colors are used frequently in your interfaces. They include colors in branding, interaction elements, layouts, and text. Add a simple name along with its HEX number: violet: #8322DD.

界面中經常使用原色。 它們包括商標，交互元素，布局和文本中的顏色。 添加一個簡單名稱及其十六進制數字： violet：＃8322DD。

次要的 (Secondary)

Secondary colors are used occasionally, and consists of accents based on primary. Create by hand-picking, CSS functions (darken, lighten by HSL %), or both (Curtis, 2016). Secondary colors can be used to express system feedback such as task success, error, or warning.

次要顏色偶爾使用，由基于原色的重音組成。 通過手工挑選，CSS函數(變暗，HSL％變亮)或同時通過兩者(Curtis，2016年)創建 。 輔助顏色可用于表示系統反饋，例如任務成功，錯誤或警告。

色調疊 (Tint stack)

Tint stacks provide flexible choices. Try to empower your team with enough choice (3–4 steps) but not so many that it compromises consistency.

色調堆棧提供了靈活的選擇。 嘗試賦予您的團隊足夠的選擇權(3–4個步驟)，但選擇的范圍不太多，以至于損害了一致性。

You can create stacks using HSL percentages to easily implement with CSS functions. Include the color name, HSL lightness (0 -100), and HEX number: violet-lighter-20: #B47AEA.

您可以使用HSL百分比創建堆棧，以輕松使用CSS函數實現。 包括顏色名稱，HSL亮度(0 -100)和十六進制編號： violet-lighter-20：＃B47AEA 。

開始吧 (Get started)

Eva Colors: this AI tool helps you find secondary colors for notifications, based on a primary.

Eva Colors ：此AI工具可幫助您根據原色查找通知的輔助色。

Coolors for tint stacks: start with one color and change HSL lightness by increments.

著色疊層的冷卻器 ：從一種顏色開始，并以遞增的方式更改HSL亮度。

Using Coolors to create tint stacks with 15% increments使用冷卻器以15％的增量創建色調堆棧

Design Systems Repo: for inspiration, look through design systems of other companies to see how they organize colors (everyone does it a little differently).

Design Systems Repo ：從其他公司的設計系統中尋找靈感，以了解他們如何組織顏色(每個人的做法有所不同)。

考慮數據可視化 (Consider data visualization)

For data visualization, use color to emphasize the story of your data (Yi, 2019). You may need 6–12 colors to cover all use cases, depending on data complexity. Create a flexible tint stack with a wide range in hue and brightness.

對于數據可視化，使用顏色強調數據的故事性(Yi，2019) 。 根據數據的復雜程度，您可能需要6–12種顏色才能涵蓋所有用例。 創建具有廣泛色相和亮度的靈活色調堆棧。

Types of data and recommended color palette:

數據類型和推薦的調色板：

分類的 (Categorical)

Categorical consists of non-numeric categories (country, gender, names). For distinct categories, a color palette with hues spaced apart in the color wheel works best.

分類由非數字類別(國家，性別，姓名)組成。 對于不同的類別，色相在色輪中間隔開的調色板效果最好。

A line graph with a categorical palette帶有分類調色板的折線圖

順序的 (Sequential)

Sequential data has numeric or ordered values. To indicate numeric steps, colors should gradually change hue and lightness. Much like analogous palette, use color hues that sit next to each other. Low values should start light, and high values go dark.

順序數據具有數字或有序值。 為了指示數字步長，顏色應逐漸改變色調和亮度。 就像類似的調色板一樣，使用彼此相鄰的色相。 較低的值應開始變亮，較高的值將變暗。

A heat map with a sequential palette具有順序調色板的熱圖

發散 (Diverging)

Diverging data also contains numeric value. It’s basically two sequential palettes that meet at a central point. Diverging can have negative to positive values, or opposites on a spectrum. Keep the central point light, and allow colors to get darker further from center.

差異數據還包含數值。 基本上是兩個相繼的調色板在一個中心點相遇。 發散可以具有負值到正值，或者在頻譜上相反。 保持中心點較亮，并允許顏色從中心進一步變暗。

A stacked bar chart with a diverging palette堆疊的條形圖和不同的調色板

可視化 (Get visualizing)

Let’s look at a few tools that will make it easier to pick your color palette for data visualization.

讓我們看一些工具，這些工具將使您更輕松地選擇調色板以進行數據可視化。

ColorBrewer: browse through color palettes (sequential, diverging, categorical), and visualize them on a map.

ColorBrewer ：瀏覽調色板(順序，發散，分類)，并在地圖上可視化它們。

Viz Palette: this tool lets you see color palettes on different data visualization charts.

Viz Palette ：此工具可讓您在不同的數據可視化圖表上查看調色板。

Viz Palette web pageViz調色板網頁

測試可訪問性 (Test accessibility)

Test your color palette for accessibility, to ensure users with varying visual abilities can see each color. Testing for accessibility is a step towards a more usable and legible product, strengthening its experience. Check early and often that colors follow World Wide Web Consortium (W3C) guidelines.

測試您的調色板的可訪問性，以確保具有不同視覺能力的用戶可以看到每種顏色。 對可訪問性進行測試是邁向更易用，更易讀的產品的一步，可增強其體驗。 盡早檢查并經常檢查顏色是否符合萬維網聯盟(W3C)準則。

對比 (Contrast)

Look for sufficient color contrast of text on background, as well as contrast between colors used together in data visualization. With low contrast, text become harder to read, and data harder to distinguish. W3C recommends the following contrast ratios:

尋找背景上文本的足夠的顏色對比度，以及在數據可視化中一起使用的顏色之間的對比度。 對比度低時，文本將變得更難以閱讀，并且數據也難以區分。 W3C建議使用以下對比度：

• 4.5:1 for text
  文字4.5：1
• 3:1 for large text (14pt bold, 18pt regular)
  3：1代表大文字(14pt粗體，18pt普通)
• 3:1 for icons
  3：1的圖標

Meeting W3C’s 4.5:1 and 3:1 contrast ratios滿足W3C的4.5：1和3：1對比度

視覺提示 (Visual cues)

Try to use multiple visual cues in addition to color in communicating important states. Using colors alone to convey information may not be as accessible for users with color blindness (Reyna, 2018). For example, you can include an icon as well as color and text for a system notification.

除了傳達重要狀態的色彩外，還嘗試使用多種視覺提示。 色盲用戶可能無法單獨使用顏色來傳達信息(Reyna，2018) 。 例如，您可以包括圖標以及系統通知的顏色和文本。

無障礙范圍 (Accessible ranges)

Create contrast pairs of different text colors on backgrounds. Then show accessible ranges based on progression of your neutral tints (Curtis, 2016). This helps your team see exactly where pairs become inaccessible.

在背景上創建不同文本顏色的對比對。 然后根據中性色調的進展顯示可訪問范圍(Curtis，2016年) 。 這可以幫助您的團隊確切地了解無法訪問的地方。

進行測試 (Get testing)

Accessible Color Matrix: from your color palette, this creates a matrix (range) of accessible pairs.

可訪問的顏色矩陣 ：從您的調色板中，創建可訪問對的矩陣(范圍)。

Accessible color matrix web page可訪問的顏色矩陣網頁

Tanaguru: quickly test a color pair for contrast ratio.

Tanaguru ：快速測試顏色對的對比度。

Coolors: Coolors also simulates how your palette will look for different types of color blindness.

冷卻器 ：冷卻器還模擬您的調色板在不同類型的色盲情況下的外觀。

結論 (Conclusion)

Here’s quick recap on what we learned:

以下是我們學到的內容的快速回顧：

• using color theory to pick an harmonious palette
  用色彩理論挑選一個和諧的調色板
• prioritizing colors into primary and secondary
  將顏色分為主要和次要
• considering data visualization and its data types
  考慮數據可視化及其數據類型
• testing for color accessibility early and often
  盡早測試色彩可及性

We use color with its versatile spectrum, in an attempt to express the depth of our human experience. I hope this post was helpful, and that you come away with another view of color in the light of UX.

我們將色彩與多種用途的光譜結合使用，以期表達人類經驗的深度。 我希望這篇文章對您有所幫助，并且希望您從UX的角度出發對顏色有了另一種看法。

翻譯自: https://uxdesign.cc/how-to-use-color-in-ux-design-9ba6db4807d5

ux設計中的各種地圖

總結

以上是生活随笔為你收集整理的ux设计中的各种地图_如何在UX设计中使用颜色的全部內容，希望文章能夠幫你解決所遇到的問題。

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