简介2024年全国职业院校技能大赛移动应用设计与开发赛项完整赛题解析面向职业院校参赛选手及指导备赛教师。资源以正式竞赛试题02卷为蓝本系统拆解产品原型设计、移动应用开发、应用部署测试三大模块的考核点与时间分配并重点展示了右转向视频显示、仪表盘与主屏车辆信息等典型任务的界面绘制规范包括屏幕尺寸、分辨率、交互设计及成果物提交格式等关键要求。包体为1个PDF文件共528KB体积精炼适合在备赛前期快速把握赛题全貌和评分方向。当前已有1782人学习浏览是提升备赛效率和掌握赛题重点的实用参考资料。通过对智能充电、车主手机App等多个真实业务场景的还原解析可帮助读者建立从需求分析、原型绘制到部署测试的完整备赛路径也适用于院校教师在移动应用开发课程中融入赛证融通教学。1. 8 小时赛程里最容易被低估的是三个模块之间的交付约束2024 年全国职业院校技能大赛移动应用设计与开发赛项高职组把 8 小时拆成三块产品原型设计 2 小时25 分、移动应用开发 4 小时50 分、应用部署测试 2 小时25 分。这道题真正难的地方不在某个页面的实现而在于前后交付物要能对上原型里的界面必须在代码里跑通代码里暴露的接口又要在 Postman 里被验证。对备赛选手和带赛老师来说02 卷的价值在于用车主 App、中控大屏、智能充电家用版和商用小程序四类终端串起一套完整的移动应用开发链路。近年广东高职、福建等赛区的移动应用设计与开发赛项也基本沿着这套题型做变体。2. 赛制与终端矩阵先读懂 8 小时里真正需要交付什么拿到赛题先不要急着打开 Axure 或 Android Studio先把评分结构和终端规格理清楚。模块一 25 分对应 2 小时模块二 50 分对应 4 小时模块三 25 分对应 2 小时这个配比说明代码实现是绝对重心但原型和测试不是陪跑。模块一的需求规格说明书和原型是模块二编码的参照系模块三又要基于模块二跑出来的应用写用例和测接口三个阶段天然形成一条交付链。2.1 终端规格与应用命名每一栏都可能是扣分点02 卷的终端矩阵覆盖了 Android 手机、Android Pad、鸿蒙手机和小程序。同一个中控大屏还细分了仪表屏、主屏、副屏尺寸和分辨率不同画板就得分清楚。应用操作系统屏幕尺寸分辨率提交名称车主手机 AppAndroid6.0 英寸及以上1080×2340CarOwners.apk中控大屏仪表屏Android Pad12.3 英寸及以上1920×720DIC.apk中控大屏主屏Android Pad15.6 英寸及以上1920×1080IVIZTaskX.apk中控大屏副屏Android Pad15.6 英寸及以上1920×1080IVIFTaskX.apk智能充电家用版鸿蒙6.6 英寸及以上1280×2700Charge.hap智能充电商用版小程序6.6 英寸及以上1280×2700dist2目录这里有个常见误区以为 Pad 和手机只要按百分比缩放就行。实际画原型时我会把 1920×720 和 1920×1080 单独建画板因为一个是横置长条屏一个是接近 16:9 的宽屏布局密度完全不同。鸿蒙端 Charge.hap 的 1280×2700 接近 20:9 比例按钮摆放要参考单手操作区域不能直接抄 Android 手机稿。2.2 三个模块的成果物清单模块一提交的是需求规格说明书.docx和产品原型.rp或产品原型.xd压缩成产品原型设计.zip。模块二提交的是 5 个应用文件加一个dist2目录打包成移动应用开发.zip。模块三提交的是测试用例.xlsx、缺陷分析.docx、Api.json、产品操作手册.docx打包成应用部署测试.zip。我一般会在开始写代码前先把三个压缩包的预期结构列出来避免最后 10 分钟手忙脚乱。检查命令很简单unzip -l 产品原型设计.zip unzip -l 移动应用开发.zip unzip -l 应用部署测试.zipunzip -l只列文件清单不解压能快速确认顶层有没有混入多余文件。重点看移动应用开发.zip里是否同时包含 CarOwners.apk、DIC.apk、IVIZTaskX.apk、IVIFTaskX.apk、Charge.hap 和 dist2 目录少一个 apk 直接丢掉一整块任务的分数。2.3 提交规范里最容易忽略的隐藏红线赛题明确写了提交内容中不能出现工位号、姓名和院校一旦出现本模块按零分处理。这个检查要放在所有模块完成后统一做不是只检查文档还要检查代码里的包名、drawable 资源名、AndroidManifest 里的 applicationId。常见做法是在压缩前跑一次全文检索把工位号、赛位号、学校、姓名这些关键词在三个 zip 里扫一遍。提示模块二的应用名称不是随便起的必须严格按照 CarOwners.apk、DIC.apk、IVIZTaskX.apk、IVIFTaskX.apk、Charge.hap、dist2 来命名发布版本里显示的应用名也不要写团队或学校信息。3. 产品原型设计需求规格说明书和 Axure 高保真原型怎么做才能拿分模块一很多选手把它理解成“画图”其实失分点恰恰在需求分析文档上。赛题要求编制的不是一页页面说明而是业务用例图、流程图或活动图、时序图和模块概要设计说明。这四样东西决定了后续原型交互是否有依据。3.1 需求规格说明书的四件套用例图、流程图、时序图和模块概要用例图建议按角色拆车主、充电用户、后台管理员。以“智能充电家用版 App”为例车主角色至少要有“启动充电”“停止充电”“添加充电桩”“添加车辆”四个用例充电状态变化要画出“待充电 - 充电中 - 充电完成”的状态流转。时序图重点画清楚“充电枪插入 - CAN 回报 - App 显示状态 - 数据同步到手机/中控/后台”的消息顺序。这个时序图在模块二编码时可以直接翻译成接口调用关系。模块概要设计说明不用写太长但要写明每个 App 的页面结构和数据来源。比如中控大屏天气模块主屏显示当前城市天气副屏显示未来七天这两块数据必须来自同一个城市 ID否则就会出现主屏切城市、副屏不同步的问题。3.2 画板尺寸、滚动区域和样式复用Axure 里建画板时我建议一个终端一个父画板再在父画板里复制页面。车主手机 App 用 1080×2340 的画板但交互热区不要真按 1080 宽度做否则导出到模拟器后按钮会显得过于分散。中控大屏主屏用 1920×1080仪表屏用 1920×720副屏同样用 1920×1080三个画板分开布局。赛题特别提到内容超出高度时要设置滚动区域这个很多人会漏。比如车辆信息里的“车轮/制动信息”列表、天气模块的城市列表、媒体播放器的视频列表在固定高度画板里放不下需要用动态面板把内容包起来开启垂直滚动。样式复用方面所有卡片类界面用同一个组件母版不要同一个列表在 A 页面是圆角卡片、在 B 页面变成直角卡片裁判会认为你没有组件化意识。3.3 用动态面板模拟右转向视频显示的交互任务 1 的“右转向视频显示”是模块一里交互最明确的题。影像区占屏幕高度 80%功能区占 20%底部左侧是【专注】和【关闭】两个图标。点击【专注】后要弹出上拉列表包含前、后、左、右、360 度五个选项。这里的交互不是简单跳页而是切换同一个影像区域的不同状态。// Axure 交互配置逻辑伪代码 if (点击项 前) { setPanelState(cameraPanel, VIEW_FRONT); } else if (点击项 后) { setPanelState(cameraPanel, VIEW_BACK); } else if (点击项 左) { setPanelState(cameraPanel, VIEW_LEFT); } else if (点击项 右) { setPanelState(cameraPanel, VIEW_RIGHT); } else if (点击项 360) { setPanelState(cameraPanel, VIEW_OVERVIEW); }cameraPanel是影像区域的动态面板setPanelState相当于切换动态面板的 State。这样操作比做 5 个独立页面更贴近真实开发中的 ViewPager 切换。还要注意“绿色右转辅助线”只在左侧视频上方出现一旦切到 360 度全景视图辅助线应该消失不然交互状态就是错的。3.4 原型任务覆盖检查表任务核心交互容易漏的状态右转向视频显示专注弹层、摄像头切换辅助线只在右转视图出现仪表盘/车辆信息七类卡片进入详情每个详情页都要有返回多媒体播放器主屏/副屏播放选择“上次看到 xx 分 xx 秒”缺省值天气模块城市切换联动主副屏副屏未来七天随城市变化一键启动3D 模型旋转缩放、开锁状态图标和文字同时变化智能充电家用版P 档插枪、充电动画未插枪不能显示开始充电4. 移动应用开发编程顺序、跨端同步和 CAN 通讯的工程化拆法模块二 4 个小时实现 8 个任务如果按题面顺序从任务 1 写到任务 8很容易在中途卡住。我的做法是先做用户中心再处理跨终端的充电数据同步最后补独立页面。4.1 任务依赖关系与优先级任务 7 用户中心虽然是题面靠后的任务但免密登录、密码登录、注册和忘记密码是其他功能的前置条件。任务 5 远程控制、任务 6 充电状态同步都需要登录后才能获取用户车辆信息。任务 8 数据分析要依赖后台接口返回的订单和能耗数据可以放在最后。这里我整理了一个执行顺序表执行顺序任务理由1用户中心任务 7提供登录态和 token2车辆信息任务 2逻辑简单快速拿分3360 度全景任务 1状态机核心值得优先攻坚4媒体播放器任务 3主屏/副屏联动独立完成5天气模块任务 4数据联动为主难度稳定6远程控制任务 5依赖登录态和中控关机状态7智能充电家用版任务 6涉及 CAN 通讯调试时间最长8数据分析任务 8依赖接口需要 ECharts 配置4.2 360 度全景与档位联动用状态机管理退出条件任务 1 要求中控大屏显示 360 度全景 App并且车辆切换其他档位后自动退出。这个逻辑用状态机管理比在 Activity 里堆 if-else 更清晰。核心状态是档位和当前摄像头视图。enum class Gear { P, R, N, D } enum class CameraView { FRONT, BACK, LEFT, RIGHT, OVERVIEW } class AvmController { private var currentGear Gear.N private var currentView CameraView.OVERVIEW fun onGearChanged(gear: Gear) { currentGear gear when (gear) { Gear.R, Gear.D - showPanorama() else - finishPanorama() // 切到其他档位自动退出 360 全景 } } fun switchCamera(view: CameraView) { currentView view updateCameraStream(view) } }onGearChanged是车辆 CAN 或调试设备回调的档位变化入口。Gear.R和Gear.D分别对应倒车和转向场景这里可以根据赛题要求决定是否都触发全景。finishPanorama()里要释放摄像头资源和退出当前页面不能只隐藏 UI否则再次进入时会黑屏或内存泄漏。4.3 充电状态跨端同步接口协议和轮询策略任务 6 要求充电数据同步到车主手机 App、中控和后台管理系统。这里的关键是定义一个统一的充电状态上报接口四个终端都按同一份字段解析。常见做法是中控大屏作为充电数据的采集端通过 CAN 拿到充电枪状态和电池数据再向后台管理系统上报。POST /api/v1/charging/report { chargeStatus: CHARGING, stationName: 家充桩-01, batteryLevel: 78, chargePower: 7.2, chargeEnergy: 12.6, remainingMinutes: 94 }chargeStatus用枚举字符串待充电、充电中、充电完成、充电异常四类不要用 0、1、2 这种不透明的数字。remainingMinutes建议由中控根据剩余电量和当前充电功率计算后台只做展示避免各端算法不一致。App 端可以通过 WebSocket 订阅状态变更也可以每隔 5 秒轮询一次。比赛模拟器环境下我建议轮询为主WebSocket 连接不稳定会浪费调试时间。4.4 小程序数据分析柱状图和饼状图的数据口径任务 8 要求分析 2023 年 2 月、6 月充电桩的充电时长和耗电量横坐标是日期纵坐标是每小时耗电量。这里的统计单位是“每小时耗电比例”不是单纯总耗电量需要先按日期分组再除以当天充电时长。// 小程序端 ECharts 初始化 const chart echarts.init(this.selectComponent(#barChart)); chart.setOption({ xAxis: { type: category, data: [2023-02-01, 2023-02-02] }, yAxis: { type: value, name: 每小时耗电量(kWh/h) }, series: [{ type: bar, data: [4.2, 5.1], label: { show: true } }] });饼状图统计 2023 年下半年收益时口径是“收益 订单收入总金额 - 耗电成本 - 服务费”不能只展示订单收入。这个字段可以从后台接口的totalIncome、electricityCost、serviceFee计算得到前端不要在显示端做四舍五入后再算否则会差出几分钱。5. 应用部署测试Postman 断言、测试用例矩阵和 Bug 归因模块三是很多人临时抱佛脚的部分但它占了 25 分。模块三的第一个坑是测试用例数量智能充电商用版小程序和智能充电家用版 App 各要求至少 15 条测试用例别总数凑够 30 条就收工要按模块分开统计。5.1 测试用例矩阵怎么设计测试用例表格式要包含系统、模块、用例编号、用例描述、前置条件、操作步骤、预期结果、测试结果。用例编号建议用“系统.模块.序号”比如1.1.1表示用户中心第一条密码登录用例。系统模块用例编号用例描述前置条件操作步骤预期结果智能充电家用版 App用户中心1.1.1密码登录用户已注册输入正确手机号和密码点击登录登录成功并跳转首页智能充电商用版小程序充电桩2.1.1首页充电桩列表用户已登录进入首页等待列表加载显示附近充电桩列表不要把“操作步骤”写成“点击按钮”要写清楚点击哪个按钮、在哪个页面、前置状态是什么。测试结果列不要只写“通过/失败”要写“符合预期”或“实际结果列表为空”否则裁判看不到你的执行痕迹。5.2 用 Postman 做 API 自动化断言、变量与导出Postman 测试的重点不是手动点接口而是用 Test 脚本做断言并把登录接口返回的 token 存成集合变量供后续接口使用。这样导出的 Api.json 才具备自动化执行价值。pm.test(登录接口返回 token, () { const json pm.response.json(); pm.expect(pm.response.code).to.eql(200); pm.expect(json).to.have.property(token); pm.collectionVariables.set(token, json.token); }); pm.test(充电订单列表数据完整, () { const json pm.response.json(); pm.expect(json.data.records.length).to.be.greaterThan(0); json.data.records.forEach(item { pm.expect(item.orderAmount).to.be.a(number); }); });pm.collectionVariables.set是 Postman 的常用写法作用是把 token 写入集合变量后续接口在 Authorization 头里用{{token}}引用。断言里尽量校验响应结构和字段类型不要只判断 HTTP 200因为有的接口即使返回 200业务字段也可能是 null。导出 Api.json 时用 Postman 的 Export 按钮选择 Collection v2.1 格式不要手动改文件后缀。导出后可以用 Newman 在命令行跑一遍确保自动化脚本在干净环境下也能执行newman run SmartChargingAPI.postman_collection.json \ -e SmartCharging_Env.postman_environment.json \ -r cli,json \ --reporter-json-export api-test-report.json-e指定环境变量文件-r指定报告格式--reporter-json-export把结果导出成 JSON。比赛评分时不一定要求交 Newman 报告但运行一遍能提前发现接口依赖顺序的问题。5.3 缺陷分析写下可复现步骤不只贴截图缺陷分析文档是模块三最容易拉开差距的地方。赛题给的样例里每条缺陷要有缺陷编号、缺陷简要描述、重现步骤、涉及功能模块、缺陷分析原因、缺陷图示。原因不能只写“界面没显示”要区分是功能未开发、接口未联调还是数据权限问题。我一般会按三个方向归因第一功能模块是否真的实现了对应入口第二App 是否拿到了正确的网络数据第三前端是否对空数据做了兜底。比如“点击首页可查看附近充电桩列表首页无列表显示”原因可能是列表接口未接入也可能是请求失败后页面停留在 loading 状态。这两个原因对应的修复方式完全不同裁判要看的就是你能不能定位到这一层。6. 容易被扣分的边界条件命名规范、滚动区域与异常交互最后 30 分钟不要用来开发新功能用来做交付前的一致性检查。我见过太多选手代码功能写完了但压缩包里有残留的旧 apk或者dist2目录里缺少app.json导致整体提交失败。6.1 提交前用命令扫一遍关键文件# 检查压缩包内是否混入个人信息 zipgrep -n 赛位号\|工位号\|院校\|姓名 产品原型设计.zip # 检查移动应用开发包内的 apk/hap 是否齐全 unzip -l 移动应用开发.zip | grep -E CarOwners|DIC|IVIZ|IVIF|Charge|dist2zipgrep会直接搜索压缩包内的文本内容不需要先解压。Windows 环境没有 zipgrep 时可以先解压再用 PowerShell 的Select-String搜索。注意代码资源里的ic_launcher、字符串资源、注释里都可能出现个人信息只检查文档是不够的。6.2 交互状态里最容易被忽略的四类场景第一滚动区域。车辆信息列表、多媒体视频列表、天气城市列表内容超过画板高度时都必须能滚动。有些选手只在 Axure 原型里做了滚动代码里却用固定高度容器真机显示会截断。第二异常流程。媒体播放器的“上次看到 xx 分 xx 秒”在首次播放时应显示“上次看到 00 分 00 秒”不能是空白。第三档位联动。360 度全景 App 在切换到非目标档位后要自动退出只隐藏页面不释放资源再次进入会导致摄像头预览黑屏。第四充电前置条件。未插充电枪时不能显示“开始充电”按钮必须等 CAN 回报 P 档且充电枪连接后再切换状态。6.3 交互一致性检查建议中控大屏的三块屏幕有各自的应用名称和退出逻辑主屏、副屏、仪表盘之间共享数据时要确认数据刷新时机。比如天气模块城市切换后副屏的日期和温度范围也要同步刷新媒体播放器选择“仅副屏播放”后主屏要能正常退出到桌面而副屏继续播放。这个行为在原型里要做成交互在代码里要做成 Service 或独立播放页面否则主屏一退出副屏播放也跟着停了。最后检查一遍三个 zip 包的顶层目录是否干净。以应用部署测试.zip为例里面只应有测试用例.xlsx、缺陷分析.docx、Api.json、产品操作手册.docx任何多余文件都会让裁判怀疑你的交付物不完整。检查时我至少会跑一遍unzip -l 应用部署测试.zip确认四个文件都在且文件名完全一致再把dist2目录里的app.json打开看一眼 projectname 字段是否和赛题库保持一致。本文还有配套的精品资源点击获取