《UI设计项目式教程》教案12 原型图设计流程

《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等移动终端产品，