AxureRP原型设计案例教程课标教案_第1页
AxureRP原型设计案例教程课标教案_第2页
AxureRP原型设计案例教程课标教案_第3页
AxureRP原型设计案例教程课标教案_第4页
AxureRP原型设计案例教程课标教案_第5页
已阅读5页,还剩45页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

《AxureRP原型设计案例教程》课程标准【课程名称】AxureRP原型设计案例教程【课程编码】【课程类别】基础必修课【适用专业】计算机、艺术设计等相关专业【授课单位】 【总学时】72【教材】赵云鹏 张传师 马华丽主编上海交通大学出版社,2025年4月【编写执笔人】 【编写日期】1.课程定位和课程设计1.1课程性质本课程是计算机、艺术设计等相关专业的一门基础必修课,其功能在于向学生介绍使用AxureRP创建快速原型的方法,培养学生轻松创建应用软件或Web网站的线框图、流程图、原型和规格说明文档的能力。通过本课程的学习,使学生熟悉AxureRP的工作环境,重点掌握线框图和流程图的创建方法,简单链接和高级交互,多人协助和版本管理等技术,从而能够进行高效的原型设计,为将来从事APP软件开发、用户体验设计、交互设计、界面设计等相关工作莫定基础。1.2课程设计思路在教学内容的选择上,贯彻“技能培养为主,知识够用为度”的教学思想,以学生为主体,注重学生实际操作能力与应用能力的培养。根据原型设计的工作流程,按项目构筑课程教学内容,通过项目引领和任务驱动,并配以案例分析进行教学,着重培养学生的实践应用技能。2.课程目标2.1学习目标了解原型和原型设计。熟悉原型设计的流程。了解原型设计的常用工具和尺寸规范。掌握AxureRP的下载、安装和汉化方法。熟悉AxureRP的工作界面。掌握在AxureRP中新建、打开、保存和备份文件的方法。掌握页面的基本操作,以及设置页面属性的方法。掌握设置自适应视图的方法。了解使用标尺、参考线和网格的方法。了解使用AxureRP进行团队协作的方法。能够使用AxureRP绘制架构图。熟悉“元件库”面板。掌握元件基本管理操作。掌握元件编辑操作。掌握元件运算操作。熟悉AxureRP提供的常用元件、流程元件、图标元件的功能和使用方法。掌握导入外部元件的方法。掌握自定义元件的方法。能够使用AxureRP大致勾勒页面线框图。掌握设置元件属性,以及应用和管理元件样式的方法。理解母版的作用。掌握新建、删除、编辑和应用母版的方法。能够通过设置元件属性绘制满足实际需求的页面线框图。能够使用元件样式和母版快速绘制页面线框图。掌握使用标记元件和“说明”面板标注原型的方法。掌握预览原型的方法。掌握输出原型的方法。能够使用AxureRP绘制线框流程图。能够制作简单的原型说明文档。了解AxureRP中交互的基础知识。掌握实现页面交互的方法。掌握实现元件交互的方法。能够根据需要为元件添加交互样式。能够使用AxureRP制作简单的可交互原型。掌握动态面板的创建方法。掌握动态面板状态的管理方法。熟悉动态面板状态的属性设置。熟悉动态面板的特殊属性与特定交互。能够使用AxureRP制作常见的交互效果。了解变量的概念和类型。掌握全局变量、局部变量和系统变量的使用方法。掌握添加条件和使用条件逻辑的方法。掌握表达式、运算符的使用方法。了解函数的类型和主要函数的作用,掌握函数的调用方法。能够使用AxureRP制作复杂的交互原型。了解中继器的概念及组成。熟悉中继器的属性、特定交互和系统变量的作用。掌握创建中继器,以及编辑和显示数据的方法。掌握使用中继器实现动态添加、动态删除、更新、标记、排序、筛选和分页显示行的方法。能够使用AxureRP制作数据列表的动态交互效果。熟悉原型设计的基本流程。掌握从零开始进行原型设计的基本方法。能够根据前期规划使用AxureRP制作移动应用原型。2.2素质目标夯实基础,助力个人的长远发展。学会思考和规划未来的职业发展方向,树立正确的人生目标。加强实践练习,提升专业技能。坚持求真务实的工作作风和严谨认真的工作态度。学会复用现有资源,提高资源利用能力,减少重复劳动。培养逻辑思维能力和项目管理能力,增强规范化设计意识。培养系统思维,增强书面表达能力,学会用简洁明了的语言表达交互逻辑和设计思路。坚持以用户为中心的设计理念,关注用户体验和细节表现,培养观察力和责任感。培养用户体验设计思维,优化交互流程,提升用户体验。发挥想象力和创造力,积极探索新颖的交互方式和视觉风格。提升分析与推理能力,简化用户操作流程,打造人性化的交互设计。关注最新设计趋势,增强技术应用能力,提升交互设计的现代感。坚定克服复杂交互设计难题的信心和决心,通过反复实践提升自己解决实际问题和应对挑战的能力。全面考虑用户在不同场景下的需求变化,努力制作出实用性强、响应迅速且具有前瞻性的交互原型。培养全局思维与数据结构设计能力,合理统筹规划信息展示方式。增强逻辑分析与动态数据管理能力,提高数据处理的灵活性和准确性。增强大局意识,注重实践应用,持续提升制作实际项目的能力。培养系统的产品设计思维,深入理解原型设计师的工作职责与价值。3.课程内容和课时安排本课程共分为九个部分,分别为原型设计基础、元件和元件库、元件样式和母版、标注、预览和输出原型、基础交互、使用动态面板实现交互、使用变量、条件和函数实现交互、使用中继器实现交互和音乐类App原型设计。本课程具体的课程内容和课时分配如表1所示。表1《老年人基础护理实务》课程内容及课时分配表所用教材课程内容学时AxureRP原型设计案例教程项目一原型设计基础任务一了解原型设计基础知识1872任务二初识AxureRP1任务三掌握AxureRP基本操作2项目二元件和元件库任务一熟悉元件库和元件操作28任务二熟悉和使用各种元件2项目三元件样式和母版任务一设置元件样式28任务二使用母版2项目四标注、预览和输出原型任务一标注原型28任务二预览和输出原型2项目五基础交互任务一实现页面交互28任务二实现元件交互2项目六使用动态面板实现交互任务一认识动态面板28任务二使用动态面板的特殊属性与特定交互2项目七使用变量、条件和函数实现交互任务一使用变量和条件28任务二使用表达式和函数2项目八使用中继器实现交互任务一认识中继器28任务二使用中继器实现数据列表的动态交互2项目九音乐类App原型设计任务一进行前期规划28任务二设计产品原型24.课程实施4.1教学条件我校十分注重建设和完善本课程的教学设施,如多媒体教室、网络教学平台、网络数据库等。同时,我校有一支强大的师资队伍,可以为本课程的教学和课程建设提供有力保障。在网络资源方面,我校选择与文旌课堂建立课程合作,可有效利用文旌课堂的文旌教学管理平台实施“线上+线下”的混合教学模式,可以帮助教师进行教学,促进学生高效学习。4.2教学方法建议本课程遵循“教师引导,学生为主”的原则,采用讲解、多媒体演示、翻转课堂、讨论等多种方法,努力为学生创设更多知识应用的机会。(1)讲解法:主要用于讲授本课程的基础知识等理论性较强的知识。(2)多媒体演示法:在讲解过程中,借助音频、视频、图片等直观手段来呈现教学内容,在激发其学习兴趣和积极性的同时,不断提高其知识储备能力和综合文化素质。(3)翻转课堂法:坚持学生的主体地位,鼓励学生在课上对自己学到的知识点进行分享和讲解,并对其讲解进行补充和评价,不断完善学生的知识结构,加深其对所学知识的理解。(4)讨论法:鼓励学生运用所学知识进行主题讨论,使其在讨论中逐步提升思辨能力、欣赏能力等。教师在教学过程中,可根据学生的实际情况灵活选用教学方法,因材施教,尽量照顾到每一个学生的学习需求。4.3教学评价与考核要求本课程考核体现多元评价方法,重视教学过程评价,突出阶段评价、目标评价、理论与实践一体化评价等。考核成绩包括形成性测评(50%)和终结性测评(50%)。形成性测评占50%,其中1.考勤(10%):本项考核通过课前点名考核学生的课堂出勤率。迟到15分钟以内每次扣1分,迟到15分钟以上或无故缺勤一节课每次扣2分,无故缺勤5次及以上者,取消本课程成绩。2.课程参与度(20%):本项考核主要通过线上课程参与度、线下课堂提问和课堂积极发言来评判学生的学习态度、学习主动性、课堂参与程度,以及学生的思辨能力、问题解决能力及其对课堂教学知识的掌握情况等。只要学生能按时参加线上和线下听讲,即可获得10分的基本分。学生上课发言一次或线上讨论区有效发言(与话题相关)一次,即可另外获得0.5分,课堂和讨论区发言最多可得10分。学生的最后成绩为“10+发言得分”。3.作业情况(20%):本项考核主要通过学生作业来检测其对教学主体内容的掌握与理解程度、实际应用知识的能力、自主学习能力、信息收集与处理能力等。每次作业成绩按照相应标准而定,学生作业质量划分为优秀(10分)、良好(8分)、中等(7分)、及格(6分)和不及格(0分)五个档次。最后的作业成绩为学生作业完成质量成绩的平均数。终结性测评占50%。主要考核学生在学完本课程后所达到的水平,通过期末考试进行考核。期末考试为线上考核(20%)+线下大作业形式(30%)形式,主要评估学生对本门课程基本知识的掌握情况与综合运用能力。5.课程资源开发与利用5.1推荐使用教材5.2数字化资源《AxureRP原型设计案例教程》教案课时分配表章序课程内容理论课时实践课时1原型设计基础622元件和元件库443元件样式和母版444标注、预览和输出原型445基础交互446使用动态面板实现交互447使用变量、条件和函数实现交互448使用中继器实现交互449音乐类App原型设计44合计72

课题原型设计基础课时6课时(270min)教学目标学习目标:了解原型和原型设计熟悉原型设计的流程了解原型设计的常用工具和尺寸规范掌握AxureRP的下载、安装和汉化方法熟悉AxureRP的工作界面掌握在AxureRP中新建、打开、保存和备份文件的方法掌握页面的基本操作,以及设置页面属性的方法掌握设置自适应视图的方法了解使用标尺、参考线和网格的方法了解使用AxureRP进行团队协作的方法能够使用AxureRP绘制架构图素质目标:(1)夯实基础,助力个人的长远发展(2)学会思考和规划未来的职业发展方向,树立正确的人生目标教学重难点教学重点:原型和原型设计,原型设计的流程,原型设计的常用工具和尺寸规范,AxureRP的工作界面,使用标尺、参考线和网格的方法,使用AxureRP进行团队协作的方法教学难点:AxureRP的下载、安装和汉化方法,在AxureRP中新建、打开、保存和备份文件的方法,页面的基本操作,以及设置页面属性的方法,设置自适应视图的方法,使用AxureRP绘制架构图教学方法问答法、讨论法、讲授法、演示法教学用具电脑、投影仪、多媒体课件、教材考勤【教师】清点上课人数,记录好考勤【学生】班干部报请假人员及原因新课预热【教师】自我介绍,与学生简单互动,介绍课程内容、考核标准等【学生】聆听、互动【教师】介绍AxureRP原型设计案例教程教材,使学生了解学习本课程的重要性【学生】聆听、记录、理解任务一了解原型设计基础知识任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“原型设计需要注意的问题”视频,讨论并回答下列问题:问题1:设计原型时需要注意哪些问题?问题2:你见过哪些优秀的原型设计?【学生】聆听、思考、讨论、回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解原型及原型设计概述,原型设计流程,原型设计常用工具,原型尺寸规范等知识一、原型及原型设计概述1.原型(1)低保真原型(2)高保真原型2.原型设计二、原型设计流程1.需求分析(1)用户需求(2)产品需求(3)设计目标2.竞品分析3.业务流程设计4.产品架构设计5.低保真原型设计6.评审7.高保真原型设计8.可行性测试9.完善10.编写原型说明文档(1)封面(2)项目背景和设计思路(3)原型图三、原型设计常用工具(1)AxureRP(2)AdobeXD(3)Sketch(4)摹客RP四、原型尺寸规范1.移动端原型尺寸规范2.PC端原型尺寸规范【教师】提出以下问题:你知道矢量图形设计软件和位图图像设计软件都采用哪种分辨率设计原型吗?【学生】聆听、思考、回答【教师】总结学生的回答一般来说,矢量图形设计软件会基于移动设备的逻辑分辨率设计原型;而对于位图图像设计软件而言,由于其画面质量与像素相关,为了使原型图显示清晰,会基于移动设备的物理分辨率设计原型。【学生】聆听、理解、记录课堂实践【教师】利用多媒体展示网站了解原型设计的相关岗位及岗位职责,讲解并演示具体步骤,然后要求学生进行操作步骤1打开BOSS直聘网站()。步骤2在页面顶部的搜索框中输入关键字“原型设计”并按“Enter”键进行搜索,此时页面中会展示多条有关原型设计的招聘信息……(详见教材)【学生】聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点原型及原型设计概述原型设计流程原型设计常用工具原型尺寸规范【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务任务二初识AxureRP任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“使用AxureRP设计原型的优势”视频,讨论并回答下列问题:问题1:为什么选择使用AxureRP设计原型?问题2:你还知道哪些较为优秀的国产原型设计软件?它们分别具有哪些优势?【学生】聆听、思考、举手回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解下载并安装AxureRP和熟悉AxureRP工作界面一、下载并安装AxureRP二、熟悉AxureRP工作界面(1)菜单栏(2)工具栏(3)画布(4)“页面”面板(5)“概要”面板(6)“元件库”面板(7)“母版”面板(8)“样式”面板(9)“交互”面板(10)“说明”面板【学生】聆听、记录、理解课堂实践【教师】在AxureRP中,用户可以根据个人习惯和工作需要自定义工作界面,以方便使用,播放“自定义AxureRP工作界面”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1启动AxureRP步骤2选择“视图”/“功能区”菜单中的选项……(详见教材)【学生】观看、聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点下载并安装AxureRP熟悉AxureRP工作界面【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务任务三掌握AxureRP基本操作任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“AxureRP中常用的文件格式”视频,讨论并回答下列问题:问题1:AxureRP中有哪些常用的文件格式?问题2:这些文件格式分别有什么作用?【学生】聆听、思考、举手回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解文件基本操作,页面基本操作,设置页面属性,设置自适应视图,使用标尺、参考线和网格,团队协作一、文件基本操作1.新建和打开文件2.保存文件3.备份文件二、页面基本操作1.打开页面2.添加页面3.删除页面4.重命名页面5.组织页面6.管理打开的页面三、设置页面属性1.页面尺寸2.页面排列3.页面填充4.页面样式四、设置自适应视图五、使用标尺、参考线和网格1.标尺2.参考线(1)创建参考线(2)移动和选中参考线(3)显示或隐藏参考线(4)删除参考线(5)锁定参考线(6)对齐参考线3.网格六、团队协作1.新建团队项目文件2.保存和打开团队项目文件3.加入团队项目4.编辑团队项目文件【教师】提出以下问题:你知道如何将团队项目文件导出为“.rp”文件吗?【学生】聆听、思考、回答【教师】总结学生的回答当打开的文件为团队项目文件时,选择“文件”/“导出团队项目到文件”选项,在打开的对话框中设置相关参数后单击“保存”按钮,可将团队项目文件导出为“.rp”文件。【学生】聆听、记录、理解课堂实践【教师】利用多媒体展示“商城类App”,播放“绘制商城类App架构图”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1启动AxureRP步骤2在文件夹上右击,在弹出的快捷菜单中选择“添加”/“子页面”选项,添加一个子页面,输入“注册登录页”并按“Enter”键重命名页面……(详见教材)【学生】观看、聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点文件基本操作页面基本操作设置页面属性设置自适应视图使用标尺、参考线和网格团队协作【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务教学反思

课题项目二元件和元件库课时4课时(180min)教学目标学习目标:熟悉“元件库”面板掌握元件基本管理操作掌握元件编辑操作掌握元件运算操作熟悉AxureRP提供的常用元件、流程元件、图标元件的功能和使用方法掌握导入外部元件的方法掌握自定义元件的方法能够使用AxureRP大致勾勒页面线框图素质目标:加强实践练习,提升专业技能。坚持求真务实的工作作风和严谨认真的工作态度。教学重难点教学重点:“元件库”面板,元件运算操作,AxureRP的工作界面,AxureRP提供的常用元件、流程元件、图标元件的功能和使用方法教学难点:元件基本管理操作,元件编辑操作,导入外部元件的方法,自定义元件的方法,使用AxureRP大致勾勒页面线框图教学方法问答法、讨论法、讲授法、演示法教学用具电脑、投影仪、多媒体课件、教材考勤【教师】清点上课人数,记录好考勤【学生】班干部报请假人员及原因任务一了解原型设计基础知识任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“图标设计注意事项”视频,讨论并回答下列问题:问题1:图标是什么?优秀图标有哪些积极作用?问题2:设计图标有哪些注意事项?【学生】聆听、思考、讨论、回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解“元件库”面板,元件基本管理,元件编辑,元件运算一、“元件库”面板二、元件基本管理(1)添加元件(2)选择元件(3)重命名元件(4)删除元件(5)复制元件(6)锁定元件(7)移动元件(8)组合元件(9)排序元件(10)隐藏元件(11)对齐和分布元件三、元件编辑1.调整元件尺寸2.改变元件形状3.编辑元件锚点四、元件运算1.合并2.去除3.相交4.排除5.结合6.分开【教师】提出以下问题:原件的基本编辑方法是否适用于所有原件?【学生】聆听、思考、回答【教师】总结学生的回答不同类型的元件有不同的功能,元件的基本编辑方法并不适用于所有元件。【学生】聆听、理解、记录课堂实践【教师】利用多媒体展示“优选超市”图标,播放“绘制“优选超市”图标”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1启动AxureRP步骤2按住“Ctrl”键的同时向上拖动矩形以复制矩形,并设置复制矩形的尺寸为42×9。……(详见教材)【学生】聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点“元件库”面板元件基本管理元件编辑元件运算【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务任务二熟悉和使用各种元件任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“App页面的组成”视频,讨论并回答下列问题:问题1:App页面主要由哪些部分组成?问题2:App页面各组成部分的尺寸一般是多少?【学生】聆听、思考、举手回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解常用元件,流程元件,图标元件,导入外部元件和自定义元件一、常用元件1.基本元件(1)形状元件(2)图片元件(3)文本元件(4)按钮和线段元件(5)热区元件2.表单元件(1)文本框和文本域元件(2)下拉列表元件(3)列表框元件(4)复选框元件(5)单选按钮元件3.菜单|表格元件(1)树元件(2)表格元件(3)水平菜单和垂直菜单元件4.标记元件二、流程元件三、图标元件四、导入外部元件五、自定义元件1.新建和保存元件库文件2.绘制元件【教师】提出以下问题:如果想要测试元件的交互效果,你知道该如何操作吗?【学生】聆听、思考、回答【教师】总结学生的回答在画布上只可以查看元件的视觉效果,要想测试元件的交互效果,可单击工作界面右上方的“预览”按钮,在浏览器窗口中进行预览。【学生】聆听、记录、理解课堂实践【教师】利用多媒体播放“绘制商城类App状态栏”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1绘制状态栏背景。步骤2绘制时间标签。……(详见教材)【学生】观看、聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点常用元件流程元件图标元件导入外部元件和自定义元件【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务教学反思

课题项目三元件样式和母版课时4课时(180min)教学目标学习目标:掌握设置元件属性,以及应用和管理元件样式的方法理解母版的作用掌握新建、删除、编辑和应用母版的方法能够通过设置元件属性绘制满足实际需求的页面线框图能够使用元件样式和母版快速绘制页面线框图素质目标:学会复用现有资源,提高资源利用能力,减少重复劳动培养逻辑思维能力和项目管理能力,增强规范化设计意识教学重难点教学重点:设置元件属性,以及应用和管理元件样式的方法,母版的作用,新建、删除、编辑和应用母版的方法教学难点:通过设置元件属性绘制满足实际需求的页面线框图,使用元件样式和母版快速绘制页面线框图使用元件样式和母版快速绘制页面线框图教学方法问答法、讨论法、讲授法、演示法教学用具电脑、投影仪、多媒体课件、教材考勤【教师】清点上课人数,记录好考勤【学生】班干部报请假人员及原因任务一设置元件样式任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“App页面内容区域的常见版块”视频,讨论并回答下列问题:问题1:App页面内容区域的常见版块有哪些?问题2:这些版块分别有什么作用?【学生】聆听、思考、讨论、回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解设置元件属性,应用和管理元件样式5794一、设置元件属性285651.位置、角度和尺寸69172.不透明度【教师】提出以下问题:你知道如何让文本的角度恢复原始角度,且如何快速执行相应的元件运算功能吗?【学生】聆听、思考、回答【教师】总结学生的回答设置元件角度会影响元件中文本的角度,此时右击元件,在弹出的快捷菜单中选择“变换形状”/“重置文本到0°”选项,可使文本恢复原始角度。当选中多个元件时,在“位置和尺寸”区域下方会显示元件运算按钮,单击这些按钮可快速执行相应的元件运算功能。【学生】聆听、理解、记录28973.文本格式251584.填充99255.边框313276.阴影257887.圆角237678.边距23265二、应用和管理元件样式189181.更新和快速添加元件样式114832.应用元件样式290893.管理元件样式课堂实践【教师】利用多媒体播放“绘制商城类App首页线框图”图标”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1打开在项目二的任务二中制作的“商城类App标签栏.rp”文件,并打开“首页”页面。步骤2将矩形2元件拖到画布上,设置其尺寸与页面相同,并与页面完全重合。……(详见教材)【学生】聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点设置元件属性应用和管理元件样式【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务任务二使用母版任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“App的基本页面”视频,讨论并回答下列问题:问题1:标注原型是什么?它有哪些方法?问题2:不同的标注原型的方法有什么优缺点?【学生】聆听、思考、举手回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解认识母版,新建、删除和编辑母版,应用母版一、认识母版【教师】提出以下问题:你还知道哪些在母版面板中的操作吗?【学生】聆听、思考、回答【教师】总结学生的回答在“母版”面板中可以重命名、排序和搜索母版,还可以新建和管理母版文件夹,其操作方法与页面基本相同。二、新建、删除和编辑母版1.新建和删除母版(1)将现有元件转换为母版(2)新建母版2.编辑母版三、应用母版1.将母版添加到页面中2.从页面中移除母版3.母版的拖放设置【学生】聆听、记录、理解课堂实践【教师】利用多媒体播放“绘制商城类App状态栏”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1绘制状态栏背景。步骤2绘制时间标签。……(详见教材)【学生】观看、聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点认识母版新建、删除和编辑母版应用母版【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务教学反思

课题项目四标注、预览和输出原型课时4课时(180min)教学目标学习目标:掌握使用标记元件和“说明”面板标注原型的方法掌握预览原型的方法掌握输出原型的方法能够使用AxureRP绘制线框流程图能够制作简单的原型说明文档素质目标:培养系统思维,增强书面表达能力,学会用简洁明了的语言表达交互逻辑和设计思路坚持以用户为中心的设计理念,关注用户体验和细节表现,培养观察力和责任感教学重难点教学重点:使用标记元件和“说明”面板标注原型的方法,预览原型的方法,输出原型的方法教学难点:使用AxureRP绘制线框流程图,制作简单的原型说明文档教学方法问答法、讨论法、讲授法、演示法教学用具电脑、投影仪、多媒体课件、教材考勤【教师】清点上课人数,记录好考勤【学生】班干部报请假人员及原因任务一标注原型任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“标注原型的概念和方法”视频,讨论并回答下列问题:问题1:标注原型是什么?标注原型的常用方法有哪些?问题2:标注原型的常用方法各自有什么优缺点?【学生】聆听、思考、讨论、回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解使用标记元件,使用“说明”面板17841一、使用标记元件(1)快照元件(2)箭头元件(3)便签元件(4)标记元件6517二、使用“说明”面板196381.为页面添加注释110032.为元件添加注释(1)为所选元件添加注释(2)为注释分配元件238103.集中管理注释字段【学生】聆听、理解、记录课堂实践【教师】利用多媒体播放“绘制商城类App线框流程图”图标”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1打开本书配套素材“素材与实例”/“项目四”/“任务一”文件夹中的“商城类App页面线框图.rp”文件。步骤2在“样式”面板中设置新建页面的填充颜色为较浅的灰色(#F4F6F8)。……(详见教材)【学生】聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点使用标记元件使用“说明”面板【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务任务二预览和输出原型任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“原型说明文档的编写原则”视频,讨论并回答下列问题:问题1:编写原型说明文档需要遵循哪些原则?问题2:你见过哪些优秀的原型说明文档?【学生】聆听、思考、举手回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解5383预览原型,6117将原型导出为图片,28219通过链接查看原型,2388将原型生成为HTML文件,27884将原型生成为Word文档5383一、预览原型6117二、将原型导出为图片28219三、通过链接查看原型2388四、将原型生成为HTML文件27884五、将原型生成为Word文档【教师】提出以下问题:你知道如何添加和设置元件表吗?【学生】聆听、思考、回答【教师】总结学生的回答元件表以表格的形式显示原型中元件(须有名称或注释)的名称、注释和交互等信息。默认情况下,AxureRP生成的Word文档只包含一个元件表。用户可根据需要在“生成说明书”对话框的“Widgets”选项卡中添加和设置元件表。【学生】聆听、记录、理解课堂实践【教师】利用多媒体播放“制作商城类App原型说明文档”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1绘制状态栏背景。步骤2绘制时间标签。……(详见教材)【学生】观看、聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点预览原型将原型导出为图片通过链接查看原型将原型生成为HTML文件将原型生成为Word文档【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务教学反思

课题项目五基础交互课时4课时(180min)教学目标学习目标:了解AxureRP中交互的基础知识掌握实现页面交互的方法掌握实现元件交互的方法能够根据需要为元件添加交互样式能够使用AxureRP制作简单的可交互原型素质目标:培养用户体验设计思维,优化交互流程,提升用户体验发挥想象力和创造力,积极探索新颖的交互方式和视觉风格教学重难点教学重点:AxureRP中交互的基础知识,实现页面交互的方法,实现元件交互的方法教学难点:根据需要为元件添加交互样式,使用AxureRP制作简单的可交互原型教学方法问答法、讨论法、讲授法、演示法教学用具电脑、投影仪、多媒体课件、教材考勤【教师】清点上课人数,记录好考勤【学生】班干部报请假人员及原因任务一标注原型任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“高效实用的交互设计策略”视频,讨论并回答下列问题:问题1:进行交互设计时,设计师一般需要关注哪些方面?问题2:除了这些,你认为还有哪些问题值得关注?【学生】聆听、思考、讨论、回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解AxureRP中的交互,页面交互概述4150一、AxureRP中的交互(1)事件(2)动作(3)情形【教师】提出以下问题:你知道如何启用情形和添加多个情形吗?【学生】聆听、思考、回答【教师】总结学生的回答默认情况下,情形处于隐藏状态。要启用情形,可在添加页面或元件事件后,单击事件名称右侧的“启用情形”按钮,在打开的“情形编辑”对话框中设置情形名称,并单击“确定”按钮。要添加多个情形,可在启用情形后,单击事件名称右侧的“添加情形”按钮。此外,用户也可通过右击事件名称,在弹出的快捷菜单中选择“添加情形”选项来启用或添加情形。2404二、页面交互概述136931.添加页面交互45362.页面交互事件95073.页面交互动作218861)打开链接71132)框架中打开链接(1)使用内联框架元件(2)使用“框架中打开链接”动作156853)滚动到元件195634)关闭窗口【教师】提出以下问题:你知道如何使用“打开链接”动作打开外部文件吗?【学生】聆听、思考、回答【教师】总结学生的回答要使用“打开链接”动作打开外部文件,可首先在“链接到”下拉列表中选择“链接到URL或文件路径”选项,然后在下方编辑框中输入网址或本地文件的文件名称(包括文件后缀名)。URL即统一资源定位器,是用于描述互联网中资源(包括HTML页面、文档和图像等)地址的字符串,通常表现为网址。每个有效的URL都指向一个唯一的资源。打开本地文件的交互效果无法通过预览功能查看,需要先将原型生成为HTML文件,并使要打开的文件与生成的HTML文件位于同一文件夹中。此外,“打开链接”动作不支持打开PNG格式的文件和Office文档等。【学生】聆听、理解、记录课堂实践【教师】利用多媒体播放“制作弹出与关闭窗口交互效果”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1打开本书配套素材“素材与实例”/“项目五”/“任务一”文件夹中的“人间烟火网站首屏.rp”文件,并打开“网站首页”页面。步骤2确保未选中任何元件,单击“交互”面板中的“新建交互”按钮……(详见教材)【学生】聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点AxureRP中的交互页面交互概述【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务任务二实现元件交互任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“尼尔森十大原则”视频,讨论并回答下列问题:问题1:尼尔森十大原则有何重要意义?问题2:尼尔森十大原则具体包括哪些内容?【学生】聆听、思考、举手回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解元件交互概述,元件交互样式17156一、元件交互概述185301.添加元件交互287872.元件交互事件159813.元件交互动作(1)灯箱效果(2)弹出效果(3)推动元件【教师】提出以下问题:你知道如何为当前动作添加目标元件吗?【学生】聆听、思考、回答【教师】总结学生的回答为元件添加动作后,将鼠标指针移到动作名称上,动作名称右侧会显示“添加目标”按钮,单击该按钮,可为当前动作添加目标元件。30187二、元件交互样式203201.为元件添加交互样式221812.元件交互样式的类型(1)鼠标悬停(2)鼠标按下(3)选中(4)禁用(5)获取焦点(6)提示【教师】提出以下问题:你知道如何为文本框或文本域元件添加提示文本吗?【学生】聆听、思考、回答【教师】总结学生的回答文本框和文本域元件的提示文本会显示在元件内,当用户与此类元件交互时,提示文本消失。选中文本框或文本域元件后,单击“交互”面板右上角的按钮,在打开的“特殊属性”面板的“提示文本”编辑框中输入文本,可为文本框或文本域元件添加提示文本(提示文本也会显示在画布上)。【学生】聆听、记录、理解课堂实践【教师】利用多媒体播放“制作注册登录页的交互效果”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1打开本书配套素材“素材与实例”/“项目五”/“任务二”文件夹中的“商城类App注册登录页.rp”文件,并打开“注册登录页”页面。步骤2选中用户名输入框……(详见教材)【学生】观看、聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点元件交互概述元件交互样式【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务教学反思

课题项目六使用动态面板实现交互课时4课时(180min)教学目标学习目标:掌握动态面板的创建方法掌握动态面板状态的管理方法熟悉动态面板状态的属性设置熟悉动态面板的特殊属性与特定交互能够使用AxureRP制作常见的交互效果素质目标:提升分析与推理能力,简化用户操作流程,打造人性化的交互设计关注最新设计趋势,增强技术应用能力,提升交互设计的现代感教学重难点教学重点:动态面板的创建方法,动态面板状态的管理方法,动态面板状态的属性设置,动态面板的特殊属性与特定交互教学难点:使用AxureRP制作常见的交互效果教学方法问答法、讨论法、讲授法、演示法教学用具电脑、投影仪、多媒体课件、教材考勤【教师】清点上课人数,记录好考勤【学生】班干部报请假人员及原因任务一认识动态面板任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“弹窗的类型”视频,讨论并回答下列问题:问题1:弹窗的主要功能有哪些?问题2:弹窗通常分为哪些类型?它们之间有什么区别?【学生】聆听、思考、讨论、回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解23241创建动态面板,19728管理动态面板状态,22249设置动态面板状态属性23241一、创建动态面板(1)直接创建动态面板(2)使用现有元件创建动态面板19728二、管理动态面板状态(1)打开状态(2)添加与重命名状态(3)复制和删除状态(4)排序状态22249三、设置动态面板状态属性(1)填充(2)边框和圆角(3)外阴影【学生】聆听、理解、记录课堂实践【教师】利用多媒体播放“制作弹出与关闭确认框交互效果”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1打开本书配套素材“素材与实例”/“项目六”/“任务一”文件夹中的“商城类App购物车页面.rp”文件。步骤2使用矩形1、文本标签和按钮元件在页面中心位置绘制确认框……(详见教材)【学生】聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点23241创建动态面板19728管理动态面板状态22249设置动态面板状态属性【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务任务二使用动态面板的特殊属性与特定交互任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“Banner轮播图设计要点”视频,讨论并回答下列问题:问题1:设计Banner轮播图时需要注意哪些方面?问题2:你见过哪些优秀的Banner轮播图设计?【学生】聆听、思考、举手回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解自适应内容,100%宽度,固定到浏览器,滚动,轮播,拖动30015一、自适应内容688二、100%宽度19409三、固定到浏览器5573四、滚动6864五、轮播(1)“STATE”下拉列表(2)“进入动画”和“退出动画”区域(3)“循环间隔……毫秒”复选框(4)“如果隐藏则显示”复选框(5)“推动和拉动元件”复选框10793六、拖动【教师】提出以下问题:你还知道哪些动态面板的专属事件吗?【学生】聆听、思考、回答【教师】总结学生的回答“事件”列表会根据当前所选元件的类型显示不同事件。其中,除“Drag时”(拖动时)事件外,动态面板的专属事件还包括拖动开始时、拖动结束时、向左滑动时、向右滑动时、向上滑动时、向下滑动时、滚动时、向上滚动时、向下滚动时等。【学生】聆听、记录、理解课堂实践【教师】利用多媒体播放“制作Banner轮播图”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1打开本书配套素材“素材与实例”/“项目六”/“任务二”文件夹中的“Banner轮播图素材.rp”文件。步骤2选中Banner,按“Ctrl+Shift+Alt+D”组合键,将Banner转换为动态面板,并将其重命名为“Banner”。……(详见教材)【学生】观看、聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点自适应内容100%宽度固定到浏览器滚动轮播拖动【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务教学反思

课题项目七使用变量、条件和函数实现交互课时4课时(180min)教学目标学习目标:了解变量的概念和类型掌握全局变量、局部变量和系统变量的使用方法掌握添加条件和使用条件逻辑的方法掌握表达式、运算符的使用方法了解函数的类型和主要函数的作用,掌握函数的调用方法能够使用AxureRP制作复杂的交互原型素质目标:坚定克服复杂交互设计难题的信心和决心,通过反复实践提升自己解决实际问题和应对挑战的能力全面考虑用户在不同场景下的需求变化,努力制作出实用性强、响应迅速且具有前瞻性的交互原型教学重难点教学重点:变量的概念和类,函数的类型和主要函数的作用,全局变量、局部变量和系统变量的使用方法,添加条件和使用条件逻辑的方法,表达式、运算符的使用方法,函数的调用方法教学难点:使用AxureRP制作复杂的交互原型教学方法问答法、讨论法、讲授法、演示法教学用具电脑、投影仪、多媒体课件、教材考勤【教师】清点上课人数,记录好考勤【学生】班干部报请假人员及原因任务一使用变量和条件任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“设计注册登录页需要注意的问题”视频,讨论并回答下列问题:问题1:在设计注册登录页时,设计师需要注意哪些问题?问题2:除了这些,你认为还需关注哪些问题?【学生】聆听、思考、讨论、回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解认识变量,使用全局变量,使用局部变量,使用系统变量,使用条件4641一、认识变量(1)全局变量(2)局部变量10963二、使用全局变量157741.选择、添加与设置全局变量【教师】提出以下问题:你知道在系统里还有哪些动作吗?【学生】聆听、思考、回答【教师】总结学生的回答在“动作”列表中,除页面和元件动作外,系统还提供了一些其他动作。35952.访问全局变量25614三、使用局部变量10006四、使用系统变量322461.元件类系统变量30332.页面类系统变量49543.窗口类系统变量284914.鼠标指针类系统变量12871五、使用条件67431.添加条件283642.关系运算符(1)==:用于比较左右两侧的值是否相等或相同。(2)!=:用于比较左右两侧的值是否不相等或不相同。(3)<:用于比较左侧的值是否小于右侧的值。(4)>:用于比较左侧的值是否大于右侧的值。(5)<=:用于比较左侧的值是否小于或等于右侧的值。(6)>=:用于比较左侧的值是否大于或等于右侧的值。(7)包含:用于比较左侧的值是否包含右侧的值。(8)不包含:用于比较左侧的值是否不包含右侧的值。(9)是:用于比较左侧的值是否是字母、数字、字母或数字、指定的值之一。(10)不是:用于比较左侧的值是否不是字母、数字、字母或数字、指定的值之一。113783.使用条件逻辑(1)“MatchAll”“MatchAny”条件语句(2)“如果/否则”(IF/ELSE)链(3)“如果/否则”链组【学生】聆听、理解、记录课堂实践【教师】利用多媒体播放“制作注册登录页的登录验证效果”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1打开在项目五的任务二中制作的“注册登录页的交互效果.rp”文件,并打开“注册登录页”页面。步骤2使用矩形3元件绘制消息提示框,设置其相应属性并调整其位置,最后将其隐藏。……(详见教材)【学生】聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点认识变量使用全局变量使用局部变量使用系统变量使用条件【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务任务二使用表达式和函数任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“交互动效的设计”视频,讨论并回答下列问题:问题1:交互动效是什么?它有什么作用?问题2:设计师应如何评估是否需要添加交互动效?问题3:交互动效有哪些设计方式?其时长有什么要求?【学生】聆听、思考、举手回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解使用表达式,使用函数13201一、使用表达式90621.编写表达式110932.运算符(1)算术运算符(2)关系运算符(3)逻辑运算符29745二、使用函数7231.调用函数147832.函数的类型(1)数字和数学函数(2)字符串函数(3)日期函数【学生】聆听、记录、理解课堂实践【教师】利用多媒体播放“制作增减商品数量的交互效果”视频,讲解并演示具体步骤,然后要求学生进行操作步骤1打开在项目六的任务一中制作的“弹出与关闭确认框交互效果.rp”文件。步骤2首先选中复制元件,在“交互”面板中添加“Click时”事件和“设置文本”动作……(详见教材)【学生】观看、聆听、操作【教师】巡堂辅导,及时解决学生的问题课堂小结【教师】简要总结本节课的要点使用表达式使用函数【学生】总结回顾知识点作业布置【教师】布置课后作业老师扫描此码进行本课线上作业布置【学生】完成课后任务教学反思

课题项目八使用中继器实现交互课时4课时(180min)教学目标学习目标:了解中继器的概念及组成熟悉中继器的属性、特定交互和系统变量的作用掌握创建中继器,以及编辑和显示数据的方法掌握使用中继器实现动态添加、动态删除、更新、标记、排序、筛选和分页显示行的方法能够使用AxureRP制作数据列表的动态交互效果素质目标:培养全局思维与数据结构设计能力,合理统筹规划信息展示方式增强逻辑分析与动态数据管理能力,提高数据处理的灵活性和准确性教学重难点教学重点:中继器的概念及组成,中继器的属性、特定交互和系统变量的作用教学难点:创建中继器,以及编辑和显示数据的方法,使用中继器实现动态添加、动态删除、更新、标记、排序、筛选和分页显示行的方法,使用AxureRP制作数据列表的动态交互效果教学方法问答法、讨论法、讲授法、演示法教学用具电脑、投影仪、多媒体课件、教材考勤【教师】清点上课人数,记录好考勤【学生】班干部报请假人员及原因任务一认识中继器任务导入【教师】全班同学每5人一组,各组选出组长。组长组织组员扫码观看“中继器的应用场景”视频,讨论并回答下列问题:问题1:中继器的应用场景主要有哪些?问题2:在原型设计过程中,你认为还有哪些设计元素适合应用中继器?【学生】聆听、思考、讨论、回答【教师】总结学生的回答,并引入要讲的知识传授新知【教师】结合多媒体,讲解创建中继器,中继器的组成,编辑和显示数据,中继器的属性,中继器的特定交互,中继器类系统变量15829一、创建中继器21651二、中继器的组成20221.项目282152.数据集17816三、编辑和显示数据161041.在数据集中编辑数据【教师】提出以下问题:你知道如何显示列中对应单元格中的数据吗?【学生】聆听、思考、回答【教师】总结学生的回答设置需显示的值时,可在“插入变量或函数”列表的“中继器/数据集”分类中选择“Item.列名”系统变量。通过“值”编辑框访问数据集中的列名后,中继器每个项目中的所选元件将分别显示该列中对应单元格中的数据。146752.在项目中显示数据(1)显示文本或图像类数据(2)显示引用页面类数据10477四、中继器的属性(1)适应HTML内容(2)填充(3)边距(4)边框和圆角(5)间距(6

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论