移动应用项目开发实战 课件 任务8 设计物流查询主页面

《移动应用与开发项目实战》任务八

设计物流查询主界面

实现设计某物流公司查询主页面功能：点击底部导航栏“物流查询”，进入物流查询页面，页面包括：搜索输入框、广告轮播图、物流公司推荐，并且，下方显示物流公司列表，列表项显示物流公司名称和缩略图等项。【任务描述】【任务目标】【关键技术描述】1.新建画板页面2.修改画板固定布局3.绘制搜索输入框4.插入广告轮播图5.绘制物流公司推荐6.绘制物流公司列表【使用工具】AdobeXD软件中XXX工具【技术介绍】制作轮播图时，将绘制完成的画板复制三个（轮播图有几张图就复制几个画板）如图1-8-54所示。图1-8-54：复制画板【技术介绍】将剩余两个画板的展示图片更换成不同的图片，如图1-8-55所示。点击软件中的原型模式，选中画板。图1-8-55：修改图片【技术介绍】在右侧属性栏中的交互方式选择“时间”，延迟“2秒”，类型“自动制作动画”，缓动“对齐”持续时间“0.3秒”如图1-8-56所示。图1-8-56：设置数值【技术介绍】三个画板相互连接即可完成如图1-8-57所示。图1-8-57：连接画板【任务实施】1.新建画板页面点击Windows开始按钮，在主菜单的所有程序中，点击AdobeXD程序图标，打开AdobeXD主界面。在打开的主界面上，请按照题目中的规定尺寸（1080×1920）新建画板，用于绘制物流公司页面的相关内容，点击页面左上角“文件”点击“新建”按钮，进入新建页面如图1-8-1所示。【任务实施】2.修改画板固定布局选择某一个绘制完成的画板，右键复制粘贴，将内容全部删除，只留下空白的标签栏导航栏，状态栏如图1-8-2所示。图1-8-2：空白页面【任务实施】单击选中状态栏，在“素材库”里选择图标素材，点击“导入”按钮，导入至状态栏，修改其大小（W:1080,H:49,X:0,Y:7）如图1-8-3所示。图1-8-3：导入时间素材【任务实施】单击选中导航栏，在页面右侧属性面板中选择“填充”，（颜色为：#49B0FE）如图1-8-4所示。图1-8-4：填充颜色【任务实施】单击关闭“属性”下方的“边界”，点击取消前面的勾选框如图1-8-5所示。图1-8-5：填充颜色【任务实施】3.绘制搜索输入框（1）在导航栏下方绘制搜索输入框，在左侧的工具栏面板中点击“矩形”工具，在导航栏下方绘制一条矩形如图1-8-6所示。如图1-8-6绘制矩形【任务实施】并填充颜色（颜色为：#EEF8FF）如图1-8-7如图。图1-8-7：填充颜色【任务实施】关闭“边界”勾选框如图1-8-8所示。图1-8-8：关闭“边界”勾选框【任务实施】（2）左侧工具栏面板中选择“文本”工具，在绘制完成的矩形上点击输入“请输入内容”等相关类型的提示文字如图1-8-9所示。图1-8-9：添加提示语【任务实施】（3）输入完成后，单击文本框，在右侧属性面板中的“文本”（字体大小：45，字体粗细：Regular）如图1-8-10所示。图1-8-10：修改字体【任务实施】点击“填充”颜色为（#B1B1B1）“边界”颜色相同如图1-8-11所示。图1-8-11：修改颜色字体【任务实施】将修改后的文本框放置在矩形框内（X:116,Y:275）如图1-8-12所示。图1-8-12：更改位置【任务实施】（4）按住shift键点击绘制完成的文字和矩形，单击鼠标右键选择“组”结合成组件如图1-8-13所示。图1-8-13：结合成组【任务实施】（5）点击左侧工具栏面板中的“矩形”工具，在搜索输入框的右侧（W:171,H:110,X:843,Y:250）绘制一个等比例缩小的矩形如图1-8-14。图1-8-14：绘制矩形【任务实施】颜色填充为白色，边界为灰色（#707070）如图1-8-15所示。图1-8-15：填充颜色【任务实施】在右侧属性面板中找到“外观”，修改矩形的圆角弧度如图1-8-16所示。图1-8-16：修改圆角弧度【任务实施】利用“文本”工具在矩形内输入“搜索”文字（X:884,Y:275），修改文字（字体大小：45，字体粗细：Regular，边界颜色：黑色，填充颜色：黑色）如图1-8-17所示。图1-8-17：修改字体【任务实施】（6）单击输入框组件，选中后点击属性面板中的“组件”效果，点击“组件”后的“+”出现“默认状态”如图1-8-18所示。图1-8-18：默认状态【任务实施】点击“默认状态”中的“+”选择悬停状态如图1-8-19所示。图1-8-19：悬停状态【任务实施】再次点击“默认状态”中的“+”选择切换状态如图1-8-20所示。图1-8-20：切换状态【任务实施】（7）选中“悬停状态”后，双击输入框，在外圈绿色点状线变成绿色直线如图1-8-21所示。图1-8-21：双击输入框【任务实施】将文本框删除，就可以在矩形中增加内容，单击“直线”工具，在矩形内绘制一条（W:0,H:41,X:123,Y:285）直线如图1-8-22所示。图1-8-22：添加直线【任务实施】点击直线，修改颜色为黑色，将“大小”修改为8，如图1-8-23所示。图1-8-23：修改大小【任务实施】（8）选中“切换状态”后，双击输入框，在外圈绿色点状线变成绿色直线如图1-8-24所示。图1-8-24：双击输入框【任务实施】单击矩形内的文本框，输入某物流公司名称，点击文本框进行修改（颜色：黑色，字体大小：45，字体粗细：Regular）如图1-8-25所示。图1-8-25：修改字体【任务实施】4.插入广告轮播图（1）点击页面左上角的“文件”，选择“导入”功能，单击进入“素材包”，在素材包中选择自己所需要的图片（选择10-1,10-2,10-3图片）点击导入如图1-8-26所示。【任务实施】（2）选择需要的图片后（若需要多张图片按住shift键进行多选），点击“导入”按钮，所选择的图片就会出现在AdobeXD页面中的画板上如图1-8-27所示。图1-8-27：导入图片【任务实施】（3）对导入的图片进行组合成组件，按住shift键点击图片后，右击选择“组”功能如图1-8-28所示。图1-8-28：结合成组进行调整图片大小（1080×400）以及位置（W:3240,H:400,X:0,Y:385）如图1-8-29所示。图1-8-29：修改图片【任务实施】5.绘制物流公司推荐（1）利用“直线”工具在轮播图下方（W:0,H:46,X:40,Y:842）绘制一个小竖线如图1-8-30所示。图1-8-30：绘制小标题选中小竖线颜色修改为#49B0FE，大小改为10如图1-8-31所示。图1-8-31：绘制小标题【任务实施】点击“文本”工具，在竖线后（X:52,Y:837）输入“物流公司推荐”文字如图1-8-32所示。图1-8-32：修改文字【任务实施】点击文本框，修改颜色为黑色，字体大小为40，字体粗细为Regular如图1-8-33所示。图1-8-33：调整颜色【任务实施】（2）点击页面左上角的“文件”，选择“导入”功能，单击进入“素材包”，选择自己所需要的图片如图（10-13）1-8-34所示。图1-8-34：导入图片【任务实施】（3）选择完需要的图片后，点击“导入”按钮，所选择的图片就出现在AdobeXD页面中如图1-8-35所示。图1-8-35：导入图片【任务实施】（4）调整图片大小（128×128）以及位置（W:128,H:128,X:92,Y:924）如图1-8-37所示。如图1-8-37：调整图片【任务实施】点击“文本”工具，在物流公司图片下方（X:86,Y:1052）输入该物流公司的名称并结合成组（字体大小：35，字体粗细：Regular）如图1-8-38所示。图1-8-38：结合成组【任务实施】（5）选中组件，在右侧属性栏点击“重复网格”按钮，根据题目绘制相应的个数如图1-8-39所示。图1-8-39：重复网格【任务实施】在等比例调整后点击“取消网格编组”按钮如图1-8-40所示。图1-8-40：利用“重复网格”【任务实施】（6）点击某个组件，双击选中图片，右键选择“替换图像”在“素材库”中选择自己所需要的图片（10-6—10-13）更改图片后。将下方对应的物流公司名称也一并更改如图1-8-41所示。图1-8-41：修改内容【任务实施】6.绘制物流公司列表（1）利用“直线”工具在“物流公司推荐列表”下方绘制一个小竖线如图1-8-42所示。图1-8-42：绘制小标题选中小竖线颜色修改为#49B0FE，大小改为10如图1-8-43所示。图1-8-43：线条大小【任务实施】点击“文本”工具，在竖线后（X:52,Y:1329）输入“其他物流公司列表”文字如图1-8-44所示。图1-8-44：输入文本【任务实施】点击文本框，修改颜色为黑色，字体大小为40，字体粗细为Regular如图1-8-45所示。图1-8-45：修改字体【任务实施】（2）在标题下方位置导入图片（W:128,H:128,X:86,Y:1403）调整大小（128×128）如图1-8-46所示。图1-8-46：调整图片【任务实施】利用“文本”工具在图片一侧（X:238,Y:1436）输入物流公司名称（字体颜色：黑色，字体大小：35，字体粗细：Regular）如图1-8-47所示。图1-8-47：调整字体【任务实施】将图片和文字结合成组件如图1-8-48所示。图1-8-48：结合成组（3）选中组件，在右侧属性栏中点击“重复网格”，根据题目绘制相应的个数如图1-8-49所示。图1-8-49：利用重复网格工具【任务实施】列表超出画板时，双击选中画板点击底部边框向下拖动至合适位置如图1-8-50所示。图1-8-50：修改画板在等比例调整之后，右键选择“取消网格编组”如图1-8-51所示。图1-8-51：取消网格编组【任务实施】（4）点击某个组件，双击选中图片，右键选择“替换图像”在“素材库”中选择自己所需要的图片（10-14—10-18）更改图片后，将下方对应的物流公