第5章移动UI的色彩与风格设计 本章学习目标 熟练掌握UI设计色彩基础知识； 能够进行色彩分析并在实践中加以应用； 熟练使用Photoshop中图像调整功能。 5.1移动UI的色彩 5.1.1色彩的三要素 1. 色相 色相是指各类色彩的相貌称谓，由原色、间色和复色构成，是区别各种不同色彩的最准确的标准，如红、黄、蓝、绿、青等都代表一种具体的色相。在0°~360°的标准色环上，按位置度量色相，色相环图如图51所示。 因色相的差别而形成的色彩对比叫色相对比。以色相环为依据，颜色在色相环上的距离远近决定了色相的强弱对比。距离越远，色相对比越强烈； 距离越近，色相对比越弱。如图52所示。 色相对比一般包括对比色对比、互补色对比、同类色对比和邻近色对比。对比色对比就是在色相环中，夹角相距120°~180°的颜色形成的对比，其对比效果明显。常见的对比色搭配主要包括： 红与绿、蓝与橙、黄与紫等。互补色对比是最强烈、最鲜明的，如黑白对比就是互补色对比。同类色对比是最弱的对比，因为它是距离最小的色相，属于模糊难分的色相，这样的色相对比，色相感显得单纯、柔和、谐调，如图53所示。邻近色则是色相环中相距90°或相隔五六个数位的两色，如红色与黄橙色、蓝色与黄绿色等，邻近色相对比的色相感要比同类色相对比更加明显，也更丰富和活泼，可弥补同类色相对比的不足，但少了统一和谐调，如图54所示。 图51色相环图 图52色相效果对比 图53同类色对比案例 图54邻近色对比案例 2. 饱和度 饱和度是指色彩的强度或纯净程度，可定义为彩度除以明度，与彩度一样，用于表征彩色偏离同亮度灰色的程度，也称为彩度、纯度、艳度或色度。饱和度表示色相中灰色分量所占的比例，使用从(灰度)至100%的百分比度量。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大，饱和度越大； 消色成分越大，饱和度越小。当饱和度降低为0时，则会变成一个灰色图像，增加饱和度会增加其彩度，如图55所示。 不同饱和度的色彩对比会产生不同的视觉效果。饱和度相近的颜色对比，画面视觉效果比较弱，形象清晰度较低，适合长时间及近距离的观看； 饱和度中等对比是最和谐的，画面效果丰富，主次分明，含蓄； 饱和度强对比使画面对比鲜艳，富有生气，色彩认知度也较高，如图56所示。 图55饱和度 图56饱和度设计应用 3. 明度 明度是眼睛对光源和物体表面的明暗程度的感觉。简单地说，明度可以理解为颜色的亮度，有时也可称为亮度或深浅度。在无色彩中，最高明度为白色，最低明度为黑色。在有色彩中，任何一种色彩中都有一个明度特征。不同色相的明度也不同，如黄色比蓝色的明度高，紫色为明度最低的色。任何一种色相加入白色，都会提高明度； 任何一种色相加入黑色，都会降低明度，如图57所示。 图57明度 明度对比是色彩的明暗程度的对比，有时也称为黑白度对比。明度差别的大小决定着色彩对比的强弱。明度差别越大，对比越强； 明度差别越小，对比越弱。明度对比是色彩构成的最重要的因素，色彩的层次与空间关系主要依靠色彩的明度对比来表现。 明度对比越强的色彩越具有刺激性，也是最明快清晰的； 明度对比处于中等的色彩相对于明度对比强的色彩来说，刺激性相对小些，所以通常用在服装设计、室内装饰和装潢包装上； 而处于最低等的明度对比刺激性则更小，大多应用在柔美和含蓄的设计中，如图58所示。 图58明度设计应用 5.1.2色彩应用规律 色彩应用规律是指在使用色彩时应该遵循的一些规律。例如，重要对象应使用红色等醒目的颜色，微信未读消息则是用红色圆点提醒，如图59所示； 在显示屏同一帧内同时出现的颜色种类一般少于4种，不然会使人眼疲劳； 颜色选取时应符合人们的使用习惯，如地图中的蓝色是海洋、绿色是草地等； 一个系统各色彩的含义应该保持统一； 前景色和背景色也要协调搭配。 图59微信未读消息 5.1.3色彩与生活 人们的生活离不开色彩。色彩能够丰富人们的情感和内心世界，同人的物质生活、精神生活紧密相连。有了色彩，人们的生活也因此变得更加丰富和美好。 1. 色彩的冷暖 暖色是能令人感到温暖的颜色，反之称为冷色。红色使人感到温暖，想象的是太阳或火等使之充满能量和热情的东西； 反之，蓝色能令人联想到海洋或天空，让人保持理性。消费类移动应用如淘宝，如图510所示，为了表达热情和使用户充满购买欲，采用的是暖色。 黑色应用，在以前不少理论认为它不适合用于移动应用图形用户界面，但事实上，如果巧妙地运用黑色，也能够提升用户的使用体验，如图511所示。 图510淘宝界面 图511黑色界面 图512所示是一款天气类App，白天和黑夜使用一暖一冷色突出了时间的变化，也使整个App界面更加人性化。 2. 色彩的轻重 黑色和白色属于中性色，不易分出冷暖，但有明显的轻重之分。一般而言，明度不强的色彩都属于重色彩，明度强的色彩都属于轻色彩。 3. 色彩的软硬 色彩的软硬主要取决于色彩的明度与纯度。明度高、纯度低的色彩令人感到柔软，明度低、纯度高的色彩令人感到坚硬。这款情侣类App明度高、纯度低，给人幸福甜蜜的感觉，而粉色又恰好是最能代表这种心情的颜色，如图513所示。 图512某款天气类App界面 图513“小恩爱”界面 色彩的明快和忧郁也与色相、明度、纯度有关。暖色、鲜艳和明度与纯度高的颜色使人更加充满轻快感，冷色、深沉和明度与纯度低的颜色则会使人有忧郁感。 而冷色、明度与纯度低的颜色更理性； 暖色、明度与纯度高的颜色更感性； 配色对比大的色具有兴奋感，对比小的色具有沉静感。 豆瓣FM的应用界面如图514所示。浅绿色给人一种清新愉快的感觉，让人感觉像是在一种放松的环境下进行的。 图514“豆瓣FM”界面 4. 色彩的质感 色彩的质感是物体通过表面呈现的，因材料材质和几何尺寸给人带来视觉和触觉上的感官，从而使人对这个物体产生感官判断。在长期的积累过程中，人脑已经对各种色彩和材料有了固定的判断，所以移动应用也可以借此色彩来表达某种质感。 某记事App界面如图515所示。该App的背景采用了棕黄色和特定的纹路显示出了木板的质感。这种背景的使用，都能给用户在使用记事本和阅读时带来良好的体验。 图515充满质感的记事App界面 5.1.4色彩的设计 色彩的设计就是颜色的搭配。自然界的色彩现象绚丽多变，而色彩设计的配色方案同样千变万化。当人们用眼睛观察自身所处的环境，色彩首先闯入视线，产生各种各样的视觉效果，带给人不同的视觉体会，直接影响着人的美感认知、情绪波动乃至生活状态、工作效率。一个好的UI设计并不是为了美轮美奂，它最重要的目的还是交互和信息的传达。只有保证了信息的流通和交互的顺畅，UI才有其存在的价值。部分色卡如图516所示。 1. 选择主色和强调色 主色是对主题基调的一个确定，目的是为了给人们一种什么样的感觉。强调色是想让人们看到的东西是什么，也就是重点。如图517所示的谷歌界面主色调是黑色，给人一种沉稳、静谧的感觉。而强调色则是它想要突出的酒店、食物和娱乐，分别由绿色、蓝色和红色的圆圈圈出，也代表了每种颜色表达的含义。 图516部分色卡 图517“谷歌”界面 2. 对整体的把握和细节的调整 背景调整了透明度就有了玻璃的质感，字体颜色和透明度也在细节处进行了把握，字体像是刻在玻璃上一样。用横竖线将界面分隔成若干区域，使整体界面一目了然、干净整洁。 5.1.5移动UI常用的配色方案 如果想使自己设计的作品充满生机、稳健、冷清或温暖等感觉，则选择合适的色彩搭配尤为重要。那么怎样才能够控制好整体色调呢？只有控制好构成整体色调的色相、明度、纯度关系和面积关系等，才能控制好设计的整体色调。下面介绍5种常见的配色方案。 1. 单色搭配 单色搭配指由一种色相的不同明度组成的搭配，这种搭配很好地体现了明暗的层次感。某单色搭配App界面如图518所示。 2. 近似色搭配 近似色搭配指相邻的2~3个颜色相互搭配。某近似色搭配App界面如图519所示。这种搭配让人赏心悦目，低饱和度在视觉上较和谐。 3. 补色搭配 补色搭配指色环中相对的两个色相搭配。如果两种颜色混合在一起产生中性色，则称 图518某单色搭配App界面 图519某近似色搭配App界面 这两种颜色互为补色。在设计中，补色是指两种颜色混合后会产生白色的颜色。补色对比强烈，传达的是能量、积极、兴奋、活力等，补色搭配中最好让一个颜色多，一个颜色少。某补色搭配App界面如图520所示。 4. 分裂补色搭配 同时用补色和类比色的方法确定颜色关系，就称为分裂补色。这种搭配既有类比色的低对比度，又有补色的力量感，形成一种既和谐又有重点的颜色关系。某分裂补色App界面App界面如图521所示。 图520某补色搭配App界面 图521某分裂补色App界面 5. 原色的搭配 原色的搭配色彩明快，如蓝色和红色搭配，百事可乐的Logo色与主色调红色、蓝色搭配等。某原色的搭配App界面如图522所示。 图522某原色搭配App界面 5.2手动调整移动UI图像的色彩 Photoshop CC提供了多个可以手动调色的功能，如“色阶”“曲线”“色彩平衡”“亮度/对比度”“阴影/高光”“匹配颜色”等。通过这些命令，可以精确地控制画面的变化，以达到理想的画面效果。 视频讲解 5.2.1色阶 色阶是用来调整图像的明暗程度。选择“图像”→“调整”→“色阶”选项，会弹出“色阶”对话框，如图523所示。 单击“通道”下拉三角按钮，在其下拉列表框中选择需要调整的颜色通道，RGB颜色模式的图像包含RGB、红、绿和蓝4个选项； CMYK颜色模式的图像包含CMYK、青色、洋红、黄色和黑色5个选项，如图524所示。 图523“色阶”对话框 图524“通道”下拉列表框 图像的色阶图用于表明图像中像素色调分布，根据图像中每个亮度值(0~255)处的像素点的多少进行区分。 “输入色阶”显示的就是图片当前状态下的数值。下方的3个文本框分别用来设置暗调、中间调和高光区域的输入色阶。通过如图525所示的修改数值或拖曳预览图下方的滑块，可以调整图像的亮度和对比度。图526和图527所示为向右拖动黑色滑块前后图像效果对比。 图525“色阶”对话框调整亮度和对比度 图526原始图片 图527调整后图片 输出色阶的主要作用是通过设置输出色阶，定义新的暗调和亮调高光值。在它左右两侧分别有一个数值输入框，与前面的“输入色阶”一样，它既可以用鼠标拖曳又可以直接输入数值。 向左移动“输出色阶”的白色滑块，会使图像色彩的中间调逐渐变暗； 向右移动“输出色阶”的黑色滑块，会使图像中间的色彩逐渐变亮，如图528所示。图529和图530所示为向右移动黑色滑块前后的图像效果对比。 在“色阶”对话框中，单击“自动”按钮将执行等量的色阶调整，是将最暗的像素点定义为黑色，将最亮的像素点定义为白色，按比例分配中间色的像素数值。 图528“色阶”对话框调输出色阶 图529原始图片 图530调整后图片 在“色阶”对话框中单击“选项”按钮，打开“自动颜色校正选项”对话框，可重新设置参数，如图531所示。 图531“自动颜色校正选项”对话框 视频讲解 5.2.2曲线 “曲线”命令可以调整单个通道或全部通道的亮度与对比度，也可以调整图像的颜色，以达到理想的画面效果。选择“图像”→“调整”→“曲线”命令，会弹出“曲线”对话框，如图532所示。 图532“曲线”对话框 在“曲线”对话框中，用曲线直观表达图像颜色的色调色阶数值。图表中的横轴代表的是图像原有亮度值，相当于色阶中的输入色阶； 纵轴代表新的亮度值，相当于色阶中的输出色阶。对角线用来显示“当前”和“输入”数值之间的关系，在未对曲线进行调整时，所有像素都有相同的“输入”和“输出”数值。 “曲线”对话框中增添了预设功能。通过预设功能能够快速地对图像进行色彩的调整，预设功能包含彩色负片、反冲、较暗、增强对比度、较亮、线性对比度、中对比度、负片和强对比度，这些都是针对RGB模式下的预设，如图533所示。 图533预设 在“曲线”对话框中有一个铅笔的图标，可以用鼠标在图中直接绘制曲线，如图534所示。如果有需要，也可以单击“平滑”按钮来平滑所画的曲线。 图534铅笔直接绘制曲线 5.2.3色彩平衡调整 通过对图像的色彩平衡处理，可以校正图像色偏过饱和或饱和度不足的情况，也可以根据自己的喜好和制作需要，调制需要的色彩，更好地完成画面效果。 有一张需要调节色彩平衡的照片如图535所示。选择“图像”→“调整”→“色彩平衡”选项，可以打开“色彩平衡”对话框，如图536所示。 图535原始图片 图536“色彩平衡”对话框 “色阶”后面的数值中输入数值即可调整RGB三原色到CMYK色彩模式之间对应的色彩变化，其取值的范围是-100~+100。将对话框中的“”滑块拖向要在图像中增加的颜色或将滑块拖离要在图像中减少的颜色。在对话框下部的“色调平衡”选项组中有“阴影”“中间调”和“高光”这3个单选按钮，可以更改色调范围，同时选中“保持明度”复选框以防止图像的亮度值随颜色的更改而更改。“色彩平衡”选项可以保持图像的色调平衡，调整图片偏色情况。经过“色彩平衡”(如图537所示)调整后的照片如图538所示。 图537“色彩平衡”对话框 图538调整后的图片 当然也可以选择“图层”→“新建调整图层”→“色彩平衡”选项，在“新建图层”中单击“确定”按钮，对图像进行调整。 5.2.4亮度/对比度 亮度/对比度命令可以用来调整图像明暗度、对比度。选择“图像”→“调整”→“亮度/对比度”选项，会弹出“亮度/对比度”对话框，如图539所示。“亮度”可以对图像的色调范围进行简单的调整，将亮度滑块向右拖曳可增强亮度和对比度，向左拖曳可降低亮度和对比度。滑块值右边的数值反映亮度或对比度值。值的“亮度”范围是-150~+150，而“对比度”范围是-50~+100，从而可以加大或减弱图像对比度。“亮度/对比度”与“色阶”“曲线”等命令的调整类似，都是按照比例调整图像像素。 图539“亮度/对比度”对话框 当选中对话框左下角“使用旧版”复选框时，在调整亮度时只是简单地增大或减小所有像素值。这样往往会导致丢失高光或暗部区域中的图像细节。因此，建议最好不要在使用旧版模式中使用亮度/对比度。 亮度/对比度功能用于对曝光不足的图像(图540)进行调整(图541)，调整后的效果如图542所示。 同样地，也可以选择“图层”→“新建调整图层”→“亮度/对比度”选项，在“新建图层”对话框中单击“确定”按钮，对图像进行调整。 图540原始图片 图541调整亮度/对比度 图542调整后的图片 5.2.5色相/饱和度 色相/饱和度命令用于调整图像中单独颜色成分的色相、饱和度和明度，也可以同时调整图像中的所有颜色。 选择“图像”→“调整”→“色相/饱和度”选项，会弹出如图543所示的“色相/饱和度”对话框。 通过“色相”“饱和度”“明度”滑块对图像进行相应的调整，将“色相”滑块向右拖曳，颜色按色轮顺时针旋转； 向左拖曳，颜色按色轮逆时针旋转，在对话框数值框中体现数值。滑块数值范围为-180~+180，而饱和度和明度范围为-100~+100。饱和度值越高色彩越饱和，反之越弱。明度值越高图像越亮，反之越暗。 “色相/饱和度”对话框的下部有两条色带，上面的色带显示的是图像未调整前的颜色，下面的色带显示的是全色相在饱和状态调整后的效果。调整图像的“色相/饱和度”首先要从“编辑”下拉列表框中进行编辑，如图544所示。可以对单独颜色成分或全图(所有颜色)进行颜色调整。 图543“色相/饱和度”对话框 图544“色相/饱和度”对话框中“预设”下拉列表框 选中“色相/饱和度”对话框右下角“着色”复选框时，图像将被转换成与当前“前景色”相同的颜色，但是图像的明度不变，通过调整图像的色相、饱和度和明度，能为图像(RGB)添加丰富的色彩。 5.2.6曝光度 “曝光度”用来调整图像的色调也就是用来调节图片的光感强弱。选择“图像”→“调整”→“曝光度”选项，弹出“曝光度”对话框，如图545所示。 “曝光度”对话框中“曝光度”滑块主要调整亮度； 位移滑块主要调整暗部和使中间调变暗； “灰度系数校正”滑块主要调整中间色。对话框右下角的三个吸管分别为“在图像中取样以设置黑场”“在图像中取样以设置灰场”“在图像中取样以设置白场”。将曝光不足的图片，如图546所示，经过在“曝光度”对话框进行调整，设置如图547所示，得到如图548所示的效果。 图545“曝光度”对话框 图546原始图片 图547设置“曝光度” 图548调整后的图片 5.3自动调整移动UI图像的色彩 5.3.1去色 运用去色功能可以使图像快速转化成灰度图像，将图像的色彩饱和度和色相全部消除，即能够快速将图片黑白化，制作出具有黑白效果的图像，结合众多图像调整命令，可以使图像散发出不一样的魅力。选择“图像”→“调整”→“去色”选项，图像调整前后对比如图549和图550所示。 图549原始图片 图550去色后的图片 5.3.2反相 运用反相功能可以将图像中的颜色反转，即将某个颜色换成它的补色，一幅图像上有很多颜色，每个颜色都转成各自的补色，相当于将这幅图像的色相旋转了180°，原来黑的此时变白，原来绿的此时变红。在处理过程中，可以使图像与负片相互转化。选择“图像”→“调整”→“反相”选项，图像调整前后对比如图551和图552所示。 图551原始图片 图552调整后的图片 5.4特效调整移动UI图像的色彩 5.4.1匹配颜色 运用匹配颜色功能处理RGB模式的图片时，可以将不同的图像或同一图像的不同图层之间的颜色进行匹配，也可以将一个图像(源图像)的颜色与另一个图像(目标图像)的颜色匹配。 下面通过一个具体的例子详细说明匹配颜色功能的使用方法。 (1) 打开两张素材图像，向日葵如图553所示，雪景如图554所示。 图553向日葵 图554雪景 (2) 选择“图像”→“调整”→“匹配颜色”选项，弹出“匹配颜色”对话框，如图555所示。 图555“匹配颜色”对话框 (3) 单击对话框下方的“源”的下三角按钮，在弹出的下拉列表框中选择“雪山.jpg”，如图556所示。 (4) 调整对话框的“明亮度”“颜色强度”“渐隐”等选项，然后单击“确定”按钮，调整后的效果如图557所示。 图556“源”下拉列表框 图557替换后的图片 5.4.2替换颜色 运用替换颜色功能可以在保留图像纹理和阴影的情况下，给图片上色。通过选定区域的颜色容差，进行选择，颜色容差越大可选的范围就越大，在色板或其他图像中选取颜色进行替换操作如图558，效果如图559所示。 图558“替换颜色”对话框 图559替换后的图片 5.4.3通道混合 运用通道混合器功能可以调整某一个通道中的颜色成分。选择“图像”→“调整”→“通道混合器”选项，弹出“通道混合器”对话框，如图560所示。 输出通道： 可以选取要在其中混合一个或多个源通道的通道。 “通道混合器”对话框中的源（颜色）通道即为当前可调节的颜色通道。在“源通道”选项组中，拖曳滑块可以减少或增加源通道在输出通道中所占的百分比或在文本框中直接输入-200~+200的数值。调节“源通道”选项组中相应的滑块，使滑块向左移动，“源通道”选项组中相应的颜色在输出通道中所占的比例相应下降； 反之上升。调节“常数”(该选项可以将一个不透明的通道添加到输出通道，若为负值则视其为黑通道，若为正值则视其为白通道)滑块对图像的亮度做相应的调整。调节过程如图561所示，得到的效果对比如图562和图563所示。 图560“通道混合器”对话框 图561调节源通道 图562原始图片 图563调整后的图片 通过选中对话框左下角的“单色”复选框，可以将图像在颜色模式不变的前提下转化成灰度图像，也可以通过调节各通道实现灰度色阶的调节，如图564和图565所示。 图564转化成灰度图像 图565转化后的图片 5.4.4渐变映射 渐变映射是作用于其下图层的一种调整控制，即将不同亮度映射到不同的颜色上。使用渐变映射工具可以应用渐变重新调整图像，应用于原始图像的灰度细节，加入所选的颜色。选择“图像”→“调整”→“渐变映射”选项，弹出“渐变映射”对话框，如图566所示。 运用渐变编辑器功能如图567和图568所示，可以将待调整的图片用多色渐变填充到相应的图片中，出现不同的画面效果，对比情况如图569和图570所示。 图566“渐变映射”对话框 图567“渐变编辑器”对话框1 单击“渐变映射”对话框中“反向”按钮，能对渐变填充的效果做反向处理，如图571所示，效果如图572所示。 图568“渐变编辑器”对话框2 图569调整后的图片1 图570调整后的图片2 图571反向渐变映射 图572反向后的图片 选中“仿色”复选框可以对待调整的图像加入随机颜色平滑渐变映射填充效果的外观。 5.4.5照片滤镜 运用照片滤镜功能可以对因环境光影响偏色的现象进行调整。照片滤镜有三大功能： 校正色彩偏差； 还原照片的真实色彩； 渲染氛围。 打开偏色照片如图573所示。选择“图像”→“调整”→“照片滤镜”选项，弹出“照片滤镜”对话框，如图574所示。因原图像在冷色光的照射下明显偏蓝色，通过单击“滤镜”右侧的下拉三角按钮，在下拉列表框中选择“加温滤镜(85)”选项，如图575所示。再继续调整对话框下部的浓度值(浓度值越大，效果越强烈)，最终效果如图576所示。 图573原始图片 图574“照片滤镜”对话框 图575调整滤镜和浓度 图576调整后的图像 基础案例展示 图577成品 本例制作一个App的引导页如图577所示。此款App名叫“顺路宝”，其具有“顺路代劳”的功能。所以此App的引导页也是告诉用户在什么情况下使用此款App。红色背景是暖色调，代表着速度热情，而中间的小人姿态也很好地和下面的一串字相呼应。基本制作过程如下： (1) 打开Photoshop，创建一个720px×1080px的长方形，并将此图层命名为“背景”，使用油漆桶工具将其填充为#fe3e32的背景色，如图578所示。 (3) 新建图层，使用圆形工具，在图中适当位置加上圆形并将其填充为白色，如图579所示。 (3) 导入事先找好的卡通小人，调整大小位置，如图580所示。 (4) 将Logo和文字调整至合适位置，如图581所示。 图578主色填充 图579画圆 图580添加卡通小人 图581调整Logo和文字 创新任务设计 在综合运用本章基础知识的基础上，制作微信朋友圈图标并进行色彩分析。最终效果如图582所示。 图582朋友圈图标