《UI设计项目式教程》教案16 导航设计

《UI设计项目式教程》教案第16号课程名称授课日期班级课堂类型理实一体化教学章节名称一、导航设计目的要求1、知识目标理解UI导航作为APP功能骨架的核心定义，明确其在梳理产品信息架构、提升用户操作流畅度、优化用户体验中的核心价值与作用。系统掌握标签导航、抽屉导航、顶部导航等常见导航形式的核心特点、适用场景及具体设计规范。熟记UI导航设计的核心原则，重点掌握一致性、易用性原则，理解导航设计中图标、文字、色彩搭配的规范要求。2、能力目标能熟练区分各类导航形式的差异，结合具体产品定位与需求，合理规划导航层级与交互逻辑，确保导航清晰、高效、易操作。能遵循导航设计规范与原则，规范搭配图标、文字及色彩，独立完成导航方案的构思与梳理。具备运用原型设计工具，绘制导航原型并根据产品需求、用户反馈进行优化调整的实操能力。3、素质目标树立以用户为中心的设计素养，在导航设计中优先考量用户操作习惯，注重提升用户体验与操作流畅度。学情分析UI学生学情呈现两极分化，部分有基础能掌握核心概念与基础软件操作，少数零基础较生疏；多数学习态度积极，缺乏实践应用能力，需针对性分层教学。重难点分析重点核心功能定位：掌握导航栏作为信息枢纽的作用，明确底部、顶部、侧边栏、标签页等常见类型的适用场景，适配不同APP的功能架构与用户操作习惯。难点多场景适配设计：针对移动端、平板端等不同设备，以及电商、资讯、工具类不同产品，灵活调整导航形式，平衡视觉美观与功能实用性。信息化应用方法讲师课堂教学要以PPT讲授为主，并结合多媒体进行教学思政元素融合设计思政元素融入方式培养学生的创新精神通过图形设计案例的讲解，树立学生的创新精神作业布置完成马尾船政项目原型图设计参考资料《UI设计项目式教程》卓书芳、钟月云，大连理工大学出版社教学过程教学环节教学内容教师活动学生活动设计意图（含教学目的、信息化手段、思政融入情况、创新创业意识教育等）1.课前预习/5分钟预先完成课程中相关的课程案例预先准备本节课程项目可以投报的比赛预先准备相关知识点的拓展练习利用网络平台发布预习任务1.开展课前预习，观看布置的微课、视频及案例等；2.收集课题资料；课前让学生复习相关教学内容，提高课堂教学效率，让学生更好的理解授课内容2.课程导入/10UI设计的重难点教师通图片和相应视频及动画展示图形设计案例，提出问题：UI设计的重难点？如何在设计过程中避免？培养学生独立思考和分析问题的能力。3.了解界面分类/65分钟对标签导航、舵式导航、宫格式导航、陈列式导航、列表式导航进行分析。标签导航大多数APP会选择选项卡式的导航，也叫标签导航，方便用户在不同分页里频繁切换舵式舵式导航是标签卡式导航的一种变体，如图所示。中间的标签作为重要且操作频繁的入口，一般都用图形或颜色凸显出来。这类导航的优点是重要且操作频繁的入口很显眼，较大限度地引导用户进行操作宫格式导航官格式导航的特征是登录界面中的菜单选项就是进入各个应用的起点，如图所示。这类导航的优点是清晰展现各入口，用户容易记住各入口的位置，方便快速查找。陈列式导航陈列式导航是通过直接在界面上显示各个内容项来实现导航的，如图所示主要用于展示文章、菜谱、照片和产品等。这类导航的优点是直观地展现各项内容，能够方便地浏览经常更新的内容列表式导航通常用于二级页面，不会默认展示任何实质内容，所以通常APP不会在首页使用它。这种导航结构清晰、易于理解抽屉式导航抽屉式导航也叫侧滑导航，如图所示抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让用户更专注于核心的功能操作瀑布式导航适合在一屏中向用户展示大量的信息，如图所示。以卡片形式分割，信息展现比较聚焦瀑布式导航的优点是浏览时可感受到流畅体验。缺点是整体内容缺乏体积感，容易发生空间位置迷失的问题，浏览一段时间后容易产生疲劳感。活动中，学生需结合案例逐一拆解五种导航形式：标签导航清晰直观，适配核心功能少、切换频繁的APP；舵式导航突出核心操作，适合工具类、社交类首页；宫格式导航信息分区明确，利于展示多元功能模块；陈列式导航视觉连贯，适配资讯、电商类内容流展示；列表式导航层级清晰，适合功能繁杂、需深度检索的场景。学生需对照不同导航的优劣势，结合课堂案例分析适配逻辑，规范图标、色彩与交互设计，避免导航混乱、层级不清。操作中分组讨论、互评方案，总结各类导航的使用边界，最终形成清晰的设计思路，为后续原型制作奠定基础。通过学习和实践各种图形设计技术和工具，学生将能够发展出独特的创造力，并能够将其应用于解决实际设计问题中。课堂小结/10总结对标签导航、舵式导航、宫格式导航、陈列式导航、列表式导航本次课程围绕标签导航、舵式导航、宫格式导航、陈列式导航、列表式导航五大类型展开教学，系统梳理各类导航的设计特点、视觉表现、适用场景与优劣势。标签导航操作便捷，适配核心功能切换；舵式导航突出核心操作，适合工具类首页；宫格式导航分类清晰，便于多元功能展示；陈列式导航适配资讯、电商类流内容，视觉连贯；列表式导航层级明确，适配复杂功能检索。学生通过案例分析、实