UI设计中⾊彩应⽤的6个基本常识
颜⾊是眼睛从光线中感知到的感官印象，并以各种形式的概念和情感进⾏转换。对于艺术家来说，对颜⾊的正确使⽤⾄关重要。因此在整个历史进程中，颜⾊已经以多种⽅式和不同⽅法被理论化。
在绘画、印刷、摄影、平⾯设计和界⾯设计中，通过使⽤⾊彩理论来唤起特定的想法和概念。⾊彩信息传递的速度是⾮常快的，在进⼊眼球的瞬间即可在⼈脑中形成⼀种印象。
HSL格式是改变颜⾊的⼀种数字语⾔。颜⾊可能会因其所具有的⾊相、饱和度和亮度⽽改变。这三个轴为我们提供了数字世界的所有⾊彩，然后以⼗六进制数字或 RGB 代码进⾏重新解释。
在界⾯设计中，从增强品牌知名度到在购买按钮上产⽣更多的点击量，⾊彩理论被⽤来影响⽤户可能拥有的感知。同时，改进可⽤性，也是掌握良好⾊彩能⼒的结果。
本⽂将介绍进⾏界⾯设计时经常⽤于⾊彩选择的六个注意事项。
关联性
ui设计专业特定的颜⾊与某些情绪相关，但并⾮总是如此。⾃从我们出⽣以来，我们的眼睛就开始去了解现实世界中的⾊彩，随着时间的推移，记忆会将这些⾊彩与某些体验和元素关联起来。这种熟悉的认知会为⽤户提供⼀些有关界⾯的情境。
该应⽤程序使⽤了与夜空相关的颜⾊，从⽽形成概念上的呼应。设计中由蓝⾊和紫⾊组合⽽成的五种颜⾊范围唤起了⼈们对⼊睡体验的记忆。
当然，这并不是绝对的，因为⼈类对现实的感知会有很⼤不同，不能⼀⼑切。德国艺术家约瑟夫·阿尔伯斯（Joseph Albers）在其书籍「Interaction of Color」中指出，⾊彩的主要特性是相对⽽⾔的。西⽅国家的红⾊可能代表危险和邪恶，但在中国，红⾊则意味着幸福、喜悦和庆祝。他还指出，尽管如此，许多⼈还是会以相同的⽅式感知某些颜⾊，例如与⽣态相关的绿⾊或代表⼥性⽓质的粉⾊。
和谐
和谐的⾊彩使元素具有逻辑感。有很多⽅法可以创建和谐的⾊彩。其中之⼀是通过使⽤类似颜⾊（Analogous colors），即在⾊轮中彼此相邻的颜⾊。
在Rolling Stones的⽹站上，红⾊和紫⾊的应⽤为我们提供了⼀个使⽤类似颜⾊的⽰例。在⾊轮中，红⾊在⼀个⽅向过渡为橙⾊，在另⼀个⽅向上过渡为紫⾊。
为什么类似颜⾊具有吸引⼒？因为这是⾃然产⽣的⾊彩⾏为。⽇落使天空从橙⾊变成紫⾊，海洋从蓝⾊变成绿松⽯⾊，彩虹将所有七种颜⾊融合在⼀起。我们可以得出这样的结论，那就是视线在相似的颜⾊中到了⾃然的喜悦。
由于温度也会产⽣相当⼤的协调性，因此建议仅在暖⾊或冷⾊之间保持此颜⾊范围。你还可以利⽤这些颜⾊的饱和度和亮度来加强类似颜⾊的使⽤效果。当然，这些完全取决于你要创建的效果以及界⾯要显⽰的内容。
对⽐
颜⾊对⽐度使界⾯更具活⼒。实现⾊彩和谐的另⼀种形式是使⽤补⾊，即在⾊轮中彼此相对的颜⾊。通过使⽤互补⾊，可以在设计中创建对⽐度和动态效果。
在Beats⽹站上，通过使⽤红⾊和绿⾊这⼀组互补⾊可以实现有趣的颜⾊组合。照⽚中的浅蓝⾊天空与红⾊相邻，使购买按钮异常突出。但是，这种效果反⽽处理的⾮常好。
买按钮异常突出。但是，这种效果反⽽处理的⾮常好。
对⽐⾊的好处包括，可以赋予界⾯能量和运动效果，以及强化⼀些我们希望⽤户注意的相关点。要使这些颜⾊和谐并不容易，因为对它们的滥⽤会造成视觉混乱，并使眼睛不适。因此，使⽤⽐例是关键。
要了解有关⾊彩对⽐的更多信息，推荐Johannes Itten撰写的「The Art of Color」这本书，书中介绍了七种对⽐理论：⾊调、温度、明暗、互补、饱和度和定量。⽆论我们选择哪种类型的颜⾊对⽐度，都应在整个Web及应⽤页⾯中保持设计的⼀致性。
⾊阶
⾊阶降低认知负荷。保持⾊调并调整明亮度的级别既有助于将不同元素分离开，⼜不会使界⾯过载。
在Bear这款应⽤程序中，我们看到⽩⾊⽂本位于第⼀级别，灰⾊⽂本位于第⼆级别，以创建层次结构，并且不会以相同可视权重的消息使视图过载。这也适⽤于Bear的插图。请记住，⾊阶保持在同⼀⾊调中的时候效果会更好。
UI设计中的⾊阶也受⾃然的影响，不仅受树⽊、天空或海洋等元素的影响，也受物体体积和阴影的影响。⼈眼会根据光线、深度甚⾄纹理来感知相同颜⾊的不同变化。毫不奇怪，⼈们所期望看到的UI颜⾊就如他们在现实世界中感知的⼀样。
可以这样说，使⽤⾊阶的⽬的是避免添加⼤脑必须处理和理解的新颜⾊或⾊调。界⾯设计越容易且越快速地被理解，⽤户就越⾼兴。
⽐例
定义颜⾊⽐例可平衡颜⾊组合。控制好颜⾊的使⽤多少，可以使样式更清晰，并避免不必要的颜⾊冲突。
在Mailchimp主页上，黄⾊是主要颜⾊，配⾊仅应⽤了绿⾊、粉红⾊和⿊⾊。黄⾊，同任何⼀种颜⾊⼀样，传达了⾃⼰的概念，⽽不⽤在权重上与其它⾊调竞争。
颜⾊层次结构对于定义⼀种氛围⾮常重要，同时，它也是构成⽹页中所有元素的主要⾊彩。在当前的UI设计趋势中，⽩⾊是最受欢迎的颜⾊，因为它可以保持界⾯清洁，突出显⽰交互⾊彩并提⾼可读性。但是，如果要在特定页⾯上创建更具沉浸式和艺术感的效果，则选择更具饱和度的颜⾊效果会更好。
交互
交互⾊彩在执⾏过程中必须清晰且在界⾯中保持⼀致。号召性⽤语必须相对于背景具有⾜够的对⽐度，并且相对于其他组件必须具有⾜够的视觉权重，以便⽤户可以轻松识别它们。
在Nike应⽤程序的截屏中，号召性⽤语具有构图中最具饱和度的⾊彩，从⽽脱颖⽽出。柠檬绿作为主要按钮，同其他屏幕保持了⼀致。我们还注意到，圆形⽐经典的矩形具有更好的突出表现。
但是，交互⾊彩并不总是以最具饱和度或最亮为特征，⽽是通过⾊调、形状、⼤⼩或对⽐度，从屏幕上脱颖⽽出。因此，交互⾊彩的有效性将基于⽤户识别交互区域和执⾏任务的速度来衡量。
另⼀⽅⾯，次要号召性⽤语权重要更轻，并且在视觉上更接近信息元素。在如上所⽰的Nike应⽤⽰例中，设置和声⾳按钮表明这些是通过形状⽽不是颜⾊来传达交互信息的。按钮的这种层次结构很重要，
以便⽤户可以对元素进⾏⾃然排序，并避免在每个屏幕上出现多个主要号召性⽤语。
总结
总之，颜⾊是对事物的重要影响者，它不仅影响事物对环境的感知，还直接影响其他颜⾊甚⾄⾃⾝。尽管对其理论的深⼊研究可以改善我们对设计的掌控，但是创建专业配⾊⽅案的过程很⼤程度上取决于我们的视觉体验和对现实世界的感知。就让我们从训练我们的眼睛开始吧！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。