1.6　课堂操作——运动鞋App配色设计

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

◆　案例分析

本案例是一个运动鞋App界面的配色设计，最终效果如图1-77所示。

背景色：深灰色。使用接近黑色的深灰色作为界面的背景颜色，深色背景能够给人一种现代感，十分受年轻人的喜爱。

主题色：深红色。为每个运动鞋产品图片搭配一个高饱和度的色彩背景，与背景的深灰色形成非常强烈的对比，有效突出产品的视觉表现效果，同时也使得界面整体表现更加时尚，富有现代感。

文字颜色：界面中的图标和文字都使用了白色进行搭配，与深色背景形成强烈对比，具有很好的可读性。

◆　制作步骤

Step01　启动Adobe XD，新建一个iPhone X/XS/11 Pro屏幕尺寸大小的文档，如图1-78所示。使用“矩形”工具，在画板中绘制一个和画板尺寸大小相同的矩形，设置该矩形的“填充”为#19191C，“边界”为无，如图1-79所示。

Step02　打开“素材16.xd”文件，将品牌标志图形复制并粘贴到当前画板中，调整到合适的位置，如图1-80所示。使用相同的制作方法，复制其他图标到当前画板中，并修改“填充”为白色，分别调整到合适的位置，如图1-81所示。

Step03　使用“文本”工具在画板中单击并输入文字，在属性面板中设置文字的相关选项，并设置文字的“填充”为白色，效果如图1-82所示。使用相同的制作方法，可以输入其他文字，如图1-83所示。

Step04　选择“跑步鞋”和“训练鞋”文字，在右侧的属性面板中设置“不透明度”为20%，效果如图1-84所示。使用“矩形”工具，在画板中绘制一个250px×344px的矩形，设置该矩形的“填充”为#7B0A1E，“边界”为无，如图1-85所示。

Step05　选中刚绘制的矩形，在属性面板中设置其“圆角半径”为45，效果如图1-86所示。将素材图像1601.png拖入画板，并调整到合适的位置，如图1-87所示。

Step06　选择刚拖入的素材图像，在属性面板中设置“阴影”为40%的#000000，其他设置如图1-88所示。使用“文本”工具在画板中单击并输入文字，对文字进行排版处理，效果如图1-89所示。

Step07　使用“椭圆”工具，在画板中按住Shift键拖动鼠标绘制一个168px×168px的圆形，设置该圆形的“填充”为白色，“边界”为无，如图1-90所示。选择红色的圆角矩形，按Ctrl+C组合键进行复制，按Ctrl+V组合键进行粘贴，如图1-91所示。

Step08　同时选中红色的圆角矩形和白色的圆形并单击鼠标右键，在弹出的快捷菜单中选择“带有形状的蒙版”命令，创建蒙版，效果如图1-92所示。打开“素材16.xd”文件，将箭头图标复制到当前画板中，并修改“填充”为#7B0A1E，如图1-93所示。

Step09　使用相同的制作方法，完成另一个产品卡片效果的制作，每一个产品使用一种高饱和度的背景颜色进行突出表现，如图1-94所示。使用“文本”工具在画板中单击并输入文字，效果如图1-95所示。

Step10　使用“矩形”工具，在画板中绘制一个142px×75px的矩形，设置该矩形的“圆角半径”为45，“填充”为#FA3B3B，“边界”为无，效果如图1-96所示。将素材图像1603.png拖入画板，为该素材设置“阴影”为20%的#000000，其他设置如图1-97所示。

Step11　使用相同的制作方法，完成相似内容的制作，如图1-98所示。打开“素材16.xd”文件，将相应的图标复制到当前画板中，并分别设置图标的颜色，效果如图1-99所示。

至此，完成该运动鞋App界面配色设计，最终效果如图1-100所示。