1.3　理解色彩印象

日常生活中，人们喜欢阳光、喜欢彩色，不同程度的色相对比不仅有利于人们识别不同程度的色相差异，还可以满足人们对色彩的不同要求。色相可分为红色、橙色、黄色、绿色、青色、蓝色、紫色、黑色、白色、灰色等几种，本节主要从色相出发，分别选用适合不同色相的UI进行分析，为以后在UI设计过程中对色彩的选择提供很好的借鉴和帮助。

1.3.1　红色

在整个人类的发展历史中，红色始终代表着一种特殊的力量与权势，很多宗教仪式中都经常使用鲜明的红色。在我国，红色一直都象征着吉祥、幸福。同时，鲜血、火焰、危险、战争、狂热等极端的感觉都可以与红色联系在一起。红色所具有的这种生命力，在很多艺术家的作品中得到了淋漓尽致的发挥。

红色的色感温暖，性格刚烈而外向，是一种刺激性很强的颜色。红色容易引起人的注意，也容易使人兴奋、激动、紧张，还容易使人产生视觉疲劳。

在红色中加入少量黄色，会使其热力强盛，趋于热烈、激情；在红色中加入少量蓝色，会使其热情减弱，趋于文雅、柔和；在红色中加入少量黑色，会使其性格变得沉稳，趋于厚重、朴实；在红色中加入少量白色，会使其性格变得温柔，趋于含蓄、羞涩、娇嫩。

◆　案例分析

图1-21所示是一个汽车App界面设计，使用白色作为界面的背景颜色，突出界面中图片和文字信息内容的表现，界面中的汽车产品则使用了高饱和度的深红色背景进行突出表现。点击卡片可以进入该汽车产品的详情界面，红色的背景给人带来激情、热烈的印象。

冰淇淋是年轻女性的最爱，图1-22所示是一个冰淇淋App界面设计，使用高明度、低饱和度的粉红色与白色相搭配，粉红色给人一种柔和、甜美的感觉，白色和粉红色都是高明度色彩，使得整个界面的表现明亮，且充满甜美的气息。

1.3.2　橙色

橙色又称橘黄色或橘色，具有明亮、华丽、健康、兴奋、温暖、欢乐、动人等色彩情感。橙色通常会给人一种朝气与活泼的感觉，可以使原本抑郁的心情豁然开朗。

橙色在空气中的穿透力仅次于红色，而色感比红色更暖。鲜明的橙色是色彩中给人感觉最暖的颜色，不过橙色也是容易造成视觉疲劳的颜色。在东方文化中，橙色象征着爱情和幸福，充满活力的橙色会给人以健康的感觉，并且橙色还能够增强人们的食欲。

◆　案例分析

橙色特别适合表现快餐食品类UI，能够有效增强用户的食欲。图1-23所示是一个快餐品牌宣传网站UI设计，使用不同明度和纯度的橙色相搭配，表现出一种欢乐、热烈的情感，很容易感染浏览者。

图1-24所示是一个运动App界面设计，使用高饱和度的橙色作为界面的主题色，通过橙色与白色相搭配，使得界面的表现非常富有活力，在界面中点缀绿色的按钮，体现出运动带给人们的健康感觉。

1.3.3　黄色

黄色的光感最强，给人以光明、辉煌、轻快、纯净的印象。在相当长的一个历史时期内，帝王与宗教传统上均以辉煌的黄色作为服饰、家具、宫殿与庙宇的主要色彩，给人以崇高、智慧、神秘、华贵、威严、仁慈的感觉。

黄色会让人联想到酸酸的柠檬、明亮的向日葵、香甜的香蕉、淡雅的菊花等，同时在心理上产生快乐、明朗、积极、年轻、活力、轻松、辉煌、警示的感受。

明亮的黄色可以给人以甜蜜幸福的感觉，在很多艺术家的作品中，黄色都用来表现喜庆的气氛和富饶的景象。同时，黄色还可以起到强调突出的作用。

◆　案例分析

图1-25所示是一个社交分享类App界面设计，使用白色作为界面的背景颜色，使界面内容的表现明亮、清晰。在界面中搭配高饱和度的黄色，有效活跃界面的整体氛围，使界面的表现充满活力。

黄色非常适合作为美食产品的配色，能够给人带来香甜、美好的印象。图1-26所示是一个蛋糕美食网站UI设计，使用高明度的黄色与白色搭配，使网站UI的表现非常明亮、清爽。在界面中搭配同样高明度的蓝色标题文字，整体表现柔和、美好，让人感觉非常舒适。

1.3.4　绿色

绿色是人们在自然界中看到最多的色彩，容易让人联想到碧绿的树叶、新鲜的蔬菜、微酸的苹果、鲜嫩的小草、高贵的绿宝石等。同时在心理上产生健康、新鲜、生长、舒适、天然的感觉，象征着青春、和平、安全。

人们称绿色为生命之色，并把它作为农业、林业、畜牧业的象征色。由于绿色的生物和其他生物一样，具有诞生、发育、成长、成熟、衰老、死亡的过程，这就使绿色呈现出各个不同阶段的变化，因此黄绿、嫩绿、淡绿象征着春天和稚嫩、生长、青春与旺盛的生命力；艳绿、盛绿、浓绿象征着夏天和茂盛、健壮与成熟；灰绿、褐绿便意味着秋冬和农作物的衰老与死亡。

◆　案例分析

绿色是大自然的色彩，能够表现出产品的绿色、健康、纯天然的品质。图1-27所示是一个生鲜电商App界面设计，使用白色作为界面的背景颜色，在界面中搭配高饱和度的绿色，表现出产品的绿色与健康品质，在界面中点缀橙色，从而使界面的表现更加富有活力。

图1-28所示是一个果汁饮料宣传网站UI设计，使用中等明度的绿色作为界面背景颜色，与果汁产品自身的绿色相呼应，很好地体现出果汁产品的新鲜、纯天然品质，搭配高饱和度的橙色图标和按钮，具有突出重要功能选项、活跃界面氛围的作用。

1.3.5　青色

青色可以说是草绿色的健康和蓝色的清新感觉的结合体，但在自然界中它并不多见，会给人以较强的人工制作的感觉，这也使它在保留自然颜色原有特点的同时，又具备了特殊的效果。青色通常会给人带来凉爽、清新的感觉，而且青色可以使人原本兴奋的心情冷静下来。

青色可以作为以绿色或蓝色为主色调的UI的过渡颜色，能够对比较鲜亮的颜色，起到中和作用。青色与黄色、橙色等颜色搭配可以营造出可爱、亲切的氛围；青色与蓝色、白色等颜色搭配可以得到清新、爽朗的效果；青色与黑色、灰色等颜色搭配，可以突出艺术气息。

◆　案例分析

图1-29所示是一个医疗健康App界面设计，使用青绿色到青色的渐变色作为该界面的背景颜色，在界面中搭配白色的文字和色块，使界面表现出一种清新、洁净、健康的视觉印象。青色非常适合作为医疗、保健、健康类产品的配色。

图1-30所示是一个医疗保健网站UI设计，白色的背景与不同明度的青色相搭配，使界面表现出一种清爽、洁净、平和的感觉，给人以安心感。在青色的背景上搭配纯白色的图形与文字，给人一种清爽感，并且表现效果非常清晰。

1.3.6　蓝色

蓝色会使人很自然地联想到大海和天空，使人产生一种爽朗、开阔、清凉的感觉。作为冷色的代表颜色，蓝色给人以很强的安稳感，同时蓝色还能够表现出和平、淡雅、洁净、可靠等多种感觉。目前，很多科技类网站和App应用都使用蓝色与青色的搭配效果。

高饱和度的蓝色会给人一种整洁轻快的印象，低饱和度的蓝色会给人一种都市化的现代印象。低饱和度的蓝色主要用于营造安稳、可靠的氛围，而高饱和度的蓝色可以营造出高贵、严肃的氛围。

蓝色与绿色、白色相搭配象征着蓝天、绿树、白云，现实生活中蓝色也是非常常见的，带给人以纯天然的感受。选择明亮的蓝色作为主色调，配以白色的背景和灰亮的辅助色，可以使界面表现干净、整洁，给人以庄重、充实的印象。蓝色与青色、白色相搭配，可以使界面看起来非常干净、清澈。

◆　案例分析

图1-31所示是一个金融App界面设计，蓝色可以带给人很强的科技感，而白色可以带给人洁净感，使用蓝色和白色进行搭配，在界面中划分不同的内容区域，界面的层次感十分清晰，整体给人以非常整洁、清晰的视觉效果，具有很好的辨识度。

图1-32所示是一个酒类产品宣传网站UI设计，整体给人以纯净、轻快的印象，透明感十足，深蓝色可以给人以忧郁、理性和高雅的感觉。浅蓝色的融入，带给人明净、纯天然的感受。黄色象征着温暖与舒适，适量点缀黄色会使界面具有轻快、活力的感觉。

1.3.7　紫色

紫色是人们在自然界中较少见到的色彩，能够让人联想到优雅的紫罗兰、芬芳的薰衣草等，因此具有高贵感，可以营造出高尚、雅致、神秘与阴沉等氛围。

在可见光谱中，紫色光的波长最短，尤其是看不见的紫外线更是如此，因此，眼睛对紫色光的细微变化的分辨力很弱，容易引起视觉疲劳。灰暗的紫色代表伤痛、疾病，容易造成心理上的忧郁、痛苦和不安。浅紫色则是鱼胆的颜色，容易让人联想到鱼胆的苦涩。但是，明亮的紫色好像天上的霞光、原野上的鲜花、情人的眼睛、动人心神，使人感到美好，因此常用来象征爱情。

◆　案例分析

图1-33所示是一个相机App界面设计，使用低明度的深紫色作为界面背景颜色，在界面中搭配深灰色，界面整体色调偏暗，使界面表现出强烈的时尚与神秘感。界面中的图标和文字都使用白色进行搭配，与背景形成强烈对比，具有良好的视觉表现效果。

图1-34所示是一个鲜花网站UI设计，使用明亮柔和的紫色作为界面的主题色，给人一种雅致与美好的印象，并且与大图相呼应。与浅灰色背景相搭配，界面表现非常平和、舒适，给人以淡雅、舒适、美好的感觉。点缀少量明亮的黄色，为界面增添活力，很好地突出了相应信息内容的表现。

1.3.8　黑色

在商业设计中，黑色具有高贵、稳重、科技的意象，科技产品如电视、跑车、摄影机、音响、仪器等的色彩大多采用黑色。黑色还具有庄严的意象，因此也常用在一些特殊场合的空间设计中，生活用品和服饰大多利用黑色塑造高贵的形象。此外，黑色也是一种永远流行的主要颜色，适合与大多数色彩搭配使用。

黑色本身是无光无色的，当作为背景色时，能够很好地衬托出其他颜色，尤其与白色相搭配时，对比非常分明，白底黑字或黑底白色的可视度最高。

◆　案例分析

图1-35所示是一个共享电动车App界面设计，使用黑色作为界面的背景颜色，在界面中搭配白色的文字，表现效果清晰、强烈。界面中的重要信息和功能操作图标则使用了高饱和度的蓝色进行搭配，体现出洁净、环保的印象。高饱和度的蓝色与背景的黑色形成强烈的对比，整体给人一种富有现代感的视觉效果。

图1-36所示是一个汽车宣传网站UI设计，使用黑色作为界面的背景颜色，而汽车本身是非常明亮的黄色，与背景产生强烈的对比效果，非常突出。在界面中搭配少量浅灰色和黄色的文字，界面简洁，效果突出。

1.3.9　白色

在商业设计中，白色具有高级、科技的意象，通常需要和其他色彩搭配使用。纯白色给人以寒冷、严峻的感觉，并且白色还具有洁白、明快、纯真、清洁与和平的情感体验。白色很少单独使用，通常与其他颜色混合使用，纯粹的白色背景对于UI内容的干扰最小。

◆　案例分析

白色是App界面设计中最常用到的背景颜色，可以使界面的表现更加纯净、高雅。图1-37所示是一个手表产品App界面设计，使用无彩色进行搭配，白色的界面背景，搭配浅灰色选项标题背景，以及黑色的功能操作图标和文字，使得界面的色调表现统一，界面整体简洁、高雅，产品图片和信息的表现非常直观。

图1-38所示是一个家装设计网站UI设计，使用纯白色作为界面的背景颜色，搭配接近白色的浅灰色，使整个界面看起来更加简洁、纯净，为界面中的Logo及重要选项部分点缀少量绿色，有效突出重点信息，并能够给浏览者带来健康、清新的感受。

1.3.10　灰色

灰色具有柔和、高雅的意象，随着配色的不同，既可以很动人，也可以很平静。灰色较为中性，象征知性、老年、虚无等，容易使人联想到工厂、都市、冬天的荒凉等。在商业设计中，许多高科技产品，尤其是和金属材料有关的产品，几乎都采用灰色来传达高级、科技的形象。由于灰色过于朴素和沉闷，在使用灰色时，大多利用不同的层次变化组合或搭配其他色彩，使其不会产生呆板、僵硬的感觉。

◆　案例分析

灰色能够表现出时尚、高雅的印象。图1-39所示是一个男士手表产品App界面设计，使用不同明度的灰色进行搭配，浅灰色作为界面背景颜色，而产品图片则使用更浅的灰色块进行突出表现，与背景形成层次感。界面中的文字和购买按钮使用深灰色，整体色调统一，给人一种高档、雅致的印象。

图1-40所示是一个家居产品网站UI设计，使用无彩色进行搭配，中灰色作为界面背景颜色，产品信息部分则搭配浅灰色的背景，增强了界面的色彩层次感。该网站中的家居产品多采用黑、白、灰或原木色，无彩色的网站UI配色与产品色彩相呼应，表现出简洁、自然、纯粹的印象。