《Axure RP 9网站与App产品交互设计实践》课件 教案2024版-新媒体产品设计与项目管理

《新媒体产品设计与项目管理》教案课程代码：课程类别：专业方向课学分/学时：2/32考核方式：考试/考查开课学期：开课单位：授课班级：授课教师：

学情分析（通过不同方式，对所教授班级学生在认知风格、动机与兴趣、心理状况、知识基础、学生差异性、发展性与社会性等方面的具体情况进行调查分析，同时对专业发展前沿和就业岗位需求等进行调研分析。）

章节课题第一章第1-3节：交互设计概述授课时间第2周第1次课课时安排2课时教学目标通过课堂讲授让学生了解交互设计中的基本概念，交互设计的流程，设计师的认知规律；通过实践演示让学生掌握交互设计中的色彩、版式和内容的创新方法；通过小组讨论培养与同学分工合作、共同参与意识及团队精神。重难点：交互设计中的基本概念教学内容与进程+教学方法+课堂互动组织教学导入新课前沿理论讲授新课课前10分钟开始签到。1、介绍本课程的性质，包括为什么开《交互设计》课程？学习的内容有哪些？学习以后能达到什么目标？与该课程相关的职业岗位有哪些？这些岗位在市场的需求量如何？2、最前沿的交互设计趋势：响应式交互设计，幽灵按钮设计，视频背景设计，卡片式设计，扁平化设计。相关术语IxD交互设计(InteractionDesign,缩写IxD)是定义、设计人造系统的行为的设计领域，在于定义人造物的行为方式（the“interaction”，即人工制品在特定场景下的反应方式）相关的界面。不同的人对交互设计有着不同的定义。1.1.2UI界面设计（UserInterface,缩写UI）是人与机器之间传递和交换信息的媒介，界面是机器中的一部分，通过界面用户可以得知机器的工作状态并能对机器进行控制，获取机器对操作的反馈。1.1.3UE用户体验（UserExperience,缩写UE）是指用户使用某一个产品（服务）的过程中建立起来的心理感受，这种主观感受主要通过用户用手去操作、用眼睛去观看、用大脑去思考、用心感受等，用户体验并不是指产品本身是如何工作的，而是指产品如何和外界联系并发挥作用的，及人们如何接触或者使用它的，好的交互设计可以给用户带来积极的用户体验。1.1.4UCD以用户为中心的设计（UserCenterDesign，缩写UCD）是指在设计过程中，设计师必须以用户体验为中心，强调用户优先的设计模式。简单的说，就是在进行产品设计、开发、维护时从用户的需求和用户的感受出发，围绕用户为中心进行产品设计、开发及维护，而不是让用户去适应产品。4、PPT：产品开发的流程是如何的呢，原型设计处于哪个阶段？产品研发是一个系统工程，需要经过一系列的活动，并有目标、有计划、有组织地完成。一般来讲，产品研发主要分为战略规划、需求分析、产品设计、产品开发、产品测试、产品检验六个阶段，其中产品交互设计的任务包含前面3个阶段，每个阶段都要有明确的交付文档。5、PPT：产品的交互原型设计。原型设计的类型根据设计阶段的需要和验证目的的需要通常分为草图、线框图、低保真原型设计和高保真原型设计。【线框图示例】【高保真网站示例】8、PPT：原型设计的工具常用的交互设计工具有：Mockplus、墨刀和AxureRP。分别介绍每个工具的用途。讲授法讲授法分组讨论案例分析法课堂管理课前10分钟开始发起在线签到课中组织学生参与讨论，发言的同学加0~2分作业设计课后测验：“第一章交互设计概述测验”。评价方式按照平时成绩考评细则从以下几个方面完成过程考核：出勤考核：学生是否按时签到课堂表现考核：学生是否保质保量参与锦城在线和课堂的讨论学习效果考核：①学生是否完成随堂及课后作业②学生是否完成测验课外读物教材辅助提供下节课图书中的操作视频和练习素材交互设计联盟/知识扩展网站建设的流程章节课题第二章第1-3节：初识AxureRP9授课时间第2周第2次课课时安排2课时教学目标认识AxureRP9的界面：了解AxureRP9各个模块的功能；站点地图功能条：学会站点地图功能条的使用；页面管理：学会对站点地图页面的相关操作，包括增加页面、删除页面、移动页面以及对页面的重新命名；生成流程图：通过站点地图生成流程图；通过小组讨论培养与同学分工合作、共同参与意识及团队精神。教学内容与进程+教学方法+课堂互动组织教学导入新课基本理论学习实例分析课堂练习课前10分钟开始签到。。1、本节首先介绍AxureRP9界面，了解AxureRP9各个模块的功能；然后介绍站点地图的基本概念，理解站点地图的基本功能以及重要性。站点地图是进行原型设计的基础，对站点地图的页面规划，这样才能对产品设计有一个清晰的思路。2.1认识AxureRP9界面【Axurerp9界面布局】AxureRP9的界面主要分为8个部分，顶部分别是：标题栏、菜单栏、主工具栏、样式工具栏；左侧包含4个面板：页面面板和概要面板；中间部分是画布工作区；右侧包含3个面板：交互面板、样式面板和说明面板，如图2-1所示。2.2文件的常用操作文件的基本操作主要包括原型文档的新建、打开、关闭和保存以及导入等操作，这些常用的命令可以在【文件】菜单中找到。2.3创建第一个项目：“生成站点地图”2.3.1什么是站点地图站点地图（sitemap），是一个列出网站上所有重要页面地址的清单文件，通常分为2类，一类是给搜索引擎抓取所用，另外一种是给浏览者查看，前者帮助搜索引擎更好地收录网站，后者帮助浏览者更好的了解网站的整体结构、更快的找到他们想要找的内容。2.3.2项目实操：生成“KF网”的站点地图1.“KF网”站点的页面规划2.添加页面3.生成流程图讲授法演示法案例教学法项目驱动法课堂管理课前10分钟开始发起在线签到课中组织学生参与讨论，发言的同学加0~2分作业设计“KF网”站点的页面规划评价方式按照平时成绩考评细则从以下几个方面完成过程考核：出勤考核：学生是否按时签到课堂表现考核：学生是否保质保量参与锦城在线和课堂的讨论学习效果考核：①学生是否完成随堂及课后作业②学生是否完成测验课外读物教材辅助提供学生图书中的操作视频和练习素材；知识扩展官方推荐资料/thread-5-1-1.html章节课题第三章第1-5节：第3章AxureRP9元件的基本操作和母版授课时间第3周第3-4次课课时安排4课时教学目标了解常用的基本元件和表单元件；掌握常用的基本元件和表单元件的用法。教学内容与进程+教学方法+课堂互动组织教学导入新课分组讨论课堂练习课后作业课前10分钟开始签到。。复习上节课的内容。1、元件，也叫组件，是组成产品原型的零件。AxureRP9提供了三个官方元件库：默认元件库（Default）、流程元件库（Flow）和图标元件库（Icons）。Axure也支持导入第三方的元件库使用。3.1.1图标元件库图标元件库（Icons）是基于FontAwesome图标字体中的各种图标制作发布的形状元件。3.1.2流程元件库流程元件库（Flow）包含各种流程图的形状，通过这些形状可以构建流程图，如图3-2所示。3.1.3默认元件库默认元件库（Default）中包含了四种类型的常用的元件：基本元件、表单元件、菜单和表格元件及标记元件。3.2元件的基本操作在原型中需要使用某类元件的方法有：方式一：用鼠标从元件库中把元件拖拽到画布上。方式二：顶部功能菜单中，点击插入，选择对应的图形项目，然后鼠标移入画布区域，按住左键拖动，就可以绘制出对应的图形了。方式三：快捷键，比如按一下键盘上的“o”键，然后按住鼠标左键在画布中拖拽，就能快速画出一个椭圆形。3.3基本元件基本元件包含形状、图片、文本、线段、热区以及容器元件等。基本元件使用非常广泛，常见的页面基本上都可以用这些元件完成搭建。3.4表单元件表单元件是用来获取用户输入数据的元件，在网页中负责数据采集的功能。表单元件主要包括：文本框、多行文本框、单选按钮、复选框、下拉列表框、列表框。案例演练：仿百度注册界面原型设计演示法讲授法案例法项目驱动法课堂管理课前10分钟开始发起在线签到课中组织学生参与讨论，发言的同学加0~2分作业设计仿百度注册界面原型设计评价方式按照平时成绩考评细则从以下几个方面完成过程考核：出勤考核：学生是否按时签到课堂表现考核：学生是否保质保量参与锦城在线和课堂的讨论学习效果考核：①学生是否完成随堂及课后作业课外读物教材辅助提供学生图书中的操作视频和练习素材；知识扩展官方推荐资料/thread-5-1-1.html章节课题第四章第1-4节：AxureRP9形状、图片和表单类元件授课时间第4周第5次课课时安排2课时教学目标掌握常用的形状和图片元件的使用；掌握形状和图片元件基本操作。教学内容与进程+教学方法+课堂互动组织教学导入新课课堂练习课后作业课前10分钟开始签到。。复习上节课的内容。形状和图片能将信息传达得更具体、更真实、更直接和易于理解，从而高效率、高质量地表达设计理念，使页面充满强烈的感情色彩。在页面中合理的应用形状和图片，能够形成视觉信息的中心，有利于重要信息的传达。4.1形状元件默认元件库的“基本元件”中的各种框、按钮、标题、占位符、文本标签和段落，以及图标元件库中可用的图标都是形状元件。我们也可以用钢笔工具绘制形状元件。4.2图片元件使用图片元件可将静态图像或GIF动画添加到画布中，图片元件支持JPG、PNG、GIF、和SVG格式等的文件。案例演练：仿百度注册界面原型设计演示法讲授法案例法项目驱动法课堂管理课前10分钟开始发起在线签到课中组织学生参与讨论，发言的同学加0~2分作业设计仿百度注册界面原型设计评价方式按照平时成绩考评细则从以下几个方面完成过程考核：出勤考核：学生是否按时签到课堂表现考核：学生是否保质保量参与锦城在线和课堂的讨论学习效果考核：①学生是否完成随堂及课后作业②学生是否完成测验课外读物教材辅助提供学生图书中的操作视频和练习素材；知识扩展官方推荐资料/thread-5-1-1.html章节课题第五章第1-4节：AxureRP9交互基础授课时间第4周第6次课课时安排2课时教学目标理解交互的过程；理解并掌握事件、用例和动作三者的关系重难点：事件、用例和动作三者的关系教学内容与进程+教学方法+课堂互动组织教学导入新课课堂练习课后作业课前10分钟开始签到。。复习上节课的内容。在移动产品中，用户主要通过与产品的交互来强化体验的感觉，从而决定是否使用这个产品。5.1事件事件是特定页面或元件行为的触发器。所谓“事件”，即“发生了什么事”，我们可以理解成“什么时候”。从交互的角度来说，“什么时候”又可以分为：页面事件（如当页面加载时）和元件事件（如当鼠标单击该元件时）。5.1.1页面事件交互中页面事件主要包括：页面载入时、窗口尺寸改变时、窗口滚动时等。5.1.2元件事件元件事件根据不同的元件，可用的事件稍有区别。如图片及形状类元件的事件包括鼠标单击时、鼠标移入时、鼠标移出时、改变尺寸时等；动态面板元件的事件包括显示时、隐藏时、状态改变时、拖动改变时、载入时、滚动时等；文本框元件的事件包括文字改变时、获取焦点时、失去焦点时等。5.2用例用例是响应页面或元件事件而在Web浏览器中发生的动作的逻辑条件。逻辑条件的设置可以没有，也可以有多个。5.3动作动作是响应页面或元件事件触发而在Web浏览器中发生的更改。例如，如果单击一个按钮导航到原型中的其他页面，则响应该按钮的“鼠标单击时”事件，发生了“打开链接”动作。案例演练：仿百度注册界面原型设计演示法讲授法案例法项目驱动法课堂管理课前10分钟开始发起在线签到课中组织学生参与讨论，发言的同学加0~2分作业设计仿百度注册界面原型设计评价方式按照平时成绩考评细则从以下几个方面完成过程考核：出勤考核：学生是否按时签到课堂表现考核：学生是否保质保量参与锦城在线和课堂的讨论学习效果考核：①学生是否完成随堂及课后作业②学生是否完成测验课外读物教材辅助提供学生图书中的操作视频和练习素材；知识扩展官方推荐资料/thread-5-1-1.html章节课题第六章第1-3节：AxureRP9动态面板授课时间第5周第7次课课时安排2课时教学目标熟练掌握创建动态面板的方法熟练掌握动态面板的常用事件和动作熟练掌握动态面板制作各种复杂的交互效果重难点:动态面板的常用事件和动作教学内容与进程+教学方法+课堂互动组织教学导入新课课堂练习课后作业课前10分钟开始签到。。复习上节课的内容。动态面板是axurerp9中较为重要的元件，大多数复杂的交互效果都可能用到动态面板完成。6.1动态面板简介6.1.1初识动态面板动态面板是一个容器，专门用来设计动态原型功能的组件，每个动态面板可以包含一个或多个状态，每个状态本身是一个页面，通过控制状态的显示顺序或隐藏/显示动态面板来达成交互界面的效果，像其它组件一样，动态面板可以直接通过拖拽的方式从组件选择面板加入到画布中，可以通过设置动态面板在不同状态间切换来实现复杂功能。比如弹出框、下拉菜单、轮播等。6.1.2设置动态面板的样式6.1.3管理动态面板在打开的【动态面板状态管理】对话框中,可以添加、删除、上移、下移状态,也可以编辑状态内容等。6.1.4适应内容当状态中添加的对象大小与动态面板大小不匹配时,可以在页面上右击动态面板,从弹出的快捷菜单中执行【自适应内容】命令。6.1.5滚动条动态面板当状态中的内容范围大于动态面板范围时,也可以控制是否让动态面板显示滚动条。6.1.6固定到浏览器可以将动态面板固定到浏览器窗口的某个位置,就像一些网购网站一样,会在右侧一直出现一些固定的按钮,以便于用户购买自己需要的商品。6.2动态面板的事件和动作案例演练：轮播图交互效果本案例实现4张图片轮播图交互效果，当左滑动图片结束时，当前图片向左滑动；当右滑动图片结束时，当前图片右滑动；当点击向左箭头图标时，图片向右滑动切换上一幅图；当点击向右箭头图标时，图片向左滑动切换下一幅图。在轮播图的中下区域有4个小圆点，点击图片的小圆点图片自动切换到对应的画面。讲授法演示法小组讨论法演示法小组讨论法案例法项目驱动法课堂管理课前10分钟开始发起在线签到课中组织学生参与讨论，发言的同学加0~2分作业设计“轮播图交互效果”课后作业评价方式按照平时成绩考评细则从以下几个方面完成过程考核：出勤考核：学生是否按时签到课堂表现考核：学生是否保质保量参与锦城在线和课堂的讨论学习效果考核：①学生是否完成随堂及课后作业②学生是否完成测验课外读物教材辅助提供学生图书中的操作视频和练习素材；知识扩展官方推荐资料/thread-5-1-1.html

章节课题第七章第1-3节：AxureRP9内联框架授课时间第5周第8-9次课课时安排4课时教学目标理解内联框架的意义掌握内联框架的使用方法掌握热区元件的使用方法掌握内联框架与动态面板联合使用，实现手机模型中长页面的切换重难点：内联框架的使用方法、内联框架与动态面板联合使用教学内容与进程+教学方法+课堂互动组织教学导入新课课堂练习课后作业课前10分钟开始签到。。复习上节课的内容。内联框架是axurerp9中较为独特的元件，该元件主要用于载入音视频文件的交互效果，还可以实现页面无刷新切换的交互效果。7.1内联框架简介7.1.1认识内联框架内部框架是Axurerp9中的一个元件，也相当于一个容器，但与之前所学的动态面板容器有区别，内联框架支持嵌入外部资源在元件中，包括互联网网页、音视频文件、网页地图等。内联框架元件对应的类似于html元素中iframe标签。7.1.2设置内联框架的样式在页面中选择内联框架元件后,【样式】面板中显示内联框架的参数，如图7-3所示。其中,包括内联框架的"位置和尺寸"参数，以及内联框架独有的“添加框架目标”、“隐藏边框”、“滚动”和“预览”功能的设置。7.2内联框架的基本操作内联框架主要是用来嵌入网页、视频、地图和URL等资源，也可以用来完成页面跳转的交互功能，下面学习内联框架的基本操作。7.2.1嵌入网页内联框架可以嵌入页面资源，包括本项目中的页面或者互联网上的页面。双击内联框架或者在右侧属性中蓝色字体点击选择框架目标，出现如图7-4所示，可选的有两个：链接到当前项目的页面（即本地的页面）和链接到url（任何正确的网址都行）和文件（本地文件），现在以链接网页为例输入百度网址。7.2.2嵌入视频内联框架的链接目标除了可以链接网址以外，可以链接文件路径，文件路径包括本地路径和网络路径，这两种路径分别支持嵌入本地视频和网络视频。7.2.3跳转网页要实现页面的无刷新切换，可以利用内联框架的链接来实现。例如，在页面上创建2个按钮，当点击“百度”按钮，右边的内联框架中显示百度首页内容，当点击“新浪”按钮，右边的内联框架中显示新浪首页内容，如图7-11所示。案例演练：原型中实现视频点播案例描述本案例实现视频点播交互效果，顶部为视频播放控件，下方是视频列表，点击任意列表项，即刻播放相关视频内容。讲授法演示法小组讨论法演示法小组讨论法案例法项目驱动法课堂管理前10分钟开始发起在线签到课中组织学生参与讨论，发言的同学加0~2分作业设计“原型中实现视频点播”课后作业评价方式按照平时成绩考评细则从以下几个方面完成过程考核：出勤考核：学生是否按时签到课堂表现考核：学生是否保质保量参与锦城在线和课堂的讨论学习效果考核：①学生是否完成随堂及课后作业②学生是否完成测验课外读物教材辅助提供学生图书中的操作视频和练习素材；知识扩展官方推荐资料/thread-5-1-1.html章节课题第九章第1-5节：AxureRP9高级交互--中继器授课时间第6周第10-11次课课时安排4课时教学目标掌握中继器的基本用法以及中继器数据集和中继器的项。掌握中继器数据集里的数据绑定到中继器上并显示出来教学内容与进程+教学方法+课堂互动组织教学导入新课课堂练习课后作业课前10分钟开始签到。。复习上节课的内容。中继器是AxureRP9.0中的高级元件，中继器元件可用来显示重复的文本、图片、链接，可以模拟数据库的操作，进行数据库的增删改查。8.1中继器的组成中继器元件由中继器数据集和中继器项两部分构成。1.中继器数据集中继器元件是由中继器数据集的数据项填充，填充的数据项可以是文本、图片甚至是链接。AxureRP9中，在中继器内部和外部均可以编辑数据集。2.中继器项中继器中重复布局的元件这里称之为项。8.2中继器的基本操作8.2.1创建和关联数据集如果希望中继器呈现丰富的数据，可以对中继器的数据集和数据项进行编辑操作。案例演练：仿微信聊天列表信息交互设计案例描述本案例实现，仿微信聊天列表的信息展示，当左滑动每条聊天记录时，从右边缘移动出一个矩形删除按钮，单击按钮删除当前一条聊天记录。如果点右滑动某条聊天记录，刚出现的矩形删除按钮向右移动出去，具体效果如图8-26所示。讲授法演示法小组讨论法演示法小组讨论法案例法项目驱动法课堂管理课前10分钟开始发起在线签到课中组织学生参与讨论，发言的同学加0~2分作业设计仿微信聊天列表信息评价方式按照平时成绩考评细则从以下几个方面完成过程考核：出勤考核：学生是否按时签到课堂表现考核：学生是否保质保量参与锦城在线和课堂的讨论学习效果考核：①学生是否完成随堂及课后作业②学生是否完成测验课外读物教材辅助提供学生图书中的操作视频和练习素材；知识扩展官方推荐资料/thread-5-1-1.html

章节课题第十章第1-3节：AxureRP9团队项目管理授课时间第7周第12次课课时安排2课时教学目标掌握创建团队项目的方法掌握签入和签出的使用及作用掌握获取团队项目的方法熟练掌握提交和获取团队项目变更的方法熟练掌握管理团队项目的方法重难点：管理团队项目的方法教学内容与进程+教学方法+课堂互动组织教学课堂练习课后作业课前10分钟开始签到。。复习上节课的内容。通常一个公司要研发一个项目，需要组建团队，以研发APP产品项目为例团队成员一般包含产品经理、设计师、工程师、测试人员和营销推广人员等，团队的大小与项目的难易程度有关，团队项目需要团队里的所有成员分工和协同工作，如何高效、科学、低成本的完成项目是需要项目团队不断探索和总结。10.1项目如何共享协作10.2创建团队项目要使用团队项目提供工作效率，每个项目团队成员都需要先熟悉掌握团队项目的使用和管理方法以及团队项目的相关工具和命令的使用方法。AxureRP9团队版和企业版都支持团队协作，可以创建和管理团队项目，即多人共同创作一个原型，在axurerp中创建团队项目之前需要注册一个账号并登录到axureshare中。注册/登陆账号如果还么有axureshare账号，可以点击【主工具栏】右侧的【登录】按钮，在弹出的【登录】对话框中，选择注册选项卡，按照要求输入账号和密码等信息，也可以加入官网进行注册操作，官网的网址是。2.创建团队协作文件在axurerp9中创建团队项目通常有两种方法：一种直接新建团队项目，另一种是从现有的RP文件创建团队项目，创建的项目一般存放在axureshare服务器中。3使用和管理团队项目邀请项目成员项目成员接受邀请项目成员下载协同文件签出（checkout）和签入（checkin）团队项目浏览团队项目历史记录演示法讲授法小组讨论法演示法小组讨论法课堂管理课前10分钟开始发起在线签到课中组织学生参与讨论，发言的同学加0~2分作业设计完成测验评价方式按照平时成绩考评细则从以下几个方面完成过程考核：出勤考核：学生是否按时签到课堂表现考核：学生是否保质保量参与锦城在线和课堂的讨论学习效果考核：①学生是否完成随堂及课后作业②学生是否完成测验课外读物教材辅助提供学生图书中的操作视频和练习素材；知识扩展官方推荐资料/thread-5-1-1.html

章节课题第十二章第1-7节：案例实战：移动APP/桌面端门户类网站原型设计授课时间第9周第13-16次课课时安排8课时教学目标熟悉桌面门户网站原型设计过程中经常会碰到交互效果；掌握各种效果的制作过程；通过小组讨论培养与同学分工合作、共同参与意识及团队精神。重难点：项目开