1.4 课堂操作——在线图书App配色设计
视频：视频\第1章\1-4.mp4 源文件：源文件\第1章\1-4.xd
◆ 案例分析
本案例是一个在线图书App界面的配色设计，最终效果如图1-41所示。
背景色：白色。使用纯白色作为界面的背景颜色，白色也是App界面最常用的背景颜色，对界面内容的干扰最小，能够有效突出内容的表现。
主题色：青绿色。使用青绿色作为界面的主题色，与白色的背景相搭配，给人一种清爽、洁净的印象。界面顶部的青绿色背景图形与底部标签的青绿色背景相呼应，很好地划分出界面不同的内容区域。
图1-41 在线图书App界面配色
文字颜色：在白色背景上搭配深灰色文字，在青绿色背景上搭配白色文字，始终保持内容的清晰、易读，界面整体给人以清爽、舒适、自然的印象。
◆ 制作步骤
Step01 启动Adobe XD，执行“新建”命令，在打开的“新建”窗口中选择手机选项，如图1-42所示。新建一个iPhone X/XS/11 Pro屏幕尺寸大小的文档，如图1-43所示。
图1-42 “新建”窗口
图1-43 新建iPhone X/XS/11 Pro屏幕尺寸大小的文档
Step02 使用“椭圆工具”，按住Shift键在画板中拖动鼠标绘制一个圆形，如图1-44所示。在右侧的属性面板中设置该圆形的W（宽度）和H（高度）属性均为486，如图1-45所示。
图1-44 绘制圆形
图1-45 设置W（宽度）和H（高度）属性
Step03 在右侧的属性面板中设置该圆形的“填充”属性值为#5ABD8C，“边界”为无，如图1-46所示。在画板中调整该圆形到合适位置，效果如图1-47所示。
图1-46 设置“填充”属性
图1-47 调整圆形位置
Step04 打开“素材14.xd”文件，将状态栏内容复制并粘贴到当前画板中，如图1-48所示。使用“文本”工具在画板中单击并输入文字，在属性面板中设置文字的相关选项，并设置文字的“填充”为白色，效果如图1-49所示。
图1-48 拖入状态栏
图1-49 输入文字并设置属性
Step05 打开“素材14.xd”文件，将菜单图标复制并粘贴到当前画板中，并修改该图标的“填充”为白色，如图1-50所示。将素材图像1401.png拖入画板，并调整到合适的位置，如图1-51所示。
图1-50 拖入菜单图标并修改颜色
图1-51 拖入图像并调整位置
Step06 选择拖入的图像，在属性面板中选择“阴影”复选框，设置阴影颜色为75%的#6390BA，对其他选项进行设置，图像阴影效果如图1-52所示。使用“文本”工具在画板中单击并输入文字，在属性面板中设置文字的相关选项，并设置文字的“填充”为深灰色，效果如图1-53所示。
Step07 使用相同的制作方法，可以拖入其他图像并输入文字，完成该部分内容的制作，效果如图1-54所示。使用相同的制作方法，完成界面下方图书列表的制作，效果如图1-55所示。
图1-52 设置“阴影”选项
图1-53 输入文字
图1-54 界面效果
图1-55 界面效果
Step08 使用“矩形”工具在画板的底部绘制一个375px×85px的矩形，设置“填充”为#5ABD8C，“边界”为无，效果如图1-56所示。打开“素材14.xd”文件，将首页图标复制并粘贴到当前画板中，修改该图标的“填充”为白色，如图1-57所示。
图1-56 绘制矩形
图1-57 复制图标到画板中
Step09 使用“文本”工具在画板中单击并输入文字，在属性面板中设置文字的相关选项，如图1-58所示。使用相同的制作方法，完成底部工具栏的制作，效果如图1-59所示。
图1-58 输入文字并设置属性
图1-59 完成底部标签栏的制作
至此，完成该在线图书App界面的配色设计，最终效果如图1-60所示。
图1-60 在线图书App界面配色效果