2023 年河北省職業(yè)院校技能大賽（中職組）移動應用與開發(fā)賽項賽題第二套

2023年河北省職業(yè)院校技能大賽（中職組）

移動應用與開發(fā)賽項賽題B（樣卷）

賽位號：_____________

2023年5月

一、項目背景

當前發(fā)展數(shù)字經(jīng)濟已成為國家重點戰(zhàn)略。據(jù)預測，預計到2025

年數(shù)字經(jīng)濟占GDP比重將超50%。智慧城市（英語：SmartCity）

是指在城市規(guī)劃、設(shè)計、建設(shè)、管理與運營等領(lǐng)域中，運用物聯(lián)網(wǎng)、

云計算、大數(shù)據(jù)、空間地理信息集成等數(shù)字技術(shù)，使得城市管理、

教育、醫(yī)療、房地產(chǎn)、交通運輸、公用事業(yè)和公眾安全等城市組成

的關(guān)鍵基礎(chǔ)設(shè)施組件和服務更互聯(lián)、高效和智能，從而為市民提供

更美好的生活和工作服務、為企業(yè)創(chuàng)造更有利的商業(yè)發(fā)展環(huán)境、為

政府賦能更高效的運營與管理機制。智慧城市是數(shù)字經(jīng)濟發(fā)展應用

的重要場景。

D公司是行業(yè)領(lǐng)先的全球化信息技術(shù)、產(chǎn)品和解決方案公司，

目前與G市簽署了智慧城市建設(shè)戰(zhàn)略合作協(xié)議。雙方將面向智慧政

務、智慧社保、智慧醫(yī)療、智慧健康、智慧環(huán)保、智慧交通、智慧

黨建、數(shù)字鄉(xiāng)村等11個大系統(tǒng)、48個場景，為城市生活打造的一

個數(shù)字化界面，建設(shè)G市城市大腦。通過G市城市大腦，市民憑借

它觸摸城市脈搏、感受城市溫度、享受城市服務，城市管理者通過

它配置公共資源、作出科學決策、提高治理效能。

二、競賽內(nèi)容

賽卷分模塊A、模塊B和模塊C三個部分。

模塊編號模塊名稱競賽時間分數(shù)

A移動應用界面設(shè)計30

B移動應用前端開發(fā)240分鐘50

C移動應用測試與交付20

合計100

第2頁/共18頁

三、智慧城市服務端

智慧城市后臺服務數(shù)據(jù)，請訪問服務器http://IP:PORT/，下

載API接口文檔。

四、成果物提交

把A、B、C三個模塊的任務要求提交對應的成果物，將A、B、

C三個模塊成果物壓縮為“成果物.zip”,“成果物.zip”應包含

“移動應用界面設(shè)計.xd”、“SmartCity.apk”、“產(chǎn)品手冊.doc”、

“缺陷分析.doc”，裁判基于平臺下載對應選手競賽成果物，進行評

判。

1.用戶登錄

登錄http://IP/（具體將在競賽任務書中說明），進入競賽管

理系統(tǒng)登錄界面，輸入二次加密的賬戶和密碼登錄技能競賽管理系

統(tǒng)。

2.模塊成果物上傳

參賽選手登錄技能競賽管理系統(tǒng)后，在成果物上傳界面上傳

“成果物.zip”，參賽選手在比賽結(jié)束前可以自愿修改重新上傳成果

物，比賽結(jié)束時系統(tǒng)自動鎖定，選手無法提交成果物。

五、競賽注意事項

提交的成果物資源內(nèi)容中，不能填寫與選手相關(guān)的信息，如賽

位號、姓名和院校。如出現(xiàn)上述標記，成績按照零分處理。

第3頁/共18頁

模塊A：移動應用界面設(shè)計

一、競賽任務

此模塊分數(shù)為30分。

（一）競賽主題

隨著第五代移動通信技術(shù)（5G）高速發(fā)展，推動新一代信息技

術(shù)與各個行業(yè)的融合發(fā)展，“智慧城市”這一概念隨著城市化進程的

快速發(fā)展應運而生。

智慧城市是指利用新一代信息技術(shù)，以整合、系統(tǒng)的方式管理

城市運行體系，讓城市中各個功能彼此協(xié)調(diào)運作，為城市中的企業(yè)

提供優(yōu)質(zhì)的發(fā)展空間，為市民提供更高的生活品質(zhì)，讓城市成為適

合人全面發(fā)展的城市，涵蓋了智慧服務、智慧養(yǎng)老、智慧黨建、智

慧環(huán)保、智慧社區(qū)、精準扶貧、時代楷模等數(shù)十個場景。

圖1智慧城市系統(tǒng)架構(gòu)

（二）任務要求

1.使用原型圖工具（AdobeXD）和圖形處理工具（Adobe

Photoshop）設(shè)計符合目標受眾的App高保真原型稿，每個功能至少

一個畫板。

2.畫板尺寸為1080×1920，狀態(tài)欄高度72px，標題欄高度為

144px，標簽欄高度為72px。

3.原型繪制畫板大小尺寸及各部分內(nèi)容區(qū)尺寸參考。

第4頁/共18頁

圖2尺寸參考圖

4.當內(nèi)容超出高度區(qū)域時，設(shè)置滾動區(qū)域來顯示內(nèi)容。

5.畫板要對齊，界面版式布局合理、美觀，內(nèi)容完整；同樣功

能請復用樣式，避免一種功能、兩種樣式的情況。

6.原型要有交互設(shè)計內(nèi)容，用戶體驗良好。檢查存在的漏洞，

防止出現(xiàn)異常流程和異常內(nèi)容狀態(tài)。

7.頁面所需數(shù)據(jù)，詳見API接口文檔，利用Postman工具獲取。

API接口文檔和部分素材詳見平臺——模塊1：移動應用界面設(shè)計—

—資源下載——設(shè)計素材。

（三）需求描述

任務1：青年驛站界面設(shè)計（7.5分）

任務說明：

1.進入青年驛站頁面，頁面左上角顯示返回上一頁按鈕。

（1）上部展示一張青年驛站照片，在該圖片下方對青年驛站做

簡單的文字概述。

第5頁/共18頁

（2）中部顯示3列宮格，分別為各區(qū)標志性建筑，點擊方格進

入后為該區(qū)人才政策頁。

（3）下部為青年驛站列表。列表項第一行左側(cè)方形該青年驛站

正方形照片，右側(cè)為青年驛站名稱。青年驛站名稱下方要顯示剩余

床位數(shù)，分男女兩項。床位數(shù)下方顯示該驛站所在詳細地址，單行

過長要折行。點擊第一行進入該驛站詳情頁。第二行為可以上下收

縮的站點介紹，點擊前顯示站點介紹按鈕，點擊后向下展示該驛站

詳情，再次點擊收縮。

2.進入驛站詳情頁頁面，頁面左上角顯示返回上一頁按鈕。

（1）頂端展示7張該驛站輪播照片，下方為該驛站地址，地址

過長需換行，地址下面顯示該驛站聯(lián)系電話和提示辦理入住時間段，

入住時間下方顯示男女顯示剩余床位數(shù)。

（2）下部為驛站詳細介紹，文本分為4部分：驛站簡介、房間

配置、周邊配套和特色服務。

3.從各區(qū)人才政策導航宮格按鈕進入人才頁，頁面左上角顯示

返回上一頁按鈕。

（1）區(qū)人才政策頁上方為該區(qū)標志性建筑圖片，圖片下方為該

區(qū)簡介，簡介下方為該區(qū)人才政策文件列表，按發(fā)布時間順序從新

到舊，每條分為兩行，一行標題，一行日期。

（2）政策列表條目點擊進入后為內(nèi)容頁，信息包括標題、日期、

內(nèi)容和發(fā)布者。

任務2：政府服務熱線界面設(shè)計（7.5分）

任務說明：

1.進入政府服務熱線主頁面，頁面顯示返回上一頁按鈕、廣告

第6頁/共18頁

輪播圖、市民訴求分類、我的訴求。

（1）廣告輪播圖：每隔3秒自動切換廣告圖。

（2）市民訴求分類：以圖標和名稱為單元宮格方式顯示，手機

端每行顯示4個，按照優(yōu)先級由高到低排序，共兩行，左右滑動可

切換顯示類目。每個類目入口布局顯示為圓形圖標和名稱布局，點

擊最后一個“其他訴求”圖標，進入新建訴求頁；點擊其他圖標可

進入對應分類的訴求列表頁面。

（3）我的訴求：列表顯示我的訴求，列表項信息包括標題、承

辦單位、提交時間和處理狀態(tài)，未完結(jié)訴求優(yōu)先頂部顯示。

2.進入訴求列表頁面，頁面包括訴求列表、發(fā)布訴求按鈕，列

表項信息包括標題、承辦單位、提交時間和處理狀態(tài)，點擊列表項，

跳轉(zhuǎn)至訴求詳情頁，點擊發(fā)布訴求按鈕，跳轉(zhuǎn)至新建訴求頁。訴求

詳情頁包括標題、訴求內(nèi)容、圖片、承辦單位、提交時間、反饋處

理狀態(tài)和處理結(jié)果。

3.新建訴求頁，頁面內(nèi)容包括標題、訴求內(nèi)容、圖片、承辦單

位、反饋手機號和發(fā)布按鈕；若是點擊其他訴求分類進入的新建訴

求頁，頂部還要顯示訴求分類下拉框，可以更改訴求分類；點擊提

交按鈕完成發(fā)布。

任務3：找房子界面設(shè)計（7.5分）

任務說明：

找房子功能主要包括主頁和信息詳情兩個頁面，點擊上方導航

欄“返回”按鈕返回智慧城市主頁面。

1.主頁面，頁面包括頂部導航欄目、搜索、功能分類和房源展

示板塊。具有返回按鈕，點擊返回按鈕可以返回智慧城市主頁面。

第7頁/共18頁

下方搜索在頁面搜索框下面顯示4大分類按鈕，分別為：二手、租

房、樓盤、中介，并圖文顯示。

（1）頁面頂部具有返回按鈕，點擊返回按鈕返回智慧城市主頁。

（2）搜索，根據(jù)房源名稱模糊查詢，結(jié)果列表顯示在房源展示

區(qū)。

（3）功能分類，搜索下面顯示四大分類，分別為：二手、租房、

樓盤、中介，并圖文顯示。點擊四大分類按鈕，房源展示區(qū)更新該

分類相應的房源信息并在頁面下方以列表的形式展示，列表項每一

房源均顯示圖片、所在小區(qū)或商圈名稱、房源面積以及價格、房源

簡介等內(nèi)容。

（4）房源展示分類欄目下方，展示默認最新發(fā)布的房源列表信

息，列表頁每一房源均顯示房源圖片、房源面積以及價格、房源簡

介等內(nèi)容。

2.信息詳情頁，點擊房源列表中的某個房源，進入到房源詳情

頁面。詳情頁面分別展示房源圖片、房源名稱、建筑面積、房源單

價、房源類型、房源介紹等信息。底部展示主頁按鈕，點擊“主頁”，

返回找房主主頁。

任務4：智慧巴士界面設(shè)計（7.5分）

任務說明：

在智慧城市App主頁面上的各領(lǐng)域應用服務入口或全部服務，

點擊“智慧巴士”圖標信息，進入智慧巴士頁面。

任務說明：

1.頁面顯示巴士列表，列表顯示路線名稱、起終點、運行時間、

票價、以及里程、巴士列表具有擴展顯示該路線的各個站點功能。

第8頁/共18頁

2.點擊班車列表新路線名稱跳轉(zhuǎn)到定制班車頁面，信息如下：

（1）第一步頁面：顯示站點路線秒點地圖、起點與終點名稱、

票價、里程等，具有“下一步”點擊按鈕以及“返回上級目錄”按

鈕。

（2）第二步頁面：顯示日歷日期，選中日歷日期則顯示出已經(jīng)

選中的日期，并且具有“下一步”點擊按鈕以及“返回上級目錄”

按鈕。

（3）第三步頁面：顯示起點與終點名稱，還具有乘客姓名、手

機號碼、上車地點、下車地點輸入框，并且具有“下一步”點擊按

鈕以及“返回上級目錄”按鈕。

（4）第四步頁面：顯示第三步頁面，所填寫的乘客信息、手機

號碼、上車地點、下車地點、乘車日期并且具有“提交訂單”按鈕

以及“返回上級目錄”按鈕。

3.在應用的個人中心點擊“我的訂單”頁面，頁面顯示待支付、

已支付訂單、訂單列表顯示路線名稱、起終點、票價、訂單編號、

乘車日期。

二、模塊考核點

本模塊以產(chǎn)品初步設(shè)計原型為目標，考查參賽選手熟練收集、

分析和歸納客戶需求，清晰梳理業(yè)務流程，編制規(guī)范的需求規(guī)格說

明書，熟練使用UI設(shè)計軟件進行產(chǎn)品UI/UE設(shè)計，掌握正確的

UI配色方案，設(shè)計出符合人體工學的移動App優(yōu)秀作品。

模塊B：移動應用前端開發(fā)

一、競賽任務

此模塊分數(shù)50分。

第9頁/共18頁

二、任務描述

參賽選手根據(jù)客戶給定的需求描述，利用跨平臺開發(fā)工具或原

生開發(fā)工具，編碼實現(xiàn)任務需求功能設(shè)計。

任務1：實現(xiàn)用戶登錄功能（9分）

圖3登錄界面參考圖

設(shè)計智慧城市App，利用移動開發(fā)工具（AndroidStudio）創(chuàng)

建SmartCity項目或HbuilderX打開項目，編碼實現(xiàn)智慧城市App

的登錄頁面，包括App的標題、賬戶和密碼、自動登錄切換按鈕、

登錄按鈕，以及微信、QQ和sina微博快捷登錄的圖標。

輸入賬戶和密碼后，點擊登錄按鈕，進入主界面。

注：接口數(shù)據(jù)詳見API接口文檔

任務2：實現(xiàn)主界面功能（14分）

進入App主頁面（主頁），彰顯智慧城市風采，打造智慧型服務

第10頁/共18頁

大廳，科技賦能，創(chuàng)新智能，打造視、聽、觸體驗具佳的業(yè)務服務

大廳，同時供應多種智慧城市解決方案。

圖4主界面參考圖

1.顯示系統(tǒng)廣告輪播圖，點擊輪播圖跳轉(zhuǎn)至新聞對應詳情頁面。

2.顯示智慧城市各領(lǐng)域應用服務入口，以圖標和名稱為單元宮

格方式顯示，手機端每行顯示3個，共兩行，第2行最后一個顯示

“更多服務”。

3.顯示底部導航欄，采用圖標加文字方式顯示，圖標在上，文

字在下，共四個圖標分別為首頁、新聞、青年驛站、政府服務熱線，

點擊標簽進入對應頁面，并顏色標記當前頁面所在導航欄。

注：輪播圖和應用服務資源通過服務器API接口獲取。

第11頁/共18頁

任務3：實現(xiàn)青年驛站界面功能（14分）

點擊App底部青年驛站標簽，進入青年驛站頁面。

圖5青年驛站界面參考圖

1.進入青年驛站頁面，頁面左上角顯示返回上一頁按鈕。

（1）上部展示一張青年驛站照片，在該圖片下方對青年驛

站做簡單的文字概述。

（2）中部顯示3列宮格，分別為各區(qū)標志性建筑，點擊方

格進入后為該區(qū)人才政策頁。

（3）下部為青年驛站列表。列表項第一行左側(cè)方形該青年

驛站正方形照片，右側(cè)為青年驛站名稱。青年驛站名稱下方要

顯示剩余床位數(shù)，分男女兩項。床位數(shù)下方顯示該驛站所在詳

細地址，單行過長要折行。點擊第一行進入該驛站詳情頁。第

二行為可以上下收縮的站點介紹，點擊前顯示站點介紹按鈕，

第12頁/共18頁

點擊后向下展示該驛站詳情，再次點擊收縮。

2.進入驛站詳情頁頁面，頁面左上角顯示返回上一頁按鈕。

（1）頂端展示7張該驛站輪播照片，下方為該驛站地址，

地址過長需換行，地址下面顯示該驛站聯(lián)系電話和提示辦理入

住時間段，入住時間下方顯示男女顯示剩余床位數(shù)。

（2）下部為驛站詳細介紹，文本分為4部分：驛站簡介、

房間配置、周邊配套和特色服務。

3.從各區(qū)人才政策導航宮格按鈕進入人才頁，頁面左上角

顯示返回上一頁按鈕。

（1）區(qū)人才政策頁上方為該區(qū)標志性建筑圖片，圖片下方

為該區(qū)簡介，簡介下方為該區(qū)人才政策文件列表，按發(fā)布時間

順序從新到舊，每條分為兩行，一行標題，一行日期。

（2）政策列表條目點擊進入后為內(nèi)容頁，信息包括標題、

日期、內(nèi)容和發(fā)布者。

注：數(shù)據(jù)詳見API接口文檔。

任務4：實現(xiàn)政府服務熱線功能（13分）

在App主頁面上，點擊底部導航欄“政府服務熱線”，進入政府

服務熱線頁面。

第13頁/共18頁

圖6政府服務熱線界面參考圖

1.進入政府服務熱線主頁面，頁面顯示返回上一頁按鈕、廣告

輪播圖、市民訴求分類、我的訴求。

（1）廣告輪播圖：每隔3秒自動切換廣告圖。

（2）市民訴求分類：以圖標和名稱為單元宮格方式顯示，手機

端每行顯示4個，按照優(yōu)先級由高到低排序，共兩行，左右滑動可

切換顯示類目。每個類目入口布局顯示為圓形圖標和名稱布局，點

擊最后一個“其他訴求”圖標，進入新建訴求頁；點擊其他圖標可

進入對應分類的訴求列表頁面。

（3）我的訴求：列表顯示我的訴求，列表項信息包括標題、承

辦單位、提交時間和處理狀態(tài)，未完結(jié)訴求優(yōu)先頂部顯示。

2.進入訴求列表頁面，頁面包括訴求列表、發(fā)布訴求按鈕，列

表項信息包括標題、承辦單位、提交時間和處理狀態(tài)，點擊列表項，

第14頁/共18頁

跳轉(zhuǎn)至訴求詳情頁，點擊發(fā)布訴求按鈕，跳轉(zhuǎn)至新建訴求頁。訴求

詳情頁包括標題、訴求內(nèi)容、圖片、承辦單位、提交時間、反饋處

理狀態(tài)和處理結(jié)果。

3.新建訴求頁，頁面內(nèi)容包括標題、訴求內(nèi)容、圖片、承辦單

位、反饋手機號和發(fā)布按鈕；若是點擊其他訴求分類進入的新建訴

求頁，頂部還要顯示訴求分類下拉框，可以更改訴求分類；點擊提

交按鈕完成發(fā)布。

注：接口數(shù)據(jù)詳見API接口文檔

三、模塊考核點

本模塊以編程實現(xiàn)移動應用產(chǎn)品為目標，基于移動開發(fā)平臺，

設(shè)計移動應用App。考查選手程序UI還原設(shè)計能力和移動開發(fā)編

程能力，其中包括AppUI編程設(shè)計、網(wǎng)絡通信封裝、異步數(shù)據(jù)通

信、數(shù)據(jù)解析、數(shù)據(jù)存儲、網(wǎng)絡多媒體資源處理等技能，熟悉項目

發(fā)布流程。

模塊C：移動應用測試與交付

一、競賽任務

此模塊分數(shù)20分。

（一）待測系統(tǒng)描述

第15頁/共18頁

圖7待測系統(tǒng)描述參考圖

隨著第五代移動通信技術(shù)（5G）高速發(fā)展，推動新一代信息技

術(shù)與各個行業(yè)的融合發(fā)展，“智慧城市”這一概念隨著城市化進程的

快速發(fā)展應運而生。

智慧城市是指利用新一代信息技術(shù)，以整合、系統(tǒng)的方式管理

城市運行體系，讓城市中各個功能彼此協(xié)調(diào)運作，為城市中的企業(yè)

提供優(yōu)質(zhì)的發(fā)展空間，為市民提供更高的生活品質(zhì)，讓城市成為適

合人全面發(fā)展的城市，涵蓋了智慧政務、智慧環(huán)保、智慧安防、智

慧交通、智慧教育、智慧醫(yī)療、智慧生活等數(shù)十個場景。

（二）待測應用安裝

1.下載“智慧城市.apk”（競賽管理平臺右側(cè)資源下載區(qū)）文件。

2.將apk文件安裝到模擬器中，啟動App，配置服務器的IP

和port，準備運行測試。

（三）基本要求

使用模塊