移动应用项目开发实战 课件 任务13 设计宠物医院界面

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

设计宠物医院界面

点击底部导航栏，宠物医院进入宠物医院页面，页面包括宠物种类标题和种类，我的问诊，问诊案例标题和案例列表。【任务描述】【任务目标】【关键技术描述】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