Question

色彩在UI设计中的应用【设计师必学】

Answer 1

色彩的应用

人脑对于色彩的记忆度要高于形态,即一个App给用户留下深刻印象的往往是界面的色彩.例如说到支付宝,我们可能想不起它的首页长什么样子,标签栏图标是那些,但能马上记起它的界面主色是蓝色.因此运用好色彩对UI设计十分重要,它能直观的呈现产品的气质和性格,能有效的帮助用户组织和阅读信息,与界面设计产生联系和记忆.好的配色往往依靠设计师审美、感觉搭配出来,但合理的颜色搭配必定存在合理的配色规律和配色方法论的支撑,下面结合相关案例为大家讲解色彩运用的几个技巧.

1色调一致

在App设计之前应先确定界面的主色调,主色将占据界面中很大的比例,通常是品牌色,而辅助色、点缀色、背景色等都应以主色调为基准来搭配,这样才能保证App整体色调的一致.色调一致的界面,能带给用户始终如一的视觉体验.例如马蜂窝将黄色（品牌色）作为主色,以及从主色搭配出的蓝色（对比色）贯穿App始终.

260-30-10原则

60%30%10%的原则,是达到色彩平衡的最佳比例.在60%的空间使用主色,可以运用到导航栏、按钮、图标等关键的元素中,使之成为整个App的视觉焦点和色彩关系；30%的空间使用辅助色,可以平衡过多的主色而造成的视觉疲劳；最后剩下10%的空间为点缀色,可以用在一些不太重要的元素又需要区分的时候.6:3:1原则构建了一种丰富的色彩层次,让界面看上去和谐、平衡和不杂乱.哔哩哔哩将粉色运用到页签、标签栏、按钮、入口图标等上,蓝色的辅助色用在角标、图标上,还有黄色、红色用在一些小图标、小标签上,主次非常清晰明了.

“60-30-10原则”另一方面来说也控制了色彩的数量,但在实际UI设计中,迫于产品的需要可能会使用更多数量的色彩,但切记不可超过7种色相,每个色相还可以运用其饱和度、明度的变化分解出丰富的色彩搭配.

3远离纯黑色和纯灰色

黑色就像没有生命力的深渊,使用户陷入冷冷的负面情绪中.远离纯黑色和纯灰色,是因为它们不存在于现实世界里.尝试在纯黑和纯灰中加入一些色调,会让界面看上去更柔和自然.另外,纯黑色还会与白色产生强烈的对比度,看久了会使人疲劳,让用户产生焦虑的情绪.MONO的导航栏并不是深黑色,而是加入了蓝色的低饱和度蓝黑色,它的界面背景也是加入了蓝色的的浅色,这样就不会让界面看上去死气沉沉的.

4遵循色彩心理学

前文我们已经了解过各种色彩的心理学知识,就是为了我们在进行App设计时提供依据.这些色彩都是源于人类对大自然最原始的感受,蓝色的天空、绿色的草地、黄色的沙漠等等,自然的色彩,对于我们来说是司空见惯的,但其中却蕴含着丰富的美感,并达到了和谐统一.网易云音乐使用红色作为主色,这种热情奔放的颜色传递出一种充满能量、自信的气质.

5良好的可读性

良好的可读性在界面设计中能为用户提供主次分明、层次清晰的阅读体验,而一个可读性差的界面则会成为用户浏览的障碍.那如何确保界面具有良好的可读性呢？这就需要在界面设计中注意色彩搭配的对比,如在浅色背景上使用深色文字,在深色背景上使用浅色文字,使用高对比的度的亮色展示重要的元素,用低对比度的浅色来体现需要弱化和次要的内容.例如苹果Music的主要功能入口,标签栏图标、按钮等都是用了高纯度的红色,与其他元素从形成鲜明对比,就连深灰色的辅助文字都有着清晰的可读性.

6从大自然中获得灵感

配色中尽量使用大众熟悉的色彩,如自然界中人们常见的色彩等.从大自然中获取的配色灵感可以使你的设计更加切合用户的审美,非常自然.而艺术是对自然的直接反映,是非常宝贵的资源,值得好好利用.我们可以搜集各种与自然风光相关的图片,从中提取色彩运用到设计中,这些几近完美的搭配呈现出来的和谐美感能瞬间打动人心.天气应用Marline就是一个很好的例子,它的界面背景渐变就参考大自然的变化,随着不同时间段呈现出清晨、日出、正午、日落、深夜、雨天等渐变色,打开应用即唤起了用户的快乐情绪.

7将UX颜色与品牌相匹配