关于UI界面设计中的色彩使用原则

关于色彩的术语，是人们对色彩的基本知识，普遍的术语有，例如色相、色调和阴影...等，被视为我们可以用来开发独特调色板的工具。

一、色彩术语
色相：指不加白色或黑色的饱和颜色
淡色：如果把白色加到颜色相中，就会产生颜色。

色度：如果将黑色添加到颜色相中，就会产生色度。

色调：一种色调是在将灰色(白色)或阴影(黑色)加入一种色调时产生的。

亮度：颜色的明暗度是指颜色的亮度。这代表了反射光量。
饱和度：指颜色的亮度和强度。高饱和颜色鲜艳，低饱和颜色则暗淡无光。

二、层次结构

如果一种元素的外观与其周围环境相比较，则说明该元素的重要性，在UI界面设计中，我们可以使用颜色和颜色权重来建立层次结构，利用色彩的色调，我们可以赋予元素不同的重要性，若一种元素比另一种元素更重要，则其视觉权重应更高，便于用户快速浏览网页，区分重要信息和不重要信息。一个更加显著和大胆的信息是，首先吸引用户的视线，然后再转向它下面的辅助信息。

三、表现能力

展示品牌色彩，在令人难忘的时刻，强化你的品牌独特风格，想象一下你的商标颜色就像一盘牛油果烤面包里的盐和胡椒。食盐放多了，就会盖过自然味道，放少了，就会显得单调，用色彩来加强品牌形象的时候，一定要考虑到什么时候，什么地方可以加入。

四、包容

该产品的设计类似于修建图书馆或学校这样的公共建筑，它需要包容所有人。

网上内容无障碍指南(WCAG)提供了一些建议，以确保运动、听觉和认知障碍患者可以使用界面中的颜色。举例来说，他们的书写标准要求对比度至少为4.5:1。

为了确保你符合这些标准，下载Stark，它会检查你的设计是否没有任何障碍。您也可以使用他们的插件来模拟色盲，并根据需要进行调整。

在设计产品时，我们常常会尝试去设计一些好看的东西，而忽视了考虑交互的用户。

当我成熟为一名设计师时，我已经接受了各种各样的限制，它们会破坏我完美的设计理念。符合ADA就是这种限制之一。

如果我们想为Dribbble点赞，我们就能摆脱这种情况，但是当我们为真正的人类开发产品时，这样做就不好了。

五、意义

色彩能激发出不同的情感，因此，通过对色彩的心理理解，我们可以利用品牌色彩来与目标受众产生共鸣。

要知道，你的受众是谁，记住，不同的文化背景和地域对色彩的认知是不同的。举例来说，在西方文化中，白色常与婚礼有关，而在亚洲文化中，白色则被视为哀悼的颜色，彩和它的意义你越了解，它的力量就越强大。

公司在品牌和营销方面，总是用颜色来作为影响我们情绪的策略。请注意，几乎所有的快餐店都会在商标中使用红色和黄色？因为红色可以激发激情、食欲、饥饿感，可以引起人们的注意，而黄色可以激发快乐和友善的感觉。

六、限制色彩

由于在应用程序中限制了颜色的使用，那些获得颜色的区域将得到更多的关注，比如文本、图片和按钮等单个元素。

您将注意到，在许多具有色彩丰富和不可预知内容的应用程序中，例如Instagram或Twitter，它们的界面通常很单调。它的精妙之处在于把焦点从界面转移到了内容上面。

七、不同状态

色彩提供了应用程序及其组件和元素的状态信息。

色彩是一种显示界面状态变化的方式。如果淡化按钮的颜色，表示按钮已被禁用，或将按钮显示为红色，则表明发生了错误。此外，我们也应该在错误的颜色上加上错误的信息和图标，以确保清晰，并吸引色盲用户。

八、协调一致

在界面上使用的颜色应该是一致的，因此即使环境改变了，颜色的意义也总是一样的。

假如我们的品牌使用了红色，那么我们就应该避免用它来通知相关的错误状态。为了避免混淆，我们可以用黄色等替代色。

解决这个问题并不难，因此我们没有理由不在商标上使用红或黄。

九、调色板

怎样得到完美的调色板？

首先要对色彩理论和基本工具有一个简单的了解。

步骤1-基本颜色和系统颜色：

我喜欢从主要的颜色开始，我会根据偏好，研究，或者以上我在5号分享的颜色的含义来决定。

主色就是我选择的品牌色。

得到主色之后，我需要文本的颜色、背景、容器等。

一般来说，我会为文本选择一种深色，而背景的颜色是淡灰色。

十、创建调色板

在为用户界面选择了基本色之后，我将这些颜色放置到Google颜色工具中(接近底部)，以得到该颜色的不同色调和色调。

它不一定总是完美的，但是它是一种简单的方式来生成一个近乎完美的调色板，我可以在需要时添加或调整。

当我需要补充颜色或者测试易访问性时，我可以使用Google颜色工具来做所有这些事情。它提供一站式服务。

十一、把所有的东西放在一起

60-30-10规则，主要颜色有60%，次要颜色有30%，重点颜色有10%。

”这条室内设计原则是一项永恒的装饰技巧，它能帮助你轻松组合出不同的颜色。为平衡色彩，60%+30%+10%为宜。这套方法很有效，因为它创造了一种平衡感，使人的视线可以舒服地从一个焦点移到另一个。

就像之前提到的，比如减少色彩来加强品牌力，60-30-10是个很粗糙的工具，它能保证我们在色彩方面不会走过场。

同时，我也喜欢在我的界面上后退几步，眯起眼睛。这张模糊的图片让我对层次结构有了更好的理解，还有是否使用了太多的颜色。

最后关于配色工具和资源

Drbbble:  https://dribbble.com/colors/109173
Coolors.co： https://coolors.co/palettes/trending
Shaderade： https://prowe214.github.io/color-shader/