《UI设计项目式教程》教案14 马尾船政项目原型设计

《UI设计项目式教程》教案第14号课程名称授课日期班级课堂类型理实一体化教学章节名称一、马尾船政项目原型设计目的要求1、知识目标掌握船政历史核心知识，包括船政发展脉络、关键历史事件、代表性人物与文物背景，明确历史场景还原的核心要素与文化表达逻辑；理解数字原型设计与文化活化的关联理论，掌握沉浸式场景搭建、交互功能设计的基础原理，熟悉数字内容与历史文化融合的设计思路；熟记文化类原型设计原则，如历史真实性、交互体验性、场景沉浸感、用户探索性原则，掌握数字平台搭建的行业规范与文化表达要求。2、能力目标能基于船政历史资料，拆解历史场景还原要点，规划原型中文化展示模块的信息架构与内容呈现形式；熟练运用原型设计工具，搭建船政历史场景原型，串联场景跳转、文物交互、文化科普等功能模块，实现沉浸式体验的可视化表达；具备原型迭代优化能力，结合用户体验反馈与文化传播需求，调整交互逻辑与场景设计，确保原型落地后能有效支撑“数字活化船政文化”的核心目标。3、素质目标树立文化传承与创新结合的设计素养，在原型设计中坚守历史真实性，主动探索数字技术与传统文化的融合路径；学情分析UI学生学情呈现两极分化，部分有基础能掌握核心概念与基础软件操作，少数零基础较生疏；多数学习态度积极，缺乏实践应用能力，需针对性分层教学。重难点分析1.完成马尾船政原型图制作2.学会运用UI设计软件进行基础设计操作。信息化应用方法讲师课堂教学要以PPT讲授为主，并结合多媒体进行教学思政元素融合设计思政元素融入方式培养学生的创新精神通过图形设计案例的讲解，树立学生的创新精神作业布置完成马尾船政项目原型图设计参考资料无教学过程教学环节教学内容教师活动学生活动设计意图（含教学目的、信息化手段、思政融入情况、创新创业意识教育等）1.课前预习/5分钟预先完成课程中相关的课程案例预先准备本节课程项目可以投报的比赛预先准备相关知识点的拓展练习利用网络平台发布预习任务1.开展课前预习，观看布置的微课、视频及案例等；2.收集课题资料；课前让学生复习相关教学内容，提高课堂教学效率，让学生更好的理解授课内容2.课程导入/10了解什么是尾船政项目原型设计教师通图片和相应视频及动画展示图形设计案例，提出问题：UI设计的重难点？如何在设计过程中避免？培养学生独立思考和分析问题的能力。3.建立马尾船政UI低保真和高保真原型图设计制作/65分钟对马尾船政APP进行分析并要求学生对其进行低保真和高保真原型图设计制作分析调研结果，制作马尾船政的产品结构。马尾船政APP主要页面为5个页面，分别为首页、导航、文创商城、消息、我的，以及发布等重要功能。“首页”围绕船政文化展开，涵盖船政历史、人物精神战舰风采，还有船政新鲜事发布功能。“导航”提供展览、餐饮、文创、咨询服务等引导功能，方便用户在船政相关场景中获取服务。“文创商城”包含热门好物推荐、新品速递、种草排行，也有购买记录查询功能，满足用户文创产品消费需求。“消息”用于接收点赞收藏、新增关注、评论与@相关的互动信息，便于用户了解社交反馈。“我的”用于管理个人笔记和收藏内容，方便用户整理与回顾个人感兴趣的信息。“发布”支持用户通过模板、文字、相册、拍摄、直播等方式分享内容，增加用户参与度与平台活跃度。如图所示。在低保真原型图完成后，确认各功能模块是否符合需求，然后在原有基础上进行视觉升级、交互深化与细节完善。视觉升级包含颜色、图标、Banner等设计。马尾船政APP抓住“船”这一特点，使用搭建船只的木材颜色为主色调，然后根据“船”的造型，选取其中具有代表性的细节设计图标。标签栏图标设计如图所示金刚区图标如图5-35所示。当颜色与图标确定后，根据页面的位置和功能设计Banner。结合船政文化，围绕文化传承、精神弘扬展开，聚焦文化传承与文明延续，关联船政文化及爱国自强精神。UI设计项目式教程采用中国传统水墨山水元素，如远山、云雾，搭配金色装饰线条，营造典雅、富有文化底蕴的氛围。以书法字体突出文化传承、精忠报国等核心主题词，辅以副标题，强化文化内涵传递。效果如图所示。最后把所有的设计元素置入原型图中，便得到完整的高保真原型图，效果如图所示本次课上活动核心是完成马尾船政主题UI低保真与高保真原型图设计制作，全程需贴合主题、遵守规范，高效完成实践任务。活动开始后，学生先梳理马尾船政核心元素，结合所学知识，先绘制低保真原型，明确页面布局、信息架构，用基础线框呈现核心模块，标注交互逻辑。低保真完成并确认后，过渡到高保真制作，融入马尾船政特色色彩、元素，规范使用字体与软件操作，还原主题调性。操作中严格遵循课堂规范，遇到软件或设计难题及时请教，不擅自偏离主题，互帮互助。活动全程专注投入，确保低保真逻辑清晰、高保真贴合主题，按时完成制作，同时做好作品保存。结束后简单交流设计思路，巩固UI原型制作要点，提升实践应用能力。通过学习和实践各种图形设计技术和工具，学生将能够发展出独特的创造力，并能够将其应用于解决实际设计问题中。课堂小结/10总结马尾船政原型图对马尾船政原型图进行设计时，需严格保持设计一致性。图标需选用统一风格、统一尺寸，贴合马尾船政历史文化调性，避免杂乱混用；色彩搭配保持统一，呼应船政主题色系，不随意使用无关色彩；字体样式、字号、