《UI设计项目式教程》教案4 iOS与Android设计规范基础

《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标准画布，分别添加导航栏、标签栏，设置对应高度与字体。课后教学反思本课时通过表格对比、公式推导与软件演示，将设计单位与系统规范的抽象知识具象化，学生规范意识明显提升，“按规范设计”的职业态度与工匠精神培养效果较好，双系统画布设置任务针对性