在 UI/UX 设计领域，颜色是一个基本组成部分。颜色唤起情感，创建层次结构并区分设计元素。

有效利用颜色可以显着增强网站或移动应用程序的可用性和整体体验。然而，为界面确定正确的调色板需要对颜色原理有深刻的理解。

本文将深入探讨色彩的各种原则，以及它们在与设计交互时如何影响用户的感知和决策。我们还将探讨色彩心理学在 UI 设计中的应用，并提供选择和谐调色板的实用技巧。

读完本文，我们将更好地了解如何在 UI 设计过程中将颜色用作战略工具。

01

颜色术语

色调

色调只是颜色的别称。

色调是指元素的纯色，例如红色、蓝色或黄色。

着色

色调是颜色的较浅版本，柔和的颜色通常是有色的。色调通常用于背景、叠加层或需要柔和视觉效果而又不会压倒内容的元素。

例如，使用较暗的背景和较浅的文本可以提高可读性，而使用较浅的重音或突出显示可以引起对重要交互元素的注意。

阴影

饱和

饱和度是指颜色中灰色的量。

高度饱和的颜色往往会引人注目，可用于将用户的注意力吸引到关键的 UI 组件或交互元素上。

另一方面，不饱和或柔和的颜色可以营造出更加柔和和优雅的美感。

02

色彩心理学

色彩心理学研究色彩如何影响人类行为、情绪和情绪。它探讨了不同的颜色如何影响我们的感知、态度和行为。

颜色的含义和关联可能因文化和个人而异，但某些颜色通常与特定的情感或品质相关联。

蓝色

蓝色通常与安宁、冷静、信任和放松的感觉联系在一起。

它是许多科技公司、社交媒体平台、金融机构医疗保健以及与健康相关的应用程序和网站的流行颜色选择。

它通常与信任、安全和稳定相关。

Arya Wijaya Kusuma的钱包应用程序

Evan Place的Hatch App 网站

红色

红色通常与激情、活力和紧迫感联系在一起。它是一种强大的颜色，可以吸引注意力并唤起强烈的情绪。

红色通常用于警告消息和错误通知，因为它可以立即吸引用户的注意力并传达紧迫感。

它还可以用来营造兴奋和热情的感觉，使其成为电子商务网站和促销活动的热门选择。

此外，红色与爱情和浪漫有关，这使其成为约会应用程序和网站的热门选择。

Vitaliy Kashtanov的花店和装饰工作室

Shakuro冰淇淋店 App设计

绿色

绿色通常与成长、和谐和自然联系在一起。它是一种平静的颜色，通常用于传达一种平衡和宁静的感觉。

绿色常用于可持续发展和环境网站，因为它与自然密切相关。

它也是金融网站和应用程序的流行颜色，因为它传达了一种稳定和增长的感觉。

它通常与成长、和谐和自然有关。

Agum Satria的Travel Header 探索

由Rian设计的 Plant Shop 移动应用程序

紫色

紫色通常与奢华、创造力和灵性联系在一起。它是一种丰富而精致的颜色，可以传达出优雅和精致的感觉。

紫色常用于时尚和美容网站，因为它与奢侈品和高端产品密切相关。

它也是创意和艺术网站的流行颜色，因为它传达了一种想象力和创新感。

Cuberto的冥想 App 设计

Niche Cake Bar 网站，由tubik提供

橙色

橙色通常用于需要俏皮和友好感的设计中。它可以唤起快乐、创造力和创新的感觉。

橙色经常出现在娱乐和社交媒体平台中，因为它可以刺激参与并鼓励互动。

它是一种充满活力和引人注目的颜色，可以营造一种兴奋和积极的感觉。

它通常与能量、热情和温暖相关。

Murat Ak的健康应用程序

Stian的登山者

黄色

黄色常用于设计中，以营造活力感并吸引对特定元素的注意。它可以唤起快乐、创造力和友善的感觉。

黄色经常用于与儿童相关的品牌和设计中，因为它可以被视为俏皮和年轻。

黄色也与阳光有关，可以为设计带来明亮和温暖的感觉。

但是，需要注意的是，黄色可能会在视觉上造成强烈的视觉冲击，过度使用或使用不当可能会导致眼睛疲劳或视觉疲劳。

它通常与积极、乐观和幸福有关。

Dmitry Lauretsky的锻炼移动应用程序

Harissa 香料店，Ivan Novoselovic / Johnny

棕色

棕色常用于与自然、户外活动和有机产品相关的设计中。它可以传达一种接地气和真实感。

棕色也经常被用来营造一种传统感，因为它让人联想到木材、皮革和其他天然材料。它是一种自然而有机的颜色，可以营造出一种可靠和舒适的感觉。

它通常与朴实、稳定和温暖相关。

对于旨在唤起自然感、可靠性或与传统元素的联系的设计，它可能是一个合适的选择。

Ghulam Rasool的家具移动应用程序 UX/UI 设计

Resum.- Awe UI/UX的美容产品电子商务网站

灰色

灰色通常用作 UI 设计中的背景或基色，因为它可以让其他元素脱颖而出，并提供干净和现代的美感。

它可以传达专业和可靠的感觉，使其成为企业和商业相关设计的热门选择。

灰色也经常被用来代表技术和创新，因为它可以营造出时尚和未来主义的外观。此外，灰色可以用来传达一种严肃和正式的感觉。

它通常与中立、平衡和成熟相关。

Christopher Reath的Essence 手机屏幕

Christopher Reath的精华案例研究

黑色

黑色通常用于传达奢华和排他性的感觉。它经常出现在需要时尚和极简主义美学的高端品牌和设计中。

黑色还可以营造神秘感和阴谋感。

黑色通常用于排版，在较浅的背景下提供高对比度和可读性。也可以作为背景色，突出其他元素，产生视觉冲击。

虽然黑色通常与优雅和力量等积极品质相关联，但请务必注意，过度使用黑色或不当使用会营造阴沉或阴郁的氛围。

适当使用空白和互补色对于实现平衡和谐的设计至关重要。

它通常与优雅、精致和力量联系在一起。

Designhunt — Tomasz Mazurczak的移动版概念

服装品牌网站：关于页面by tubik

粉色

粉红色通常用于针对主要女性受众或专注于与美容、时尚或浪漫相关的产品和服务的设计。

它可以唤起滋养、同情和温暖的感觉。粉红色经常出现在与化妆品、健康和生活方式相关的网站、应用程序和品牌中。

值得注意的是，虽然粉红色通常与女性气质相关，但其含义可能因不同的文化和背景而异。

粉红色的诠释也可以超越性别刻板印象，拥抱包容性和自我表达。

它通常与女性气质、俏皮和甜美相关。

Cuberto重新设计的Nutracheck 网站

冰淇淋 — 第 3 部分，作者：Anastasia Marinicheva

白色

白色通常用作 UI 设计中的背景色，因为它可以让其他元素脱颖而出，并提供干净、简约的美感。它可以传达专业、高效和现代感。

白色通常与简单和极简主义的概念联系在一起。它给人一种宽敞的感觉，可以营造一种平静而整洁的视觉体验。

许多优先考虑内容可读性和重点的网站和应用程序广泛使用白色。

此外，白色通常与纯洁和纯真联系在一起。它可以传达一种值得信赖和中立的感觉。

虽然白色通常与积极的品质相关联，但重要的是要平衡它与其他颜色的使用，以避免乏味或乏味的外观。它通常与简单、清洁、纯洁和对内容的关注相关联。

由Cuberto设计的Crafted Fresh Food App设计

Halo UI/UX的碳银行仪表板

03

色轮

色轮是用于设计和各种创意领域的基本工具，用于理解和探索颜色之间的关系。

色轮由圆形排列的色调组成，提供了颜色如何相互作用以及如何和谐组合的视觉表示。

类似色

类似的颜色是那些在色轮上彼此相邻的颜色，具有相似的底色并创造出统一感。

这种方法可以提供舒适的用户体验，因为它可以促进平衡感和熟悉感。

补充色

互补色在色轮上彼此相对，配对时形成鲜明对比。

这种对比有助于突出显示重要信息、号召性用语按钮或关键功能，从而吸引用户的注意力并提高整体可用性。

分离互补色

拆分互补涉及选择一种基色，然后将其与与其互补色相邻的两种颜色配对。

分离互补色提供了更广泛的色调可供使用，从而可以更灵活地创建平衡的构图。

这种配色方案在突出特定 UI 元素方面特别有效，因为它结合了对比色，同时保持了凝聚力。

三合一

UI 设计中的三元配色方案涉及选择在色轮上均匀分布的三种颜色。

所选择的三种颜色可以是原色（如红、蓝、黄）或二次色（如橙、绿、紫）。

当有效使用时，三色配色方案可以给用户界面带来视觉上的兴趣和刺激，而不会让用户感到不知所措。

正方形

该方案涉及选择两组在色轮上均匀分布的互补色，创建正方形或矩形。

方形配色方案允许多种颜色组合，为设计中的创意和多样性提供了充足的机会。

然而，在颜色选择中保持谨慎的平衡和层次结构以避免让用户不知所措是至关重要的。

 总 结 

总之，了解颜色原则对于有效的 UI 设计至关重要。

通过考虑色调、饱和度、亮度和阴影等属性，我们可以创建和谐、平衡且有效的配色方案。

谨慎使用颜色可以帮助建立一种情绪或基调，形成对比和强调，并通过设计引导用户的注意力。

但是，重要的是要适度使用颜色并将其与其他设计元素（例如版式、布局和图像）进行平衡，以创建有凝聚力且有效的 UI 设计。

以上，就是我们本期推文所有内容啦~

同学们也可以在留言区积极讨论哦

来聊一聊你对此有哪些看法？

文中信息来源：

https://uxplanet.org/principles-of-color-in-ui-design-43708d8512d8

侵权告知即删