移动应用项目开发实战 课件全套

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

了解AdobeXD界面本模块以产品原型为目标，考查参赛选手熟练收集、分析和归纳客户需求，清晰梳理业务流程，熟练使用UI设计软件进行产品UI/UE设计，掌握正确的UI配色方案，设计出符合业务逻辑的人体工学移动App原型优秀作品。让我们先来了解一下AdobeXD的用法。【任务描述】【任务目标】【关键技术描述】1.创建面板2.绘制图形3.文本4.画板工具5.图层6.原型工具【使用工具】AdobeXD软件中XXX工具【技术介绍】点击左侧工具栏中的“选择”工具，选中绘制的矩形，如图1-1-14所示。然后，点击右侧面板中的“重复网格”，可以横排和竖排拉出重复的矩形，如图1-1-15所示。图1-1-14选中矩形图1-1-15重复网格【任务实施】1.创建面板AdobeXD是一种轻量级矢量图形编辑器和原型设计工具，AdobeXD-全功能UI/UX解决方案，从概念到原型分分钟搞定，自带一键标注和一键导出。其中，Windows操作系统和MacOS操作系统均支持打开编辑Sketch、Psd源文件。创建一个新面板，用于此次实训。（见1-1-1）点击Windows开始按钮，在所有程序中,点击AdobeXD程序图标，打开如图1-1-1所示界面。【任务实施】图1-1-1打开AdobeXD图1-1-2创建新面板启动软件，选择1080×1920像素的面板，如图1-1-2所示。【任务实施】2.绘制图形和PS软件一样，AdobeXD界面布局的画布左边是工具栏，右边是属性栏，通过选择不同的工具，可以选择绘制矩形、圆、和多边形。点击左侧工具栏“矩形”，绘制一个矩形如图1-1-3所示。【任务实施】图1-1-3绘制矩形如果想调整矩形的角的弧度，在右侧属性栏中，修改数值，调整弧度，如图1-1-4所示。图1-1-4调整弧度【任务实施】3.文本如图1-1-5所示，点击工具栏“文本”，通过文字面板在AdobeXD中输入文字。图1-1-5选择文本调整文字大小、字体、颜色、粗细如图1-1-6所示图1-1-6调整文字样式【任务实施】4.画板工具点击工具栏“画板”如图1-1-7所示，选中右侧画板尺寸。图1-1-7选择画板工具【任务实施】再点击任意位置可添加相同尺寸的画板如图1-1-8所示图1-1-8添加画板【任务实施】点击画布名称，选中画布，点击鼠标，然后，按住Alt＋鼠标左键拖拽，复制画板，如图1-1-9所示。图1-1-9复制画板【任务实施】5.图层点击工具栏中“图层”工具，如图1-1-10所示选择图层工具。图1-1-10选择图层工具拖动图层，可调整位置、锁定、添加导出标记、隐藏等，如图1-1-11所示。图1-1-11图层样式【任务实施】6.原型工具点击左侧工具栏中的“选择”工具，选中绘制的矩形，如图1-1-12所示。图1-1-12选中矩形选中后，点击上方原型工具，右侧可以对矩形的属性进行调整，如图1-1-13所示。图1-1-13进入原型设计面板THANKS

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

绘制状态栏绘制状态栏，状态栏高度为72px。【任务描述】【任务目标】【关键技术描述】1.创建面板2.绘制矩形3.绘制状态栏的内容【使用工具】AdobeXD软件中XXX工具【技术介绍】矩形填充颜色时可以用透明度或颜色填充，选择矩形点击右侧填充，颜色为#DCFAFF，可以实现与设置透明度一样的效果，如图1-2-17所示。图1-2-17填充颜色【任务实施】1.创建面板点击Windows开始按钮，在所有程序中点击AdobeXD,如图1-2-1所示。图1-2-1打开AdobeXD【任务实施】启动软件，选择1080×1920像素的面板如图1-2-2所示。图1-2-2创建新面板【任务实施】2.绘制矩形选择左侧工具栏的里矩形工具，如图1-2-2所示。图1-2-2选择矩形【任务实施】在画板顶部，绘制一个1080×72px的矩形。其中，长宽分别为W:1080，H:72；坐标的位置分别为：X:0，Y:0，如图1-2-3所示。图1-2-3绘制矩形【任务实施】选中绘制的矩形，点击左侧填充颜色为#209EFF，边框颜色为#209EFF，如图1-2-4所示。图1-2-4填充颜色【任务实施】3.绘制状态栏的内容（1）选择左侧工具栏“文本”，点击状态栏右上角输入时间9：41，如图1-2-5所示。图1-2-5输入文本【任务实施】（2）点击左侧工具栏“选择”，选中文字，右侧修改文本大小为30，居中，如图1-2-6所示。图1-2-6修改字体样式【任务实施】选择左侧工具栏的里矩形工具，如图1-2-7所示。图1-2-7选择矩形【任务实施】（3）绘制四个矩形做为信号图标，按住shift选中四个矩形右击点击组，如图1-2-8所示。图1-2-8合并为组【任务实施】长宽分别为6，12:；6，18；6，23；6，28，位置为X:855，Y:25，如图1-2-9所示。图1-2-9图形大小和位置【任务实施】（4）点击左侧工具栏中的“钢笔”，在画布上绘制一个曲线大小为W：20，H：5，如图1-2-10所示。图1-2-10绘制曲线【任务实施】选中曲线，右击点击拷贝，左击拷贝，移到第一个曲线上方，右侧调整大小为W:29，H:8，如图1-2-11所示。图1-2-11绘制曲线【任务实施】（5）复制曲线移到第二个曲线上方，调整大小为W:44，H:12。如图1-2-12所示。图1-2-12【任务实施】（6）按住shift依次点击画完的三个曲线，右键点击组，如图1-2-13所示。图1-2-13合并为组【任务实施】图1-2-14调整位置右侧位置修改为X:906，Y:24，如图1-2-14所示。【任务实施】（7）点击左侧工具栏“矩形”，绘制两个矩形大小位置分别为W:35，H:16，X:959，Y:27;W:43,H:22，X:955，Y:24，如图1-2-15所示。图1-2-15绘制矩形【任务实施】设置第二个矩形透明度为35，如图1-2-16所示。图1-2-16调整透明度THANKS

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

绘制导航栏底部导航栏元素“找工作、宠物医院、看电影、物流查询”设计完整。

【任务描述】【任务目标】【关键技术描述】1.创建面板2.绘制内容【使用工具】AdobeXD软件中XXX工具【技术介绍】按住shift＋鼠标左键选择绘制完成的三个矩形，按Ctrl＋G可以合并为组，如图1-3-23所示。图1-3-24合并图形【任务实施】1.创建面板点击windows开始按钮，在所有程序中点击AdobeXD程序，如图1-3-1所示。图1-3-1打开AdobeXD【任务实施】启动AdobeXD软件主界面后，选择1080×1920像素的面板如图1-3-2所示。图1-3-2创建新面板【任务实施】2.绘制内容点击左侧工具栏“矩形”，绘制一个矩形长宽、位置为W:1080,H:144,X:0,Y:1776,如图1-3-3所示。图1-3-3绘制矩形【任务实施】点击左侧工具栏“矩形”绘制一个矩形，大小、位置为W:52,H:45,X:149,Y:1811，如图1-3-5所示。图1-3-5绘制矩形【任务实施】再次绘制两个矩形大小、位置分别为W:26,H:12,X:162,Y:1801；W:18，H：16，X:166，Y:1826，如图1-3-6所示。图1-3-6绘制矩形【任务实施】点击左侧工具栏“直线”绘制两个直线，长短、位置分别为W:17，H:8，X:149，Y:1822；W:17，H:8，X:183，Y:1822。如图1-3-7所示。图1-3-7绘制直线【任务实施】点击左侧工具栏“文本”，输入找工作，右侧文本字体大小为30，靠左。文本位置为X:130，Y:1856，如图1-3-8所示。图1-3-8输入文本【任务实施】点击左侧工具栏“多边形”，绘制一个三角形，大小、位置为W:71,H:24,X:368,Y:1807，如图1-3-9所示。图1-3-9绘制多边形【任务实施】填充颜色为#6E6E6E，点击左侧工具栏“矩形”，绘制矩形，大小、位置为W:47，H:42，X:369，Y:1831.如图1-3-10所示。图1-3-10绘制矩形【任务实施】点击右侧“填充”，填充颜色为#6E6E6E，如图1-3-11所示。图1-3-11填充颜色【任务实施】点击左侧工具栏“矩形”绘制两个矩形，位置分别为W:6，H:21，X:381,Y:1827；W:6，H:21，X:389,Y:1821。如图1-3-12所示。图1-3-12绘制矩形【任务实施】点击左侧工具栏“文本”，输入宠物医院，右侧文本字体大小为30，靠左。文本位置为X:347，Y:1856，如图1-3-13所示。图1-3-14输入文本【任务实施】点击左侧工具栏“矩形”，绘制一个矩形，大小、位置为W:49，H:36，X:607，Y：1825,如图1-3-15所示。图1-3-15绘制矩形【任务实施】点击右侧“填充”，填充颜色为#707070，如图1-3-16所示。图1-3-16填充颜色【任务实施】点击左侧工具栏“矩形”，绘制一个矩形，大小、位置为W:16，H:9，X:607，Y：1813,如图1-3-17所示。图1-3-17绘制矩形【任务实施】点击右侧“填充”，填充颜色为#707070，如图1-3-18所示。图1-3-19填充颜色【任务实施】点击刚刚绘制的矩形，点击鼠标右键拷贝，右键粘贴，复制两个矩形，右侧位置输入X:624，Y:1813，X:640，Y:1813.如图1-3-20所示。图1-3-20复制矩形【任务实施】点击刚刚绘制的矩形，点击鼠标右键拷贝，右键粘贴，复制两个矩形，右侧位置输入X:624，Y:1813，X:640，Y:1813.如图1-3-20所示。图1-3-20复制矩形【任务实施】点击刚刚绘制的矩形，点击鼠标右键拷贝，右键粘贴，复制两个矩形，右侧位置输入X:624，Y:1813，X:640，Y:1813.如图1-3-20所示。图1-3-20复制矩形【任务实施】点击左侧工具栏“矩形”，绘制一个矩形，大小、位置、倾斜度为W:42，H:6，X:605，Y：1794，,如图1-3-21所示。图1-3-21绘制图形【任务实施】点击右侧“填充”，填充颜色为#707070，如图1-3-21所示。图1-3-21填充颜色【任务实施】点击左侧工具栏“文本”，输入看电影，右侧文本字体大小为30，靠左。文本位置为X:585，Y:1857，如图1-3-22所示。图1-3-22输入文本THANKS

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

实现搜索框功能制作搜索框，实现搜索框功能。【任务描述】【任务目标】【关键技术描述】1.绘制基本图形2.插入组件3.加入动作【使用工具】AdobeXD软件中XXX工具【技术介绍】点击左侧工具栏“直线”，绘制一条直线，大小、位置为W:0，H:82，X:865，Y:284，如图1-4-15所示。图1-4-15绘制直线【技术介绍】点击看电影-1面板的名称，按住Alt拖动面板，可以快速复制面板，如图1-4-16所示。图1-4-16复制面板【任务实施】绘制基本图形点击Windows开始按钮，在主菜单的所有程序中，点击AdobeXD程序图标，打开AdobeXD主界面。在打开的主界面上，点击左侧工具栏“矩形”，绘制一个矩形，大小、位置为：W:1006，H:110，X:39，Y：270，如图1-4-1所示。图1-4-1绘制矩形【任务实施】点击左侧工具栏“文本”，输入请输入搜索内容，右侧文本字体大小为40，靠左。文本位置为X:64，Y:299，如图1-4-2所示。图1-4-2输入文本【任务实施】点击左侧工具栏“文本”，输入搜索，右侧文本字体大小为40，靠左。文本位置为X:921，Y:299，如图1-4-3所示。图1-4-4输入文本【任务实施】图1-4-6设置悬停状态点击悬停状态，双击文字输入l，右侧文字大小为50，左对齐，如图1-4-6所示。【任务实施】点击切换状态，如图1-4-7所示。图1-4-7选中切换状态【任务实施】双击文字输入变形金刚，右侧文字大小为40，左对齐，如图1-4-8所示。图1-4-8调整样式【任务实施】点击左侧工具栏“画板”，点击右侧iPhone12Promax，右侧画板大小改为W：1080，H：1920，如图1-4-9所示。图1-4-9新建画布【任务实施】点击原型，进入原型设计界面如图1-4-10所示。图1-4-11进入原型【任务实施】点击看电影-2中的搜索，如图1-4-12所示。图1-4-12选中文本【任务实施】按住蓝色箭头拖动到画板看电影-2中，如图1-4-13所示。图1-4-13连接画板【任务实施】点击右侧类型中的自动制作动画，触发中的点击，如图1-4-14所示。图1-4-14设置属性THANKS

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

设计轮播图界面页面中制作轮播图

【任务描述】【任务目标】【关键技术描述】1.插入照片2.调整图片大小位置3.设置原型动作【使用工具】AdobeXD软件中XXX工具【技术介绍】插入的照片可以设置圆角来提升美观度，点击导入的照片，右侧圆角设置为20，如图1-5-13所示。图1-5-13调整圆角【技术介绍】点击看电影-1，按住Alt键拖动选中的画板，可以快速复制面板，如图1-5-14所示。图1-5-14复制面板

【任务实施】1.插入照片点击Windows开始按钮，在主菜单的所有程序中，点击AdobeXD程序图标，打开AdobeXD主界面。点击左上角文件，点击导入，如图1-5-1所示。图1-5-1导入照片【任务实施】选择素材库1-1-1，点击确定，如图1-5-2所示。图1-5-2导入照片【任务实施】调整图片位置、大小，点击导入的照片，右侧大小、位置为W:1020，X:30，H:301，Y:407，如图1-5-3所示。图1-5-3导入照片【任务实施】复制看电影-1，点击看电影-1面板，鼠标右击拷贝，如图1-5-4所示。图1-5-4复制面板【任务实施】在空白处右击鼠标，点击粘贴，复制面板就完成了，再次右击复制一个面板，如图1-5-5所示。图1-5-5粘贴面板【任务实施】点击看电影-1-2面板中的照片右击，点击替换图像，如图1-5-6所示。图1-5-6替换图像【任务实施】选中素材库中的1-1-2.jpg，点击导入，如图1-5-7所示。图1-5-7导入照片【任务实施】点击看电影-1-3面板中的照片右击，点击替换图像，如图1-5-8所示。图1-5-8替换图像【任务实施】选中素材库中的1-1-3.jpg，点击导入，如图1-5-9所示。图1-5-9替换图像【任务实施】点击上方原型，进入原型界面，选中看电影-1面板连接到看电影-1-2面板，如图1-5-10所示。图1-5-10连接面板【任务实施】点击上方原型，进入原型界面，选中看电影-1-2面板连接到看电影-1-3面板，如图1-5-11所示。图1-5-11连接面板【任务实施】点击上方原型，进入原型界面，选中看电影-1-3面板连接到看电影-1面板，如图1-5-11所示。图1-5-11连接面板【任务实施】选中看电影-1面板，右侧触发：时间，延迟：三秒，类型：自动制作动画，目标：看电影-1-2，缓动：渐出，持续时间：0.3秒，如图1-5-12所示。此外，看电影-1-2，看电影-1-3制作流程同上所示。图1-5-12设置属性THANKS

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

设计服务入口服务入口需要显示提示小标题，服务入口的不同图标，对应的服务入口名称等信息。【任务描述】【任务目标】【关键技术描述】1.绘制小标题2.导入图片3.输入文字4.复制粘贴【使用工具】AdobeXD软件中XXX工具【技术介绍】在右侧“属性栏”面板，点击“重复网格”时，注意行与行所调整的间距，根据页面整体美观进行调整，根据题目绘制相应的个数，在调整完之后，点击右侧“属性栏”中选择“取消网格编组”按钮如图1-6-12所示。图1-6-12重复网格【任务实施】绘制小标题点击Windows开始按钮，在主菜单的所有程序中，点击AdobeXD程序图标，打开AdobeXD主界面。利用“直线”工具在全部服务下方（W:0,H:45,X:44,Y:876）绘制一个小竖线，如图1-6-1所示。图1-6-1绘制直线【任务实施】选中小竖线颜色修改为#49B0FE，大小改为10如图1-6-2所示。图1-6-2填充颜色【任务实施】点击“文本”工具，在竖线后（X:52,Y:868）输入“全部服务”文字如图1-6-3所示。图1-6-3输入文本【任务实施】点击文本框，修改颜色为黑色，字体大小为40，字体粗细为Regular如图1-6-4所示。图1-6-4修改样式【任务实施】2.导入图片点击左侧工具栏中“主页”，选择“椭圆”工具，在页面中绘制一个圆形（W:124,H:124,X:99,Y:969）如图1-6-5所示。图1-6-6绘制圆形【任务实施】点击右侧属性栏填充，选择颜色如图1-6-6所示。图1-6-6填充颜色【任务实施】将图标复制在椭圆中（W:42,H:42,X:139,Y:1010）修改颜色为白色如图1-6-7所示。图1-6-7绘制图标【任务实施】3.输入文字点击左侧工具栏中的文本工具，在椭圆的下方输入服务名称（X:118,Y:1100）如图1-6-8所示。图1-6-8输入文本【任务实施】选中文本框，修改文字（颜色为#A6A6A6，字体大小为40，字体粗细为Regular）如图1-6-9所示。图1-6-9修改属性【任务实施】4.复制粘贴选中椭圆和服务名称结合成组，利用“重复网格”工具复制相应个数后移动合适位置点击“取消网格编组”按钮如图1-6-10所示。图1-6-10复制组件【任务实施】将复制出的剩余组件，按照要求修改对应内容如图1-6-11所示。图1-6-11修改位置THANKS

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

绘制信息显示板块信息显示板块需要显示电影封面图片，电影名称，购票按钮等相关内容信息。【任务描述】【任务目标】【关键技术描述】1.绘制小标题2.导入图片3.输入电影名称4.绘制购票按钮【使用工具】AdobeXD软件中XXX工具【技术介绍】制作小标题时，可以对垂直竖线或输入的文字进行颜色大小字体上的更改，但最后修改完成的格式，一定要与整个页面的布局颜色进行统一，如图1-7-16所示。图1-7-16调整布局颜色【任务实施】1.绘制小标题点击Windows开始按钮，在主菜单的所有程序中，点击AdobeXD程序图标，打开AdobeXD主界面。利用“直线”工具在全部服务下方（W:0,H:45,X:44,Y:1195）绘制一个小竖线如图1-7-1所示。图1-7-1绘制直线【任务实施】选中小竖线颜色修改为#49B0FE，大小改为10如图1-7-2所示。图1-7-2修改颜色、大小【任务实施】点击“文本”工具，在竖线后（X:52,Y:1187）输入“正在热映”文字如图1-7-3所示。图1-7-3输入文本【任务实施】2.导入图片点击上方菜单栏中“主页”，选择“导入”功能，选择素材库1-1-4，点击“导入”按钮。图1-7-5导入照片【任务实施】如图1-7-6所示将图片导入至页面（W:242,H:356,X:82,Y:1270）。图1-7-6调整大小【任务实施】3.输入电影名称点击左侧工具栏中的文本工具，在电影图片的下方输入电影名称（X:143,Y:1626）如图1-7-7所示。图1-7-7输入文本【任务实施】选中文本框，修改文字（颜色为黑色，字体大小为30，字体粗细为Regular）如图1-7-8所示。图1-7-8修改文字属性【任务实施】选中文本框，修改文字（颜色为黑色，字体大小为30，字体粗细为Regular）如图1-7-8所示。图1-7-8修改文字属性【任务实施】4.绘制购票按钮（1）利用左侧工具栏中的矩形工具，在电影名称下方绘制一个小矩形（W:149,H:65,X:143,Y:1688）如图1-7-9所示。图1-7-9绘制矩形【任务实施】（2）选中矩形，在右侧属性栏面板中选择“外观”中的圆角度数（输入：38），填充颜色为：#FF8800，大小为：1，如图1-7-10所示。图1-7-10修改矩形样式【任务实施】（3）利用文本工具在圆角矩形中输入“购票”文字（X:192,Y:1701），如图1-7-11所示。图1-7-11输入文字【任务实施】（4）修改文字（文字颜色：白色，文字大小：30，文字粗细：Regular）如图1-7-12所示。图1-7-12修改文字【任务实施】（5）点击圆角矩形和购票文字，结合成组如图1-7-13所示。图1-7-13合并成组【任务实施】（6）选择电影图片，电影名称，购票按钮结合成组，利用“重复网格”工具复制相应个数后点击“取消网格编组”按钮，如图1-7-14所示。图1-7-14复制组件【任务实施】（7）将复制出的剩余组件，按照要求修改对应内容如图1-7-15所示。图1-7-15修改位置THANKS

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

设计物流查询主界面

实现设计某物流公司查询主页面功能：点击底部导航栏“物流查询”，进入物流查询页面，页面包括：搜索输入框、广告轮播图、物流公司推荐，并且，下方显示物流公司列表，列表项显示物流公司名称和缩略图等项。【任务描述】【任务目标】【关键技术描述】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）更改图片后，将下方对应的物流公司名称也一并更改如图1-8-52所示。图1-8-52：修改列表【任务实施】修改完成后，点击底部导航栏，将其图层拖移到所有图层最上方，然后在属性面板中选择“滚动式固定位置”如图1-8-53所示。图1-8-53：滚动时固定位置【任务实施】（5）全部修改完后，选中画板Ctrl+c复制，Ctrl+v粘贴新的画板，按照首字母A-Z和Z-A进行“其他物流公司列表”顺序的颠倒修改如图1-8-53所示。图1-8-53：复制粘贴THANKS

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

实现物流排序功能

实现显示物流公司列表，列表项显示物流公司名称和缩略图。在“物流查询页面”中的“其他物流公司”中，包含2个单选按钮，每个元素完整显示，点击排序按钮能够正常实现排序功能。【任务描述】【任务目标】【关键技术描述】1.绘制提示标题2.绘制排序按钮3.导入图片，输入文字4.最后修改【使用工具】AdobeXD软件中XXX工具【技术介绍】在右侧“属性栏”面板，点击“重复网格”时，注意行与行所调整的间距，根据页面整体美观进行调整，根据题目绘制相应的个数，在调整完之后，点击右侧“属性栏”中选择“取消网格编组”按钮如图1-9-21所示。图1-9-21：画面美观【任务实施】绘制提示标题点击Windows开始按钮，在主菜单的所有程序中，点击AdobeXD程序图标，打开AdobeXD主界面。在打开主界面上，完成以下操作。（1）利用“直线”工具在“物流公司推荐列表”下方（W:0,H:46,X:40,Y:1334）绘制一个小竖线如图1-9-1所示。图1-9-1：绘制小标题【任务实施】选中小竖线颜色修改为#49B0FE，大小改为10如图1-9-2所示。图1-9-2：线条大小点击“文本”工具，在竖线后（X:52,Y:1329）输入“其他物流公司列表”文字如图1-9-3所示。图1-9-3：输入文本【任务实施】点击文本框，修改颜色为黑色，字体大小为40，字体粗细为Regular如图1-9-4所示。图1-9-4：修改字体绘制排序按钮点击左侧“工具栏”面板中的“椭圆”工具，在小标题下方绘制两个大小相同的小椭圆形（第1个圆形：W:70,H:70,X:96,Y:1416），（第2个圆形：W:70,H:70,X:456,Y:1416）如图1-9-5所示。图1-9-5：绘制圆形【任务实施】（2）将第一个椭圆形填充颜色（#49B0FE），点击取消“边界”前的勾选框进行区分如图1-9-6所示。图1-9-6：填充颜色【任务实施】（3）左侧“工具栏”面板选择“文本”工具，在两个椭圆形的一侧（第1个排序：X:180,Y:1428）（第2个排序：X:540,Y:1428）如图1-9-7所示。图1-9-7：字体位置【任务实施】（4）字体颜色为黑色，字体大小为35，字体粗细为Regular。输入排序方式如图1-9-8所示。图1-9-8：调整字体3.导入图片，输入文字（1）在标题下方位置导入图片（W:128,H:128,X:80,Y:1509）调整大小（128×128）如图1-9-9。图1-9-9：调整图片【任务实施】利用“文本”工具在图片一侧（X:232,Y:1542）输入物流公司名称（字体颜色：黑色，字体大小：35，字体粗细：Regular）如图1-9-10所示。图1-9-10：调整字体将图片和文字结合成组件如图1-9-11所示。图1-9-11：结合成组【任务实施】（2）选中组件，在右侧属性栏中点击“重复网格”，根据题目绘制相应的个数如图1-9-12所示。图1-9-12：利用重复网格工具列表超出画板时，双击选中画板点击底部边框向下拖动至合适位置（W:1080,H:2392,X:12104,Y:-14287）如图1-9-13所示。图1-9-13：修改画板【任务实施】在等比例调整之后，右键选择“取消网格编组”如图1-9-14所示。图1-9-14：取消网格编组（3）点击某个组件，双击选中图片，右键选择“替换图像”在“素材库”中选择自己所需要的图片（10-14—10-18）更改图片后，将下方对应的物流公司名称也一并更改如图1-9-15所示。图1-9-15：修改列表【任务实施】修改完成后，点击底部导航栏，将其图层拖移到所有图层最上方，然后在属性面板中选择“滚动式固定位置”如图1-9-16所示。图1-9-16：滚动时固定位置（4）全部修改完后，选中画板Ctrl+c复制，ctrl+v粘贴新的画板，按照首字母A-Z和Z-A进行“其他物流公司列表”顺序的颠倒修改如图1-8-53所示。图1-9-17：复制粘贴【任务实施】4.最后修改在“Z-A排序”页面中复制三个画板，将轮播图图片更换如图1-9-18所示。图1-9-18：复制画板在“A-Z排序”页面中复制三个画板，将轮播图图片更换如图1-9-19所示。图1-9-19：复制画板【任务实施】进入软件“原型”模式，将轮播图对应图片的两个不同画板相互连接如图1-9-20所示。图1-9-20：连接画板THANKS

《移动应用与开发项目实战》任务十设计物流公司详情页

物流公司详情页面展示新闻资讯轮播，公司简介，运输方式介绍，运费介绍信息。【任务描述】【任务目标】【关键技术描述】1.导入图片2.制作小标题3.输入文字内容【使用工具】AdobeXD软件中XXX工具【技术介绍】

制作小标题时，可以对垂直竖线或输入的文字进行颜色大小字体上的更改，但最后修改完成的格式一定要与整个页面的布局颜色进行统一如图1-10-18所示。图1-10-18画面布局【任务实施】1.导入图片点击Windows开始按钮，在主菜单的所有程序中，点击AdobeXD程序图标，打开AdobeXD主界面。（1）点击上方菜单栏中“主页”，选择“导入”功能，选择所需图片（图片：10-11），点击“导入”按钮如图1-10-1所示。图1-10-1导入图片【任务实施】将图片导入至页面（W：1080，H：1920，X：0，Y：216），更改其大小（1080×475）如图1-10-2所示。图1-10-2修改数值2.制作小标题（1）使用左侧工具栏面板中的“文本”工具和“直线”工具，利用直线工具绘制出一条垂直短线，颜色：#49B0FE，大小：10。如图1-10-3所示。图1-10-3绘制竖线【任务实施】点击文本工具，在绘制的短线后面输入标题内容（X:79,Y:723），字体，字体大小：40，字体粗细：Regular如图1-10-4所示。图1-10-4绘制字体3.输入文字内容（1）在“文字素材”中粘贴所需要的文字段落（12-1），Ctrl+c复制文字段落，双击选中ctrl+v粘贴至画板，如图1-10-5所示。图1-10-5粘贴文本【任务实施】（2）在右侧属性栏面板中选择更改字体大小（字体大小：40，字体粗细：Regular，字体颜色：黑色）如图1-10-6所示。图1-10-6修改字体（3）将文本框移动至（W:300,H:300,X:62,Y:792），拖动边框，将文本框拖移至（W:966,H:491,X:62,Y:792）单击任意区域，取消文本框蓝色框架如图1-10-7所示。图1-10-7更改文本框【任务实施】（4）使用左侧工具栏面板中的“文本”工具和“直线”工具，利用直线工具绘制出一条垂直短线（W:0,H:46,X:62,Y:1310），颜色：#49B0FE，大小：10如图1-10-8所示。图1-10-8绘制小标题点击文本工具，在绘制的短线后面输入标题内容（X:79,Y:1303），字体，字体大小：40，字体粗细：Regular如图1-10-9所示。图1-10-9更改颜色【任务实施】（5）在“文字素材”中粘贴所需要的文字段落（12-2），Ctrl+c复制文字段落，双击选中ctrl+v粘贴至画板如图1-10-10所示。图1-10-10粘贴文本（6）在右侧属性栏面板中选择更改字体大小（字体大小：40，字体粗细：Regular，字体颜色：黑色）如图1-10-11所示。图1-10-11修改字体【任务实施】（7）将文本框移动至（W:300,H:300,X:62,Y:1376），拖动边框，将文本框拖移至（W:413,H:78,X:62,Y:1376）单击任意区域，取消文本框蓝色框架如图1-10-12所示。图1-10-12拖动文本框（8）使用左侧工具栏面板中的“文本”工具和“直线”工具，利用直线工具绘制出一条垂直短线（W:0,H:46,X:57,Y:1488），颜色：#49B0FE，大小：10如图1-10-13所示。图1-10-13绘制小标题【任务实施】点击文本工具，在绘制的短线后面输入标题内容（X:74,Y:1481），字体，字体大小：40，字体粗细：Regular如图1-10-14所示。图1-10-14更改颜色【任务实施】（9）在“文字素材”中粘贴所需要的文字段落（12-3），Ctrl+c复制文字段落，双击选中ctrl+v粘贴至画板如图1-10-15所示。图1-10-15粘贴文本【任务实施】（10）在右侧属性栏面板中选择更改字体大小（字体大小：40，字体粗细：Regular，字体颜色：黑色）如图1-10-16所示。图1-10-16修改字体【任务实施】（11）将文本框移动至（W:300,H:300,X:62,Y:1561），拖动边框，将文本框拖移至（W:361,H:127,X:62,Y:1561）单击任意区域，取消文本框蓝色框架如图1-10-17所示。图1-10-17拖动文本框THANKS

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

设计找工作界面

点击底部导航栏，找工作进入找工作页面，页面具备宣传幻灯片，职位搜索框，热门职业职位列表显示功能，职位列表包括职位名称，岗位职责，公司地点，薪资待遇。【任务描述】【任务目标】【关键技术描述】1.导入图片2.绘制职位搜索框3.输入热门职业4.绘制职位列表5.绘制列表内详细信息【使用工具】AdobeXD软件中XXX工具【技术介绍】（1）利用“直线”工具在搜索框下方（W:0,H:45,X:44,Y:817）绘制一个小竖线如图1-11-39所示。图1-11-38绘制小标题选中小竖线颜色修改为#49B0FE，大小改为8如图1-11-40所示。图1-11-49绘制小标题【技术介绍】点击“文本”工具，在竖线后（X:52,Y:806）输入“热门职业”文字如图1-11-41所示。图1-11-40修改文字点击文本框，字体大小为45，字体粗细为Regular如图1-11-42所示。图1-11-41调整字体大小【任务实施】1.导入图片点击Windows开始按钮，在主菜单的所有程序中，点击AdobeXD程序图标，打开AdobeXD主界面。

（1）在打开的主界面上，点击上方菜单栏中“主页”，选择“导入”功能，选择所需图片（图片：10-3-10-5），点击“导入”按钮如图1-11-1所示。图1-11-1导入图片【任务实施】将图片导入至页面右击结合成组如图1-11-2所示。图1-11-2结合成组（2）将选择的图片拖动至（X:0,Y:216）如图1-11-3所示。图1-11-3移动位置【任务实施】图片大小全部设置为（1080×400），图片组件放置在（W:3240,H:400,X:0,Y:216）如图1-11-4所示。图1-11-4放置图片2.绘制职位搜索框（1）在轮播图下方绘制搜索输入框，在左侧的工具栏面板中点击“矩形”工具，在轮播图下方绘制一条矩形如图1-11-5所示。图1-11-5绘制矩形【任务实施】并填充颜色（颜色为：#EEF8FF）如图1-11-6如图。图1-11-6填充颜色关闭“边界”勾选框如图1-11-7所示。图1-11-7关闭“边界”勾选框【任务实施】（2）左侧工具栏面板中选择“文本”工具，在绘制完成的矩形上点击输入“请输入内容”等相关类型的提示文字，如图1-11-8所示。图1-11-8添加提示语（3）输入完成后，单击文本框，在右侧属性面板中的“文本”（字体大小：45，字体粗细：Regular）如图1-11-9所示。图1-11-9修改字体【任务实施】点击“填充”颜色为（#B1B1B1）“边界”颜色相同，如图1-11-10所示。图1-11-10修改颜色字体将修改后的文本框放置在矩形框内（X:116,Y:676）如图1-11-11所示。图1-11-11更改位置【任务实施】（4）按住shift键点击绘制完成的文字和矩形，单击鼠标右键选择“组”结合成组件如图1-11-12所示。图1-11-12结合成组（5）点击左侧工具栏面板中的“矩形”工具，在搜索输入框的右侧绘制一个等比例缩小的矩形如图1-11-13。图1-11-13绘制矩形【任务实施】颜色填充为白色，边界为灰色（#707070）如图1-11-14所示。图1-11-14填充颜色【任务实施】在右侧属性面板中找到“外观”，修改矩形的圆角弧度如图1-11-15所示。图1-11-15修改圆角弧度【任务实施】利用“文本”工具在矩形内输入“搜索”文字（X:902,Y:673），修改文字（字体大小：45，字体粗细：Regular，边界颜色：黑色，填充颜色：黑色）如图1-11-16所示。图1-11-16修改字体【任务实施】（6）单击输入框组件，选中后点击属性面板中的“组件”效果，点击“组件”后的“+”出现“默认状态”如图1-11-17所示。图1-11-17默认状态图1-11-18悬停状态点击“默认状态”中的“+”选择悬停状态如图1-11-18所示。【任务实施】再次点击“默认状态”中的“+”选择切换状态如图1-11-19所示。图1-11-19切换状态（7）选中“悬停状态”后，双击输入框，在外圈绿色点状线变成绿色直线如图1-11-20所示。图1-11-20双击输入框【任务实施】图1-11-21添加直线点击直线，修改颜色为黑色，将“大小”修改为8如图1-11-22所示。图1-11-22修改大小将文本框删除，就可以在矩形中增加内容，单击“直线”工具，在矩形内绘制一条直线，如图1-11-21所示。【任务实施】（8）选中“切换状态”后，双击输入框，在外圈绿色点状线变成绿色直线如图1-11-23所示。图1-11-23双击输入框单击矩形内的文本框，输入工作岗位名称，点击文本框进行修改（颜色：黑色，字体大小：45，字体粗细：Regular）如图1-11-24所示。图1-11-24修改字体【任务实施】3.输入热门职业（1）在左侧工具栏面板中选择矩形工具和文本工具，利用矩形工具绘制一个小矩形，如图1-11-25所示。图1-11-25绘制矩形再点击文本工具，在矩形中输入热门职业的名称（X:129,Y:1087）如图1-11-26所示。图1-11-26绘制文字【任务实施】选中矩形和文字结合成组件如图1-11-27所示。图1-11-27结合组件（1）将组件移动到合适位置（W:206,H:83,X:116,Y:915）如图1-11-28所示。图1-11-28拖移位置【任务实施】选中组件，点击右侧属性栏面板中的重复网格，上下进行拖动，保留自己所需要的数量后点击取消网格编组按钮如图1-11-29所示。图1-11-29重复网络【任务实施】（4）双击选中剩余的矩形，将矩形内的文字逐一按题目进行修改内容如图1-11-30所示。图1-11-30修改信息4.绘制职位列表（1）使用左侧工具栏面板中的矩形工具，在页面中绘制一条较长的矩形如图1-11-31所示。图1-11-31绘制矩形【任务实施】调整大小及颜色（大小：1，颜色：#707070）如图1-11-32所示。图1-11-32修改颜色（2）使用左侧工具栏面板中的文本工具，在绘制的矩形中，输入职位列表的相关信息（字体大小：48，字体粗细：Regular,字体颜色：黑色）如图1-11-33所示。图1-11-33修改字体【任务实施】5.绘制列表内详细信息（1）点击左侧工具栏中的文本工具。在职位列表矩形中输入职位名称（x:80，y：1428），字体颜色：黑色如图1-11-34所示。图1-11-34修改字体（2）点击左侧工具栏中的文本工具。在职位列表矩形中输入岗位职责（x:80，y：1428），字体颜色：黑色如图1-11-35所示。图1-11-35输入文字【任务实施】（3）点击左侧工具栏中的文本工具在职位列表中输入公司地点（x:80，y：1428），字体颜色：黑色如图1-11-36所示。图1-11-36输入文字（4）点击左侧工具栏中的文本工具在职位列表中输入薪资待遇（x:80，y：1428），字体颜色：黑色如图1-11-37所示。

图1-11-37输入文字THANKS

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

实现热门职位搜索

将鼠标放置热门职位搜索框中，点击出现搜索结果，点击搜索按钮。能够跳转至对应的热门职位详情页面。【任务描述】【任务目标】【关键技术描述】1.使用组件2.修改组件中的对应状态3.实现搜索功能【使用工具】AdobeXD软件中XXX工具【技术介绍】将完成的画板根据轮播图图片的张数复制画板，确保每个画板中的轮播图各不相同如图1-12-10所示。图1-12-10复制画板进入软件“原型”模式，双击选中画板，将三个画板相互连接起来（在右侧属性栏中的交互方式选择“时间”，延迟“2秒”，类型“自动制作动画”，缓动“对齐”持续时间“0.3秒”）如图1-12-11所示。图1-12-11更改数值【任务实施】1.使用组件点击Windows开始按钮，在主菜单的所有程序中，点击AdobeXD程序图标，打开AdobeXD主界面。（1）在打开的主界面上，单击输入框组件，选中后点击属性面板中的“组件”效果，点击“组件”后的“+”出现“默认状态”如图1-12-1所示。图1-12-1默认状态【任务实施】点击“默认状态”中的“+”选择悬停状态如图1-12-2所示。图1-12-2悬停状态再次点击“默认状态”中的“+”选择切换状态如图1-12-3所示。图1-12-3切换状态【任务实施】2.修改组件中的对应状态（1）选中“悬停状态”后，双击输入框，在外圈绿色点状线变成绿色直线如图1-12-4所示。图1-12-4双击输入框将文本框删除，就可以在矩形中增加内容，单击“直线”工具，在矩形内绘制一条直线，如图1-12-5所示。图1-12-5添加直线【任务实施】点击直线，修改颜色为黑色，将“大小”修改为8如图1-12-6所示。图1-12-6修改大小（2）选中“切换状态”后，双击输入框，在外圈绿色点状线变成绿色直线如图1-12-7所示。图1-12-7双击输入框【任务实施】单击矩形内的文本框，输入某职位名称，点击文本框进行修改（颜色：黑色，字体大小：45，字体粗细：Regular）如图1-12-8所示。图1-12-8修改字体3.实现搜索功能（1）选中“搜索”按钮，进入软件“原型”模式，点击按钮，将按钮连接至所需连接的页面（触发：点击，类型：自动制作动画，缓动：对齐）如图1-12-9所示。图1-12-9连接画板THANKS

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

设计宠物医院界面

点击底部导航栏，宠物医院进入宠物医院页面，页面包括宠物种类标题和种类，我的问诊，问诊案例标题和案例列表。【任务描述】【任务目标】【关键技术描述】1.绘制小标题2.绘制宠物种类按钮3.绘制我的问诊内容4.绘制问诊案例列表【使用工具】AdobeXD软件中XXX工具【技术介绍】（1）使用左侧工具栏面板中的“文本”工具和“直线”工具，利用直线工具绘制出一条垂直短线（W:0,H:50,X:51,Y:790），颜色：#49B0FE，大小：10。如图1-13-21所示。图1-13-21绘制竖线点击文本工具，在绘制的短线后面输入标题内容（X:63,Y:786），字体大小：45，字体粗细：Regular如图1-13-22所示。图1-13-22绘制字体【任务实施】1.绘制小标题点击Windows开始按钮，在主菜单的所有程序中，点击AdobeXD程序图标，打开AdobeXD主界面。（1）在打开的主界面上，利用“直线”工具在导航栏下方（W:0,H:50,X:51,Y:258）绘制一个小竖线如图1-13-1所示。图1-13-1绘制小标题【任务实施】选中小竖线颜色修改为#49B0FE，大小改为7如图1-13-2所示。图1-13-2绘制小标题点击“文本”工具，在竖线后（X:63,Y:254）输入“宠物分类”文字如图1-11-3所示。图1-13-3修改文字【任务实施】点击文本框，修改颜色为#47A3FF，字体大小为40，字体粗细为Regular如图1-13-4所示。图1-13-4调整颜色【任务实施】2.绘制宠物种类按钮（1）点击页面左上角的文件，选择导入功能，进入素材库，选择自己所需要的图片（W:200,H:200,X:440,Y:718）如图1-13-5所示。图1-13-5修改位置【任务实施】（2）图片导入至桌面，将图片拖动至合适位置（W:128,H:128,X:83,Y:347）调整图片大小，如图1-13-6所示。图1-13-6拖动位置（3）更改图片大小后，利用文本工具在图片下方输入宠物种类名称（X:98,Y:463）更改字体（颜色：#000000，字体大小：45，字体粗细：Regular）如图1-13-7所示。图1-13-7输入文字【任务实施】将图片和文字组合成组件如图1-13-8所示。图1-13-8结合组件（4）点击组件利用重复网格功能，选择自己所需要的个数后，点击取消重复网格按钮如图1-13-9所示。图1-13-9利用重复网格【任务实施】（5）修改利用重复网格所得出的组件，将组件中的图片和宠物种类的名字都进行修改如图1-13-10所示。图1-13-10修改其他分类3.绘制我的问诊内容（1）点击左侧工具栏中的矩形工具，在页面绘制一个较大的矩形，如图1-13-11所示。图1-13-11绘制矩形【任务实施】点击文本工具，在矩形中输入医生的名字和案例描述，调整字体（颜色：#000000，字体大小：45，字体粗细：Regular）如图1-13-12所示。图1-13-12修改文字最后在矩形中导入医生的图片（15-10）调整大小（W:235,H:235,X:52,Y:883）如图1-13-13所示。图1-13-13调整图片【任务实施】（2）将图片，文字和矩形框结合在一起，结合成组如图1-13-14所示。图1-13-14结合成组选中组件，复制粘贴调整位置修改内容如图1-13-15所示。图1-13-15修改内容【任务实施】4.绘制问诊案例列表（1）点击左侧工具栏中的矩形工具，在页面绘制一个较大的矩形（W:939,H:238,X:51,Y:1499）如图1-13-16所示。图1-13-16绘制矩形【任务实施】点击文本工具，在矩形中输入医生的名字和案例描述，调整字体（颜色：#000000，字体大小：45，字体粗细：Regular）如图1-13-17所示。图1-13-17修改文字【任务实施】最后在矩形中导入医生的图片（15-14）调整大小（W:238,H:238,X:49,Y:1499）如图1-13-18所示。图1-13-18调整图片【任务实施】（2）将图片，文字和矩形框结合在一起，结合成组如图1-13-19所示。图1-13-19结合成组【任务实施】选中组件，复制粘贴调整位置（W:939,H:238,X:51,Y:1759）修改内容如图1-13-20所示。图1-13-20修改内容THANKS

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

设计找医生界面

点击我的问诊，列表进入找医生页面，页面显示，医生图片，职位，工作年龄，擅长案例以及工作编号。【任务描述】【任务目标】【关键技术描述】1.绘制矩形2.输入列表内容3.导入医生图片4.查看医生擅长【使用工具】AdobeXD软件中XXX工具【技术介绍】选中导航栏，点击“文本”工具，在导航栏上输入本页标题如图1-14-25所示。图1-14-25输入标题选中文本框，在属性面板中调整字体（颜色：#FFFFFF，字体大小：70，字体粗细：Regular），居中显示（X:435,Y:120）如图1-14-26所示。图1-14-26调整数值【任务实施】1.绘制矩形点击Windows开始按钮，在主菜单的所有程序中，点击AdobeXD程序图标，打开AdobeXD主界面。（1）在打开的主界面上，点击左侧工具栏面板中的矩形工具在页面中绘制一个较大的矩形（W:976,H:240,X:52,Y:319）如图1-14-1所示。图1-14-1绘制矩形【任务实施】调整矩形框颜色（颜色：纯黑色，大小：4）如图1-14-2所示。图1-14-2修改颜色2.输入列表内容（1）点击左侧导航栏中的文本工具，在绘制的矩形上输入医生姓名（W:210,H:40,X:347,Y:335）如图1-14-3所示。图1-14-3放置位置【任务实施】选中文本框，修改字体（字体颜色：#000000，填充/边界：黑色，字体粗细：Regular，字体大小：30）如图1-14-4所示。图1-14-4字体修改（2）点击左侧导航栏中的文本工具，在绘制的矩形上输入医生职称（X:347,Y:375）如图1-14-5所示。图1-14-5文字位置【任务实施】修改文字（字体颜色：#000000，填充/边界：黑色，字体粗细：Regular，字体大小：30）如图1-14-6所示。图1-14-6修改数据（3）点击左侧导航栏中的文本工具，在绘制的矩形上输入医生执业编号如图1-14-7所示。图1-14-7放置位置【任务实施】修改文字（字体颜色：#000000，填充/边界：黑色，字体粗细：Regular，字体大小：30）如图1-14-8所示。图1-14-8修改数据（4）点击左侧导航栏中的文本工具，在绘制的矩形上，输入医生擅长描述，如图1-14-9所示。图1-14-9放置位置【任务实施】修改文字（字体颜色：#000000，填充/边界：黑色，字体粗细：Regular，字体大小：30）如图1-14-10所示。图1-14-10修改数据（5）点击左侧导航栏中的文