1.8　课堂操作——影视App配色设计

视频：视频\第1章\1-8.mp4　　　源文件：源文件\第1章\1-8.xd

◆　案例分析

本案例是一个影视App界面的配色设计，最终效果如图1-114所示。

背景色：白色。使用白色作为背景色，在电影详情界面中，白色背景与该电影的主题色形成非常强烈的对比，表现出很强的视觉冲突。

主题色：蓝色。界面中各电影选项都使用了该电影的卡通形象结合不同颜色的背景色块来表现，每一个背景色块的颜色都是从该卡通形象中选取的，从而表现出很好的关联性。多种背景色块的设计使界面的表现更加活跃、欢乐，并且能够有效区分不同的电影，非常直观。

辅助色：黑色，在影片详情界面的底部加入黑色按钮，除了能够突出功能按钮的表现，还使整个界面的视觉表现效果稳定下来。

◆　制作步骤

Step01　启动Adobe XD，在手机型号下拉列表框中选择“iPhone XR/XS Max/11（414×896）”选项，如图1-115所示，新建一个iPhone XR/XS Max/11屏幕尺寸大小的文档。使用“文本”工具在画板中单击并输入文字，设置文字的“填充”为黑色，如图1-116所示。

Step02　使用“钢笔工具”，在画板中绘制路径，在属性面板中设置“填充”为无，“边界”为黑色，并对其他选项进行设置，效果如图1-117所示。打开“素材18.xd”文件，将相应的图标复制到当前画板中，效果如图1-118所示。

Step03　使用“文本”工具在画板中单击并输入文字，设置文字的“填充”为黑色，如图1-119所示。使用相同的制作方法，输入其他标签文字，并设置其他标签文字的“不透明度”为30%，效果如图1-120所示。

Step04　使用“椭圆”工具，在画板中按住Shift键拖动鼠标绘制一个7px×7px的圆形，设置该圆形的“填充”为#2BB7BA，“边界”为无，效果如图1-121所示。使用“矩形”工具，在画板中绘制一个162px×238px的矩形，设置该矩形的“圆角半径”为10，“填充”为#348AED，“边界”为无，效果如图1-122所示。

Step05　将素材图像1801.png拖入画板，调整到合适的位置，如图1-123所示。使用“文本”工具在画板中单击并输入文字，设置文字的“填充”为白色，如图1-124所示。

Step06　使用相同的制作方法，完成其他电影标签的制作，注意每个标签都使用不同的背景色块，便于区分不同的电影，如图1-125所示。单击该画板名称，选中画板，按住Alt键不放拖动鼠标复制画板，将复制到画板中的内容删除，在画板名称位置双击，修改画板名称，如图1-126所示。

Step07　使用“矩形”工具，在画板中绘制一个290px×896px的矩形，设置该矩形的“填充”为#348AED，“边界”为无，对圆角矩形选项进行设置，效果如图1-127所示。将素材图像1807.png拖入画板，调整到合适的位置，如图1-128所示。

Step08　使用“椭圆”工具，在画板中按住Shift键拖动鼠标绘制一个66px×66px的圆形，设置该圆形的“填充”为白色，“边界”为无，效果如图1-129所示。选择刚绘制的圆形，在“属性”面板中设置“阴影”为16%的黑色，对阴影相关选项进行设置，效果如图1-130所示。

Step09　使用“多边形”工具，在画板中绘制一个23px×20px的三角形，设置该三角形的“填充”为#348AED，“边界”为无，对三角形选项进行设置，效果如图1-131所示。使用相同的制作方法，在画板中输入文字并拖入相应的素材图像，效果如图1-132所示。

Step10　使用“矩形”工具，在画板中绘制一个355px×70px的矩形，设置该矩形的“填充”为黑色，“边界”为无，效果如图1-133所示。使用“文本”工具在画板中单击并输入文字，设置文字的“填充”为白色，如图1-134所示。

至此，完成该影视App界面配色设计，最终效果如图1-135所示。