2025年广东省职业院校技能大赛中职组移动应用与开发赛项技能测试样题二文章目录2025年广东省职业院校技能大赛中职组移动应用与开发赛项技能测试样题二子模块A移动应用界面设计任务 1党建中心界面设计任务 2首页界面设计任务 3党建动态界面设计任务 4党员学习界面设计任务 5引导功能模块任务 6登录功能模块任务说明子模块B移动应用前端开发任务 1实现引导页面任务 2实现注册登录选择和注册功能页面任务 3实现登录页面任务 4实现首页和个人信息页面任务 5实现控制列表功能任务 6实现客厅与主卧控制功能ZZ039 移动应用与开发赛项参考答案:移动应用与开发赛项参考答案链接点击跳转子模块A移动应用界面设计一、模块考核点 模块分值为 30 分。本模块以产品原型为目标考查参赛选手熟练收集、分析和归纳客户需求清晰梳理业务流程熟练使用 UI 设计软件进行产品 UI/UE设计掌握正确的 UI 配色方案设计出符合业务逻辑的人体工学移动App 原型优秀作品。二、任务要求1.使用原型图工具Adobe XD创建项目“子模块 A_移动应用界面设计.xd”此项目文件作为模块 A 成果物进行提交。详见“三、成果物提交”说明。2.利用原型图工具Adobe XD和图形处理工具Adobe Photoshop设计符合目标受众的 App 高保真原型稿每个任务至少一个画板。3.画板尺寸为 1080×1920状态栏高度 72px标题栏导航栏高度为 168px标签栏高度为 144px。4.原型绘制画板大小尺寸及各部分内容区尺寸参考。5.当内容超出高度区域时设置滚动区域来显示内容。6.画板要对齐界面版式布局合理、美观内容完整同样功能请复用样式避免一种功能两种样式的情况。任务 1党建中心界面设计任务说明1.党建中心界面显示【党建中心】标题界面上半部分显示用户头像、个人名称、性别、年龄2.下半部分显示学习记录入口、我的收藏入口、个人档案入口、笔记入口、随手拍入口、设置入口每个条目具有右箭头。3.党建中心界面点击设置入口进入设置页面需要具有页面向左滑动的效果。4.设置界面需要具有设置标题和返回按钮点击返回按钮返回到党建中心界面返回需要具有页面向右滑动的效果。5.设置界面下方显示更改手机号入口、修改密码入口和“退出登录”按钮点击修改密码入口进入修改密码界面需要具有页面向左滑动的效果。6.修改密码界面显示修改密码标题和返回按钮点击返回按钮返回到设置界面返回需要具有页面向右滑动的效果。7.修改密码页面显示旧密码输入框、新密码输入框、再次输入密码输入框和“确定”按钮输入框内显示对应提示语点击每个输入框可以显示输入的示例信息点击“确定”按钮弹出修改成功提示框三秒后自动跳转到设置界面。任务 2首页界面设计任务说明1.顶部显示首页标题和党徽右上角显示拍照按钮。2.显示党建轮播图和标题三秒轮播具有圆点指示器跟随轮播图。3.显示智慧党建各领域应用服务入口以图标和名称为单元宫格方式显示手机端每行显示 3 个分别为“党旗”“党章”“党徽”。 4.下方显示热点新闻列表热点新闻包括新闻标题、新闻发布时间、出版社至少显示 5 条标题右侧显示“查看更多”按钮。5.显示底部导航栏采用图标加文字方式显示图标在上文字在下共 5 个图标分别为党员学习、党建动态、首页、党建服务、党建中心。任务 3党建动态界面设计任务说明1.党建动态界面显示党建动态标题。2.页面分为三个部分显示党建动态轮播图中间部分显示基层动态新闻信息下半部分显示组织活动信息。3.党建动态轮播图3 秒切换一次轮播图上方显示党员先锋小标题。4.基层动态信息包括新闻标题、出版社信息、发布时间、新闻缩略图可以左右滑动动态列表项。5.组织活动信息包括活动标题、截止时间、活动大图至少显示3 条可以上下滑动。任务 4党员学习界面设计任务说明1.党员学习界面界面标签栏显示本页面标题界面包括两个部分上半部分为“三会一课”轮播图下半部分为书籍信息。2.书籍信息部分有两个选项卡第一个选项卡为“入选书目”第二个选项卡为“入围书目”点击可以切换对应的书籍选项卡下方为书籍信息。3.书籍信息包括书名、出版社、信息发布时间、缩略图至少显示 3 条书籍信息。任务 5引导功能模块任务说明1、引导页面具有 3 页下方显示 3 个小圆点标识第一个页面的小圆点默认为选中状态颜色为实心白色未选中的小圆点为空心白色提示用户当前引导页面位置点击小圆点后页面也随之切换。2、进入最后引导页时圆点上部显示【开启】按钮。任务 6登录功能模块任务说明1、登录注册页具有“登录”文本“手机登录”按钮、“登录”按钮和“没有账户点我注册”文本。2、在登录注册页点击【手机登录】按钮跳转到【手机登录】页面。3、手机登录页面具有“手机登录”标题、返回按钮、国家代码选择框显示中国86、手机号码输入框和发送按钮。4、手机登录页面点击【返回】按钮返回到登录注册页。5、手机登录页面点击【发送】按钮跳转到验证码界面该界面具有验证码输入框和提交按钮。子模块B移动应用前端开发一、模块考核点模块分值 60 分。本模块以编程实现移动应用产品为目标基于移动开发平台设计移动应用 App。考查选手程序 UI 还原设计能力和移动开发编程能力其中包括 App UI 编程设计、网络通信封装、异步数据通信、数据解析、数据存储、网络多媒体资源处理等技能熟悉项目发布流程。二、任务要求1.利用移动开发工具Android Studio 创建名为“ModuleB”项目或利用 HbuilderX 打开项目 ModuleB 基础框架按照任务描述完成 App 功能开发。2.实现 App 打包发布 将打包后的 release 版本“ 子模块 B_APP.apk” 、“子模块 B 项目源代码”文件作为模块 B 成果物进行提交。详见“三、成果物提交”说明。任务 1实现引导页面任务说明1.打开 APP进入引导页面引导页面具有三个页面可以左右滑动显示页面具有长条指示器可以显示当前所在页面位置指示器选中为白色未选中为灰色。2.第一个引导页面顶部右上角显示【跳过】按钮【跳过】按钮为圆角边框样式点击【跳过】按钮跳转至登录页显示背景图片背景图片上部由圆形、三角形、星形共同组成页面显示标题【智能家居轻松掌握每一刻。】和副标题【智能家居】底部显示【下一页】按钮点击后可跳转至下一张引导页面。3.第二个引导页面顶部左上角显示【返回】按钮点击【返回】按钮可返回至上一个引导页面背景图片由前一张背景的图形以中心为原点顺时针旋转 120 度获得页面显示标题【让家更聪明让生活更轻松。】和副标题【智能家居】底部显示【下一页】按钮点击后可跳转至下一张引导页面。4.第三个引导页面顶部左上角显示【返回】按钮点击【返回】按钮可返回至上一个引导页面背景图片由前一张背景的图形以中心为原点顺时针旋转 120 度获得页面显示标题【从现在开始让家智能起来。】和副标题【智能家居】底部显示【进入 APP】按钮点击后可进入注册登录选择页面。任务 2实现注册登录选择和注册功能页面任务说明1.注册登录选择页面上半部分显示背景图片背景图片为圆角矩形中部显示【智能家居】标题底部显示【登录】按钮和【创建新用户】按钮【登录】按钮为圆角矩形背景颜色为粉色至橙色的线性渐变点击【登录】按钮进入到登录页面点击【创建新账户】按钮进入到创建新账户页面。2.创建新账户页面顶部左上角显示【返回】按钮点击【返回】按钮可返回至注册登录选择页面【返回】按钮下方显示【创建新账户】标题【创建新账户】标题下方显示用户头像用户头像水平居中边框为圆角矩形头像中的字符为用户名输入框中第一个字符的大写下方显示输入表单包括【用户名】输入框、【邮箱】输入框、【密码】输入框、【确认密码】输入框以及【确认】按钮【用户名】输入框必须由数字和字母的组不能少于 6 位首个字符须为英文字母【密码】输入框只能输入数字、字母和符号长度为 6-12 位字符【邮箱】输入框须符邮箱验证格式 XXXXXX.XXXX的位数不限。3.点击【确认】按钮对输入框的内容进行判断如果未输入或验证格式不正确则做出友好提示判断本地存储中是否已注册当前账号如果有则做出友好错误提示并重新创建新账户创建成功后将用户名和密码存放到本地存储中并自动返回到注册登录选择页面。任务 3实现登录页面1.登录页面首先显示用户名输入页面用户名输入页面顶部左上角显示【返回】按钮点击【返回】按钮可返回至注册登录选择页面居中显示【请输入用户名】标题、【用户名】输入框、【下一步】按钮;在【用户名】输入框输入用户名后点击【下一步】按钮跳转至密码输入页面2.密码输入页面顶部左上角显示【返回】按钮点击【返回】按钮可返回至用户名输入页面居中显示【请输入密码】标题、【密码】输入框、【确认】按钮;在【密码】输入框输入密码后点击【确认】按钮弹出等待对话框如果用户名和密码与本地存储的一致则跳转至首页页面如果用户名或密码错误则做出友好提示。任务 4实现首页和个人信息页面任务说明1.首页页面顶部显示【上午好/下午好/晚上好】文本根据时间进行切换分为上午6:01-12:00、下午12:01-18:00、晚上18:01-6:00三个时间段。2.顶部显示【你好XXX】,XXX 为当前账号的用户名。【用户名】下方显示【已绑定***小区房屋】文本。右侧显示用户头像。3.页面中部为客厅温度显示器显示器中间为【25℃】和【客厅温度】文本显示器显示黑色的圆形边框外层右上角部分显示 1/4 圆形的扇形区域颜色为粉色至绿色的线性渐变。4.页面中下部显示【本周平均温度】和【22℃】文本显示本周平均温度的水平温度条。温度条的颜色为粉色至橙色的线性渐变。5.页面底部显示【首页】、【收藏】、【控制列表】、【设置】菜单栏图标点击【首页】、【控制列表】、【设置】可进入对应页面选中菜单项后菜单项增加黑色圆角边框。6.设置页面顶部显示【XXX】用户名【设置】文本右侧显示用户头像页面中部显示【修改用户信息】按钮和【修改密码】按钮点击进入相应页面页面底部显示【首页】、【收藏】、【控制列表】、【设置】菜单栏图标点击【首页】、【控制列表】、【设置】可进入对应页面选中菜单项后菜单项增加黑色圆角边框。7.修改用户信息页面顶部显示【返回】按钮图标和【修改用户信息】文本点击【返回】按钮返回到设置页面中部显示【邮箱】输入框和【确认】按钮【邮箱】输入框默认显示当前用户注册的邮箱点击【确认】按钮判断邮箱格式是否正确格式XXXXXX.XXXX 的位数不限如不正确则做出友好提示修改成功后弹出友好提示并跳转至设置页面。8.修改密码页面顶部显示【返回】按钮图标和【修改密码】文本点击【返回】按钮返回到设置页面中部显示【当前密码】输入框、【新的密码】输入框、【确认密码】输入框和【确认】按钮【密码】输入框只能输入数字、字母和符号长度为 6-12 位字符点击确认按钮后对输入框的内容进行判断如果未输入或验证格式不正确则做出友好提示修改成功后返回登录页面并将用户名和密码存放到本地存储中。任务 5实现控制列表功能任务说明1.控制列表页面顶部显示【XXX】用户名【控制列表】文本右侧显示用户头像页面中部显示控制列表包括【客厅】、【主卧】、【次卧】、【餐厅】、【过道】、【阳台】、【庭院】、【停车位】每个列表项中显示控制名称、可控设备数量、当前温度当前选中的列表项的背景颜色为粉色至橙色的线性渐变页面底部显示【首页】、【收藏】、【控制列表】、【设置】菜单栏图标点击【首页】、【控制列表】、【设置】可进入对应页面选中菜单项后菜单项增加黑色圆角边框。每次点击控制列表项后跳转至对应列表项详情页面。任务 6实现客厅与主卧控制功能1.客厅控制页面顶部显示【返回】按钮图标和【客厅】文本点击【返回】按钮返回到控制列表页面中部显示【空调】、【客厅灯】按钮默认选中【客厅灯】按钮弹出灯光亮度调节弹窗。2.灯光亮度调节弹窗顶部显示【亮度】文本中部显示调节控制器控制器边框为圆角矩形边框颜色为深灰色控制器中间显示当前亮度、拖拽按钮长按拖拽按钮向上拉动亮度值随之增加向下拖动亮度值随之减少当前亮度百分比根据拖动实时更新。3.主卧控制页面顶部显示【返回】按钮图标和【主卧】文本点击【返回】按钮返回到控制列表页面中部显示氛围灯、主卧灯、管理员信息卡片默认边框为圆角矩形【氛围灯】和【主卧灯】卡片内容显示【设备名称】、【当前状态】文本、当前的开关状态管理员卡片显示用户头像、管理员数量、【管理员数量】文本。4.底部显示【近七天主卧最高温度与最低温度】文本和堆叠面积图。最高温度面积图背景为红色最低温度面积图背景为橙色每次进入主卧控制页面堆叠面积图自动刷新同一天最低温度不可超过最高温度。5.点击【氛围灯】卡片弹出【氛围灯】开关控制弹窗弹窗从底部向上弹出上边框为圆角控制弹窗顶部显示【氛围灯】文本中部显示圆角矩形开关开关处于关闭状态时开关文本显示【开启灯光】开关处于开启状态时开关文本显示【关闭灯光】且背景颜色为红色。