竞赛说明
- 、竞赛主题
21 世纪以来,随着各项科技迅猛发展,多元化技术革命创新正在给我们的衣食住行 ,带来全新的数字人工智能体验,各行各业都搭乘着技术产业的转型升级,迎来高速发展时期。 "十四五"规划和党的二十大强调了推动战略性新兴产业发展的重要性 ,战略性新兴产业包括新一代信息技术等九大产业,是引导未来经济社会发展的重要力量。
在数字化时代,移动终端已经渗透到各个行业和生活场景中 ,如手机 、智能电视 、可穿戴设备 、车载大屏 、 医疗设备等 。通过车主手机 App 、中控大屏移动终端 App 、智能充电(家用版 App 和商用版小程序)实现跨移动多终端的信息共享和交换 ,构建了一个移动跨平台应用开发生态系统。
二 、竞赛内容和时长
比赛时间为 6 小时,考核"产品原型设计""移动应用开发"和 "应用部署测试"三个模块 ,具体如下表所示:
|------|--------|------|------|
| 模块编号 | 模块名称 | 竞赛时间 | 分数 |
| | 产品原型设计 | 6 小时 | 25 分 |
| 二 | 移动应用开发 | 6 小时 | 50 分 |
| 三 | 应用部署测试 | 6 小时 | 25 分 |
| 合计 || 6 小时 | 100分 |
三 、竞赛成果物提交
参赛选手根据分配的账号登录系统,在竞赛结束前分别将模块一、模块二、模块三的成果上传并提交至竞赛服务器。
四 、竞赛注意事项
提交 、部署的文档 、原型 、代码等资源内容中不能填写与选手相关的信息 ,如赛位号 、姓名和院校 。如出现上述标记 ,本模块成绩按照零分处理。
模块一 : 产品原型设计
一 、模块考核点
模块分值: 25 分
本模块以产品原型设计为目标,基于移动跨平台应用开发
生态系统 ,围绕车主手机 App 、中控大屏移动终端 App 、智能充电(家用版 App 和商用版小程序) ,对产品进行理解 、分析,编制规范的需求规格说明书,熟练使用 UI 设计软件进行产品原型设计,绘制出符合业务逻辑和人体工学的高保真产品原型图 ,为后续的产品开发和优化奠定坚实的基础。
二 、任务要求
1.使用给定的" 需求规格说明书( 模板) .docx"和相关软件 ,进行需求分析文档编制 ,编制对应业务用例图 、流程图/活动图 、时序图和模块概要设计说明。
- 使用原型设计工具 ( 如 Photoshop 、AdobeXD 或AxureRP,原型设计工具二选一即可)创建"产品原型"项目,并进行高保真原型绘制,使之符合移动应用 UI 设计规范,同时实现原型界面之间交互功能。
(1)软件原型绘制时,界面文件命名规范,各界面尺寸如下表:
|----|-----------------------|-------------|-------------------------------|------------------------------|
| 序号 | 应用 | 操作系统 | 屏幕尺寸 | 屏幕分辨率 |
| 1 | 车主手机App | Android 手机 | 6.0英寸及以上 | 1080×2340 |
| 2 | 中控大屏移动终端包括仪表屏 、主屏 、副屏 | Android Pad | 12.3英寸及以上 15.6英寸及以上 15.6英寸及以上 | 1920×720 1920×1080 1920×1080 |
| 3 | 智能充电家用版App | 鸿蒙 手机 | 6.6英寸及以上 | 1280×2700 |
| 4 | 智能充电商用版小程序 | 小程序 | 6.6英寸及以上 | 1280×2700 |
(2) 当内容超出高度区域时 ,设置滚动区域来显示内容。
(3) 画板要对齐 ,界面版式布局合理 、美观, 内容完
整;同样功能请复用样式,避免一种功能、两种样式的情况。
(4) 原型要有交互设计内容 ,用户体验良好 。检查存在的漏洞, 防止出现异常流程和内容状态。
3.竞赛结束前,选手将上述成果物"需求规格说明书.docx" "产品原型.rp"(或"产品原型.xd")两个文件添加到"产品原型设计.zip"压缩包内 ,并提交压缩包文件。裁判评分以提交内容作为评分依据。
三 、竞赛任务
参赛选手根据客户提供的任务需求描述,按照模块一的任务要求 ,完成 " 需求规格说明书.docx"撰写, 以及 "产品原型.rp"或 "产品原型.xd"设计。
任务1 : 绘制 "左转向视频显示"模块界面原型
【任务说明】
在车辆中控大屏开启时 ,车辆打开左转向时 ,主屏显示360 度全景 App 界面 ,实现 360 度全景 App 左转向界面,界面分为影像和功能区上下两部分。
1.影像区域占屏幕高度 80%,画面分为左右两个部分。画面左侧显示汽车左转向部分 ,显示车左方视频影像 ,并在视频前方显示绿色的左转辅助线。画面右侧显示 360 度全景时时影像 ,影像左侧显示设备左摄像头影像 、右侧显示右摄像头影像 、上部分显示前摄像头影像 、下部分显示设备后摄像头影像 、中间显示汽车贴图模拟真实效果 ,摄像头画面方向统一以汽车贴图为中心的360 度全景影像(梯形图像拼接)。
2.底部功能区占屏幕高度 20% 。左侧显示二个图标依次
排开为:【专注】、【关闭】。点击【专注】 出现上拉列表:前、后 、左 、右 、360 度 ,五个选项点击后影像部分显示对应摄像头画面。
任务2: 绘制 "仪表盘"和 "主屏"媒体播放界面原型【任务说明】
实现中控大屏仪表屏媒体播放界面和中控大屏主屏的媒体播放 App 界面。
-
中控大屏仪表屏媒体播放界面 ,左侧部分显示汽车转数表,右侧部分显示汽车时速表,转数表和时速表均为圆形,中间显示媒体播放列表 ,列表项包括歌曲名和歌手。
-
中控大屏主屏媒体播放界面左侧显示切换栏 ,包括音乐 、发现 、我的列表 、详细信息和设置 ,首次进入左侧为音乐功能 ,右侧音乐详细信息。
(1)音乐右侧显示音乐列表,列表项包括歌曲名、歌手和歌曲时间。
(2) 发现右侧上面显示搜索栏 ,可以通过搜索栏进行歌曲搜索 ,输入歌名 ,点击搜索下面展示歌曲列表项 ,列表项包括歌曲名 、歌手和歌曲时间。
(3) 我的列表右侧显示我收藏的音乐列表信息 ,包括列表项包括歌曲名 、歌手和歌曲时间。
(4) 详细信息右侧显示歌曲名称 、歌手名称 、歌曲海报 、音乐进度条和 【收藏】 按钮。
(5) 设置右侧显示音量调节进度条 ,可以左右拉 ,进行调节音量。
任务3: 绘制 "多媒体播放器"模块界面原型
【任务说明 】
在中控大屏主屏中,点击多媒体播放器 App,进入主界面,App 主界面和媒体播放界面两部分。
1.主界面用卡片列表展示该设备中所有的视频信息 ,卡片上半部分展示该视频的预览图 ,下半部分显示视频名称和"上次看到xx 分 xx 秒"信息。
2.点击对应的视频卡片, 弹出选择框 ,可选择 【主屏 、副驾屏同时播放】 和 【仅副驾屏播放】,选择后点击确定,对应的屏幕会进入视频播放界面,并播放所选择卡片对应的视频 。视频播放器界面默认整屏播放视频 ,当点击正在播放的视频时 ,左上角显示 【返回】 按钮 ,点击 【返回】 则主屏回到多媒体播放器 App 主界面。视频播放界面下方显示视频播放器工具栏,工具栏上半部分显示【快进】【快退】【暂停/继续播放】、【其他视频】 按钮 ,点击 【其他视频】 按钮可弹出视频列表弹层 ,以列表的形式展示其他视频 ,界面播放工具栏下半部分显示视频的【当前播放时长】、【总时长】、和【视频进度条】。
任务4: 绘制 "空调 "模块界面原型
【任务说明】
1.车辆中控大屏开启时 ,点击中控大屏主屏空调App 图标 ,进入空调控制页面 。左上角 【返回】 跳转中控首页 。主控屏页面中间位置显示车内温度 。在副屏幕页面显示 OFF按钮 、 ↑/↓按钮、外循环按钮 、内循环按钮,分别代表空调
开关 、 自动空调温度调节按钮以及空气循环方式按钮。
2.点击 OFF 按钮关闭空调返回中控首页。
3.点击外循环/内循环按钮,不显示车内温度。显示中控大屏前后排座椅模型空气动画循环方式。2s 后不显示模型显示车内温度。
任务5: 绘制 "一键启动"模块界面原型
【任务说明】
进入车主手机 App ,点击底部菜单【爱车】 按钮,进入远程控制界面 。页面分为四部分 ,顶部显示我的爱车标签,标签下方显示车辆信息 ,车辆信息下方显示字体图标与文字上下组合功能按钮 ,底部显示菜单并位置固定。
1.车辆信息: 包括车辆 3D 模型 、剩余里程 、剩余电量。
2.车辆 3D 模型: 通过旋转和缩放汽车模型可从各个角度查看车辆的外观和设计细节。
- 中部功能按钮,包括车锁 、车窗、后备厢 、闪灯鸣笛、闪灯。
4.底部菜单 ,包括首页 、爱车和我的 ,点击菜单 ,进入对应的页面。
任务6: 绘制 "天气"模块界面原型
【任务说明】
1.进入中控大屏,打开天气 App,进入天气 App 主页面 ,该主页面分为两部分,分别为主屏显示部分和副屏显示部分。
2.主屏显示:
(1)顶部展示:当前城市名称、当前天气(晴天、多云、
雨天 、雪天等)、最高温度和最低温度。
(2) 中部显示: 当前湿度 ,例如:"湿度: 65%"
(3) 底部显示: 当前风速 ,例如:"风速: 5 km/h"
(4) 城市列表: 可根据城市列表选择城市 ,切换成所选城市的天气数据页面,并且副屏的显示的数据也会切换成对应城市的天气数据。
3.副屏显示:
(1)顶部显示: 未来七天的日期。
(2) 中部显示: 未来七天的最高温度和最低温度 ,例
如:15 C - 25 C 。
(3) 底部天气状况: 显示未来几天的天气情况 ,如 " 晴天"、"多云"、"雨天"等 ,并使用相应的图标来表示天气状况。
模块二: 移动应用开发
- 、模块考核点
模块分值: 50 分
本模块重点考查选手业务编码能力,基于移动跨平台应用开发生态系统,编程实现车主 App 、中控大屏 App 、智能充电家用版 App 和智能充电商用版小程序。
二 、任务要求
AppUI 尺寸自动适配开发电脑中提供的模拟器 UI(手机和 Pad)、命名规范、应用名称(发布版本)和界面尺寸如下表:
|----|----------|------------|-----------|-----------|--------------|
| 序号 | 应用 | 操作系统 | 屏幕尺寸 | 屏幕分辨率 | 应用名称 |
| 1 | 车主手机 App | Android 手机 | 6.0 英寸及以上 | 1080×2340 | CarOwners.ap |
|---|---------------------|-------------|---------------------------------|------------------------------|-------------------------------------|
| | | | | | k |
| 2 | 中控大屏移动终端包括仪表屏、主屏、副屏 | Android Pad | 12.3 英寸及以上15.6 英寸及以上 15.6 英寸及以上 | 1920×720 1920×1080 1920×1080 | DIC.apk IVIZTaskX.apk IVIFTaskX.apk |
| 3 | 智 能 充 电 家 用版App | 鸿蒙 手机 | 6.6 英寸及以上 | 1280×2700 | Charge.hap |
| 4 | 智能充电商用版小程序 | 小程序 | 6.6 英寸及以上 | 1280×2700 | dist2(目录) |
竞赛结束前, 选手将上述成果物添加到 " 移动应用开发.zip"压缩包并提交。
三 、竞赛任务
参赛选手根据客户提供的任务描述,按照模块二的任务要求 ,完成移动跨平台应用开发生态系统各任务功能开发。
任务1 : 中控大屏-Launcher 桌面
【任务说明】
中控大屏主屏进入 Launcher 桌面 App
1.屏幕左侧显示卡片栏 ,天气 、时间 、汽车信息。
(1)天气卡片,展示当前温度和天气情况,点击天气卡片 ,在右侧显示具体天气情况。
(2) 时间卡片 ,展示当前时间 、年月日。
2.屏幕底部显示快捷启动栏。
底部快捷启动栏可均匀放置三个 App,快捷启动栏背景为白色透明圆角 。首次进入显示三个 " +" 图标 ,点击 " +" 图标弹出 App 选择框,选择 App 可将对应 App 添加到快捷启动栏中。
任务2: 中控大屏-车辆信息
【任务说明】
在中控大屏主屏中,点击车辆信息 App,进入车辆信息模块 ,该模块分为六部分:基本信息 、 电动机信息 、 电池信息 、车身信息 、底盘/转向信息 、车轮/制动信息。
1.基本信息: 显示车主姓名 、车辆品牌 、车架号信息。
-
电动机信息: 显示总功率 、总扭矩信息。
-
电池信息: 显示电池容量 、 电池品牌 、百公里耗电量信息。
4.车身信息:显示长宽高、轴距、前后轮距、整备质量、后备厢容积等 5 项信息。
5.底盘/转向信息:显示驱动形式 、前悬挂类型、后悬挂类型 、转向助力形式等 4 项信息。
6.车轮/制动信息:显示前后制动器类型、驻车制动类型、前轮胎规格、后轮胎规格、轮毂材质、备胎规格等 6 项信息。
任务3: 中控大屏-天气显示
【任务说明 】
在中控大屏主屏中点击 【天气】,进入天气 App ,显示如下:
- 中控大屏主屏中显示:当前城市名 ,当前天气( 晴天、多云、雨天、雪天等),最高温度和最低温度;中部展示湿度:显示当前湿度 ,例如 "湿度: 65%";底部显示风速: 显示当前风速 ,例如 "风速: 5km/h";城市列表: 可根据城市列表
选择城市 ,切换成所选城市的天气数据 ,并且切换数据时,中控大屏副屏的显示数据也会切换成对应程序的天气数据,实现多屏同显和异显。
2.当中控大屏主屏点击城市列表选择城市 ,选中城市的城市名 、当前天气 、最高温度 、最低温度 、湿度 、风速, 同时在中控大屏仪表屏中同步显示该内容 ,实现多屏同显和异显。
任务4: 车主手机APP-汽车维保
【任务说明】
进入车主手机 App 首页,点击底部导航菜单【服务】模块 ,进入车主服务模块 ,该模块中显示维保预约 、维保历史功能。
1.点击车主服务模块中的 【维保预约】 进入维保预约页面 ,页面顶部显示标题栏 ,标题栏右侧显示 【维保历史】 按钮。页面内容部分显示预约表单。表单第一行显示维保类型,维保类型包括 【常规保养】、【车辆维修】,进入页面后默认选中常规保养。
(1)当选择维保类型为常规保养时,预约表单包括维保类型 、城市 、维保服务站( 4S 店)、预约日期 、预约时间 、维保车辆 、车牌号码 、联系人姓名 、联系电话 。点击 【提交预约】 按钮进行提交 ,提交成功后返回车主服务页 ,可在维保历史页面中查看预约记录。
(2) 当选择维保类型为车辆维修时 ,预约表单包括维保类型、城市、维保服务站(4S 店)、预约日期、预约时间、维保车辆 、车牌号码 、联系人姓名 、联系电话 。预约表单内容下方显示维修方案和电子签名区域,维修方案包括更换零件 、维修类目 、单项价格 、维修总价 、维修周期 。在签名区域手写签名 ,完成预约表单信息后 ,点击 【提交预约】 按钮进行提交,提交成功后进入支付页面,支付成功后返回首页,可在维保历史页面中查看预约记录。
2.点击车主服务模块中的 【维保历史】 进入维保历史页面 ,页面顶部显示标题栏,标题栏下方显示维保历史记录条数和历史列表 ,维保历史列表项包括工单号 、维保类型 、预约日期 、预约时间 、维保费用和维保状态。
任务5: 中控大屏-应用市场
【任务说明 】
1.在中控大屏主屏中点击应用市场,进入应用市场页面,页面包括推荐 App 内容 ,搜索菜单 、更新菜单。
2.App 推荐卡片 ,卡片内容为App 图标 、背景 、名称 、介绍 、【下载】按钮,点击【下载】按钮进行 App 下载安装。卡片下方展示专题列表,专题列表为本周热门 App 列表,列表包括 App 名称 、App 缩略图 、下载次数 、【下载】 按钮 ,点击【下载】按钮可下载对应 App( 管理服务端可进行 App上传 ,推荐状态的修改等功能)。
3.点击搜索菜单 ,跳转至搜索页面 ,在搜索页面输入应
用名称 ,点击 【搜索】 按钮可模糊查询应用列表。
4.点击更新菜单,展示所有可更新的 App 列表,点击更新按钮可进行更新。
任务6: 数据分析
【任务说明 】
在车主手机 App 主页面上,点击底部导航栏"数据分析",进入数据分析页面。
柱状图:请分析 2023 年上半年使用充电桩的充电次数、充电量和花费 ,按照月耗电比例进行分析,横坐标为月份 ,每组纵坐标为充电次数 、充电量和花费。
模块三: 应用部署测试
- 、模块考核点
模块分值: 25 分
本模块重点考查选手应用系统测试能力,基于移动跨平台应用开发生态系统 ,围绕车主 App 、中控大屏 App 、智能充电家用版 App 和智能充电商用版小程序,进行应用系统部署 、测试用例编写 、功能测试 、API 自动化测试以及文档编写。
二 、任务要求
1.部署移动跨平台应用开发生态系统待测应用。
2.根据"移动跨平台应用开发生态系统功能范围.pdf",撰写测试用例文档 ,并进行功能测试,将功能缺陷提交缺陷文档中。
3.利 用 Postman 工 具 进 行 API 接 口 测 试 , 并 导 出Api.json 脚本。
4.根据"移动跨平台应用开发生态系统功能范围.pdf",撰写产品操作手册文档。
5.竞赛结束前 ,选手将上述成果物测试用例.xlsx 、缺陷分析.docx 、Api.json 、产品操作手册.docx 添加到"应用部署测试.zip"压缩包内 ,并提交压缩包文件。
三 、竞赛任务
任务1 : 应用功能测试
根据 "移动跨平台应用开发生态系统功能范围.pdf" 中描述的功能范围,撰写测试用例文档( 具体测试用例数量如表1 所示,测试用例格式如表 2 所示)并进行全范围功能测查,找出特定的 10 个 Bug ,根据找出的 Bug 进行缺陷分析 ,分析 Bug 出现的原因 ,将 Bug 填写到 "缺陷分析.docx" 中 ,缺陷分析填写样例如表 3 所示。
表1 功能模块说明
|----|---------------|--------------------|
| 序号 | 功能模块 | 说明 |
| 1 | 车主手机功能范围-功能 1 | 本功能模块编写至少 10 个测试用例 |
| 2 | 车主手机功能范围-功能 2 | 本功能模块编写至少 10 个测试用例 |
| 3 | 车主手机功能范围-功能 3 | 本功能模块编写至少 10 个测试用例 |
| 4 | ...... | ...... |
表 2功能测试填写样例表
|-------|-------|-------|------|------|-------|------|
| 系统 模块 | 用例 编号 | 用例 描述 | 前置条件 | 操作步骤 | 预期 结果 | 测试结果 |
|------|-------|------|-----------------|------------------|-----------------------------------|------|
| 1.登录 | 1.1.1 | 密码登录 | 用户确保 已注册用 户名和密码 | 输入正确的用户名、密码,点击登录 | 点击登录后,提示"登录成功"字样,跳转至车 主 手 机App 首页 | 测试通过 |
| ... |||||||
表3缺陷分析填写样例表
|--------|--------------------------------------------|
| 缺陷编号 | 001 |
| 缺陷简要描述 | 点击车主服务模块中的 【维保预约】 进入维保预约页面,无响应。 |
| 缺陷重现步骤 | 1.用户成功登录系统; 2.进入车主 App 首页; 3.点击首页【维保预约】按钮。 |
| 涉及功能模块 | 车主 App |
| 缺陷分析原因 | 1.【维保预约】功能未开发; 2.【维保预约】按钮失效。 |
| 缺陷图例 | |
| 缺陷图例 | 注:裁剪截图 ,每页放置两个缺陷内容 |
任务2: API接口测试
利用 Postman 测试工具 ,根据移动跨平台应用开发生态系统 API 文档,进行自动化 API 接口测试,并导出Api.json文件。
任务3: 撰写产品操作手册
对移动跨平台应用开发生态系统车主手机功能进行梳理分析 ,利用产品操作手册( 模板) .docx 文件编写产品操作手册 ,具体规范如下描述:
第一部分:编写待测App 的产品定位中心叙述,罗列核心功能点名称与运行待测App 的运行基础环境。
第二部分:编写上述功能点的指导说明 ,准确叙述用户操作行为,将功能变得具体化 、形象化 ,便于读者理解具体内容 ,增强说服力。
第三部分:编写需要指出使用待测App 的常规注意事项进行说明 ,提示用户规避使用不规范操作等。