2024 年全国职业院校技能大赛 移动应用设计与开发赛项（高职组） 竞赛试题（04 卷）

2024 年全国职业院校技能大赛 移动应用设计与开发赛项（高等职业教育组） 竞赛试题（04 卷）

竞赛说明

一、竞赛主题
21 世纪以来，随着各项科技迅猛发展，多元化技术革命创新正在给我们的衣食住行，带来全新的数字人工智能体验，各行各业都搭乘着技术产业的转型升级，迎来高速发展时期。“十四五”规划和党的二十大强调了推动战略性新兴产业发展的重要性，战略性新兴产业包 括新一代信息技术等九大产业，是引导未来经济社会发展的重要力量。
在数字化时代，移动终端已经渗透到各个行业和生活场景中，如手机、智能电视、可穿戴设备、车载大屏、医疗设备等。通过车主手机App、中控大屏移动终端 App、智能充电（家用版 App 和商用版小程序）实现跨移动多终端的信息共享和交换，构建了一个移动跨平台应用开发生态系统。
二、竞赛内容和时长
比赛时间为 8 小时，考核“产品原型设计”“移动应用开发”和“应用部署测试”三个模块，具体如下表所示：

三、竞赛成果物提交
参赛选手根据分配的账号登录系统，在竞赛结束前分别将模块一、模块二、模块三的成果物上传并提交至竞赛服务器。

四、竞赛注意事项
提交、部署的文档、原型、代码等资源内容中不能填写与选手相关的信息，如工位号、姓名和院校。如出现上述标记，本模块成绩按照零分处理。

模块一 产品原型设计

一、模块考核点
模块时长：2 小时模块分值：25 分
本模块以产品原型设计为目标，基于移动跨平台应用开发生态系统，围绕车主手机App、中控大屏移动终端 App、智能充电（家用版App 和商用版小程序），对产品进行理解、分析，编制规范的需求规格说明书，熟练使用 UI 设计软件进行产品原型设计，绘制出符合业务逻辑和人体工学的高保真产品原型图，为后续的产品开发和优化奠定坚实的基础。
二、任务要求
1.使用给定的“需求规格说明书（模板）.docx”和相关软件进行需求分析文档编制，编制对应业务用例图、流程图/活动图、时序图和模块概要设计说明。
2.使用原型设计工具（如 Photoshop，Adobe XD 或Axure RP，原型设计工具二选一即可）创建“产品原型”项目，并进行高保真原型绘制，使之符合移动应用 UI 设计规范，同时实现原型界面之间交互

功能。

软件原型绘制时，界面文件命名规范，各界面尺寸如下表：

（2）当内容超出高度区域时，设置滚动区域来显示内容。
（3）画板要对齐，界面版式布局合理、美观，内容完整；同样功能请复用样式，避免一种功能、两种样式的情况。
（4）原型要有交互设计内容，用户体验良好。检查存在的漏洞，防止出现异常流程和内容状态。
3.本模块竞赛结束前，选手将上述成果物“需求规格说明书.docx” “产品原型.rp”或“产品原型.xd”两个文件添加到“产品原型设计.zip”
压缩包内，并提交压缩包文件。裁判评分以提交内容作为评分依据。三、竞赛任务
参赛选手根据客户提供的任务需求描述，按照模块一的任务要求，

完成“需求规格说明书.docx”撰写，以及“产品原型.rp”或“产品原型.xd”设计。
任务 1：绘制“倒车全显”模块界面原型（5 分）
【任务说明】

1.车辆中控大屏开启，车辆挂入 R 挡时，主屏显示 360 度全景App 界面，实现 360 度全景 App 倒车影像界面，界面分为影像区和功能区上下两部分。
（1）影像区占屏幕高度 80%，画面分为左右两个部分。画面左侧显示汽车倒车影像部分，显示车后方视频影像，并在车后方视频上绘制一个绿色长方形的倒车辅助线。画面右侧显示 360 度全景实时影像，影像左侧显示设备左摄像头影像、右侧显示设备右摄像头影像、上部分显示设备前摄像头影像、下部分显示设备后摄像头影像、中间显示汽车贴图模拟真实效果，摄像头画面方向统一为以汽车贴图为中心的 360 度全景影像（梯形图像拼接）。
（2）底部功能区占屏幕高度 20%。左侧显示两个图标，依次排开为【专注】【关闭】。点击【专注】出现上拉列表：前、后、左、右、360 度，五个选项点击后影像部分显示对应摄像头画面。

任务 2：绘制“仪表盘”和“主屏”车辆信息界面原型（4 分）
【任务说明】
1.实现中控大屏仪表屏的车辆信息界面和中控大屏主屏的车辆信息App 界面。
（1）中控大屏仪表屏车辆信息界面，左侧部分显示汽车转数表， 右侧部分显示汽车时速表，转数表和时速表均为圆形，中间显示车辆信息，包括电池电量、总公里数、平均车数和平均耗电量。

（2）中控大屏主屏车辆信息 App 界面分为 7 部分：基本信息、电动机信息、电池信息、车身信息、底盘/转向信息、车轮/制动信息、胎压监测，并以卡片的形式呈现。
1）基本信息：点击【基本信息】进入基本信息界面，左上角
【返回】可跳转车辆信息主界面。以列表形式显示车主姓名、车辆品牌、车架号、制造国、制造厂商、制造年月、整车型号、车辆识别代号（VIN）、最大设计总质量、核载人数、最高车速、百公里加速。
2）电动机信息：点击【电动机信息】进入电动机信息界面， 左上角【返回】可跳转车辆信息主界面。以列表形式显示总功率、总扭矩、前电动机最大功率、前电动机最大扭矩、后电动机最大功率、后电动机最大扭矩、纯电续航里程、电机结构、电机工作原理、电机布局、电机型号、电机峰值功率。
3）电池信息：点击【电池信息】进入电池信息界面，左上角
【返回】可跳转车辆信息主界面。以列表形式显示电池容量、电池品牌、百公里耗电量、电池冷却方式、电池能量密度、快充时间、快充电量、动力电池系统额定电压、动力电池系统额定容量。
4）车身信息：点击【车身信息】进入车身信息界面，左上角
【返回】可跳转车辆信息主界面。以列表形式显示长宽高、轴距、前后轮距、整备质量、行李箱容积。

5）底盘/转向信息：点击【底盘/转向信息】进入底盘/转向信息界面，左上角【返回】可跳转车辆信息主界面。以列表形式显示驱动形式、前悬挂类型、后悬挂类型、转向助力形式。
6）车轮/制动信息：点击【车轮/制动信息】进入车轮/制动信息界面，左上角【返回】可跳转车辆信息主界面。以列表形式显示前后制动器类型、驻车制动类型、前轮胎规格、后轮胎规格、轮毂材质、备胎规格。
7）胎压监测：点击【胎压监测】进入胎压检测模块界面，分为胎压监测、历史记录两个模块，并以卡片形式呈现。左上角【返回】可跳转车辆信息主界面。
任务 3：绘制“空调”模块界面原型（4 分）
【任务说明】
1.车辆中控大屏开启时，点击中控大屏主屏空调 App 图标，进入空调控制页面。左上角【返回】跳转中控首页。主控屏页面中间位置显示车内温度。在副屏幕页面显示 OFF 按钮、↑/↓按钮、外循环按钮、内循环按钮，分别代表空调开关、自动空调温度调节按钮以及空气循环方式按钮。
2.点击OFF 按钮关闭空调返回中控首页。
3.点击外循环/内循环按钮，不显示车内温度。显示中控大屏前后排座椅模型空气循环方式动画。2 秒后不显示模型显示车内温度。

任务 4：绘制“智能充电商用版小程序-订单”模块界面原型（4
分）
【任务说明】
1.智能充电商用版小程序中，在首页点击底部菜单【订单】，进入订单列表页，页面分为三部分，顶部显示页面标题，标题下方显示订单状态标签，标签下方显示列表项。
（1）订单状态标签：包括进行中、待支付和已完成。

（2）进行中列表项：展示订单编号、开始时间、充电站名称、充电桩名称、充电桩编号、已充电量、充电时长、预计剩余时长和结束充电按钮；点击列表项进入订单详情。
（3）待支付列表项：展示订单编号、开始时间、充电站名称、充电桩名称、充电桩编号、充电量、充电时长、待支付金额和支付按钮； 点击列表项进入订单详情。
（4）已完成列表项：展示订单编号、开始时间、充电站名称、充电桩名称、充电桩编号、充电量、充电时长和支付金额；点击列表项进入订单详情。
2.进入订单详情页，详情页顶部显示订单标题，下方展示订单状态、订单编号、终端信息、充电信息、费用信息和支付信息。
（1）终端信息：充电站名称、充电桩编号和充电桩名称。
（2）充电信息：开始充电时间、结束充电时间、已充电量、充电时长、车牌号和车辆型号。

（3）费用信息：订单总额、电费、服务费和实付金额。
（4）支付信息：支付金额、支付方式和支付时间。任务 5：绘制“汽车维保”模块界面原型（4 分）
【任务说明】
1.进入车主App 维保预约界面，界面顶部显示标题栏，标题栏右侧显示【维保历史】按钮，界面内容部分显示预约表单，界面底部显示【预约提交】按钮，预约表单包括维保类型、城市、维保服务站（4S 店）、预约日期、预约时间、维保车辆、车牌号码、联系人姓名、联系电话，维保类型包括常规保养和车辆维修，默认为常规保养。选择维保类型为车辆维修时，预约表单下方显示维修方案和电子签名区域， 维修方案包括更换零件、维修类目、单项价格、维修总价、维修周期。
2.点击【维保历史】按钮进入维保历史界面，界面顶部显示标题栏，标题栏下方显示维保历史记录条数和历史列表，维保历史列表项包括工单号、维保类型、维保日期、送修时间、维保费用和维保状态。

任务 6：绘制“用户中心”模块界面原型（4 分）
【任务说明】
1.车辆通电启动后，在中控大屏主屏中点击用户中心，进入登录页面，分为四个模块：
（1）免密登录：免密登录界面显示手机号输入框、【获取验证码】按钮、验证码输入框、【登录】按钮和【注册】按钮。点击【注册】按钮可跳转至注册界面。

（2）密码登录：密码登录界面显示手机号输入框、密码输入框、
【登录】按钮、【注册】按钮和【忘记密码】按钮。点击【注册】按钮可跳转至注册界面，点击【忘记密码】按钮可跳转至忘记密码界面。
（3）忘记密码：忘记密码界面显示手机号输入框、【获取验证码】按钮、验证码输入框、新密码输入框和【确定】按钮。修改成功后， 跳转到密码登录页面。
（4）注册：注册界面显示手机号输入框、【获取验证码】按钮、验证码输入框、【注册】按钮。

模块二 移动应用开发

一、模块考核点
模块时长：4 小时模块分值：50 分
本模块重点考查选手业务编码能力，基于移动跨平台应用开发生态系统，编程实现车主 App、中控大屏 App、智能充电家用版 App 和智能充电商用版小程序。
二、任务要求

App UI 尺寸自动适配开发电脑中提供的模拟器 U（I 手机和Pad）、

命名规范、应用名称（发布版本）和界面尺寸如下表：


本模块竞赛结束前，选手将上述成果物添加到“移动应用开发.zip” 压缩包并提交。
三、竞赛任务
参赛选手根据客户提供的任务描述，按照模块二的任务要求，完成移动跨平台应用开发生态系统各任务功能开发。
任务 1：中控大屏-360 度全景功能-左转向（7 分）
【任务说明】
1.车辆中控大屏开启时，调试设备点击左转向，中控大屏主屏显示 360 度全景 App 页面，页面分为影像区和功能区上下两部分。
（1）影像区占屏幕高度 80%，画面分为左右两个部分。画面左侧显示汽车左侧摄像头，实时获取左侧摄像头视频流，画面右侧显示360 度全景实时影像，影像左侧显示设备左摄像头影像、右侧显示设备右摄像头影像、上部分显示设备前摄像头影像、下部分显示设备后摄像头影像、中间显示汽车贴图模拟真实效果，摄像头画面方向统一以汽车贴图为中心的 360 度全景影像（梯形图像拼接）。
（2）底部功能区占屏幕高度 10%。两个图标依次排开为【专注】
【关闭】。点击【专注】出现上拉列表：前、后、左、右、360 度， 五个选项点击后，影像部分显示对应摄像头画面。点击【关闭】退出App。
2.车辆切换其他档位后，360 度全景 App 自动退出。

3.仪表盘上实时显示汽车档位标识。任务 2：中控大屏-媒体播放（7 分）
【任务说明】
中控大屏开启时，在中控大屏仪表屏中选择媒体进行切换和播放。

1.中控大屏仪表屏幕中间显示媒体组件，组件内上方显示正在播放的媒体信息例如“歌曲名称”“音视频名称”信息栏、“音量显示”。信息栏下方显示播放控制按钮，“播放/暂停”“上一曲下一曲”“音量滑块”“静音”，在操控设备中点击“播放/暂停”，仪表屏中的按钮随之切换“播放/暂停”状态，点击操控设备中的“上一曲下一曲” 按钮，仪表屏可切换正在播放媒体信息，点击操控设备中的“静音” 按钮，仪表屏幕“音量显示”调节到静音模式。
2.中控大屏主屏中显示当前播放的歌曲名称、歌曲进度和歌词， 显示“播放/暂停”“上一曲下一曲”“音量滑块”“静音”按钮，点击各自按钮可对当前播放的歌曲进行操作。
3.中控大屏的主屏和仪表屏，同步播放同一首歌曲，同步音量， 并同一音源输出。
任务 3：中控大屏-车辆信息（7 分）
【任务说明】

车辆中控大屏开启时，在中控大屏主屏中点击车辆信息 App，进入车辆信息模块，该模块分为七部分：基本信息、电动机信息、电池信息、车身信息、底盘/转向信息、车轮/制动信息、胎压监测。
主屏显示：

（1）基本信息：显示车主姓名、车辆品牌、车架号信息。
（2）电动机信息：显示总功率、总扭矩信息。
（3）电池信息：显示电池容量、电池品牌、百公里耗电量信息。
（4）车身信息：显示长宽高、轴距、前后轮距、整备质量、后备厢容积等 5 项信息。
（5）底盘/转向信息：显示驱动形式、前悬挂类型、后悬挂类型、转向助力形式等 4 项信息。
（6）车轮/制动信息：显示前后制动器类型、驻车制动类型、前轮胎规格、后轮胎规格、轮毂材质、备胎规格等 6 项信息。
副屏显示：

（1）胎压监测：分为胎压监测、历史记录、保养建议三个模块。
1）胎压监测：检测过程中屏幕中央会显示缓冲标识并在其下方添加“Loading…”字样。监测结束后，屏幕显示各个轮胎的胎压数据， 可手动跳转到“保养建议”的页面。可保存监测数据，并出现在“历史记录”中。
2）警报提醒：当检测到胎压数据异常时，仪表盘的胎压报警灯亮，同时屏幕出现弹窗并显示“XX 方轮胎胎压异常，请及时处理！” 的字样，弹窗右下方显示“确定”按钮，点击按钮关闭弹窗，显示本次监测的数据。
3）历史记录：显示之前已经保存的监测记录时间，点击后显示详细数据，包括各个轮胎的气压值，轮胎状态（正常/异常），是否发出警报（是/否）。

4）保养建议：根据各个轮胎的气压值，会提出针对性的建议。例如：定期检查轮胎气压、定期检查轮胎是否磨损、保持轮胎对齐和平衡、定期清洁轮胎、注意避免碰撞和急刹车等。
任务 4：车主手机 App（6 分）
【任务说明】
1.进入车主手机 App 首页，页面分为 3D 汽车模型、远程控制部分。
2.首页页面初始化时显示模型加载状态，加载完成后页面顶部显示车辆当前电量和剩余续航里程，下方显示 3D 汽车模型。
3.通过旋转和缩放汽车模型可从各个角度查看车辆的外观和设 计细节。点击汽车模型车门可以对 3D 汽车模型进行开门和关门操作。
任务 5：中控大屏-疲劳驾驶检测（6 分）
【任务说明】
进入中控大屏，在中控大屏主屏中，点击疲劳驾驶检测 App， 进入疲劳驾驶检测App 主页面，疲劳驾驶检测 App 内容如下：
（1）在 App 显示范围内，监测驾驶员疲劳的检测摄像头，进行捕获实时画面，当摄像头捕捉到人脸时，若识别到人脸表情属于睁眼状态时，用绿色边框的矩形框实时跟踪选中人脸部分的画面；若识别到人脸表情为闭眼状态时，用红色边框的矩形框选实时跟踪选中人脸部分画面。
（2）如果当前车辆挡位不是 P 档，摄像头捕获到到人脸表情正属于闭眼状态，则持续播放警告提示音（warning.mp3），人脸表情恢

复到睁眼状态时，则停止播放警告提示音。
任务 6：智能充电家用版 App-充电功能（6 分）
【任务说明】
1.进入智能充电家用版 App 首页，页面分为四部分，顶部显示首页标签，标签下方显示用户车辆信息，车辆信息下方显示功能按钮， 底部显示菜单并位置固定。
（1）用户车辆信息：包括车辆 3D 模型、车牌、品牌、型号和剩余里程。
（2）车辆 3D 模型：通过旋转和缩放汽车模型可从各个角度查看车辆的外观和设计细节。
（3）中部功能按钮：包括添加充电桩、添加车辆和一键充电
（4）底部菜单，包括首页、订单和个人中心，点击菜单，进入对应的页面。
2.当车辆处于 P 档，将充电模拟器上的“充电枪”插入中控大屏充电接口后，基于 Can 通讯，在车辆信息和功能按钮之间显示车辆充电状态（待充电）、充电桩名称、电池电量和开始充电按钮。
3.点击开始充电按钮，启动充电，车辆充电状态变为充电中，并显示电池充电动态进度（动画效果展示）、电池电量、充电功率、充电电量、预计剩余时间和停止充电按钮。
4.充电数据同步到其他终端，包括车主手机 App、中控、后台管理系统。同步数据包括车辆充电状态、充电桩名称、电池电量、充电功率、充电电量和预计剩余时间等。

任务 7：中控大屏-用户中心（5 分）
【任务说明】
车辆通电启动后，在中控大屏主屏中点击用户中心，进入登录页面，登录分为四个模块：
（1）免密登录：点击用户中心后进入免密登录页面，用户可通过输入手机号，获取验证码的方式登录。点击【注册】按钮可跳转至注册页。
（2）密码登录：用户可通过输入手机号和正确密码的方式登录。点击【注册】按钮可跳转至注册页，点击【忘记密码】按钮可跳转至忘记密码页面。
（3）忘记密码：用户可通过输入手机号、验证码、新密码的方式修改密码。修改成功后，跳转到密码登录页面，输入手机号和密码即可登录。
（4）注册：用户可点击【注册】按钮跳转至注册界面，填写手机号、验证码、密码可进行注册，
在主屏中，点击用户中心 App 的免密登录页和密码登录页可跳转到注册页。用户可通过输入手机号、验证码和设置的密码进行注册。若已有账号可跳转到密码登录页面进行登录。注册成功后，跳转到密码登录页面，输入手机号和设置的密码进行登录。
任务 8：数据分析（6 分）
【任务说明】
在智能充电商用版小程序主页面上，点击底部导航栏“数据分析”，进入数据分析页面。

1.柱状图：请分析 2023 年 2 月、6 月充电桩的充电时长和耗电量，按照每小时耗电比例进行分析，横坐标为日期，纵坐标为每小时耗电量；
2.饼状图：请分析统计 2023 年下半年收益，按照收入支出统计， 通过饼状图展示出收益=订单收入总金额－耗电成本－服务费。

模块三 应用部署测试

一、模块考核点
模块时长：2 小时模块分值：25 分
本模块重点考查选手应用系统测试能力，基于移动跨平台应用开发生态系统，围绕车主 App、中控大屏 App、智能充电家用版 App 和智能充电商用版小程序，进行应用系统部署、测试用例编写、功能测试、API 自动化测试以及文档编写。
二、任务要求
1.部署移动跨平台应用开发生态系统待测应用。
2.根据“移动跨平台应用开发生态系统智能充电功能范围.pdf”， 撰写测试用例文档，并进行功能测试，将功能缺陷提交缺陷文档中。
3.利用 Postman 工具进行 API 接口测试，并导出 Api.json 脚本。

4.根据“移动跨平台应用开发生态系统智能充电功能范围.pdf”， 撰写产品操作手册文档。
5.本模块竞赛结束前，选手上述成果物测试用例.xlsx、缺陷分析.docx、Api.json、产品操作手册.docx 添加到“应用部署测试.zip” 压缩包内，并提交压缩包文件。
三、竞赛任务
任务 1：应用功能测试（10 分）
根据“移动跨平台应用开发生态系统智能充电功能范围.pdf”中描述的功能范围，撰写测试用例文档（具体测试用例数量如表 1 所示，测试用例格式如表 2 所示）并进行全范围功能测查，找出特定的 10个 Bug，根据找出的 Bug 进行缺陷分析，分析 Bug 出现的原因，将Bug 填写到“缺陷分析.docx”中，缺陷分析填写样例如表 3 所示。
表 1 功能模块说明

表 2 功能测试填写样例表

表 3 缺陷分析填写样例表


任务 2：API 接口测试（10 分）
利用 Postman 测试工具，根据移动跨平台应用开发生态系统 API
文档，进行自动化API 接口测试，并导出 Api.json 文件。任务 3：撰写产品操作手册（5 分）
对移动跨平台应用开发生态系统智能充电功能进行梳理分析，利

用产品操作手册（模板）.docx 文件编写产品操作手册，具体规范如下描述：
第一部分：编写待测 App 的产品定位中心叙述，罗列核心功能点名称与运行待测 App 的运行基础环境。
第二部分：编写上述功能点的指导说明，准确叙述用户操作行为， 将功能变得具体化、形象化，便于读者理解具体内容，增强说服力。
第三部分：编写需要指出使用待测 App 的常规注意事项进行说明，提示用户规避使用不规范操作等。