【配色指南】UI设计中使用明亮色彩的利与弊，你知多少？
以下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。
合理运用色彩是每个设计师都应必须具备的技能，特别是插画师和UI设计师。随着扁平化设计和Material Design 的日益普及，色彩理论知识的重要性也变得愈加明显！
在许多数字化产品的界面中我们都能看到一些明亮的色彩和渐变色，从趣味性和娱乐性APP到商业APP和网站。然而，关于明亮的色彩对用户体验的影响仍有很多争议。本文就UI中使用亮色的优缺点进行了一些分析和总结。
一、在UI中使用鲜艳颜色的优点1. 增加可读性和易读性在我们之前的一篇文章中，我们介绍了影响配色方案选择的因素。可读性和易读性是设计师考虑色彩应用的基本因素。这里需要注意的是，可读性代表了人们阅读文本内容的容易程度，易读性决定了用户区分特定字体和字母的速度。
鲜艳的色彩可以为界面提供足够高的对比度，也有助于提高可读性和易读性。由于对比的存在，布局元素变得清晰可见。但是，高对比度的色彩可能并不总是能奏效。如果文本内容和背景颜色对比太强，用户则很难阅读或浏览文本。这就是为什么建议设计师创造一个比较温和的对比度，只在突出显示某些元素使用高对比度的颜色。
2. 优化导航并增强直观的交互视觉层次结构是所有数字化产品建立清晰导航和直观交互系统的核心要素。UI组件一般以这种结构组织，大脑可以通过产品的物理差异（包括颜色）来区分对象。
如何区分颜色的层次结构？这是受用户的思维决定的。例如红色和橙色被通常被认为是大胆的颜色，而白色和奶油类似的色彩则被认为是柔弱的颜色。明亮的色彩很容易引起用户的注意，所以设计师经常使用它们作为强调或对比的手段。如何合理地应用视觉层次结构？常见的使用方法有：将一种颜色应用于多个元素中，以显示它们之间的某种联系。在UI界面中将购买按钮设置为红色，以便人们可以在需要时直观地找到它们。
3. 提高品牌的可识别性人类大脑对大胆的色彩反应十分强烈，因此，明亮的色彩组合更容易引起用户的注意。色彩鲜艳的UI设计，往往能在众多产品中脱颖而出。但需注意，色彩的选择在一定程度上要基于目标受众的偏好和市场调查。
如果一家企业在其Logo、商品、网站中使用统一明亮的色彩，这在一定程度上不失为一个将品牌最大化的好办法。通过这种方式，设计师借助高度一致的可视化提高品牌的可识别性。
4. 传递情绪和营造氛围为了传达正确的信息和号召用户做出预期的行动，设计师需要知道颜色是如何影响我们的情绪和行为。我们的大脑对不同的颜色有不同的反应，不过通常我们都忽略了。据“色彩心理学”这项研究表明：当我们的眼睛感知到一种颜色时，大脑会向内分泌系统发出信号，释放负责情绪变化的荷尔蒙。
正确选择颜色有助于营造正确的氛围向用户传递正确的信息，让用户处于正确的情绪中，引导他们采取预期的行动。例如，如果设计师创建与自然或园艺相关产品的用户界面，那么这个界面的主打色很有可能是绿色和蓝色。这样的色彩应用就会给用户营造一种产品或服务相关联的感觉。
5. 打造时尚的外观和风格明亮的色彩和渐变色在UI设计中占据着最重要的位置。现在，你可以在不同类型的数字化产品中看到更多是这些时髦的风格，而严肃呆板的商业风格早已不见踪影。
用户界面中明亮的色彩和渐变色彩可带给用户强烈的现代科技感和新鲜感。而且，通常根据最新趋势设计的移动应用程序或网站往往看起来很吸引人，尽管竞争激烈，它们仍能更胜一筹。
二、在UI中使用鲜艳颜色的缺点1. 明亮的颜色很难搭配对于那些只依靠直觉和美感来搭配色彩的设计师来说，他们往往会犯很多低级错误。如果想要创作出令人满意的视觉作品，那么关于如何应用和搭配颜色的基本知识是必不可少的。
在UI中应用的色彩越鲜艳，就越难搭配。为了让用户感到满意和舒适，设计师试图在UI设计中实现一些平衡。色彩的和谐是关于设计中颜色的排列对用户的感知最有吸引力和有效的。和谐的色彩组合有助于网站或应用程序获得良好的第一印象。颜色理论定义了几种基本的配色方案，以供大家参考！
单色，单色配色是基于一种颜色，选择其不同的色调进行色彩组合。类似色，该配色方案应用于色轮上彼此相邻的颜色。互补色，它是在色轮上彼此相对放置的颜色组合方案，旨在产生色彩的高对比度。拆分互补色， 这个配色方案的工作原理类似于互补色，但是不同的是采用了更多的颜色。例如，如果你选择了蓝色，配色则需要组合两个与其相反颜色（橙色）相邻的其他颜色（黄色和红色）。三元色，它基于色轮上等距的三种不同的颜色。专业人士建议使用一种颜色作为主色调，其他两种色彩用来提亮。双色互补，这种配色方案采用了两对互补色组合。如果连接这四种颜色在色轮上的位置，就会形成一个矩形。2. 失去产品的特色大胆的色彩是在UI中创造个性与风格的工具，但它们也可能是特色消失的原因。在单一视觉构图中使用许多鲜艳的色彩会有失去界面特色的风险，因为它们会导致整个界面色彩过于混乱。
这就是为什么建议设计师应用色彩时使用6：3：1的比例。最大的部分应该是设计中主导色调，占据三分之一的部分是次要颜色，最小的占比部分用于帮助打造特色的颜色。这样的比例可以让用户逐渐感知所有的视觉元素，因此这样的比例被认为是最合适的。
3. 明亮的色彩并不适合所有用户群体用户研究是数字化产品创建的核心阶段之一。首先，设计师需要定义和分析目标受众，以了解他们对网站或应用程序的期望。其次，年龄，性别和文化等因素都可能影响潜在用户的偏好。例如，孩子们一般都很喜欢黄色；但是当他们变成大人时，黄色看起来便不再那么有吸引力了。另外，男人和女人通常都喜欢冷色调，如蓝色，绿色和其他色调。但与女性不同，男性通常更喜欢无色的颜色，包括白色，黑色和灰色。
应用明亮的色彩也是一样的，需要定义和分析目标受众。即使你为娱乐应用创建UI设计，你也需要考虑目标受众的具体情况。中年人通常更喜欢轻量级的用户界面，他们可能不喜欢屏幕上的大胆色彩，因为那会使他们分心。
4. 明亮的色彩在手机屏幕上可能显得过于突兀正如上文所说，明亮的色彩可以产生强烈的对比，有助于突出重要的用户界面元素，并提供理想的易读性和可读性。然而，使用过多的色彩对比可能会造成一些低级错误，尤其是在移动界面这样有限的空间上。
在像这样较小的屏幕上，环境光线和明亮的字体会让用户感觉眼睛不舒服。这就是为什么UI设计师在移动设备界面中应用明亮的色彩需要注意谨慎的原因。只有合理设置色彩之间的对比度，才能让用户在手机上阅读文字时感觉舒适。
色彩无疑是设计师手中的一把双刃剑，它有自己的优点和缺点。如果你能趋利避害有效地利用它，你就能够找到适合于产品设计的色彩应用方案。
Tubik Studio
译文地址：Mockplus
作者：Alina Arhipova
译者：jongde
mockplus答：要创造相似的和谐，你需要使用在色轮上相邻位置的颜色。这种配色方案被用于不需要对比度的设计中，包括网页或banner的背景。● 方法三：互补色 互补配色方案是将色轮上对应位置的颜色进行混合。这种方案和相似色和单色相反，因为它旨在产生高对比度。例如，在蓝色背景上使用橙色按钮在任何界面中都很难被错过...
答：UI 设计师如何运用调色板？我们可以从以下几个方面来探讨：1. 配色方案的选择 - 对比色和补色配色方案：通过对比色和补色的搭配，可以创造出醒目和互补的效果。- 多种色彩搭配方案：结合多种色彩，可以形成丰富的视觉层次和多变的设计风格。2. 三色搭配 三色搭配是一种经典配色方案，它基于三种颜色的...
答：UI设计师如何配色会显得比较高级?作为一名UI设计师,对颜色的敏感度、颜色运用常识总是非常重要的。但是有很多设计师在颜色的选择搭配上知识平平无奇,那身为一名UI设计师,如何配色才会显得比较高级呢?在进行配色时,仅仅学习配色理论是不够的我们先要思考配色的使用场景,以及整个设计所要达到的效果,然后再学习相应领域...
答：60%是你的主色调，30%的次要颜色，10%的突出颜色。Asos是用的黑色与白色加绿色的CTA。这是有原因的。红色：激情、爱、危险 蓝色：冷静、负责任的、安全的 黑色：神秘、优雅、邪恶 白色：纯洁、沉默、洁净 绿色：新的、清新、自然如果你想要了解更多查看这个列表——颜色文化。灰度优先灰度优先早在设...
答：色彩作为视觉传达中非常重要的要素在UI设计中具有非常重要的作用，一个好的UI色彩提案可以起到：1）显示界面的整体架构 2）明确视觉层级关系 3）营造界面整体风格，甚至增加转化 UI色彩搭配方案 单色搭配 基于一种颜色，以色调和饱和度区分层次。单色永远是一个经典且安全的配色方案。相邻颜色搭配 选择色轮...
答：Tips：明确颜色可以使用的场景，具体到特定的UI元素上。12、避免完稿时还在讨论色彩混合 Google’sMDL Color Customizer是我最喜欢的设计工具之一，它可以有效地将主色与辅色结合在一起，形成可搭配的新颜色。然而我所在的团队里没有一个人想用或者没时间去关心如何解决色彩混合的问题。Tips：不要过于在意...
答：1. 深浅对比搭配 比如选用了深色，在深色背景上使用亮色文字，并在图片上叠加了颜色，让视觉重心停留在文字和相应按钮上。弹出菜单同样使用了深色主题。得益于各种字体和深浅对比的色彩，深色风格的更具完整性，受到偏爱。2.纯色的配色 界面设计风格强调客户端的可用性，借扁平化设计和极简风格，打造一套...
答：和谐是UI设计努力的目标。为了让用户感到高兴和舒适，设计人员尝试将平衡带入用户界面设计。色彩和谐是关于设计中色彩以最有吸引力和最有效的方式用于用户感知的方式。和谐的颜色有助于网站或应用程序获得良好的第一印象。经过多年的搜索，设计师们区分了有效运作的基本配色方案。让我们看看他们是什么。色彩...
答：在界面设计中,我们会遇到不知如何选取颜色,或配出来的色彩不和谐的情况,其实遇到这些困扰是因为我们没有搭建好我们的UI色彩体系。 色彩体系就是我们制定好的配色色板,它是我们在UI设计中的配色指南。像Ant design、Material design等设计规范中都有明确的给出自身产品的色彩体系。搭建产品的色彩系统对设计师是非常有必...
答：它可以增强，减轻，突出，说服，呼吁等等。颜色和文字也可以相互辅助，并使他们更有力量。它可以在没有任何文字的情况下传达出自己的感情。成为设计师手里的一大武器。这就是为什么在UI设计领域里，颜色是关键的因素之一。那很多设计师不知道在设计产品是如何选择颜色，我们先来看看优秀的配色案例，再简单...
