《UI设计项目式教程》教案5 边距、间距与内容布局规范

《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.记录下节课预习重点，明确学习方向。强化布局规范的核心逻辑，提升学生对“布局服务于用户体验”的认知高度，为下节课小程序规范学习做好准备。作业布置制定《半月里古村落》界面布局规范。课后教学反思本课时格式塔邻近性原则的动画演示直观有效，学生空间布局思维有所提升，马尾船政布局案例紧扣文化传播目标，强化了服务意