2023 年河北省职业院校技能大赛（中职组）移动应用与开发赛项赛题第二套

2023年河北省职业院校技能大赛（中职组）

移动应用与开发赛项赛题B（样卷）

赛位号：_____________

2023年5月

一、项目背景

当前发展数字经济已成为国家重点战略。据预测，预计到2025

年数字经济占GDP比重将超50%。智慧城市（英语：SmartCity）

是指在城市规划、设计、建设、管理与运营等领域中，运用物联网、

云计算、大数据、空间地理信息集成等数字技术，使得城市管理、

教育、医疗、房地产、交通运输、公用事业和公众安全等城市组成

的关键基础设施组件和服务更互联、高效和智能，从而为市民提供

更美好的生活和工作服务、为企业创造更有利的商业发展环境、为

政府赋能更高效的运营与管理机制。智慧城市是数字经济发展应用

的重要场景。

D公司是行业领先的全球化信息技术、产品和解决方案公司，

目前与G市签署了智慧城市建设战略合作协议。双方将面向智慧政

务、智慧社保、智慧医疗、智慧健康、智慧环保、智慧交通、智慧

党建、数字乡村等11个大系统、48个场景，为城市生活打造的一

个数字化界面，建设G市城市大脑。通过G市城市大脑，市民凭借

它触摸城市脉搏、感受城市温度、享受城市服务，城市管理者通过

它配置公共资源、作出科学决策、提高治理效能。

二、竞赛内容

赛卷分模块A、模块B和模块C三个部分。

模块编号模块名称竞赛时间分数

A移动应用界面设计30

B移动应用前端开发240分钟50

C移动应用测试与交付20

合计100

第2页/共18页

三、智慧城市服务端

智慧城市后台服务数据，请访问服务器http://IP:PORT/，下

载API接口文档。

四、成果物提交

把A、B、C三个模块的任务要求提交对应的成果物，将A、B、

C三个模块成果物压缩为“成果物.zip”,“成果物.zip”应包含

“移动应用界面设计.xd”、“SmartCity.apk”、“产品手册.doc”、

“缺陷分析.doc”，裁判基于平台下载对应选手竞赛成果物，进行评

判。

1.用户登录

登录http://IP/（具体将在竞赛任务书中说明），进入竞赛管

理系统登录界面，输入二次加密的账户和密码登录技能竞赛管理系

统。

2.模块成果物上传

参赛选手登录技能竞赛管理系统后，在成果物上传界面上传

“成果物.zip”，参赛选手在比赛结束前可以自愿修改重新上传成果

物，比赛结束时系统自动锁定，选手无法提交成果物。

五、竞赛注意事项

提交的成果物资源内容中，不能填写与选手相关的信息，如赛

位号、姓名和院校。如出现上述标记，成绩按照零分处理。

第3页/共18页

模块A：移动应用界面设计

一、竞赛任务

此模块分数为30分。

（一）竞赛主题

随着第五代移动通信技术（5G）高速发展，推动新一代信息技

术与各个行业的融合发展，“智慧城市”这一概念随着城市化进程的

快速发展应运而生。

智慧城市是指利用新一代信息技术，以整合、系统的方式管理

城市运行体系，让城市中各个功能彼此协调运作，为城市中的企业

提供优质的发展空间，为市民提供更高的生活品质，让城市成为适

合人全面发展的城市，涵盖了智慧服务、智慧养老、智慧党建、智

慧环保、智慧社区、精准扶贫、时代楷模等数十个场景。

图1智慧城市系统架构

（二）任务要求

1.使用原型图工具（AdobeXD）和图形处理工具（Adobe

Photoshop）设计符合目标受众的App高保真原型稿，每个功能至少

一个画板。

2.画板尺寸为1080×1920，状态栏高度72px，标题栏高度为

144px，标签栏高度为72px。

3.原型绘制画板大小尺寸及各部分内容区尺寸参考。

第4页/共18页

图2尺寸参考图

4.当内容超出高度区域时，设置滚动区域来显示内容。

5.画板要对齐，界面版式布局合理、美观，内容完整；同样功

能请复用样式，避免一种功能、两种样式的情况。

6.原型要有交互设计内容，用户体验良好。检查存在的漏洞，

防止出现异常流程和异常内容状态。

7.页面所需数据，详见API接口文档，利用Postman工具获取。

API接口文档和部分素材详见平台——模块1：移动应用界面设计—

—资源下载——设计素材。

（三）需求描述

任务1：青年驿站界面设计（7.5分）

任务说明：

1.进入青年驿站页面，页面左上角显示返回上一页按钮。

（1）上部展示一张青年驿站照片，在该图片下方对青年驿站做

简单的文字概述。

第5页/共18页

（2）中部显示3列宫格，分别为各区标志性建筑，点击方格进

入后为该区人才政策页。

（3）下部为青年驿站列表。列表项第一行左侧方形该青年驿站

正方形照片，右侧为青年驿站名称。青年驿站名称下方要显示剩余

床位数，分男女两项。床位数下方显示该驿站所在详细地址，单行

过长要折行。点击第一行进入该驿站详情页。第二行为可以上下收

缩的站点介绍，点击前显示站点介绍按钮，点击后向下展示该驿站

详情，再次点击收缩。

2.进入驿站详情页页面，页面左上角显示返回上一页按钮。

（1）顶端展示7张该驿站轮播照片，下方为该驿站地址，地址

过长需换行，地址下面显示该驿站联系电话和提示办理入住时间段，

入住时间下方显示男女显示剩余床位数。

（2）下部为驿站详细介绍，文本分为4部分：驿站简介、房间

配置、周边配套和特色服务。

3.从各区人才政策导航宫格按钮进入人才页，页面左上角显示

返回上一页按钮。

（1）区人才政策页上方为该区标志性建筑图片，图片下方为该

区简介，简介下方为该区人才政策文件列表，按发布时间顺序从新

到旧，每条分为两行，一行标题，一行日期。

（2）政策列表条目点击进入后为内容页，信息包括标题、日期、

内容和发布者。

任务2：政府服务热线界面设计（7.5分）

任务说明：

1.进入政府服务热线主页面，页面显示返回上一页按钮、广告

第6页/共18页

轮播图、市民诉求分类、我的诉求。

（1）广告轮播图：每隔3秒自动切换广告图。

（2）市民诉求分类：以图标和名称为单元宫格方式显示，手机

端每行显示4个，按照优先级由高到低排序，共两行，左右滑动可

切换显示类目。每个类目入口布局显示为圆形图标和名称布局，点

击最后一个“其他诉求”图标，进入新建诉求页；点击其他图标可

进入对应分类的诉求列表页面。

（3）我的诉求：列表显示我的诉求，列表项信息包括标题、承

办单位、提交时间和处理状态，未完结诉求优先顶部显示。

2.进入诉求列表页面，页面包括诉求列表、发布诉求按钮，列

表项信息包括标题、承办单位、提交时间和处理状态，点击列表项，

跳转至诉求详情页，点击发布诉求按钮，跳转至新建诉求页。诉求

详情页包括标题、诉求内容、图片、承办单位、提交时间、反馈处

理状态和处理结果。

3.新建诉求页，页面内容包括标题、诉求内容、图片、承办单

位、反馈手机号和发布按钮；若是点击其他诉求分类进入的新建诉

求页，顶部还要显示诉求分类下拉框，可以更改诉求分类；点击提

交按钮完成发布。

任务3：找房子界面设计（7.5分）

任务说明：

找房子功能主要包括主页和信息详情两个页面，点击上方导航

栏“返回”按钮返回智慧城市主页面。

1.主页面，页面包括顶部导航栏目、搜索、功能分类和房源展

示板块。具有返回按钮，点击返回按钮可以返回智慧城市主页面。

第7页/共18页

下方搜索在页面搜索框下面显示4大分类按钮，分别为：二手、租

房、楼盘、中介，并图文显示。

（1）页面顶部具有返回按钮，点击返回按钮返回智慧城市主页。

（2）搜索，根据房源名称模糊查询，结果列表显示在房源展示

区。

（3）功能分类，搜索下面显示四大分类，分别为：二手、租房、

楼盘、中介，并图文显示。点击四大分类按钮，房源展示区更新该

分类相应的房源信息并在页面下方以列表的形式展示，列表项每一

房源均显示图片、所在小区或商圈名称、房源面积以及价格、房源

简介等内容。

（4）房源展示分类栏目下方，展示默认最新发布的房源列表信

息，列表页每一房源均显示房源图片、房源面积以及价格、房源简

介等内容。

2.信息详情页，点击房源列表中的某个房源，进入到房源详情

页面。详情页面分别展示房源图片、房源名称、建筑面积、房源单

价、房源类型、房源介绍等信息。底部展示主页按钮，点击“主页”，

返回找房主主页。

任务4：智慧巴士界面设计（7.5分）

任务说明：

在智慧城市App主页面上的各领域应用服务入口或全部服务，

点击“智慧巴士”图标信息，进入智慧巴士页面。

任务说明：

1.页面显示巴士列表，列表显示路线名称、起终点、运行时间、

票价、以及里程、巴士列表具有扩展显示该路线的各个站点功能。

第8页/共18页

2.点击班车列表新路线名称跳转到定制班车页面，信息如下：

（1）第一步页面：显示站点路线秒点地图、起点与终点名称、

票价、里程等，具有“下一步”点击按钮以及“返回上级目录”按

钮。

（2）第二步页面：显示日历日期，选中日历日期则显示出已经

选中的日期，并且具有“下一步”点击按钮以及“返回上级目录”

按钮。

（3）第三步页面：显示起点与终点名称，还具有乘客姓名、手

机号码、上车地点、下车地点输入框，并且具有“下一步”点击按

钮以及“返回上级目录”按钮。

（4）第四步页面：显示第三步页面，所填写的乘客信息、手机

号码、上车地点、下车地点、乘车日期并且具有“提交订单”按钮

以及“返回上级目录”按钮。

3.在应用的个人中心点击“我的订单”页面，页面显示待支付、

已支付订单、订单列表显示路线名称、起终点、票价、订单编号、

乘车日期。

二、模块考核点

本模块以产品初步设计原型为目标，考查参赛选手熟练收集、

分析和归纳客户需求，清晰梳理业务流程，编制规范的需求规格说

明书，熟练使用UI设计软件进行产品UI/UE设计，掌握正确的

UI配色方案，设计出符合人体工学的移动App优秀作品。

模块B：移动应用前端开发

一、竞赛任务

此模块分数50分。

第9页/共18页

二、任务描述

参赛选手根据客户给定的需求描述，利用跨平台开发工具或原

生开发工具，编码实现任务需求功能设计。

任务1：实现用户登录功能（9分）

图3登录界面参考图

设计智慧城市App，利用移动开发工具（AndroidStudio）创

建SmartCity项目或HbuilderX打开项目，编码实现智慧城市App

的登录页面，包括App的标题、账户和密码、自动登录切换按钮、

登录按钮，以及微信、QQ和sina微博快捷登录的图标。

输入账户和密码后，点击登录按钮，进入主界面。

注：接口数据详见API接口文档

任务2：实现主界面功能（14分）

进入App主页面（主页），彰显智慧城市风采，打造智慧型服务

第10页/共18页

大厅，科技赋能，创新智能，打造视、听、触体验具佳的业务服务

大厅，同时供应多种智慧城市解决方案。

图4主界面参考图

1.显示系统广告轮播图，点击轮播图跳转至新闻对应详情页面。

2.显示智慧城市各领域应用服务入口，以图标和名称为单元宫

格方式显示，手机端每行显示3个，共两行，第2行最后一个显示

“更多服务”。

3.显示底部导航栏，采用图标加文字方式显示，图标在上，文

字在下，共四个图标分别为首页、新闻、青年驿站、政府服务热线，

点击标签进入对应页面，并颜色标记当前页面所在导航栏。

注：轮播图和应用服务资源通过服务器API接口获取。

第11页/共18页

任务3：实现青年驿站界面功能（14分）

点击App底部青年驿站标签，进入青年驿站页面。

图5青年驿站界面参考图

1.进入青年驿站页面，页面左上角显示返回上一页按钮。

（1）上部展示一张青年驿站照片，在该图片下方对青年驿

站做简单的文字概述。

（2）中部显示3列宫格，分别为各区标志性建筑，点击方

格进入后为该区人才政策页。

（3）下部为青年驿站列表。列表项第一行左侧方形该青年

驿站正方形照片，右侧为青年驿站名称。青年驿站名称下方要

显示剩余床位数，分男女两项。床位数下方显示该驿站所在详

细地址，单行过长要折行。点击第一行进入该驿站详情页。第

二行为可以上下收缩的站点介绍，点击前显示站点介绍按钮，

第12页/共18页

点击后向下展示该驿站详情，再次点击收缩。

2.进入驿站详情页页面，页面左上角显示返回上一页按钮。

（1）顶端展示7张该驿站轮播照片，下方为该驿站地址，

地址过长需换行，地址下面显示该驿站联系电话和提示办理入

住时间段，入住时间下方显示男女显示剩余床位数。

（2）下部为驿站详细介绍，文本分为4部分：驿站简介、

房间配置、周边配套和特色服务。

3.从各区人才政策导航宫格按钮进入人才页，页面左上角

显示返回上一页按钮。

（1）区人才政策页上方为该区标志性建筑图片，图片下方

为该区简介，简介下方为该区人才政策文件列表，按发布时间

顺序从新到旧，每条分为两行，一行标题，一行日期。

（2）政策列表条目点击进入后为内容页，信息包括标题、

日期、内容和发布者。

注：数据详见API接口文档。

任务4：实现政府服务热线功能（13分）

在App主页面上，点击底部导航栏“政府服务热线”，进入政府

服务热线页面。

第13页/共18页

图6政府服务热线界面参考图

1.进入政府服务热线主页面，页面显示返回上一页按钮、广告

轮播图、市民诉求分类、我的诉求。

（1）广告轮播图：每隔3秒自动切换广告图。

（2）市民诉求分类：以图标和名称为单元宫格方式显示，手机

端每行显示4个，按照优先级由高到低排序，共两行，左右滑动可

切换显示类目。每个类目入口布局显示为圆形图标和名称布局，点

击最后一个“其他诉求”图标，进入新建诉求页；点击其他图标可

进入对应分类的诉求列表页面。

（3）我的诉求：列表显示我的诉求，列表项信息包括标题、承

办单位、提交时间和处理状态，未完结诉求优先顶部显示。

2.进入诉求列表页面，页面包括诉求列表、发布诉求按钮，列

表项信息包括标题、承办单位、提交时间和处理状态，点击列表项，

第14页/共18页

跳转至诉求详情页，点击发布诉求按钮，跳转至新建诉求页。诉求

详情页包括标题、诉求内容、图片、承办单位、提交时间、反馈处

理状态和处理结果。

3.新建诉求页，页面内容包括标题、诉求内容、图片、承办单

位、反馈手机号和发布按钮；若是点击其他诉求分类进入的新建诉

求页，顶部还要显示诉求分类下拉框，可以更改诉求分类；点击提

交按钮完成发布。

注：接口数据详见API接口文档

三、模块考核点

本模块以编程实现移动应用产品为目标，基于移动开发平台，

设计移动应用App。考查选手程序UI还原设计能力和移动开发编

程能力，其中包括AppUI编程设计、网络通信封装、异步数据通

信、数据解析、数据存储、网络多媒体资源处理等技能，熟悉项目

发布流程。

模块C：移动应用测试与交付

一、竞赛任务

此模块分数20分。

（一）待测系统描述

第15页/共18页

图7待测系统描述参考图

随着第五代移动通信技术（5G）高速发展，推动新一代信息技

术与各个行业的融合发展，“智慧城市”这一概念随着城市化进程的

快速发展应运而生。

智慧城市是指利用新一代信息技术，以整合、系统的方式管理

城市运行体系，让城市中各个功能彼此协调运作，为城市中的企业

提供优质的发展空间，为市民提供更高的生活品质，让城市成为适

合人全面发展的城市，涵盖了智慧政务、智慧环保、智慧安防、智

慧交通、智慧教育、智慧医疗、智慧生活等数十个场景。

（二）待测应用安装

1.下载“智慧城市.apk”（竞赛管理平台右侧资源下载区）文件。

2.将apk文件安装到模拟器中，启动App，配置服务器的IP

和port，准备运行测试。

（三）基本要求

使用模块