《UI设计项目式教程》教案 马尾船政相关页面设计

《UI设计项目式教程》教案第18号课程名称授课日期班级课堂类型理实一体化教学章节名称一、马尾船政相关页面设计目的要求通过原型设计还原船政历史场景、串联文化展示与交互功能，实现“用数字手段活化船政文化，打造沉浸式、可探索的文化体验平台”目标学情分析UI学生学情呈现两极分化，部分有基础能掌握核心概念与基础软件操作，少数零基础较生疏；多数学习态度积极，缺乏实践应用能力，需针对性分层教学。重难点分析1.完成马尾船政原型图制作2.学会运用UI设计软件进行基础设计操作。信息化应用方法讲师课堂教学要以PPT讲授为主，并结合多媒体进行教学思政元素融合设计思政元素融入方式培养学生的创新精神通过图形设计案例的讲解，树立学生的创新精神作业布置完成马尾船政项目原型图设计参考资料《UI设计项目式教程》卓书芳、钟月云，大连理工大学出版社教学过程教学环节教学内容教师活动学生活动设计意图（含教学目的、信息化手段、思政融入情况、创新创业意识教育等）1.课前预习/5分钟预先完成课程中相关的课程案例预先准备本节课程项目可以投报的比赛预先准备相关知识点的拓展练习利用网络平台发布预习任务1.开展课前预习，观看布置的微课、视频及案例等；2.收集课题资料；课前让学生复习相关教学内容，提高课堂教学效率，让学生更好的理解授课内容2.课程导入/10通过观看与分析马尾船政相关页面设计教师通图片和相应视频及动画展示图形设计案例，提出问题：UI设计的重难点？如何在设计过程中避免？培养学生独立思考和分析问题的能力。3.建立马尾船政UI低保真和高保真原型图设计制作/65分钟对马尾船政APP进行设计制作马尾船政项目界面设计引导页马尾船政APP的引导页以传统中式建筑轮廓、抽象化的船舰线条为核心，搭配蓝、金、黑为主色调。蓝色圆形图案象征海洋或科技感，古建筑与船舰元素结合，暗喻船政历史底蕴。首页最上方是功能聚合与快捷入口。集中展示APP核心功能，如“预约购票”、“船政历史”、“战舰风采”、“历史遗迹”、“船舰文化”、“互动社区”等模块，让用户快速触达核心服务，降低操作成本，下一栏是信息展示与分发，推送重要动态如“船博动态”、“历史沿革”板块，及时传递更新信息，引导用户关注核心内容。、马尾船政项目界面设计文创页APP的3张文创页面色彩搭配贴合文化主题，交互设计遵循用户习惯，信息层级清晰有序，既满足功能性需求，又通过视觉引导提升购物体验，形成完整且流畅的购物闭环，如图所示。个人页围绕用户个人服务展开，功能入口明确，满足用户管理个人信息、收藏、订单等核心需求，兼具美观与实用性。个人资料页采用表单式设计，布局简洁规整。页面聚焦用户信息编辑场景，通过清晰的字段划分与便捷的交互设计，降低操作成本，确保用户高效完成资料填写，体现人性化设计理念。如图所示。本次课上活动核心是完成马尾船政主题UI低保真与高保真原型图设计制作，全程需贴合主题、遵守规范，高效完成实践任务。活动开始后，学生先梳理马尾船政核心元素，结合所学知识，先绘制低保真原型，明确页面布局、信息架构，用基础线框呈现核心模块，标注交互逻辑。低保真完成并确认后，过渡到高保真制作，融入马尾船政特色色彩、元素，规范使用字体与软件操作，还原主题调性。操作中严格遵循课堂规范，遇到软件或设计难题及时请教，不擅自偏离主题，互帮互助。活动全程专注投入，确保低保真逻辑清晰、高保真贴合主题，按时完成制作，同时做好作品保存。结束后简单交流设计思路，巩固UI原型制作要点，提升实践应用能力。通过学习和实践各种图形设计技术和工具，学生将能够发展出独特的创造力，并能够将其应用于解决实际设计问题中。课堂小结/10总结马尾船政原型图对马尾船政原型图进行设计时，需严格保持设计一致性。图标需选用统一风格、统一尺寸，贴合马尾船政历史文化调性，避免杂乱混用；色彩搭配保持统一，呼应船政主题色系，不随意使用无关色彩；字体样式、字号、行间距全程保持一致，标题与正文字体区分清晰且统一规范，确保