1.4　课堂操作——在线图书App配色设计

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

◆　案例分析

本案例是一个在线图书App界面的配色设计，最终效果如图1-41所示。

背景色：白色。使用纯白色作为界面的背景颜色，白色也是App界面最常用的背景颜色，对界面内容的干扰最小，能够有效突出内容的表现。

主题色：青绿色。使用青绿色作为界面的主题色，与白色的背景相搭配，给人一种清爽、洁净的印象。界面顶部的青绿色背景图形与底部标签的青绿色背景相呼应，很好地划分出界面不同的内容区域。

文字颜色：在白色背景上搭配深灰色文字，在青绿色背景上搭配白色文字，始终保持内容的清晰、易读，界面整体给人以清爽、舒适、自然的印象。

◆　制作步骤

Step01　启动Adobe XD，执行“新建”命令，在打开的“新建”窗口中选择手机选项，如图1-42所示。新建一个iPhone X/XS/11 Pro屏幕尺寸大小的文档，如图1-43所示。

Step02　使用“椭圆工具”，按住Shift键在画板中拖动鼠标绘制一个圆形，如图1-44所示。在右侧的属性面板中设置该圆形的W（宽度）和H（高度）属性均为486，如图1-45所示。

Step03　在右侧的属性面板中设置该圆形的“填充”属性值为#5ABD8C，“边界”为无，如图1-46所示。在画板中调整该圆形到合适位置，效果如图1-47所示。

Step04　打开“素材14.xd”文件，将状态栏内容复制并粘贴到当前画板中，如图1-48所示。使用“文本”工具在画板中单击并输入文字，在属性面板中设置文字的相关选项，并设置文字的“填充”为白色，效果如图1-49所示。

Step05　打开“素材14.xd”文件，将菜单图标复制并粘贴到当前画板中，并修改该图标的“填充”为白色，如图1-50所示。将素材图像1401.png拖入画板，并调整到合适的位置，如图1-51所示。

Step06　选择拖入的图像，在属性面板中选择“阴影”复选框，设置阴影颜色为75%的#6390BA，对其他选项进行设置，图像阴影效果如图1-52所示。使用“文本”工具在画板中单击并输入文字，在属性面板中设置文字的相关选项，并设置文字的“填充”为深灰色，效果如图1-53所示。

Step07　使用相同的制作方法，可以拖入其他图像并输入文字，完成该部分内容的制作，效果如图1-54所示。使用相同的制作方法，完成界面下方图书列表的制作，效果如图1-55所示。

Step08　使用“矩形”工具在画板的底部绘制一个375px×85px的矩形，设置“填充”为#5ABD8C，“边界”为无，效果如图1-56所示。打开“素材14.xd”文件，将首页图标复制并粘贴到当前画板中，修改该图标的“填充”为白色，如图1-57所示。

Step09　使用“文本”工具在画板中单击并输入文字，在属性面板中设置文字的相关选项，如图1-58所示。使用相同的制作方法，完成底部工具栏的制作，效果如图1-59所示。

至此，完成该在线图书App界面的配色设计，最终效果如图1-60所示。