《UI设计-AIGC驱动赋能界面完美设计》教案全套 邓永生

《UI设计》课程教案——AIGC驱动赋能界面完美设计课程性质：专业核心课（项目式教学）总学时：48学时（项目1—项目7）

一、课程整体设计说明（一）课程定位与目标本课程以校企双元开发的《UI设计——AIGC驱动赋能界面完美设计》教材为依据，以真实项目“校缘通”App为主线，采用“理论讲解—实践操作—能力拓展”的闭环式项目教学，将AIGC（人工智能生成内容）技术融入UI设计的全流程。课程面向职业技术本科数字媒体技术专业，旨在培养“懂设计、会用AIGC、能落地”的复合型UI设计人才，使学生既掌握UI设计基础理论与主流平台规范，又能运用AI工具提升设计效率、突破创意瓶颈。课程总体目标【知识目标】掌握UI设计概念、发展流程与团队分工；熟悉iOS/Android/HarmonyOS/B端的设计标准与交付规范；理解以“校缘通”App为代表的移动产品需求分析与界面设计方法。【能力目标】能独立完成产品需求分析、用户画像、竞品分析与原型绘制；能设计规范图标、引导页及各类功能界面；能熟练运用即梦AI、LiblibAI、豆包AI等AIGC工具辅助生成设计元素并落地到Figma/Photoshop。【素质目标】树立严谨规范的设计思维与工匠精神；养成独立思考、主动探索与团队协作的习惯；增强“技术赋能设计、创新服务需求”的专业价值观与文化自信。（二）项目与学时分配序号教学项目核心内容学时项目1UI设计基础UI设计概念/趋势/流程/职位；iOS、Android、HarmonyOS、B端设计规范；设计师能力模型4项目2“校缘通”App——产品需求分析项目定位、背景、用户需求/画像、竞品分析、情绪板、产品结构图、原型图、规范手册；AIGC需求分析与原型4项目3“校缘通”App——App图标设计图标概念/风格/原则/网格化；应用图标、金刚区图标、标签栏图标；AIGC生成元素8项目4“校缘通”App——引导页界面设计（一）闪屏页、引导页、空白页；表现方式与设计原则；闪屏页与引导页制作；AIGC生成元素8项目5“校缘通”App——界面设计（二）登录注册页、首页；设计思路解析与制作；AIGC生成元素8项目6“校缘通”App——界面设计（三）列表/网格/瀑布流/拼图等布局；学院好物、操场界面制作；AIGC生成元素8项目7“校缘通”App——界面设计（四）消息页面、个人中心；消息界面、我的界面制作；AIGC查找页面问题8合计48（三）教学方法与考核主要教学方法项目驱动教学法：以“校缘通”App真实项目贯穿全程，任务场景化。理实一体化：讲练结合，教师演示→学生实操→作品点评。AIGC赋能教学：将即梦AI、LiblibAI、豆包AI、FigmaAI等工具嵌入各任务，演示“AI生成+人工精修”工作流。案例教学法与对比分析法：通过头部App规范对比、学生作品互评提升规范意识。小组协作与展示汇报：需求分析、原型评审等环节采用分组研讨与答辩。课程考核方式（过程性+终结性）考核维度考核内容与占比说明平时成绩（10%）考勤、课堂参与、团队协作缺勤/迟到按校规折算，课堂提问与讨论计入项目过程考核（40%）项目1—项目7阶段性设计作品每个项目按完成度、规范性、创新性评分，AIGC应用合理度纳入评价阶段测验（10%）设计规范与流程知识测验闭卷/在线，考查平台规范、单位换算、流程等终结性考核（40%）综合UI设计作品+答辩基于“校缘通”完成一套完整界面并陈述设计思路

项目1UI设计基础（教案）教学课题UI设计基础——概念、流程、平台规范与设计师能力模型对应教材项目1（1.1关于UI设计；1.2不同设备设计标准及规范；1.3设计师能力模型）授课学时4学时（180分钟）授课地点多媒体教室/UI设计实训室教材与内容分析本项目是课程入门基础，涵盖UI设计概念、发展前景、与平面设计的区别、完整设计流程与职位划分，并系统讲解iOS、Android、HarmonyOS三大移动端及B端产品的界面设计标准与交付规范，最后引入设计师能力模型。内容理论性强、规范参数多，是后续所有项目设计与交付的依据，需结合图表与真实App案例帮助理解记忆。学情分析学生已具备Photoshop图形处理、设计构成等先修基础，对界面有感性认识但缺乏系统规范认知。对AIGC工具兴趣高，但容易重“效果”轻“规范”，需强化标准意识。职业技术本科学生更关注岗位能力，宜多用企业真实规范与岗位案例驱动。教学目标（知识目标）了解UI设计概念、发展趋势及与平面设计的区别；掌握UI设计完整流程（需求调研→设计制作→测试发布）与团队职位划分；掌握iOS/Android/HarmonyOS/B端的设计标准、单位（pt/dp/sp/vp/fp）、图标与组件尺寸规范；认识设计师能力模型及自我能力定位方法。能力目标能复述UI设计流程并说明各岗位职责；能根据目标平台查阅并套用相应的设计尺寸、字号、图标规范；能借助能力模型绘制个人能力雷达图，定位强弱项。素质目标（课程思政）通过多平台规范学习树立严谨规范、精益求精的工匠精神；借助能力模型提升自我认知与复盘习惯，培育终身学习与自主创新意识。教学重点与难点重点：三大移动端及B端的界面/图标尺寸与单位规范；UI设计流程。难点：不同平台单位（dp/sp/vp/fp、倍图/@1x@2x@3x）的换算与适配逻辑；规范的内化应用。教学方法与资源方法：讲授+图表对比+案例分析（支付宝/钉钉/华为等真实App）+课堂小测。资源：教材项目1、各平台官方设计规范截图、头部App规范对比图、能力模型雷达图模板、多媒体课件。教学过程设计（4学时/180分钟）教学环节教学内容（教师活动·知识点）学生活动时间(分)设计意图导入(15)展示微信、抖音、钉钉等不同界面，提问“什么是好UI？”引出UI设计定义（人机交互+操作逻辑+界面美观）。简述AIGC对行业的冲击与机遇。观察案例，思考并回答，明确课程价值。15激发兴趣，建立UI设计整体认知。新知·UI概述(40)1.1UI设计概念（实体UI/虚拟UI，B端/C端）；1.1.2发展前景（响应式、移动优化、智能个性化、VR/AR）；1.1.3与平面设计的区别（交互/可用性vs静态传达）；1.1.4设计流程（需求调研10步、设计制作7步）；1.1.5职位划分（产品/体验/交互/视觉设计师、前端、测试、运营）。听讲记笔记，对比平面与UI异同，梳理流程与职位顺序图。40构建基础概念框架，理解职业分工。新知·平台规范(60)1.2重点讲解：iOS（@1x/@2x/@3x倍图、1024启动图标、栅格黄金比例、状态栏/导航栏/标签栏高度、字号偶数规律）；Android（DPI/PPI、LDPI~XXXHDPI密度、dp/sp单位、1080×1920标准稿、Roboto/思源黑体）；HarmonyOS（分布式、vp/fp、图标24vp×24vp）；B端（1920×1080、左右/上下布局、控件状态、表格图表、微软雅黑、行高=字号+8px）。以对比表强化记忆。跟练单位换算（如1080稿中30px=15sp），填写平台规范对比表。60突破难点，建立跨平台规范意识。新知·能力模型(25)1.3设计师能力模型概念（审美/工具/思维/沟通/业务等维度）；演示用雷达图对个人能力自评定位，引导规划学习路径。绘制个人能力雷达图初稿，标记强弱项。25促进自我认知，衔接职业规划。小结与测验(20)归纳本项目知识脉络；当堂小测（单位换算、各平台关键尺寸、流程排序）。布置课后作业：搜集2个App分别给出其平台与规范要点。完成小测，记录作业要求。20巩固重点，检验达成度。课后作业与拓展检索并整理1个iOSApp与1个AndroidApp的启动图标尺寸及界面组件高度；拓展：登录Figma社区或Apple/华为开发者官网，浏览官方HumanInterface/HarmonyOS设计规范。教学反思

项目2“校缘通”App——产品需求分析（教案）教学课题校缘通App产品需求分析与原型规范对应教材项目2（2.1相关知识；2.2任务实施；2.3技能提升——AIGC需求分析与原型）授课学时4学时（180分钟）授课地点UI设计实训室（联网机房）教材与内容分析本项目以真实“校缘通”App为对象，完成从项目定位、背景、用户需求、用户画像、竞品分析、情绪板、产品结构图、原型图到设计规范手册的完整需求分析闭环，并在技能提升中引入AIGC进行需求分析与原型图设计，是项目3—项目7全部界面设计的“总纲”，承上启下。学情分析学生已学项目1规范，具备平台常识，但缺乏从0到1的产品思维；分组协作为主，需注意任务分工与产出质量；对用AI做用户画像/原型充满好奇，需引导“AI辅助而非替代”。教学目标（知识目标）掌握产品需求分析要素：定位、背景、用户需求、用户画像、竞品分析、情绪板；理解产品结构图（信息架构）与产品原型图的作用与画法；了解设计规范手册的构成；认识AIGC在需求分析与原型中的用法。能力目标能撰写“校缘通”App项目定位与背景说明；能构建用户画像、开展竞品分析、制作情绪板与产品结构图；能用Figma/Axure或AI生成UI工具绘制低保真原型；能运用AIGC（如豆包、即梦、AI生成UI面板）辅助需求梳理与原型。素质目标（课程思政）树立“以用户为中心”的设计价值观与服务校园的真实问题意识；培养信息甄别、逻辑表达与团队协作沟通能力。教学重点与难点重点：用户画像、竞品分析、产品结构图与原型图绘制。难点：从需求到信息架构的抽象转化；情绪板与规范手册的系统性表达。教学方法与资源方法：案例导入+分组任务驱动+原型评审；资源：教材项目2、校缘通背景资料、竞品App、Figma/Axure、AI生成UI工具（输入提示词生成页面）、情绪板模板。教学过程设计（4学时/180分钟）教学环节教学内容（教师活动·知识点）学生活动时间(分)设计意图导入(15)回顾项目1，提出“校缘通”要服务师生校园生活，展示目标App草图，明确本次产出：需求分析包+原型。分组（4-5人/组）。进入角色，组建小组，认领子任务。15以真实项目驱动，明确产出目标。新知·需求要素(40)2.1讲解：项目定位与背景（解决什么校园痛点）；用户需求（访谈/问卷）；用户画像（人口/行为/目标）；竞品分析（优势不足）；情绪板（色彩/意象/调性）。演示用户画像与情绪板范例。听讲，结合校缘通讨论目标用户与痛点，记录要点。40建立需求分析知识框架。实践·分析产出(50)2.2任务实施：各组完成①项目定位与背景②用户需求清单③用户画像1张④竞品分析表⑤情绪板（用即梦/豆包辅助生成意象图）。教师巡回指导。小组协作产出分析物料，用AIGC生成情绪板意象并筛选。50做中学，锻炼调研与协作能力。新知·结构与原型(35)2.1.7产品结构图（树状信息架构）；2.1.8原型图绘制（线框/跳转）；2.1.9规范手册（色彩/字体/栅格）。2.3技能提升：用“AI生成UI”面板输入提示词（目标客户+类型+页面+目标）一键生成首页原型，再人工精修。学习结构与原型画法，尝试用AI生成UI工具出首页低保真原型。35掌握从架构到原型的落地方法，引入AIGC。评审与小结(40)各组展示需求分析包与原型，互评+教师点评（完整性、用户中心、规范意识）；归纳设计规范手册要点；布置课后完善作品。汇报展示，接受互评，记录改进点。40以评促学，固化方法与规范。课后作业与拓展•完善并提交本组“校缘通”需求分析包（定位/背景/需求/画像/竞品/情绪板/结构图/原型/规范手册）；•拓展：用AI生成UI工具为其他校园场景（如食堂排队）生成一页原型并对比人工方案。教学反思

项目3“校缘通”App——App图标设计（教案）教学课题校缘通App图标体系设计（应用图标/金刚区/标签栏）对应教材项目3（3.1相关知识；3.2任务实施；3.3技能提升——AIGC生成元素）授课学时8学时（360分钟，2个教学单元）授课地点UI设计实训室教材与内容分析本项目进入“校缘通”视觉落地第一阶段——图标设计。先讲图标概念、风格类型（扁平/拟物/线性/双色等）、设计原则与网格化方法，再依次完成应用图标、金刚区图标、标签栏图标的设计制作，最后用AIGC（即梦AI/LiblibAI）生成设计元素并精修。图标是品牌第一视觉，规范性与一致性要求高。学情分析学生已掌握平台规范（项目1），能把控尺寸；图标绘制需精细操作（圆角/栅格/对齐），易忽视网格与安全边距；偏好用AI出图，但需训练“筛选—矢量化—统一”的后期能力。教学目标（知识目标）掌握图标概念、主流风格类型与设计原则（可识别/一致/简洁/适配）；理解图标网格化（安全区、栅格、视觉重心）方法；熟悉应用图标、金刚区图标、标签栏图标各自规范与场景。能力目标能按iOS/Android规范绘制应用启动图标（含@2x/@3x）；能设计规范统一的金刚区（功能入口）图标与底部标签栏图标（常态/选中态）；能运用即梦AI/LiblibAI生成图标灵感与元素并落地精修。素质目标（课程思政）以图标“小元素见大匠心”培育精益求精的工匠精神；在AIGC辅助中树立原创意识与版权规范。教学重点与难点重点：三类图标的规范绘制与风格统一；网格化与安全边距。难点：图标语义准确且视觉统一；AIGC元素的矢量化与风格归一。教学方法与资源方法：示范+分步实操+作品点评；资源：教材项目3、Figma/Photoshop、图标网格模板、即梦AI/LiblibAI、校缘通功能清单。教学过程设计·单元一（第1-4学时/180分钟）：图标基础与应用图标教学环节教学内容（教师活动·知识点）学生活动时间(分)设计意图导入(15)展示校缘通现有草标与各平台头部App图标，讨论“好图标的标准”。明确本单元产出：应用启动图标。观察对比，提出好图标特征。15建立图标审美与规范标准。新知·图标理论(45)3.1图标概念与风格类型（扁平/线形/拟物/双色/有色面）；设计原则（识别性、一致性、简洁、可扩展）；网格化（栅格、安全边距、视觉重心、圆角）。以iOS黄金比例栅格演示。听讲，在网格模板上练习基础几何形对齐。45突破难点，建立网格化意识。实操·应用图标(85)3.2.2应用图标设计与制作：依据校缘通品牌色与“校缘”意象，在栅格中绘制启动图标，输出@2x(120)/@3x(180)及1024主图；注意圆角与辨识度。教师演示Figma绘制→导出。绘制校缘通启动图标，导出多倍图，组内互检。85掌握应用图标规范与切图。点评小结(35)展示代表性作品，围绕栅格/辨识度/品牌一致性点评；归纳应用图标交付清单。对照点评修改图标，记录要点。35以评促改，固化规范。教学过程设计·单元二（第5-8学时/180分钟）：金刚区与标签栏图标+AIGC教学环节教学内容（教师活动·知识点）学生活动时间(分)设计意图复习导入(10)回顾应用图标要点，引出App内功能图标体系（金刚区+标签栏）。回顾，明确本单元任务。10衔接单元一。新知·功能图标(35)讲解金刚区（首页运营入口，常4/5/8个）与标签栏（底部主导航，常态/选中双态）的规范差异；风格须与应用图标统一；线性图标描边粗细一致、端点圆角统一。记录两类图标差异，规划校缘通图标清单。35厘清功能图标规范。实操·金刚区(55)3.2.3金刚区图标设计与制作：依校缘通功能（如课表/资讯/好物/操场/我的）绘制一组统一风格图标，注意安全边距与视觉重量平衡。绘制金刚区图标组，统一描边与端点。55训练风格统一与批量绘制。实操·标签栏(45)3.2.4标签栏图标设计与制作：绘制底部导航图标（常态线性+选中面性/高亮），保证选中态可辨。完成标签栏双态图标，导出预览。45掌握导航图标双态规范。AIGC提升(25)3.3技能提升：用即梦AI/LiblibAI输入校缘通风格提示词生成图标灵感/元素，筛选后在Figma中矢量化、统一描边与配色，融入体系。用AI生成灵感，精修并替换/补充图标。25引入AIGC提效，强调整改。总评(10)汇总三类图标，检查整体一致性；布置课后完善图标库。自查交付，记录作业。10整体把关一致性。课后作业与拓展提交校缘通图标库（含源文件与导出图）；拓展：为HarmonyOS与Android分别做一套同风格图标，对比平台差异。教学反思

项目4“校缘通”App——引导页界面设计（一）（教案）教学课题校缘通闪屏页与引导页界面设计对应教材项目4（4.1相关知识；4.2任务实施；4.3技能提升——AIGC生成元素）授课学时8学时（360分钟，2个教学单元）授课地点UI设计实训室教材与内容分析本项目讲解首屏体验：闪屏页（品牌曝光）与引导页（功能/价值引导），含引导页的表现方式（轮播/视频/动态）、设计原则与空白页（EmptyState）设计；任务实施完成闪屏页与引导页制作，技能提升用AIGC生成背景/插画元素。学情分析学生已完成图标，进入整页设计，需建立“页面=信息层级+视觉节奏”的意识；引导页常犯堆砌文案、配图不统一等错；AIGC生成背景图需求强，需控版权与风格统一。教学目标（知识目标）理解闪屏页与引导页的作用差异；掌握引导页表现方式（静态轮播/视频/交互动效）与设计原则（聚焦、少字、强视觉）；了解空白页（空状态）设计要点。能力目标能设计品牌感强的闪屏页（Logo+slogan+品牌色）；能制作3-4屏引导页（统一版式、清晰引导）；能用即梦AI生成符合调性的背景/插画并合成排版。素质目标（课程思政）以首屏体验传递校园文化与服务温度；在AIGC素材使用中强化版权与正向内容意识。教学重点与难点重点：闪屏页品牌表达、引导页版式与视觉节奏统一。难点：多屏引导页的一致性与“少即是多”；AIGC背景与前景的融合。教学方法与资源方法：案例拆解+分步实操+点评；资源：教材项目4、Figma/PS、即梦AI、校缘通品牌规范（色彩/字体/图标）。教学过程设计·单元一（第1-4学时/180分钟）：闪屏页教学环节教学内容（教师活动·知识点）学生活动时间(分)设计意图导入(15)展示校缘通及主流App闪屏页，讨论“3秒内能记住什么”。明确闪屏=品牌第一印象。观察，归纳好闪屏要素。15建立首屏品牌意识。新知(40)4.1.1闪屏页（启动占位/品牌曝光/广告）；4.1.4原则；4.1.5空白页（空状态文案与引导）。结合iOS/Android启动图标规范。记录闪屏要素与尺寸规范。40厘清闪屏与空状态。实操·闪屏(85)4.2.2闪屏页设计与制作：依品牌色与Logo，在规范画布（如1080×1920/@3x）排版Logo+slogan+品牌图形，注意安全区与上架要求。制作校缘通闪屏页，导出多倍图。85落地闪屏设计能力。点评(40)作品展示，围绕品牌一致、信息聚焦、安全区点评并修改。互评修改，固化规范。40以评促学。教学过程设计·单元二（第5-8学时/180分钟）：引导页+AIGC教学环节教学内容（教师活动·知识点）学生活动时间(分)设计意图复习导入(10)回顾闪屏，引出“用户首次打开如何被引导”——引导页。进入引导页任务。10衔接单元一。新知·引导页(40)4.1.2引导页（功能/价值/新人引导）；4.1.3表现方式（轮播图/短视频/动效）；设计原则（一屏一意、强视觉弱文字、明确跳过/进入）。拆解优秀引导页版式。分析引导页版式，规划校缘通4屏脚本。40建立引导页方法论。实操·引导页(60)4.2.4引导页设计与制作：按统一栅格完成3-4屏（如“查课表/找好物/逛操场/连师生”），含文案、插画位、指示器与“进入App”按钮。制作引导页整套，保证版式一致。60训练整页与系列一致性。AIGC提升(45)4.3技能提升：用即梦AI输入“校园场景+马卡龙配色+扁平插画”等提示词生成背景/插画；在PS/Figma抠图合成、统一色调，替换占位图。AI生成素材并精修融合到引导页。45AIGC提效与风格统一。总评(25)汇总闪屏+引导页+空状态，检查视觉节奏与品牌一致；布置完善作品。自查交付。25整体把关。课后作业与拓展完善闪屏页与引导页套件；拓展：为引导页增加一屏“隐私与权限说明”并设计合规文案版式。教学反思

项目5“校缘通”App——界面设计（二）（教案）教学课题校缘通登录注册页与首页设计对应教材项目5（5.1相关知识；5.2任务实施；5.3技能提升——AIGC生成元素）授课学时8学时（360分钟，2个教学单元）授课地点UI设计实训室教材与内容分析本项目进入核心功能页：登录注册页（用户入口与信任建立）与首页（产品门面与信息聚合）。任务实施含思路解析与制作，技能提升用AIGC（豆包生成提示词+即梦/Liblib生成素材+PS抠图）辅助元素制作。学情分析学生具备图标与首屏基础，需理解“页面信息层级与转化目标”；登录页易堆功能、首页易信息过载；需训练用AIGC生成合规素材（如实景图）并抠图排版。教学目标（知识目标）掌握登录注册页构成（Logo/输入框/主按钮/第三方/协议）与设计要点；理解首页的信息架构、卡片化与视觉动线；了解AIGC素材生成与抠图合成工作流。能力目标能设计清晰、可信、合规的登录注册页（含隐私协议勾选）；能设计信息清晰、引导明确的首页（Banner/金刚区/信息流）；能用豆包+即梦/Liblib+PS完成素材生成与精修。素质目标（课程思政）在登录页设计隐私协议勾选，渗透数据安全与用户权益保护意识；首页传达积极校园文化，避免低俗视觉。教学重点与难点重点：登录注册转化路径清晰、首页信息层级与视觉动线。难点：首页信息聚合不杂乱；AIGC实景素材的版权与抠图质量。教学方法与资源方法：拆解头部App首页+分步实操；资源：教材项目5、Figma/PS、豆包AI、即梦AI/LiblibAI、校缘通信息架构。教学过程设计·单元一（第1-4学时/180分钟）：登录注册页教学环节教学内容（教师活动·知识点）学生活动时间(分)设计意图导入(15)对比微信/支付宝登录页，讨论“为何有的App注册快”。明确登录注册=转化第一关。归纳好登录页特征。15建立转化与信任意识。新知(40)5.1.1登录注册页：组成（Logo、手机/验证码输入、主按钮、第三方登录、用户协议勾选）、布局（居中/分栏）、错误与成功态、合规要点（隐私协议）。记录结构与合规项。40厘清登录页规范与法规。实操(85)5.2.2登录注册页设计与制作：按校缘通品牌规范绘制登录+注册页，含输入框态、主按钮、协议勾选与“微信/学号”登录入口，注意安全区与可点区域≥44px。制作登录注册页，标注状态。85落地登录页设计。点评(40)围绕清晰度、合规、可达性点评并修改。互评修改。40以评促学。教学过程设计·单元二（第5-8学时/180分钟）：首页+AIGC教学环节教学内容（教师活动·知识点）学生活动时间(分)设计意图复习导入(10)回顾登录页，引出用户登录后第一屏——首页。进入首页任务。10衔接。新知·首页(45)5.1.2首页：信息架构（搜索/消息入口、Banner、金刚区、信息流）、卡片化、视觉动线（F型/Z型）、品牌色克制使用。拆解校缘通首页结构。规划首页模块与动线。45建立首页方法论。实操·首页(55)5.2.4首页设计与制作：搭建搜索栏+Banner+金刚区(复用项目3图标)+信息流卡片，统一间距与字号体系。制作首页，保证层级清晰。55训练信息聚合与层级。AIGC提升(50)5.3技能提升：用豆包AI为生鲜/活动图生成描述词→即梦/Liblib生成素材→PS抠图合成到Banner与卡片；注意版权与色调统一。生成并精修首页素材。50AIGC素材工作流落地。总评(20)汇总登录+首页，检查一致与合规；布置完善。自查交付。20整体把关。课后作业与拓展•完善登录注册与首页；•拓展：为首页增加“深色模式”配色方案并对比可读性。教学反思（授课后填写：首页信息过载、AIGC素材版权与抠图、合规项遗漏等。）

项目6“校缘通”App——界面设计（三）（教案）教学课题校缘通列表与网格布局界面设计（学院好物/操场）对应教材项目6（6.1相关知识；6.2任务实施；6.3技能提升——AIGC生成元素）授课学时8学时（360分钟，2个教学单元）授课地点UI设计实训室教材与内容分析本项目聚焦内容型页面的布局语言：列表布局、大图网格、两列网格、两列瀑布流、三列网格、拼图布局，并以“学院好物”与“学院操场”两个界面落地，技能提升同样用AIGC生成商品/场景素材。布局决定信息密度与浏览效率。学情分析学生已完成首页，对卡片有基础，但布局选型易混乱；瀑布流/拼图需把握对齐与留白；AIGC生成多图需统一调性。教学目标（知识目标）掌握6种主流布局（列表/大图网格/两列网格/两列瀑布流/三列网格/拼图）的适用场景；理解栅格与间距系统对布局一致性的作用。能力目标能依据内容类型选择并落地合适布局；能完成“学院好物”（商品网格/瀑布流）与“学院操场”（图文/拼图）界面；能用AIGC生成并统一商品/场景素材。素质目标（课程思政）以布局取舍培养“信息为民、效率优先”的服务设计观；在素材生成中坚持真实正向的校园内容导向。教学重点与难点重点：布局与内容类型的匹配；栅格与间距统一。难点：瀑布流/拼图的对齐与视觉平衡；多素材风格统一。教学方法与资源方法：布局对比实验+实操；资源：教材项目6、Figma/PS、即梦AI/LiblibAI、校缘通内容清单。教学过程设计·单元一（第1-4学时/180分钟）：布局语言+学院好物教学环节教学内容（教师活动·知识点）学生活动时间(分)设计意图导入(15)展示小红书/淘宝/微博不同布局，讨论“为什么这样排”。引出6种布局。归纳布局与内容关系。15建立布局意识。新知·布局(45)6.1列表布局（强信息）、大图网格（强视觉）、两列网格、两列瀑布流（不定高）、三列网格（轻量）、拼图布局（运营焦点）；讲栅格与间距（8dp基准）。记录各布局适用场景。45掌握布局选型依据。实操·好物(85)6.2.2学院好物界面：选两列网格/瀑布流呈现校园好物，统一卡片（图/标题/价/标签），注意间距与对齐；用栅格保证一致。制作好物界面，选型并落地。85训练布局落地能力。点评(35)围绕布局适配、对齐、可读性点评修改。互评修改。35以评促学。教学过程设计·单元二（第5-8学时/180分钟）：学院操场+AIGC教学环节教学内容（教师活动·知识点）学生活动时间(分)设计意图复习导入(10)回顾好物布局，引出场景化“学院操场”界面。进入操场任务。10衔接。设计解析(35)6.2.3学院操场界面思路：以图文/拼图呈现操场活动与预约，突出时间与地点信息，弱销售强服务。规划模块。规划操场界面结构。35明确场景化设计目标。实操·操场(55)6.2.4学院操场界面制作：用拼图/大图网格呈现活动封面，列表呈现场次，统一间距字号。制作操场界面。55训练场景页布局。AIGC提升(50)6.3技能提升：用即梦/Liblib生成好物与操场场景图，PS调色统一，替换占位；注意真实校园正向内容。生成并统一素材。50AIGC素材闭环。总评(30)汇总两个界面，检查布局一致与品牌统一；布置完善。自查交付。30整体把关。课后作业与拓展完善两个界面；拓展：将“学院好物”改为列表布局并对比两种布局的信息效率。教学反思

项目7“校缘通”App——界面设计（四）（教案）教学课题校缘通消息页面与个人中心（我的）设计对应教材项目7（7.1相关知识；7.2任务实施；7.3技能提升——AIGC查找页面问题）授课学时8学时（360分钟，2个教学单元）授课地点UI设计实训室教材与内容分析