《UI设计项目式教程》教案全套 1-24 移动UI设计概念、原则与分工流程-福建博物馆项目UI设计与交互实现、马尾船政相关页面设计

《UI设计项目式教程》教案第01号课程名称授课日期班级课堂类型理实一体化教学章节名称UI项目基础设计-移动UI设计概念、原则与分工流程目的要求知识目标：熟悉移动UI设计的概念、核心要素；掌握移动UI设计的5大原则；了解移动UI设计的团队分工与工作流程。能力目标：能准确区分移动UI设计的核心环节；能结合案例分析设计原则的应用；能绘制简单的设计分工流程图。素质目标：培养严谨的设计思维和团队协作意识；增强对UI设计行业的认知；树立家国情怀，理解移动UI对文化传播的价值。学情分析学生已初步掌握Photoshop、AdobeXD等基础设计软件操作，对移动APP有日常使用经验，但缺乏系统的UI设计理论知识。对“设计原则”“分工流程”等专业概念较为陌生，需通过案例拆解和具象化讲解帮助理解，同时需激发其对设计行业的兴趣和文化传承意识。重难点分析重点：移动UI设计的5大原则（以用户为中心、简洁性等）；移动UI设计的工作流程（需求分析至开发实现）。难点：设计原则在实际案例中的灵活应用；团队分工中各角色的协作逻辑。信息化应用方法讲师课堂教学主要以PPT讲授为主，结合多媒体教学，引导学生自主实践。思政元素融合设计思政元素融入方式家国情怀、团队协作、文化传播意识通过马尾船政案例讲解，介绍其作为中国近代工业文明发源地的历史意义，引导学生理解UI设计可作为文化传播载体，传承民族精神；在团队分工讲解中，强调协作的重要性，培养集体意识。作业布置以《半月里古村落》为主题，收集相关资料，进行需求分析。参考资料1.《UI设计项目式教程》，ISBN号：978-7-5685-7001-1，作者：卓书芳,钟月云，出版社：大连理工大学出版社，版次：2026-01，印次：12.参考站酷、花瓣、知乎等各类网络资源教学过程教学环节教学内容教师活动学生活动设计意图课前预习预习1.预先完成课程中相关的课程案例2.预先准备本节课程中相关知识点课前了解本节课所要讲授的知识点。利用在线班群发布预习材料，引导学生初步了解本节课基本内容，为课堂学习打下理论基础。课程签到（5min)学习通签到平台发起签到或现场点名签到。在平台上进行签到或现场点名。做好课前准备，把控课堂出勤情况，保障教学顺利开展。课程导入(5min)引入主题1.提问：“大家每天使用的微信、抖音APP，其界面设计有哪些让你觉得方便或美观的地方？”2.展示UI界面更新的部分案例，引出本节课核心内容：移动UI设计的基础逻辑。1.自由发言分享对常用APP界面的感受；2.观察案例，初步感知UI设计的价值。激发学生兴趣，建立“UI设计与日常使用紧密相关”的认知，为后续教学铺垫。课中讲解(30min)1.移动UI设计概念与核心要素2.移动UI设计5大原则（结合案例拆解）3.团队分工与工作流程1.讲解移动UI设计的定义，拆解6大核心环节（规范、图标、Banner等），用微信图标案例说明各环节作用；2.逐一讲解5大原则：以用户为中心（用老年版APP字体放大案例）、简洁性（对比复杂与简洁界面）、一致性（展示淘宝各页面按钮风格）、实用性（微信支付流程）、灵活性（夜间模式）；3.介绍产品经理、UI设计师、开发工程师的岗位职责，讲解“需求分析-概念设计-交互设计-视觉设计-开发实现”全流程。1.认真听讲，记录核心知识点；2.跟随教师思路分析案例，理解原则内涵。系统讲解理论知识，通过具象化案例降低理解难度，帮助学生建立知识框架。案例分析(20min)马尾船政UI设计分工与原则应用1.介绍马尾船政历史背景（洋务运动、中国近代工业摇篮），展示其APP设计需求；2.分析该项目中“以用户为中心”（适配历史爱好者、游客等群体）等原则的应用；3.拆解项目团队分工：产品经理调研船政文化需求，UI设计师负责色彩与界面，开发工程师实现功能。1.了解马尾船政历史与设计需求；2.分组讨论案例中设计原则的具体体现；3.分享讨论结果，深化对分工与原则的理解。思政元素融入：通过马尾船政案例，让学生了解中国近代工业文明的发展，理解UI设计在文化传播中的作用，激发家国情怀；同时强化团队协作意识。学生练习(20min)学生练习需求分析1.布置任务：以《半月里古村落》微信小程序为主题，收集相关资料，进行需求分析；2.巡回指导，针对流程逻辑混乱、角色分工不明确等问题进行个别辅导。1.收集相关资料，进行需求分析；2.提交需求分析，听取点评并修改完善。将理论知识转化为实践能力，巩固对工作流程与分工的理解，培养严谨的设计思维。课堂小结(10min)回顾与梳理1.梳理本节课核心知识点：概念-原则-分工-流程；2.强调：UI设计不仅是“美观”，更是“以用户为中心”的功能实现与价值传递；3.预告下节课内容：色彩概论与色彩类型。1.跟随教师回顾知识点，查漏补缺；2.记录下节课预习重点。强化知识体系，明确学习逻辑，为后续课程做好铺垫。作业布置以《半月里古村落》为主题，收集相关资料，进行需求分析。课后教学反思通过常用APP案例与马尾船政项目拆解，将抽象理论具象化，有效激发了学生参与度，思政元素自然融入，家国情怀与团队协作意识培养目标基本达成。但部分学生对移动UI设计原则理解不深，团队分工协作细节的认知较为浅显。后续需帮助学生细化知识应用，提升作品完整性。《UI设计项目式教程》教案第02号课程名称授课日期班级课堂类型理实一体化教学章节名称UI项目基础设计-移动UI色彩概论与色彩类型目的要求知识目标：掌握色彩三要素（色相、明度、饱和度）的概念；熟悉移动UI中4大色彩类型（主题色、背景色、辅助色、点缀色）的定义与应用场景。能力目标：能通过软件调整色彩三要素参数；能分析任意APP的色彩类型运用；能为简单界面选择合适的色彩类型组合。素质目标：培养色彩审美能力；增强细节把控意识；通过色彩与文化的关联，深化文化自信。学情分析学生已掌握移动UI设计的基础概念与流程，对色彩有日常认知，但缺乏专业的色彩理论知识，不了解色彩参数调整对界面效果的影响。具备Photoshop基础操作能力，可通过软件实践强化对色彩三要素的理解，需重点引导其建立“色彩服务于功能与文化表达”的思维。重难点分析重点：色彩三要素的定义与参数调整；4大色彩类型的应用场景与选择原则。难点：色彩类型与界面功能、品牌调性的匹配；色彩三要素的综合运用（如调整饱和度突出主题）。信息化应用方法讲师课堂教学主要以PPT讲授为主，结合多媒体教学，引导学生自主实践。思政元素融合设计思政元素融入方式文化自信、细节把控、工匠精神通过分析马尾船政UI设计中“米黄色背景（体现历史厚重感）、蓝色主题色（体现海洋文化）”的色彩选择，引导学生理解色彩与文化的关联；在实践环节强调参数调整的精准性，培养精益求精的工匠精神。作业布置设计《半月里古村落》UI主色调。参考资料1.《UI设计项目式教程》，ISBN号：978-7-5685-7001-1，作者：卓书芳,钟月云，出版社：大连理工大学出版社，版次：2026-01，印次：12.参考站酷、花瓣、知乎等各类网络资源教学过程教学环节教学内容教师活动学生活动设计意图课前预习预习1.预先完成课程中相关的课程案例2.预先准备本节课程中相关知识点课前了解本节课所要讲授的知识点。利用在线班群发布预习材料，引导学生初步了解本节课基本内容，为课堂学习打下理论基础。课程签到（5min)学习通签到平台发起签到或现场点名签到。在平台上进行签到或现场点名。做好课前准备，把控课堂出勤情况，保障教学顺利开展。课程导入(5min)复习引入1.提问复习：“移动UI设计的5大原则中，哪一原则与色彩运用直接相关？”（一致性原则）2.展示两张色彩搭配差异明显的APP界面（一张协调、一张杂乱），提问：“为什么会有这样的差异？色彩运用有哪些规律？”引出本节课主题：色彩概论与色彩类型。1.回答复习问题，巩固旧知识；2.观察界面差异，思考色彩运用的重要性。温故知新，建立新旧知识的关联，激发学生对色彩理论的探究兴趣。课中讲解(30min)1.色彩三要素（色相、明度、饱和度）2.移动UI中4大色彩类型（定义+场景）1.用色相环演示色相概念，用黑白灰渐变演示明度，用红色不同饱和度对比图演示饱和度；2.打开Photoshop，导入图片，实时演示“色相/饱和度”“亮度/对比度”工具的操作，让学生直观看到参数变化效果；3.逐一讲解4大色彩类型：主题色（微信绿色案例）、背景色（抖音黑色背景）、辅助色（淘宝橙色分类标签）、点缀色（错误提示红色），结合场景说明选择逻辑。1.认真听讲，记录色彩三要素的核心特征；2.观察软件演示，记忆工具操作方法。通过“理论+实操演示”的方式，让抽象的色彩概念具象化，帮助学生快速掌握核心知识。案例分析(20min)马尾船政UI色彩类型应用分析1.展示马尾船政UI设计界面，引导学生分析：主题色（蓝色）：应用于预约按钮、导航栏，体现海洋文化与专业性；背景色（米黄色）：应用于页面底色，体现历史厚重感；辅助色（黄色、绿色）：应用于分类标签、图片元素，丰富层次；点缀色（红色）：应用于提示文字，突出重点；2.提问：“这些色彩选择如何服务于‘船政文化传播’的核心目标？”1.分组讨论，识别界面中的4类色彩；2.分析色彩与船政文化的关联，分享观点；3.记录案例中色彩运用的优点。思政元素融入：通过分析案例中色彩与文化的匹配关系，让学生理解UI设计不仅是技术操作，更是文化表达的载体，增强文化自信；同时引导学生关注细节，培养观察力。学生练习(20min)色彩参数调整与类型划分1.布置任务：为“半月里古村落”简单界面（线框图），标注主题色、背景色、辅助色、点缀色的位置与色值；2.巡回指导，重点辅导色彩参数调整不精准、色彩类型划分不合理的学生；3.展示优秀实践作品，讲解其优点。1.按照任务要求进行软件操作与标注；2.遇到问题及时提问；3.欣赏优秀作品，学习借鉴。在实践中强调参数调整的精准性和色彩选择的合理性。思政元素融入：培养学生精益求精的工匠精神；通过“半月里古村落”主题设计，激发学生的文化传播意识。课堂小结(10min)回顾与梳理1.梳理本节课核心：色彩三要素是基础，色彩类型是应用，两者需服务于设计目标；2.强调：色彩运用不仅要美观，更要兼顾功能与文化内涵；3.预告下节课内容：配色方案设计（单色、邻近色、补色）。1.回顾知识点，梳理知识逻辑；2.记录预习重点，明确学习方向。强化知识体系，提升学生对色彩设计的认知高度，为下节课学习做好准备。作业布置设计《半月里古村落》UI主色调。课后教学反思本课时采用“理论+演示+案例”的三维教学模式，Photoshop实时操作让色彩三要素的学习更直观，马尾船政色彩案例有效强化了文化与色彩的关联。但部分学生对色彩概念理解有偏差，色彩类型与界面功能的匹配逻辑掌握不足，课后分析报告缺乏深度。后续需补充不同色彩界面的功能适配案例，提供色彩类型应用对照表，优化作业模板引导深度分析，帮助学生精准把握色彩运用逻辑。《UI设计项目式教程》教案第03号课程名称授课日期班级课堂类型理实一体化教学章节名称UI项目基础设计-移动UI配色方案与马尾船政项目实践目的要求知识目标：掌握4种核心配色方案（单色、邻近色、补色、对比色）的定义与特点；了解色彩联想与用户情感的关联；熟悉马尾船政UI配色方案设计思路。能力目标：能运用色相环选择合适的配色方案；能结合主题设计简单的UI配色方案；能对现有配色方案进行优化调整。素质目标：培养色彩审美与创新意识；强化文化传承与创新思维；提升项目实践与问题解决能力。学情分析学生已掌握色彩三要素与色彩类型的知识，具备Photoshop基础操作能力，能识别界面中的色彩类型，但缺乏系统的配色逻辑与项目实践经验。对“配色方案如何服务于主题”的理解较为薄弱，需通过项目驱动式教学，引导其将理论知识应用于实际设计，同时强化文化与配色的关联意识。重难点分析重点：4种配色方案的选择与应用；色彩联想在配色中的运用；马尾船政项目配色实践流程。难点：配色方案与主题、用户情感的精准匹配；避免配色杂乱或单调。信息化应用方法讲师课堂教学主要以PPT讲授为主，结合多媒体教学，引导学生自主实践。思政元素融合设计思政元素融入方式文化传承与创新、创新意识、工匠精神通过马尾船政项目实践，引导学生将船政文化（历史厚重感、海洋文化）转化为配色方案，培养“文化+设计”的创新思维；在实践环节强调配色细节的打磨（如对比度调整、色彩占比控制），培养精益求精的工匠精神。作业布置设计《半月里古村落》UI配色方案。参考资料1.《UI设计项目式教程》，ISBN号：978-7-5685-7001-1，作者：卓书芳,钟月云，出版社：大连理工大学出版社，版次：2026-01，印次：12.参考站酷、花瓣、知乎等各类网络资源教学过程教学环节教学内容教师活动学生活动设计意图课前预习预习1.预先完成课程中相关的课程案例2.预先准备本节课程中相关知识点课前了解本节课所要讲授的知识点。利用在线班群发布预习材料，引导学生初步了解本节课基本内容，为课堂学习打下理论基础。课程签到（5min)学习通签到平台发起签到或现场点名签到。在平台上进行签到或现场点名。做好课前准备，把控课堂出勤情况，保障教学顺利开展。课程导入(5min)复习引入1.提问复习：“红色、蓝色、绿色分别会让人产生哪些联想？（结合上节课色彩联想知识点）”2.展示马尾船政项目配色方案，引出本节课核心：如何结合主题设计合理的配色方案。1.回答色彩联想问题，巩固旧知识；2.观察配色对比图，思考配色方案的逻辑。强化色彩与情感的关联认知，同时通过项目案例引出实践主题，激发学生参与兴趣。课中讲解(30min)1.4种核心配色方案（结合色相环+案例）2.色彩联想与配色策略3.马尾船政项目配色设计思路1.用色相环演示：单色：同一色相的深浅变化（如深蓝、浅蓝）；邻近色：色相环相邻3-5色（如黄、橙、红）；补色：色相环对角180°（如蓝-橙、红-绿）；对比色：色相环角度差≥120°（如红、蓝、黄）；2.结合案例分析：电商类APP用红色（补色/对比色）激发购买欲，行政类APP用蓝色（单色/邻近色）营造严谨庄严的氛围等；3.讲解马尾船政配色思路：主题色（蓝色，海洋文化）、背景色（米黄色，历史厚重感）、辅助色（黄色，活力）、点缀色（红色，提示），采用“邻近色+补色”组合。1.认真听讲，记录4种配色方案的特点；2.分析案例中配色方案与主题的关联；3.梳理马尾船政配色设计的逻辑框架。系统讲解配色理论，通过色相环直观展示色彩关系，结合案例帮助学生理解“配色服务于主题”的核心逻辑。实操演示(10min)配色实操1.打开AdobeColor，以“蓝色”为主题色，选择邻近色（蓝绿、蓝紫）作为辅助色，补色（橙色）作为点缀色，生成配色方案；2.打开AdobeXD，导入马尾船政UI线框图，按照配色方案填充主题色、背景色等，调整对比度与饱和度；3.演示如何通过色彩占比控制（主题色60%、背景色30%、点缀色10%）避免杂乱。1.跟随教师操作步骤，学习配色工具与填充方法；2.记录色彩占比、对比度调整等关键参数。通过实操演示，将配色理论转化为可操作的步骤，帮助学生掌握工具使用与细节把控技巧。学生练习(30min)“半月里古村落”配色方案设计与实现1.布置任务：阶段1：分析半月里古村落文化（青砖灰瓦、青山绿水、红色灯笼），确定配色核心关键词（古韵、生态）；阶段2：用AdobeColor设计配色方案，选择合适的配色类型（如邻近色：青、绿、灰）；阶段3：在AdobeXD中为线框图上色，调整色彩参数与占比；2.巡回指导，重点辅导：配色方案与文化主题不匹配、色彩占比失衡、对比度不足等问题；3.组织班级内互评，推荐作品进行课堂展示。1.分组完成任务，先分析文化主题，再设计配色方案；2.进行软件操作，实现配色方案；3.参与生生互评，提出优化建议；4.展示作品，分享设计思路。思政元素融入：通过“半月里古村落”主题实践，引导学生深入挖掘传统文化元素，将其转化为配色方案，培养文化传承与创新思维；在实践中强调细节打磨（如色彩参数调整、占比控制），强化工匠精神；通过小组互评，培养沟通与批判性思维能力。课堂小结(10min)回顾与梳理1.梳理本节课核心：配色方案选择→色彩联想应用→项目实践落地；2.总结优秀作品的共性：主题匹配度高、色彩协调、细节精致；3.强调：UI设计中的色彩运用，是技术、审美与文化的综合体现。1.回顾实践过程，总结自身作品的优点与不足；2.记录核心总结，提升对配色设计的认知。强化项目实践的逻辑框架，帮助学生梳理“分析-设计-实现-优化”的完整流程，提升综合应用能力。作业布置设计《半月里古村落》UI配色方案。课后教学反思以“半月里古村落”为实践主题的项目驱动式教学，有效提升了学生综合应用能力，AdobeColor工具降低了配色难度，小组互评环节激发了批判性思维，文化传承与创新的思政目标初步达成。但少数学生对补色、对比色的应用过于激进，AdobeXD填充操作不够熟练，文化元素与配色的融合不够自然。后续需讲解配色平衡原则与比例参考，课前发放工具实操微课，提供古村落文化元素提炼指南，引导学生设计出更契合主题、细节更精致的配色方案。《UI设计项目式教程》教案第04号课程名称授课日期班级课堂类型理实一体化教学章节名称UI项目设计规范-iOS与Android设计规范基础目的要求知识目标：熟悉iOS与Android系统的核心设计规范（界面尺寸、图标尺寸、字体规范）；了解两大系统设计规范的差异；掌握设计单位（px、dp、sp）的概念与换算逻辑。能力目标：能根据系统要求确定设计尺寸；能正确选择字体与图标尺寸；能区分两大系统的设计差异并适配。素质目标：培养规范意识与细节把控能力；强化跨平台适配思维；树立“按规范设计、按标准执行”的职业态度。学情分析学生已掌握UI设计基础与色彩配色知识，具备Photoshop、AdobeXD基础操作能力，能完成简单界面设计，但缺乏对系统设计规范的认知，设计时存在“尺寸随意、字体混乱”等问题。对“设计规范的重要性”理解不足，需通过案例对比（规范与不规范设计效果）强化认知，同时重点讲解单位换算等实操性知识。重难点分析重点：iOS与Android的界面尺寸、图标尺寸、字体规范；设计单位（px、dp、sp）的认识；两大系统设计差异对比。难点：设计单位的实际应用（如dp与px的换算）；跨平台设计时的适配逻辑。信息化应用方法讲师课堂教学主要以PPT讲授为主，结合多媒体教学，引导学生自主实践。思政元素融合设计思政元素融入方式规范意识、职业素养、工匠精神通过分析“不规范设计导致界面变形、用户体验差”的案例，强调规范的重要性，培养学生“按规则做事”的职业态度；在单位换算与尺寸设置实践中，要求参数精准无误，培养精益求精的工匠精神。作业布置用AdobeXD新建iOS与Android标准画布，分别添加导航栏、标签栏，设置对应高度与字体。参考资料1.《UI设计项目式教程》，ISBN号：978-7-5685-7001-1，作者：卓书芳,钟月云，出版社：大连理工大学出版社，版次：2026-01，印次：12.参考站酷、花瓣、知乎等各类网络资源3.《iOS设计规范》和《MaterialDesign设计规范》教学过程教学环节教学内容教师活动学生活动设计意图课前预习预习1.预先完成课程中相关的课程案例2.预先准备本节课程中相关知识点课前了解本节课所要讲授的知识点。利用在线班群发布预习材料，引导学生初步了解本节课基本内容，为课堂学习打下理论基础。课程签到（5min)学习通签到平台发起签到或现场点名签到。在平台上进行签到或现场点名。做好课前准备，把控课堂出勤情况，保障教学顺利开展。课程导入(5min)引入主题1.展示案例：同一界面在iOS与Android手机上的显示效果（不规范设计导致变形、字体模糊）；2.提问：“为什么会出现这样的问题？设计时需要遵循哪些规则？”引出本节课核心：系统设计规范。1.观察案例效果，感受不规范设计的弊端；2.思考问题，建立“设计需要遵循规范”的初步认知。通过直观案例对比，让学生深刻体会设计规范的重要性，激发学习兴趣。课中讲解(30min)1.设计单位：px、dp、sp的概念与换算2.iOS设计规范（界面、图标、字体）3.Android设计规范（界面、图标、字体）4.两大系统设计差异对比1.讲解单位定义：px（绝对单位）、dp（设备无关像素）、sp（字体单位）；2.讲解iOS规范：界面尺寸（750px×1334px等）、导航栏高度（44pt）、图标尺寸（APPStore1024px×1024px）、字体（苹方）；3.讲解Android规范：基准尺寸（720px×1280px）、导航栏高度（48dp）、图标尺寸（应用图标144px×144px）、字体（思源黑体）；4.用表格对比差异：字体选择、导航栏高度、图标圆角等。1.认真听讲，记录单位与核心规范参数；2.绘制iOS与Android规范对比思维导图；系统讲解核心知识点，通过公式、表格等形式梳理逻辑，帮助学生建立规范知识框架。案例分析(20min)马尾船政项目系统规范适配案例1.展示马尾船政APP在iOS与Android系统上的界面截图，分析适配要点：界面尺寸：iOS采用750px×1334px，Android采用720px×1280px；字体：iOS用苹方（标题36px），Android用思源黑体（标题34px）；图标：统一圆角风格，尺寸按系统要求缩放；2.演示AdobeXD中“一键适配不同尺寸”的功能，说明跨平台适配的高效方法。1.观察案例截图，分析适配细节；2.记录跨平台适配的核心要点；3.学习AdobeXD适配功能的操作逻辑。通过案例分析，让学生理解“规范适配”对产品体验的重要性，强化“按标准执行”的职业意识；演示高效适配工具，培养学生的效率思维。学生练习(20min)规范尺寸设置与适配练习1.布置任务：用AdobeXD新建iOS与Android标准画布，分别添加导航栏、标签栏，设置对应高度与字体；2.巡回指导，重点辅导单位换算错误、尺寸设置不精准的学生；3.选取学生作品进行点评，纠正常见错误。1.进行AdobeXD操作，设置规范尺寸的界面框架；2.提交作品，听取点评并修改。思政元素融入：在实践中要求学生精准计算参数、严格按照规范设置尺寸，培养精益求精的工匠精神；通过实操强化规范意识，提升动手能力。课堂小结(10min)回顾与梳理1.梳理本节课核心：设计单位→系统规范→跨平台适配；2.强调：规范是UI设计的基础，只有遵循规范，才能保证界面的一致性与可用性；3.预告下节课内容：边距、间距与内容布局规范。1.回顾知识点，查漏补缺；2.记录下节课预习重点。强化规范意识，梳理知识逻辑，为后续学习布局规范铺垫基础。作业布置用AdobeXD新建iOS与Android标准画布，分别添加导航栏、标签栏，设置对应高度与字体。课后教学反思本课时通过表格对比、公式推导与软件演示，将设计单位与系统规范的抽象知识具象化，学生规范意识明显提升，“按规范设计”的职业态度与工匠精神培养效果较好，双系统画布设置任务针对性强，实操精准度较高。但部分学生对设计单位的适用场景仍有混淆，跨平台适配的细节逻辑理解不足，课后作业的差异原因分析深度不够。后续需设计单位适用场景对照表与记忆口诀，增加跨平台适配细节对比案例，优化作业要求引导深度分析，帮助学生巩固核心概念，提升规范应用的全面性。《UI设计项目式教程》教案第05号课程名称授课日期班级课堂类型理实一体化教学章节名称UI项目设计规范-边距、间距与内容布局规范目的要求知识目标：掌握UI设计中的边距、间距规范（页面全局边距、卡片间距、内容间距）；熟悉两种核心内容布局方式（列表式、卡片式）的设计原则；了解格式塔邻近性原则在布局中的应用。能力目标：能根据设计规范设置合理的边距与间距；能熟练运用列表式与卡片式布局设计界面；能结合原则优化界面布局的逻辑性与美观度。素质目标：培养空间布局思维与细节把控能力；强化“以用户为中心”的设计理念；提升界面的可读性与易用性设计能力。学情分析学生已掌握iOS与Android系统基础规范，能完成简单的界面框架设计，但在布局时存在“边距随意设置、卡片间距不一致、内容间距缺乏逻辑”等问题。对“布局规范如何提升用户阅读效率”理解不足，缺乏空间布局思维，不熟悉格式塔邻近性原则的实际应用。需通过具象化的网格工具演示、案例对比（规范与不规范布局）帮助理解，同时强化“以用户阅读习惯为核心”的布局逻辑。重难点分析重点：页面全局边距（24px/30px）、卡片间距（16px/24px）、内容间距的规范设置；列表式与卡片式布局的设计原则与应用场景。难点：格式塔邻近性原则在间距设置中的实际应用；布局方式与用户阅读习惯、界面功能的匹配。信息化应用方法讲师课堂教学主要以PPT讲授为主，结合多媒体教学，引导学生自主实践。思政元素融合设计思政元素融入方式服务意识、工匠精神、用户中心理念通过分析马尾船政APP布局案例（规范边距间距让历史信息更易读），强调布局规范对用户体验的重要性，培养“以用户为中心”的服务意识；在实践环节要求边距、间距参数精准到像素，卡片布局对齐工整，培养精益求精的工匠精神。作业布置制定《半月里古村落》界面布局规范。参考资料1.《UI设计项目式教程》，ISBN号：978-7-5685-7001-1，作者：卓书芳,钟月云，出版社：大连理工大学出版社，版次：2026-01，印次：12.参考站酷、花瓣、知乎等各类网络资源3.《iOS设计规范》和《MaterialDesign设计规范》教学过程教学环节教学内容教师活动学生活动设计意图课前预习预习1.预先完成课程中相关的课程案例2.预先准备本节课程中相关知识点课前了解本节课所要讲授的知识点。利用在线班群发布预习材料，引导学生初步了解本节课基本内容，为课堂学习打下理论基础。课程签到（5min)学习通签到平台发起签到或现场点名签到。在平台上进行签到或现场点名。做好课前准备，把控课堂出勤情况，保障教学顺利开展。课程导入(5min)复习引入1.提问复习：“iOS与Android系统的导航栏高度分别是多少？设计单位是什么？”2.展示两张布局对比图：一张边距一致、间距合理、布局清晰；一张边距混乱、间距不均、阅读困难，提问：“哪张界面更易获取信息？布局需要遵循哪些规范？”引出本节课主题：边距、间距与内容布局规范。1.回答复习问题，巩固旧知识；2.观察对比图，感受布局规范的重要性，思考布局逻辑。建立新旧知识关联，通过直观对比激发学生对布局规范的探究兴趣。课中讲解(30min)1.边距与间距规范（全局边距、卡片间距、内容间距）2.格式塔邻近性原则3.两种核心布局方式（列表式、卡片式）1.讲解边距规范：页面全局边距常用24px/30px（避免拥挤），卡片间距最小16px（电商APP常用20px），内容间距按“语义关联紧密则间距小”原则设置；2.格式塔邻近性原则：间距近的元素被感知为一组，举例说明标题与副标题间距（10px）、文章与文章间距（30px）；3.讲解布局方式：列表式：适合展示多条同类信息（如微信订阅号），最小高度80px，便于上下滑动浏览；卡片式：适合展示独立内容（如淘宝商品），卡片间用浅灰色区分，增强层次感；4.打开AdobeXD，演示“网格工具”设置全局边距，“重复网格”快速生成规范卡片。1.认真听讲，记录边距、间距的核心参数；2.理解格式塔邻近性原则；3.用表格整理两种布局方式的特点与场景；4.观察软件演示，记忆工具操作方法。通过“理论+工具演示”的方式，让抽象的布局规范具象化，帮助学生快速掌握边距、间距设置与布局方式选择逻辑。案例分析(20min)马尾船政APP布局规范应用分析1.展示马尾船政APP“历史沿革”（列表式）与“文物展示”（卡片式）页面，引导学生分析：全局边距：24px，确保内容不贴边，阅读舒适；卡片间距：24px，文物卡片独立清晰，层次分明；内容间距：历史事件标题与描述间距12px（语义关联紧密），事件之间间距24px（语义独立）；布局选择：列表式适合按时间线展示历史事件，卡片式适合突出文物细节；2.提问：“这样的布局如何服务于‘传播船政文化’的核心目标？”1.分组讨论，识别案例中的边距、间距与布局方式；2.分析布局规范与用户阅读习惯、核心目标的关联；3.分享讨论结果，深化对“布局服务于功能”的理解。思政元素融入：通过案例分析，让学生理解布局规范不仅是技术要求，更是“以用户为中心”的服务体现——规范的布局让船政历史与文物信息更易被用户获取，助力文化传播；同时引导学生关注细节，培养观察力。学生练习(20min)布局规范实操练习1.布置任务：阶段1：打开AdobeXD，新建iOS标准画布，启用网格工具，设置全局边距；阶段2：制定“马半月里古村落”页面布局规范。；2.巡回指导，重点辅导：网格工具使用不当、边距间距设置不精准、布局对齐不工整等问题；3.选取优秀作品进行课堂展示，讲解其符合规范的要点。1.按照任务要求进行AdobeXD操作，设置规范边距与间距；2.设计列表式与卡片式布局页面；3.遇到问题及时提问，调整优化作品；4.欣赏优秀作品，学习借鉴规范布局技巧。思政元素融入：在实践中要求学生边距、间距参数精准到像素，卡片对齐工整，培养精益求精的工匠精神；通过设计船政相关页面，让学生在实操中感受文化传播的责任，强化“以用户为中心”的服务意识。课堂小结(10min)回顾与梳理1.梳理本节课核心：边距间距规范→格式塔原则→布局方式选择；2.强调：布局的核心是“让信息更易读、用户更易用”，所有规范都服务于这一目标；3.预告下节课内容：微信小程序设计规范与色彩规范。1.回顾知识点，梳理布局设计的逻辑流程；2.记录下节课预习重点，明确学习方向。强化布局规范的核心逻辑，提升学生对“布局服务于用户体验”的认知高度，为下节课小程序规范学习做好准备。作业布置制定《半月里古村落》界面布局规范。课后教学反思本课时格式塔邻近性原则的动画演示直观有效，学生空间布局思维有所提升，马尾船政布局案例紧扣文化传播目标，强化了服务意识，AdobeXD网格工具与重复网格功能的应用提高了实践效率。但部分学生缺乏整体布局思维，边距与间距的适配不协调，布局方式与场景匹配存在偏差，细节打磨不足。后续需讲解布局元素的比例关系，提供布局选择决策树，增加细节检查清单与互查环节，帮助学生建立全局思维，提升场景适配准确性与细节把控能力。《UI设计项目式教程》教案第06号课程名称授课日期班级课堂类型理实一体化教学章节名称UI项目设计规范-微信小程序设计规范与色彩规范目的要求知识目标：熟悉微信小程序的核心设计规范（交互规范、字体规范、色板规范、控件规范）；掌握UI设计中色彩规范的核心要求（对比度、统一性、适配性）；了解小程序与APP设计规范的差异。能力目标：能按小程序规范设计交互流程与控件样式；能制定符合要求的色彩规范（含背景色、文字色、按钮色）；能完成小程序简单页面的规范设计。素质目标：培养跨平台设计适配思维；强化色彩审美与规范意识；树立“细节决定体验”的设计理念。学情分析学生已掌握APP设计的系统规范、边距布局规范，具备AdobeXD实操能力，能完成APP简单页面设计，但缺乏微信小程序设计经验，对小程序“轻快、简洁”的设计理念理解不足。在色彩运用上存在“对比度不足、颜色杂乱”等问题，需通过规范讲解与案例实操，强化小程序规范认知与色彩规范应用能力。重难点分析重点：微信小程序的交互规范（导航、标签分页）、字体规范（字号22/17/15pt）、色板规范；色彩规范的核心要求（文字与背景对比度、颜色统一性）。难点：小程序交互规范与APP的差异适配；色彩规范与品牌调性、用户体验的平衡。信息化应用方法讲师课堂教学主要以PPT讲授为主，结合多媒体教学，引导学生自主实践。思政元素融合设计思政元素融入方式文化传播、细节把控、创新适配思维通过设计“半月里古村落”小程序案例，引导学生将畲族文化元素（传统色彩、建筑符号）融入小程序色彩与控件设计，助力传统文化数字化传播；在色彩规范实践中，要求文字与背景对比度达标（确保无障碍阅读），培养细节把控能力；在小程序与APP差异适配中，培养创新适配思维。作业布置设计《半月里古村落》的控件规范和色彩规范。参考资料1.《UI设计项目式教程》，ISBN号：978-7-5685-7001-1，作者：卓书芳,钟月云，出版社：大连理工大学出版社，版次：2026-01，印次：12.参考站酷、花瓣、知乎等各类网络资源3.《iOS设计规范》和《MaterialDesign设计规范》教学过程教学环节教学内容教师活动学生活动设计意图课前预习预习1.预先完成课程中相关的课程案例2.预先准备本节课程中相关知识点课前了解本节课所要讲授的知识点。利用在线班群发布预习材料，引导学生初步了解本节课基本内容，为课堂学习打下理论基础。课程签到（5min)学习通签到平台发起签到或现场点名签到。在平台上进行签到或现场点名。做好课前准备，把控课堂出勤情况，保障教学顺利开展。课程导入(5min)引入主题1.提问复习：“APP设计中页面全局边距常用值是多少？列表式布局的最小高度是多少？”2.展示小程序案例截图与APP界面截图，提问：“小程序界面与APP有哪些差异？小程序设计需要遵循哪些特殊规范？”引出本节课主题：微信小程序设计规范与色彩规范。1.回答复习问题，巩固旧知识；2.观察截图差异，思考小程序设计的特殊性。建立APP与小程序设计的关联，激发学生对小程序规范的探究兴趣。课中讲解(30min)1.微信小程序核心设计规范（交互、字体、色板、控件）2.色彩规范核心要求（对比度、统一性、适配性）3.小程序与APP设计规范差异1.讲解小程序交互规范：导航：次级页面左上角设返回按钮，标签分页≤5个（推荐≤4个）；字体规范：常用字号22/17/15/14/12pt，中文用系统默认字体；色板规范：微信官方色板（黑色、白色、灰色系、强调色）；控件规范：按钮分深浅两色，图标风格统一；2.讲解色彩规范：对比度：文字与背景≥4.5:1（无障碍设计）；统一性：同一功能用同一颜色（如错误提示统一红色）；适配性：深色模式下调整色彩亮度；3.对比小程序与APP差异：小程序更简洁（减少装饰元素）、交互更轻快（右滑返回）、控件更统一。认真听讲，记录小程序规范核心参数与色彩规范要求。系统讲解小程序与色彩规范知识，通过对比差异帮助学生建立“跨平台适配”思维，重点突破色彩对比度这一难点。案例分析(20min)马尾船政小程序规范应用案例展示马尾船政微信小程序界面，引导学生分析：交互规范：底部标签分页4个（首页、探索、文创、我的），次级页面有返回按钮；字体规范：标题22pt，正文17pt，辅助文字14pt；色彩规范：主题色（蓝色）与背景色（米黄色）对比度≥4.5:1，错误提示红色，成功提示绿色；控件规范：预约按钮为深色强调色，取消按钮为浅色辅助色；1.分组讨论，识别案例中的规范与色彩规范的应用；2.分析规范应用对用户体验的提升作用。思政元素融入：通过马尾船政案例，让学生理解规范设计如何助力文化传播——简洁的交互、清晰的色彩让不同年龄段用户都能便捷获取船政文化信息；同时强调色彩对比度达标是无障碍设计的重要体现，培养学生的服务意识与细节把控能力。学生练习(20min)色彩规范与控件规范1.布置任务：分析半月里古村落畲族文化（传统色彩：青、红、黄），制定色彩规范以及控件规范；2.巡回指导，重点辅导：色彩对比度不达标、标签分页超数量、控件样式不统一等问题；3.选取学生作品进行课堂点评，强调规范要点。1.分析畲族文化，制定色彩规范；2.进行AdobeXD操作，设计控件规范；3.提交作品，听取点评并优化。思政元素融入：通过“半月里古村落”主题实践，引导学生挖掘畲族传统文化色彩与符号，将其融入设计，助力传统文化数字化传播；在实践中要求严格遵循小程序规范，色彩对比度达标，培养精益求精的工匠精神与创新适配思维。课堂小结(10min)回顾与梳理1.梳理本节课核心：小程序规范（交互、字体、控件）→色彩规范（对比度、统一性）→跨平台适配；2.总结优秀作品的共性：规范达标、色彩协调、文化元素融入自然；3.强调：小程序设计的核心是“轻快、规范、易用”，色彩规范是提升可读性与品牌辨识度的关键。1.回顾实践过程，总结自身作品的优点与不足；2.记录核心总结，提升对小程序设计的认知。强化小程序设计的核心逻辑，梳理“文化+规范+体验”的设计思路，为后续章节图标、Banner设计学习做好准备。作业布置设计《半月里古村落》的控件规范和色彩规范。课后教学反思小程序规范与色彩规范结合教学，逻辑连贯，学生能快速整合知识完成设计，“半月里古村落”主题实践深度融入思政元素，有效培养了传统文化数字化传播意识与创新适配思维，在线对比度检测工具让色彩规范落实更具操作性。但部分学生对小程序“轻快简洁”的设计理念理解不足，色彩与主题调性的匹配度不够，控件样式统一性欠缺。后续需补充小程序简洁设计案例与模板，提供文化调性与色彩匹配指南，发放控件规范手册并设置抽查环节，帮助学生精准践行小程序设计理念，提升作品的主题契合度与规范性。《UI设计项目式教程》教案第07号课程名称授课日期班级课堂类型理实一体化教学章节名称Banner设计目的要求1、知识目标：理解色彩搭配下，构图法则，视觉层次基本原理；掌握不同平台的Banner设计规范和尺寸要求。2、能力目标：熟练掌握AdobePhotoshop、Adobelllustrator、Sketch、Figma等设计软件，能够高效地进行Banner设计和编辑掌握排版技巧，能够合理安排文字、图片、图标等元素的位置和大小，确保Banner设计的整体美观和易读性了解基本的动效和交互设计原理，能够在Banner设计中加入适当的动效和交互元素，提升用户体验。3、素质目标：专业素养:保持对新知识、新技术和新趋势的敏感度，不断学习和实践，以提升自己的设计能力和专业素养思政素养:强调传递正面价值观、弘扬社会正能量。学情分析熟悉UI图标案例以及设计特点步骤。学会在实际应用中懂得如何查找软件操作相关资料，培养分析问题、解决问题的能力。重难点分析重点：能够高效地进行Banner设计和编辑掌握排版技巧，能够合理安排文字、图片、图标等元素的位置和大小，确保Banner设计的整体美观和易读性了解基本的动效和交互设计原理，能够在Banner设计中加入适当的动效和交互元素，提升用户体验。难点：培养严谨态度，重视图标设计细节信息化应用方法智慧职教，多媒体教室，演示软件操作过程，插画绘制过程。思政元素融合设计思政元素融入方式高标准严要求将“高分辨率=高标准”类比学习和生活中的标准，鼓励学生追求高质量，不做“差不多先生”。作业布置无参考资料《UI设计项目式教程》卓书芳，大连理工大学出版社教学过程教学环节教学内容教师活动学生活动设计意图课前预习预习利用网络平台发布预习任务课前了解本节课所要讲授的知识点。利用在线班群发布预习材料，引导学生初步了解本节课基本内容，为课堂学习打下理论基础。课程签到（5min)学习通签到平台发起签到或现场点名签到。在平台上进行签到或现场点名。帮助教师了解学生的出勤情况，及时发现并处理缺勤问题。新课导入（15min）引入主题，提问互动展示图片+提问1.思考；2.讨论。让学生通过感性认识，引入“专业设计=责任与担当”的思政理念课中讲解（70min）Banner设计特点与要素PPT展示图片，讲授讲解相关特点与要素查看图片，回答相关问题1.通过图片、视频、动画等资料让学生了解Banner设计特点与要素；2.培养学生独立思考和分析问题的能力。课堂小结（10min）总结本次课程总结本节重点内容，让同学们分析Banner设计特点。巩固所学知识拓宽学生的艺术视野，培养学生的审美能力和批判性思维。课后巩固所学知识1.通过QQ群、职教云等开展答疑。2.协助学生进行总结，并完成平台习题解答。巩固所学知识，掌握难点、易错点，完成课程平台上的相关习题课后强化作业布置无教学反思（课后）对于本节课程，主要讲述了Banner设计特点与要素学生理解更深刻，创作有想法；不足之处是，对于学生的个体差异关注仍需加强。《UI设计项目式教程》教案第08号课程名称授课日期班级课堂类型章节名称Banner设计目的要求1、知识目标：理解色彩搭配下，构图法则，视觉层次基本原理；掌握不同平台的Banner设计规范和尺寸要求。2、能力目标：熟练掌握AdobePhotoshop、Adobelllustrator、Sketch、Figma等设计软件，能够高效地进行Banner设计和编辑掌握排版技巧，能够合理安排文字、图片、图标等元素的位置和大小，确保Banner设计的整体美观和易读性了解基本的动效和交互设计原理，能够在Banner设计中加入适当的动效和交互元素，提升用户体验。3、素质目标：专业素养:保持对新知识、新技术和新趋势的敏感度，不断学习和实践，以提升自己的设计能力和专业素养思政素养:强调传递正面价值观、弘扬社会正能量。学情分析熟悉UI图标案例以及设计特点步骤。学会在实际应用中懂得如何查找软件操作相关资料，培养分析问题、解决问题的能力。重难点分析重点：能够高效地进行Banner设计和编辑掌握排版技巧，能够合理安排文字、图片、图标等元素的位置和大小，确保Banner设计的整体美观和易读性了解基本的动效和交互设计原理，能够在Banner设计中加入适当的动效和交互元素，提升用户体验。难点：培养严谨态度，重视图标设计细节信息化应用方法智慧职教，多媒体教室，展示作品。思政元素融合设计思政元素融入方式高标准严要求将“高分辨率=高标准”类比学习和生活中的标准，鼓励学生追求高质量，不做“差不多先生”。作业布置无参考资料《UI设计项目式教程》卓书芳，大连理工大学出版社教学过程教学环节教学内容教师活动学生活动设计意图课前预习预习1.预先完成课程中相关的课程案例2.预先准备本节课程中相关知识点课前了解本节课所要讲授的知识点。利用在线班群发布预习材料，引导学生初步了解本节课基本内容，为课堂学习打下理论基础。课程签到（5min)学习通签到平台发起签到或现场点名签到。在平台上进行签到或现场点名。帮助教师了解学生的出勤情况，及时发现并处理缺勤问题。课程讲解（70min）Banner构图方式及尺寸要求1.按照构图方式依次图片展示讲解。课后教学反思这次教学，初级阶段应放慢，保证学生扎实掌握基础。要培养学生的耐心让他们明白细致创作才能出好作品。《UI设计项目式教程》教案第09号课程名称授课日期班级课堂类型章节名称Banner设计目的要求1、知识目标：理解色彩搭配下，构图法则，视觉层次基本原理；掌握不同平台的Banner设计规范和尺寸要求。2、能力目标：熟练掌握AdobePhotoshop、Adobelllustrator、Sketch、Figma等设计软件，能够高效地进行Banner设计和编辑掌握排版技巧，能够合理安排文字、图片、图标等元素的位置和大小，确保Banner设计的整体美观和易读性了解基本的动效和交互设计原理，能够在Banner设计中加入适当的动效和交互元素，提升用户体验。3、素质目标：专业素养:保持对新知识、新技术和新趋势的敏感度，不断学习和实践，以提升自己的设计能力和专业素养思政素养:强调传递正面价值观、弘扬社会正能量。学情分析熟悉UI图标案例以及设计特点步骤。学会在实际应用中懂得如何查找软件操作相关资料，培养分析问题、解决问题的能力。重难点分析重点：能够高效地进行Banner设计和编辑掌握排版技巧，能够合理安排文字、图片、图标等元素的位置和大小，确保Banner设计的整体美观和易读性了解基本的动效和交互设计原理，能够在Banner设计中加入适当的动效和交互元素，提升用户体验。难点：培养严谨态度，重视图标设计细节信息化应用方法智慧职教，多媒体教室，展示作品。思政元素融合设计思政元素融入方式高标准严要求将“高分辨率=高标准”类比学习和生活中的标准，鼓励学生追求高质量，不做“差不多先生”。作业布置无参考资料《UI设计项目式教程》卓书芳，大连理工大学出版社教学过程教学环节教学内容教师活动学生活动设计意图课前预习预习1.预先完成课程中相关的课程案例2.预先准备本节课程中相关知识点课前了解本节课所要讲授的知识点。利用在线班群发布预习材料，引导学生初步了解本节课基本内容，为课堂学习打下理论基础。课程签到（5min)学习通签到平台发起签到或现场点名签到。在平台上进行签到或现场点名。帮助教师了解学生的出勤情况，及时发现并处理缺勤问题。课程讲解（70min）Banner放置位置及切换方式按照构图方式依次图片展示讲解。循序渐进的讲解：主页上部；中部卡片；自动切换方式；点击切换方式；特殊切换方式课后教学反思这次教学，初级阶段应放慢，保证学生扎实掌握基础。要培养学生的耐心让他们明白细致创作才能出好作品。《UI设计项目式教程》教案第10号课程名称授课日期班级课堂类型章节名称Banner设计目的要求1、知识目标：理解色彩搭配下，构图法则，视觉层次基本原理；掌握不同平台的Banner设计规范和尺寸要求。2、能力目标：熟练掌握AdobePhotoshop、Adobelllustrator、Sketch、Figma等设计软件，能够高效地进行Banner设计和编辑掌握排版技巧，能够合理安排文字、图片、图标等元素的位置和大小，确保Banner设计的整体美观和易读性了解基本的动效和交互设计原理，能够在Banner设计中加入适当的动效和交互元素，提升用户体验。3、素质目标：专业素养:保持对新知识、新技术和新趋势的敏感度，不断学习和实践，以提升自己的设计能力和专业素养思政素养:强调传递正面价值观、弘扬社会正能量。学情分析熟悉UI图标案例以及设计特点步骤。学会在实际应用中懂得如何查找软件操作相关资料，培养分析问题、解决问题的能力。重难点分析重点：能够高效地进行Banner设计和编辑掌握排版技巧，能够合理安排文字、图片、图标等元素的位置和大小，确保Banner设计的整体美观和易读性了解基本的动效和交互设计原理，能够在Banner设计中加入适当的动效和交互元素，提升用户体验。难点：培养严谨态度，重视图标设计细节信息化应用方法智慧职教，多媒体教室，展示作品。思政元素融合设计思政元素融入方式高标准严要求将“高分辨率=高标准”类比学习和生活中的标准，鼓励学生追求高质量，不做“差不多先生”。作业布置无参考资料《UI设计项目式教程》卓书芳，大连理工大学出版社教学过程教学环节教学内容教师活动学生活动设计意图课前预习预习1.预先完成课程中相关的课程案例2.预先准备本节课程中相关知识点课前了解本节课所要讲授的知识点。利用在线班群发布预习材料，引导学生初步了解本节课基本内容，为课堂学习打下理论基础。课程签到（5min)学习通签到平台发起签到或现场点名签到。在平台上进行签到或现场点名。帮助教师了解学生的出勤情况，及时发现并处理缺勤问题。课程讲解（70min）马尾船政项目Banner设计实施方案案例+工单进行讲解授课马尾项目原则马尾项目构图马尾项目放置方式以案例为基调，进行展示讲解课后教学反思这次教学，初级阶段应放慢，保证学生扎实掌握基础。要培养学生的耐心让他们明白细致创作才能出好作品。《UI设计项目式教程》教案第11号课程名称授课日期班级课堂类型章节名称Banner设计目的要求1、知识目标：理解色彩搭配下，构图法则，视觉层次基本原理；掌握不同平台的Banner设计规范和尺寸要求。2、能力目标：熟练掌握AdobePhotoshop、Adobelllustrator、Sketch、Figma等设计软件，能够高效地进行Banner设计和编辑掌握排版技巧，能够合理安排文字、图片、图标等元素的位置和大小，确保Banner设计的整体美观和易读性了解基本的动效和交互设计原理，能够在Banner设计中加入适当的动效和交互元素，提升用户体验。3、素质目标：专业素养:保持对新知识、新技术和新趋势的敏感度，不断学习和实践，以提升自己的设计能力和专业素养思政素养:强调传递正面价值观、弘扬社会正能量。学情分析熟悉UI图标案例以及设计特点步骤。学会在实际应用中懂得如何查找软件操作相关资料，培养分析问题、解决问题的能力。重难点分析重点：能够高效地进行Banner设计和编辑掌握排版技巧，能够合理安排文字、图片、图标等元素的位置和大小，确保Banner设计的整体美观和易读性了解基本的动效和交互设计原理，能够在Banner设计中加入适当的动效和交互元素，提升用户体验。难点：培养严谨态度，重视图标设计细节信息化应用方法智慧职教，多媒体教室，展示作品。思政元素融合设计思政元素融入方式高标准严要求将“高分辨率=高标准”类比学习和生活中的标准，鼓励学生追求高质量，不做“差不多先生”。作业布置无参考资料《UI设计项目式教程》卓书芳、钟月云，大连理工大学出版社教学过程教学环节教学内容教师活动学生活动设计意图课前预习预习1.预先完成课程中相关的课程案例2.预先准备本节课程中相关知识点课前了解本节课所要讲授的知识点。利用在线班群发布预习材料，引导学生初步了解本节课基本内容，为课堂学习打下理论基础。课程签到（5min)学习通签到平台发起签到或现场点名签到。在平台上进行签到或现场点名。帮助教师了解学生的出勤情况，及时发现并处理缺勤问题。课程讲解（70min）课外拓展围绕前期所学知识点，由点及线由线及面进行案例设计以案例为基调，进行展示讲解课后教学反思这次教学，初级阶段应放慢，保证学生扎实掌握基础。要培养学生的耐心让他们明白细致创作才能出好作品。《UI设计项目式教程》教案第12号课程名称授课日期班级课堂类型理实一体化教学章节名称一、原型图设计流程目的要求1、知识目标精准理解原型图的核心概念，明确其作为产品界面可视化草稿的定义、分类（低保真/高保真）及在点餐APP等项目中的应用价值；掌握原型图设计的基础理论，包括信息架构、交互逻辑、视觉层级等核心理论；熟记原型图设计的核心原则，如易用性、一致性、反馈性、容错性、用户中心原则，以及适配点餐场景的实用性原则。2、能力目标能根据点餐APP的业务需求，梳理界面信息结构，规划原型图的页面层级与跳转逻辑；具备独立绘制点餐APP核心页面（首页、菜品页、订单页）低保真原型的能力，能清晰表达交互流程；可依据原型图设计原则，对现有点餐APP原型进行合理性评估与优化调整。3、素质目标建立以用户为中心的设计思维，在原型设计中兼顾点餐用户的操作习惯与使用场景；培养严谨的逻辑思维与细节把控能力，确保原型图能精准传递产品需求；提升跨协作意识，能基于原型图与开发、设计团队有效沟通点餐APP的界面设计需求。学情分析在图形设计项目制作过程中，学生正处于身心发展的关键时期，他们的情绪、情感、思维、意志、能力及性格还极不稳定和成熟，具有很大的可塑性和易变性。因此，在项目制作过程中，教师需要充分考虑学生的这些特点，采用合适的教学方法，激发他们的学习兴趣，培养他们的创新能力和团队协作能力重难点分析1.了解原型图设计的大致分类及应用领域。2.学会运用UI设计软件进行基础设计操作。信息化应用方法讲师课堂教学要以PPT讲授为主，并结合多媒体进行教学思政元素融合设计思政元素融入方式培养学生的创新精神通过图形设计案例的讲解，树立学生的创新精神作业布置无参考资料《UI设计项目式教程》卓书芳、钟月云，大连理工大学出版社教学过程教学环节教学内容教师活动学生活动设计意图（含教学目的、信息化手段、思政融入情况、创新创业意识教育等）1.课前预习/5分钟预先完成课程中相关的课程案例预先准备本节课程项目可以投报的比赛预先准备相关知识点的拓展练习利用网络平台发布预习任务1.开展课前预习，观看布置的微课、视频及案例等；2.收集课题资料；课前让学生复习相关教学内容，提高课堂教学效率，让学生更好的理解授课内容2.课程导入/10完成旅游APP低保真原型图设计流程教师通图片和相应视频及动画展示图形设计案例，提出问题：UI设计的重难点？如何在设计过程中避免？培养学生独立思考和分析问题的能力。3.了解UI设计的概念，掌握UI设计的基本理论和原则/65分钟原型图介绍重点内容讲解一、UI设计的概念UI低保真原型是产品设计早期的轻量化呈现形式，核心是用极简视觉与基础交互，清晰传递页面布局、信息架构、核心功能及任务流程，不追求视觉美观、复杂动效与细节打磨，是设计初期低成本试错、高效协作的核心工具。其核心特征突出“简洁、高效、低成本”：视觉上仅用线框、矩形、占位符表示页面模块，无配色、字体规范、品牌元素及精美图标；内容上只保留关键信息，弱化装饰性内容；交互上仅用箭头、序号示意页面跳转与基础操作，无真实操作反馈。制作形式灵活，可手绘草图、纸质拼接，也可通过Axure、墨刀等工具快速制作线框图，几小时即可完成初稿。UI低保真的核心价值的在于聚焦核心逻辑，避免视觉细节干扰团队判断，同时降低制作与修改成本，适配敏捷设计与方案迭代。它能让非设计背景的产品、开发人员快速参与评审，减少沟通成本，还可通过早期用户测试，提前暴露流程漏洞，减少后期返工。其主要适用于需求梳理、概念验证的早期阶段，常用于跨团队评审、与开发对齐页面结构，以及MVP核心功能可行性验证。与高保真原型相比，它不追求视觉完整性与交互深度，核心作用是搭建基础框架，为后续高保真设计与开发落地奠定基础，绘制原型图的软件有很多，如AxureRP、墨刀、AdobeXD等，AxureRP是经典的原型工具，虽然组件库、素材库不够丰富，但是最基本的表达、共享、发布功能都涵盖，如图所示。墨刀现在发展势头猛，素材库、案例库丰富，是订阅制收费在线软件，低保真原型通常使用很少的颜色来突出基本功能，大部分则采用灰色调，这样的设计可以让用户忽略细节，专注于产品的主要功能保真原型是一种精确呈现产品界面和交互的原型设计图形，它结合了视觉设计、交互设计，可以更准确地模拟最终产品的外观和功能本次课上活动核心目标是让学生了解UI设计概念及相关软件，熟练掌握其基本理论和原则，活动过程中需注意以下要点，确保高效完成学习任务。活动期间，学生需专注听讲，认真记录UI设计核心概念，明确其“为人与产品搭建交互桥梁、兼顾美观与实用”的核心定位，不遗漏关键知识点。实践环节中，需结合课上所学的UI设计基本理论，牢记易用性、一致性、美观性等核心原则，规范操作、勤于思考。遇到疑问及时举手请教，不擅自脱离任务主题，与同学互帮互助、交流探讨，深化对理论和原则的理解。活动结束前，需简单梳理所学内容，确认已掌握UI设计概念及基本理论原则，确保活动达到预期效果。全程遵守课堂秩序，专注投入，高效完成课上各项任务，提升自身UI设计基础认知。通过学习和实践各种图形设计技术和工具，学生将能够发展出独特的创造力，并能够将其应用于解决实际设计问题中。课堂小结/10总结原型图低保真原型首要的也是最重要的作用是检查和测试产品功能，而不是产品的视觉外观制作高保真原型，首先要了解不同类型产品的设计规范，如要设计iOS、Android等移动终端产品，就先要了解它们的页面尺寸、设计结构和方法、字体、字号等规范，将设计元素进行合理的摆放与搭配。在做高保真原型时，要有足够的细心和耐心。聆听教师讲解，对照自身情况进行总结。进一步强化学生理论联系实际和解决问题的能力作业布置无教学反思（课后）《UI设计项目式教程》教案第13号课程名称授课日期班级课堂类型理实一体化教学章节名称一、完成旅游APP低保真原型图设计流程目的要求1、知识目标深化理解原型图制作的核心逻辑，明确原型从低保真到高保真的制作流程、适用场景及转化标准；系统掌握原型图制作的底层理论，包括页面信息架构搭建、交互路径设计、组件复用规范等；熟练运用原型图制作的实操原则，如布局对齐原则、交互反馈原则、适配一致性原则，结合点餐APP等项目场景理解原则落地方法。2、能力目标能独立完成需求拆解与原型规划，根据项目目标（如点餐APP）梳理页面清单、定义交互逻辑；熟练使用原型设计工具（如Figma、Axure），制作低保真+高保真原型图，清晰表达界面布局、控件交互与页面跳转；具备原型图优化与评审能力，能结合用户反馈、开发需求对原型进行迭代调整，确保原型落地性。3、素质目标树立以用户为中心的设计素养，在原型制作中优先考量点餐场景下的用户操作便捷性与体验流畅度；培养严谨细致的工作态度，注重原型图的细节规范（尺寸、字体、交互逻辑），降低后续开发偏差；强化项目落地思维，打破纯设计视角，兼顾原型的可实现性与团队协作效率，推动设计方案高效落地。学情分析在UI设计项目制作过程中，学生正处于身心发展的关键时期，他们的情绪、情感、思维、意志、能力及性格还极不稳定和成熟，具有很大的可塑性和易变性。因此，在项目制作过程中，教师需要充分考虑学生的这些特点，采用合适的教学方法，激发他们的学习兴趣，培养他们的创新能力和团队协作能力重难点分析1.完成原型图制作2.学会运用UI设计软件进行基础设计操作。信息化应用方法讲师课堂教学要以PPT讲授为主，并结合多媒体进行教学思政元素融合设计思政元素融入方式培养学生的创新精神通过图形设计案例的讲解，树立学生的创新精神作业布置无参考资料《UI设计项目式教程》卓书芳、钟月云，大连理工大学出版社教学过程教学环节教学内容教师活动学生活动设计意图（含教学目的、信息化手段、思政融入情况、创新创业意识教育等）1.课前预习/5分钟预先完成课程中相关的课程案例预先准备本节课程项目可以投报的比赛预先准备相关知识点的拓展练习利用网络平台发布预习任务1.开展课前预习，观看布置的微课、视频及案例等；2.收集课题资料；课前让学生复习相关教学内容，提高课堂教学效率，让学生更好的理解授课内容2.课程导入/10了解旅游APP低保真原型图设计流程教师通图片和相应视频及动画展示图形设计案例，提出问题：UI设计的重难点？如何在设计过程中避免？培养学生独立思考和分析问题的能力。3.注意字体规范、软件操作、色彩规范/65分钟字体规范、软件操作、色彩规范重点内容讲解y一、旅游APP的UI字体规范需从字体选择、字号、字重、颜色、排版等维度制定，确保视觉统一性与阅读体验。旅游APP字体规范旅游APP使用iOS尺寸制作。中文使用苹方，英文使用SFPro。特殊场景字体搭配轻量级创意字体，例如旅行APP的标题或装饰性文字，但需确保识别性，避免影响信息传达。一般情况下，导航栏内标题字号大于内容标题字号，字号大小一般为偶数。在字重的选择上，标题需要加粗，大标题使用Medium（中等）或Bold（粗体），增强醒目度。正文采用Regular（常规），避免视觉疲劳。需要强调的关84UI设计项目式教程键信息，如价格、按钮文字等可以使用Semi-Bold（半粗），突出交互重点软件界面介绍实操使用“矩形工具”绘制一个圆角矩形作为搜索栏的外框，再绘制一个圆形表示图标位置，添加相关文字“本地-景点-酒店”，并设置好字体样式和位置，效果如图所示。在制作高保真原型之前，需要完成规范手册的制作。制作规范手册主要是为了便于设计团队或设计师之间统一产品的视觉设计风格；同时，保证设计师与开发人员之间沟通和工作交接的顺利进行，使开发出的产品界面和视觉稿高度统一。制作规范手册，包括字体、颜色、按钮、图标等要求，如图所示。课上开展相关实践活动时，需严格遵守字体、软件、色彩三大规范，确保活动有序高效，作品规范统一。字体使用上，需选用课上规定字体，标题统一加粗、字号适中，正文字号一致、行间距规范，杜绝随意使用艺术字体、乱改字号，避免错别字和格式混乱。软件操作方面，全程按照老师指导步骤操作，不随意点击无关按钮、不修改软件设置，遇到操作难题及时举手请教，不擅自重启软件或更改文件保存路径，确保作品顺利保存、不丢失。色彩规范上，遵循课上要求的色彩搭配原则，不随意使用杂乱色彩，保持作品色彩协调统一，贴合活动主题，不盲目追求花哨，突出内容重点。活动中需专注操作、互帮互助，严格遵守各项规范，确保课堂秩序，高效完成课上实践任务。通过学习和实践各种图形设计技术和工具，学生将能够发展出独特的创造力，并能够将其应用于解决实际设计问题中。课堂小结/10总结原型图圆形图的制作需要根据一定的规范，包括字体规范，颜色规范等方面来进行相关UI高保真图的内容制作聆听教师讲解，对照自身情况进行总结。进一步强化学生理论联系实际和解决问题的能力作业布置无教学反思（课后）《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设计项目式教程采用中国传统水墨山水元素，如远山、云雾，搭配金色装饰线条，营造典雅、富有文化底蕴的氛围。以书法字体突出文化传承、精忠报国等核心主题词，辅以副标题