2024年全国职业院校技能大赛移动应用设计与开发赛项01卷
2024年全国职业院校技能大赛移动应用设计与开发赛项（01卷）
竞赛说明
一、竞赛主题
21 世纪以来，随着各项科技迅猛发展， 多元化技术革命创新正 在给我们的衣食住行， 带来全新的数字人工智能体验， 各行各业都搭 乘着技术产业的转型升级， 迎来高速发展时期。“十四五”规划和党 的二十大强调了推动战略性新兴产业发展的重要性， 战略性新兴产业 包括新一代信息技术等九大产业，是引导未来经济社会发展的重要力量。
在数字化时代， 移动终端已经渗透到各个行业和生活场景中， 如 手机、智能电视、可穿戴设备、车载大屏、医疗设备等。通过车主手 机 App、中控大屏移动终端 App、智能充电(家用版 App 和商用版小 程序)实现跨移动多终端的信息共享和交换，构建了一个移动跨平台应用开发生态系统。
二、竞赛内容和时长
比赛时间为 8 小时，考核“产品原型设计”“ 移动应用开发”和“ 应
用部署测试” 三个模块， 具体如下表所示：
三、竞赛成果物提交
参赛选手根据分配的账号登录系统，在竞赛结束前 分别 将模块一、
模块二、模块三的成果物上传并提交至竞赛服务器。
四、竞赛注意事项
提交、部署的文档、原型、代码等资源内容中不能填写与选手相 关的信息， 如工位号、姓名和院校等。如出现上述标记，本模块成绩
按照零分处理。
模块一 产品原型设计
一、模块考核点
模块时长：2 小时
模块分值：25 分
本模块以产品原型设计为目标，基于移动跨平台应用开发生态系 统，围绕车主手机 App、中控大屏移动终端 App、智能充电(家用版 App 和商用版小程序)，对产品进行理解、分析， 编制规范的需求规 格说明书，熟练使用 UI 设计软件进行产品原型设计， 绘制出符合业 务逻辑和人体工学的高保真产品原型图，为后续的产品开发和优化奠
定坚实的基础。
二、 任务要求
1.使用给定的“需求规格说明书（模板）.docx”和相关软件， 进 行需求分析文档编制，编制对应业务用例图、流程图/活动图、时序图和模块概要设计说明。
2.使用原型设计工具（如 Photoshop、Adobe XD 或 Axure RP，原型设计工具二选一即可） 创建“产品原型”项目，并进行高保真原型绘制， 使之符合移动应用 UI 设计规范， 同时实现原型界面之间交互功能。
（1）软件原型绘制时，界面文件命名规范，各界面尺寸如下表：
（2）当内容超出高度区域时，设置滚动区域来显示内容。
（3）画板要对齐，界面版式布局合理、美观，内容完整； 同样功能请复用样式，避免一种功能、两种样式的情况。
（4）原型要有交互设计内容， 用户体验良好。检查存在的漏洞，
防止出现异常流程和内容状态。
本模块 竞赛结束前，选手将上述成果物“需求规格说明书.docx ” “产品原型.rp”（或“产品原型.xd” ）两个文件添加到“产品原型 设计.zip ”压缩包内， 并提交压缩包文件。裁判评分以提交内容作为评分依据。
三、竞赛任务
参赛选手根据客户提供的任务需求描述，按照模块一的任务要求， 完成 “需求规格说明书.docx”撰写， 以及“产品原型.rp”或“产品原型.xd ”设计。
任务 1 ：绘制“左转向视频显示 ” 模块界面原型（ 5 分）
【任务说明】
1.在车辆中控大屏开启时， 车辆打开左转向时， 主屏显示 360 度 全景 App 界面，实现 360 度全景 App 左转向界面，界面分为影像和功能区上下两部分。
（1）影像区域占屏幕高度 80%，画面分为左右两个部分。画面 左侧显示汽车左转向部分， 显示车左方视频影像， 并在视频前方显示 绿色的左转辅助线。画面右侧显示 360 度全景时时影像， 影像左侧显 示设备左摄像头影像、右侧显示右摄像头影像、上部分显示前摄像头 影像、下部分显示设备后摄像头影像、中间显示汽车贴图模拟真实效 果， 摄像头画面方向统一以汽车贴图为中心的 360 度全景影像（梯形图像拼接）。
（2）底部功能区占屏幕高度 20%。左侧显示二个图标依次排开 为:【专注】、【关闭】。点击【专注】出现上拉列表： 前、后、左、右、 360 度，五个选项点击后影像部分显示对应摄像头画面。
任务 2 ：绘制 “ 仪表盘 ” 和 “ 主屏 ” 媒体播放界面原型（ 4 分）
【任务说明】
1.实现中控大屏仪表屏媒体播放界面和中控大屏主屏的媒体播
放 App 界面。
（1）中控大屏仪表屏媒体播放界面，左侧部分显示汽车转数表，右侧部分显示汽车时速表， 转数表和时速表均为圆形， 中间显示媒体
播放列表，列表项包括歌曲名和歌手。
（2）中控大屏主屏媒体播放界面左侧显示切换栏， 包括音乐、 发现、我的列表、详细信息和设置， 首次进入左侧为音乐功能， 右侧音乐详细信息。
1）音乐右侧显示音乐列表，列表项包括歌曲名、歌手和歌曲时间。
2）发现右侧上面显示搜索栏，可以通过搜索栏进行歌曲搜索， 输入歌名，点击搜索下面展示歌曲列表项， 列表项包括歌曲名、歌手和歌曲时间。
3）我的列表右侧显示我收藏的音乐列表信息，包括列表项包括歌曲名、歌手和歌曲时间。
4）详细信息右侧显示歌曲名称、歌手名称、歌曲海报、音乐进度条和【收藏】按钮。
5）设置右侧显示音量调节进度条， 可以左右拉， 进行调节音量。
任务 3 ：绘制“多媒体播放器”模块界面原型（ 4 分）
【任务说明】
在中控大屏主屏中，点击多媒体播放器 App，进入主界面， App主界面和媒体播放界面两部分。
1.主界面用卡片列表展示该设备中所有的视频信息， 卡片上半部分展示该视频的预览图 ，下半部分显示视频名称和“上次看到 xx 分xx 秒”信息。
2.点击对应的视频卡片， 弹出选择框， 可选择【主屏、副驾屏同 时播放】和【仅副驾屏播放】， 选择后点击确定， 对应的屏幕会进入 视频播放界面， 并播放所选择卡片对应的视频。视频播放器界面默认 整屏播放视频， 当点 击正在播放的视频时，左上角显示【返回】按 钮，点击【返回】则主屏回到多媒体播放器 App 主界面。视频播放 界面下方显示视频播放器工具栏， 工具栏上半部分显示【快进】【快 退】【暂停/继续播放】、【其他 视频】按钮，点击【其他视频】按 钮可弹出视频列表弹层， 以列表的形式展示其他视频， 界面播放工具 栏下半部分显示视频的【当前播放时长】、【总时长】、和【视频进度条】。
任务 4 ：绘制“车辆信息”模块界面原型（ 4 分）
【任务说明】
1.车辆通电启动后， 在中控大屏主屏中，点击用户中心， 进入车 辆信息模块主界面，该模块分为 7 部分： 基本信息、电动机信息、电 池信息、车身信息、底盘/转向信息、车轮/制动信息、胎压监测，并以卡片的形式呈现。
（1）基本信息：点击【基本信息】进入基本信息界面，左上 角【返回】可跳转车辆信息主界面。以列表形式显示车主姓名、车辆 品牌、车架号、制造国、制造厂商、制造年月、整车型号、车辆识别代号（VIN）、最大设计总质量、核载人数、最高车速、百公里加速等 12 项信息。
（2）电动机信息：点击【电动机信息】进入电动机信息界面， 左上角【返回】可跳转车辆信息主界面。以列表形式显示总功率、总 扭矩、前电动机最大功率、前电动机最大扭矩、后电动机最大功率、 后电动机最大扭矩、纯电续航里程、电机结构、电机工作原理、电机布局、电机型号、电机峰值功率等 12 项信息。
（3）电池信息：点击【电池信息】进入电池信息界面，左上 角【返回】可跳转车辆信息主界面。以列表形式显示电池容量、电池 品牌、百公里耗电量、电池冷却方式、电池能量密度、快充时间、快充电量、动力电池系统额定电压、动力电池系统额定容量等 9 项信息。
（4）车身信息： 点击【车身信息】进入车身信息界面，左上角 【返回】可跳转车辆信息主界面。以列表形式显示长宽高、轴距、前后轮距、整备质量、行李箱容积等 5 项信息。
（5）底盘/转向信息： 点击【底盘/转向信息】进入底盘/转向信 息界面， 左上角【返回】可跳转车辆信息主界面。以列表形式显示驱动形式、前悬挂类型、后悬挂类型、转向助力形式等 4 项信息。
（6）车轮/制动信息： 点击【车轮/制动信息】进入车轮/制动信 息界面， 左上角【返回】可跳转车辆信息主界面。以列表形式显示前 后制动器类型、驻车制动类型、前轮胎规格、后轮胎规格、轮毂材质、备胎规格等 6 项信息。
（7）胎压监测： 点击【胎压监测】进入胎压检测模块界面， 分为胎压监测、历史记录两个模块，并以卡片形式呈现。左上角【返回】可跳转车辆信息主界面。
1）胎压监测： 点击【胎压监测】开始监测。检测过程中屏幕中 央会显示缓冲标识并在其下方添加“Loading…”字样，且不能返回到 任何界面。监测结束后， 屏幕显示各个轮胎的胎压数据，数据下方显 示【保养建议】和【保存】按钮， 可跳转到“保养建议”的界面； 也可保存监测数据，出现【保存成功】的弹窗并出现在【历史记录】中。
2）警报提醒：当检测到胎压数据异常时， 仪表盘的胎压报警灯 亮， 同时屏幕出现弹窗并显示“XX 方轮胎胎压异常，请及时处理！ ” 的字样， 弹窗右下方显示“确定”按钮， 点击按钮关闭弹窗， 显示本次监测的数据。
3）历史记录： 点击【历史记录】进入界面。左上角【返回】可 跳转胎压监测模块界面。以列表形式显示之前已经保存的监测记录信 息，包括监测时间，各个轮胎的气压值，轮胎状态（正常/异常） 以及是否发出警报（是/否）。
4）保养建议： 点击【保养建议】进入界面。左上角【返回】可 跳转胎压监测模块界面。界面上方显示胎压监测的各个数据。数据下 方会显示保养建议。根据各个轮胎的气压值， 会提出针对性的建议。 例如： 定期检查轮胎气压、定期检查轮胎是否磨损、保持轮胎对齐和平衡、定期清洁轮胎、注意避免碰撞和急刹车等。
任务 5 ：绘制 “ 车辆展示与远程控制 ” 模块界面原型（ 4 分）
【任务说明】
1.进入车主 App 首页，界面分为汽车模型、远程控制部分。
2.首页页面初始化时显示模型加载状态，加载完成后页面顶部显示车辆当前电量和剩余续航里程， 下方显示汽车模型图片。
3.通过旋转和缩放汽车模型可从各个角度查看车辆的外观和设计细节， 点击汽车模型车门可进行开门和关门。
4.汽车模型下方显示远程控制部分，包括空调开关、风速调节。
任务 6 ：绘制 “ 智能充电商用版小程序 - 订单 ” 模块界面原型（ 4 分）
【任务说明】
1.在智能充电商用版小程序中，在首页点击底部菜单【订单】， 进入订单列表页，页面分为三部分，顶部显示页面标题，标题下方显示订单状态标签，标签下方显示列表项。
（1）订单状态标签，包括进行中、待支付和已完成。
（2）进行中列表项： 展示订单编号、开始时间、充电站名称、 充电桩名称、充电桩编号、已充电量、充电时长、预计剩余时长和结束充电按钮；点击列表项进入订单详情。
（3） 待支付列表项：展示订单编号、开始时间、充电站名称、 充电桩名称、充电桩编号、充电量、充电时长、待支付金额和支付按钮；点击列表项进入订单详情。
（4） 已完成列表项：展示订单编号、开始时间、充电站名称、 充电桩名称、充电桩编号、充电量、充电时长和支付金额； 点击列表项进入订单详情。
2. 进入订单详情页，详情页顶部显示订单标题，下方展示订单
状态、订单编号、终端信息、充电信息、费用信息和支付信息；
（1）终端信息：充电站名称、充电桩编号和充电桩名称。
（2） 充电信息包括开始充电时间、结束充电时间、已充电量、充电时长、车牌号和车辆型号。
（3） 费用信息：订单总额、电费、服务费和实付金额。
（4）支付信息：支付金额、支付方式和支付时间。
模块二 移动应用开发
一、模块考核点
模块时长：4 小时
模块分值：50 分
本模块重点考查选手业务编码能力，基于移动跨平台应用开发生 态系统， 编程实现车主 App、中控大屏 App、智能充电家用版 App和智能充电商用版小程序。
二、任务要求
App UI 尺寸自动适配开发电脑中提供的模拟器 UI（手机和Pad）、命名规范、应用名称（发布版本）和界面尺寸如下表：
本模块 竞赛结束前，选手将上述成果物添加到“移动应用开发.zip ”压缩包并提交。
三、竞赛任务
参赛选手根据客户提供的任务描述， 按照模块二的任务要求， 完成移动跨平台应用开发生态系统各任务功能开发。
任务 1 ：中控大屏 -360 度全景功能 - 倒车（ 7 分）
【任务说明】
1.车辆中控大屏开启，车辆挂入 R 挡时，中控大屏主屏显示 360度全景 App 页面，页面分为影像和功能区上下两部分。
（1）影像区域占屏幕高度 80%，画面分为左右两个部分。画面 左侧显示汽车倒车影像部分， 实时获取后方视频流， 并在车后方视频 上绘制一个绿色长方形的倒车辅助线。画面右侧显示 360 度全景实时 影像，影像左侧显示设备左摄像头影像、右侧显示设备右摄像头影像、 上部分显示设备前摄像头影像、下部分显示设备后摄像头影像、中间 显示汽车贴图模拟真实效果，摄像头画面方向统一为以汽车贴图为中心的 360 度全景影像（梯形图像拼接）。
（2）底部功能区占屏幕高度 10%。三个图标依次排开为：【专 注】【关闭】【标定】。点击【标定】按钮出现上拉列表显示【去畸】【摄像头列表】， 首次进入【去畸】按钮不可点击， 点击【摄像头列表】项打开展示所有可用的摄像头列表， 点击列表项显示对应摄像头 画面， 在摄像头前放置黑白圆点标定板， 在适当距离移动标定板，当 达到可识别位置， 摄像头画面对标定板黑点进行彩色连线， 此时点击 屏幕进行案例保存，然后再次移动标定板进行案例保存，保持 7 个案 例后可点击【去畸】按钮， 点击【去畸】按钮进行鱼眼摄像头去畸。 点击【专注】出现上拉列表：前、后、左、右、 360 度。点击五个选项，影像部分显示对应摄像头画面。点击【关闭】退出 App。
任务 2 ：中控大屏 - 媒体播放（ 7 分）
【任务说明】
中控大屏开启时，在中控大屏仪表屏中选择媒体进行切换和播放。
1.中控大屏仪表屏幕中间显示媒体组件，组件内上方显示正在播 放的媒体信息例如“歌曲名称”“音视频名称”信息栏“音量显示”。 信息栏下方显示播放控制按钮， “播放/暂停”“上一曲下一曲”“音 量滑块”“静音”。在操控设备中点击“播放/暂停”，仪表屏中的 按钮随之切换“播放/暂停”状态；点击操控设备中的“上一曲下一 曲”按钮， 仪表屏可切换正在播放媒体信息； 点击操控设备中的“静音”按钮，仪表屏幕“音量显示”调节到静音模式。
2.中控大屏主屏中显示当前播放的歌曲名称、歌曲进度和歌词， 显示“播放/暂停” “上一曲下一曲” “音量滑块” “静音”按钮，点击各自按钮可对当前播放的歌曲进行操作。
3. 中控大屏的主屏和仪表屏，同步播放同一首歌曲，同步音量，并同一音源输出。
任务 3 ：中控大屏 - 天气显示（ 7 分）
【任务说明】
在中控大屏主屏中点击【天气】， 进入天气 App，显示如下：
中控大屏主屏中显示： 当前城市名， 当前天气（晴天、多云、 雨天、雪天等） ，最高温度和最低温度； 中部展示湿度：显示当前湿 度， 例如“湿度：65%”；底部显示风速： 显示当前风速，例如“风 速： 5 km/h”；城市列表： 可根据城市列表选择城市，切换成所选城 市的天气数据， 并且切换数据时， 中控大屏副屏的显示数据也会切换成对应程序的天气数据，实现多屏同显和异显。
当中控大屏主屏点击城市列表选择城市，选中城市的城市名、 当前天气、最高温度、最低温度、湿度、风速， 同时在中控大屏仪表屏中同步显示该内容，实现多屏同显和异显。
任务 4 ：中控大屏 - 空调（ 7 分）
【任务说明】
1.车辆中控大屏开启时， 点击中控大屏主屏空调 App 图标，进入 空调控制页面， 中控大屏主屏页面中间位置显示车内温度。在中控大 屏副屏页面显示 OFF 按钮、上下箭头按钮、外循环按钮、内循环按钮，分别代表空调开关、自动空调温度调节按钮、空气循环方式按钮。
2. 温度调节通过 Can 发送指令到温控设备，从而控制温控设备 转速， 并可体感。点击 OFF 按钮空调系统关闭， 温控设备停止运行，页面中央位置提示空调系统已关闭 2 秒后返回中控首页。
3.点击外循环/内循环按钮，温度显示隐藏。显示前后排座椅模型空气动画循环方式。2 秒后模型隐藏车内温度显示。
任务 5 ：车主手机（ 6 分）
【任务说明】
1.进入车主手机 App 首页， 页面分为 3D 汽车模型、远程控制部分。
2.首页页面初始化时显示模型加载状态，加载完成后页面顶部显
示车辆当前电量和剩余续航里程， 下方显示 3D 汽车模型。
3.通过旋转和缩放汽车模型可从各个角度查看车辆的外观和设计细节。点击汽车模型车门可以对 3D 汽车模型进行开门和关门操作。
任务 6 ：智能充电商用版小程序 - 订单（ 5 分）
【任务说明】
1.进入智能充电商用版小程序， 在首页点击底部菜单【订单】， 进入订单列表页，页面分为三部分，顶部显示页面标题，标题下方显示订单状态标签，标签下方显示列表项。
（1）订单状态标签，包括进行中、待支付和已完成。
（2）进行中列表项： 展示订单编号、开始时间、充电站名称、 充电桩名称、充电桩编号、已充电量、充电时长、预计剩余时长和结束充电按钮；点击列表项进入订单详情。
（3）待支付列表项： 展示订单编号、开始时间、充电站名称、 充电桩名称、充电桩编号、充电量、充电时长、待支付金额和支付按钮；点击列表项进入订单详情。
（4）已完成列表项： 展示订单编号、开始时间、充电站名称、 充电桩名称、充电桩编号、充电量、充电时长和支付金额； 点击列表
项进入订单详情。
2.进入订单详情页，详情页顶部显示订单标题，下方展示订单状态、订单编号、终端信息、充电信息、费用信息和支付信息；
（1）终端信息：充电站名称、充电桩编号和充电桩名称。
（2）充电信息包括开始充电时间、结束充电时间、已充电量、充电时长、车牌号和车辆型号。
（3）费用信息：订单总额、电费、服务费和实付金额。
（4）支付信息：支付金额、支付方式和支付时间。
任务 7 ：中控大屏 - 应用市场（ 5 分）
【任务说明】
1.在中控大屏主屏中点击应用市场，进入应用市场页面，页面包括推荐 App 内容，搜索菜单、更新菜单。
2.App 推荐卡片， 卡片内容为 App 图标、背景、名称、介绍、 【下载】按钮， 点击【下载】按钮进行 App 下载安装。卡片下方展 示专题列表，专题列表为本周热门 App 列表，列表包括 App 名称、 App 缩略图、下载次数、【下载】按钮， 点击【下载】按钮可下载对
应 App（管理服务端可进行 App 上传，推荐状态的修改等功能） 。
3.点击搜索菜单，跳转至搜索页面，在搜索页面输入应用名称，
点击【搜索】按钮可模糊查询应用列表。
4.点击更新菜单， 展示所有可更新的 App 列表，点击更新按钮可进行更新。
任务 8 ：数据分析（ 6 分）
【任务说明】
在车主手机 App 主页面上， 点击底部导航栏“数据分析”，进入数据分析页面。
1.柱状图：请分析 2023 年上半年使用充电桩的充电次数、充电 量和花费，按照月耗电比例进行分析，横坐标为月份，每组纵坐标为充电次数、充电量和花费。
2.折线图：请分析统计 2023 年 3 月、 5 月每百公里耗电量，按照 每月耗电量和行驶公里数统计， 横坐标为月份， 每组折线点显示耗电量、行驶里程和平均百公里耗电量。
模块三 应用部署测试
一、模块考核点
模块时长：2 小时
模块分值：25 分
本模块重点考查选手应用系统测试能力，基于移动跨平台应用开 发生态系统，围绕车主 App、中控大屏 App、智能充电家用版 App 和智能充电商用版小程序，进行应用系统部署、测试用例编写、功能测试、 API 自动化测试以及文档编写。
二、任务要求
1.部署移动跨平台应用开发生态系统待测应用。
2.根据“移动跨平台应用开发生态系统车主手机功能范围.pdf”，
撰写测试用例文档，并进行功能测试， 将功能缺陷提交缺陷文档中。
3.利用 Postman 工具进行 API 接口测试， 并导出 Api.json 脚本。
4.根据“移动跨平台应用开发生态系统车主手机功能范围.pdf”，撰写产品操作手册文档。
本模块 竞赛结束前，选手将上述成果物测试用例.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 的常规注意事项进行说明，提示用户规避使用不规范操作等。