《Axure RP 9网站与App产品交互设计实践》课件全套 郑伟 1.新媒体产品设计与项目管理课程介绍 -9.中继器高阶 - 淘宝列表+ 新闻列表

新媒体产品设计与项目管理课程简介基本介绍教学大纲期末考核新媒体产品设计？傻傻分不清楚网页设计界面设计交互设计场景不同、软件不同一、基本介绍

什么是交互？什么是交互设计？交互设计的范畴？常见的术语？有哪些就业岗位？一、基本介绍什么是交互？交互，即交流互动，其实这个词语离我们的生活很近，例如中国式打招呼：简单几个字的你来我往，搭配眼神和动作，传递出了礼貌、亲近、尊敬等诸多丰富含义。人和机器间的交流互动是什么呢？一、基本介绍举个例子如果你想解锁一个手机，你与手机的交流可能是下面这种情景：–按home键（嗨，手机，好久不见啊！）–屏幕亮了没解锁，弹出输入密码页面（哎？是小明来了么？）–输入密码（是啊！）–解锁（哦哦，欢迎欢迎快请进~）当人和一件事物（无论是人，机器，系统、环境等等）发生双向的信息交流和互动，就是一种交互行为。一、基本介绍

这种交流和互动必须是双向的，如果只有一方的信息输出，而没有第二方的参与，那么只能是信息展示而不是交流互动，如下两张图。一、基本介绍什么是交互设计？“交互设计，是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。”“交互设计，是交互行为的外在表现的设计，它一个或者一系列交流互动，用文字、图像或文档等方式，从交流的内容、方式、规则等维度进行统一的设计。形象理解：交互设计就是给一个或一系列交互行为设计一个剧本。一、基本介绍

就像之前例子中提到的输入框，输入的字数限制是多少，什么情况是正确的，什么情况是错误的，在正确的时候有什么反馈，在错误的时候有什么反馈，这些都会像是剧本里的故事情节和台词一样被提前设计好，并由演员（元件）来表演出来，用户在这个过程中，既是观众（观看情节发展）也是演员（与图形界面互动，触发情节）。人物情节舞台...一、基本介绍交互设计的范畴？交互设计涉及到人与人、机器、环境等等，是一个很宽泛的概念。

互联网行业内大热的交互设计，主要是人与互联网产品（网站、App、智能手表等）的交互行为的设计。

例如，跟手机淘宝App进行交流从而买到一款心仪的鞋子；跟大众点评App交流让它推荐一个附近性价比高的川菜馆；跟支付宝交流让它给你刚买的一瓶矿泉水付账…一、基本介绍

UI(UserInterface)：用户界面。用颜色或图形明确产品功能与内容的主次和展示。UE或UX(UserExperience)：用户体验。通常国外和国内的的外企叫UX，国内叫UE。互联网中的用户体验是指用户在访问平台的过程中的全部体验，它包括平台是否有用，疑惑或者bug程度，功能是否易用、简约，界面设计和交互设计是否友好等方面。UCD(User-CenteredDesign)：以用户为中心的设计。在产品设计和开发的过程中，充分理解和挖掘用户的需求，创造良好而舒适的用户体验。IxD(Interactiondesign)：交互设计。解决应用如何使用。力求提供最简洁有效的路径给用户，让用户更方便的通过你的产品解决他的问题。常见的术语？一、基本介绍UI设计师视觉设计师交互设计师用户体验设计师产品经理有哪些就业岗位？一、基本介绍

大致明白了什么是交互设计，那么交互设计师的工作内容也就呼之欲出了。简单来说，如果交互设计是给交互行为写剧本，那么交互设计师就是编剧，负责构思、撰写和修改这个剧本。交互设计师是做什么的？例如：你想让大众点评App给你推荐一个附近性价比高的川菜馆，那么剧本大概包括以下这些。【主线】打开App-搜索关键词-筛选-查看详情-导航到达-评价【剧情】在哪个页面找到搜索，搜索在什么位置，点击哪个按钮进入搜索，App在什么情况下给出怎么样的提示…【分支剧情】插播一条广告，推荐给你相似的商家【大结局】你最终找到了符合你要求的餐厅。一、基本介绍交互设计师主要有哪些工作？

撰写交互设计文档设计产品原型...一、基本介绍撰写交互设计文档工具一、基本介绍什么是产品原型设计？通俗来讲，在正式制作真实软件产品前，通过原型给大家一个产品的模型展示，而这个模型我们可以通过非常简单快速的方式得到。产品原型设计产品框架设计交互视觉测试直观方式设计师产品沟通最终形态必须支持快速演示拥有高效复用的组件库可以快速生成交互原型具有在线联机协作功能一、基本介绍一款优秀的产品原型设计工具应具备的主要功能一、基本介绍通常原型设计工具分为两类：原型设计工具基于移动端基于PC端交互POP适用于手绘底仿真原型MockplusAxure

RP适用于中/高仿真原型一、基本介绍原型设计工具：AxureRP

推荐同学们使用AxureRP工具进行产品原型设计！！！内部函数库高保真原型 流程图功能 团队协作逻辑关系表达式 低保真原型 定制特殊行为 托管团队项目Axure的使用场景场景一草根站长、互联网创业者场景二开发外包业务人员场景三视觉设计师场景四用户体验场景五业务运营人员场景一：草根站长、互联网创业者

有想法，有创业，起步难。当前阶段的产品处于想象中，只是一个原始想法，如果将创业想法表达出来呢，又如何避免与他人沟通过程中产生理解差异呢？使用草图/截图和文字来描述想法，但这样又难以展示产品的核心功能与价值。使用Axure制作产品原型可以准确形象的表达你的想法。场景二：开发外包业务人员

与客户接洽沟通的过程中，通常都难以捕捉客户全部需求，并且有些客户在开发过程中对需求修改比较频繁，甚至做很大的变动。使用Axure制作产品原型与客户沟通，可以有效验证是否是客户想要的产品和功能，通过原型调整并确定最终需求。而这一切都不需要开发人员编写一行代码，有效提高效率，节省时间。场景三：视觉设计师

在开发产品的过程中，设计人员往往了解产品需求的时间没有产品经理和需求人员长，并不能很好的理解产品的真实意图，让设计人员在较短的时间内设计出符合需求或者优秀的产品，确实有些难度。使用Axure给设计人员提供一份产品原型图，可以很好的弥补这一不足，也能节省很多沟通成本。场景四：用户体验

在创业初期，正式开发产品之前，可以使用Axure制作出产品高仿真原型，并将原型发送给目标用户群体和项目干系人测试使用并获取他们的反馈。可以充分利用他们的反馈意见对创业思路和产品功能界面进行打磨调整，在原型中做这些要比开发出应用程序后再做强过百倍。场景五：业务运营人员

现在的公司，往往是产品刚有一个概念，还没有开发出成品，就开始推广宣传，正所谓一步快，步步快！而运营和销售人员以什么来推广销售产品或服务呢？在确定产品需求以后，你可以使用Axure快速制作一个产品原型演示给运营和销售人员，然后销售人员就可以紧锣密鼓的组织工作了。你甚至可以使用几个小时或几天时间制作出一个高仿真产品原型，并将其上传到WEB服务器中，这样可以随时让团队成员和客户使用PC或移动设备来使用你的产品。小结使用Axure制作出品原型成本低；方便团队熟悉需求和评估需求，也给开发人员评估需求的可实现性。避免需求设计人员（创业者）的“天马行空”和“不切实际”的想法，让注意力时刻聚焦在用户需求和产品功能上。方便团队及时提出改进建议，降低产品后期大改需求导致产品不能按时上线的可能性，从而提高产品的（创业）成功率。课程教学大纲一、Axure基础走进AxureRP9页面管理、流程图元件区域自定义部件库交互基础事件用例动作母版动态面板二、Axure高级高级交互条件逻辑中继器组件数据集三、Axure案例“夸父网”网站原型设计“微信”APP原型设计考评体系考勤、课堂表现20分平时作业20分网上测验30分平时成绩一课一文30分期末考评体系考勤（20分）旷课扣5分迟到扣2

分请假不扣分旷课1/4取消考试课堂互动主动回答问题每次+1分，最高5分在线讨论，最高5分

在线学习任务学习任务单视频讨论平时作业（20分）共7-8次课后作业网上测验（30分）共

6

次网上测验一课一文（30分）期末每位同学提交一份1000字左右的文章期末作品要求设计主题：

分组完成，分析与设计一个有创意的互联网产品，主题自拟（5人左右一组）。具体要求分析文档和一套产品原型中（或高）保真设计作品。产品主题鲜明，内容丰富健康，实用性强，页面元素丰富（有文字、图片、交互等）。有PC端和移动端两种方案，页面数量不少于10页（如启动页、首页、注册页、个人页、列表页、详细页、留言页等）。Word编写的设计方案（选题意义、目标群体、栏目模块等），在文档中要包含团队成员信息及分工情况，产品存在的问题分析和改进意见。最后一周，所有团队展示作品及陈述。期末小组作品评分标准

Axure软件介绍与页面认识技术型文科人才系列课程主讲人：文学与传媒学院交互设计Axure软件界面大致可以分为8个区域，分别为菜单栏区域、工具栏区域、页面区域、元件库区域、母版区域、工作区域、检视区域、页面概要区域，如图2.11所示。

软件界面页面区域位于软件界面的左上方，是用来管理页面和显示页面的区域，如图2.1所示。

管理软件页面关系软件的骨架，清晰展示软件的结构

管理页面层级本章案例：“百度门户”栏目规划。

“百度门户”栏目规划效果2.1 认识软件界面2.2 用页面区域管理软件页面2.3 移动端与PC端的原型制作规范2.4 小结2.1.1菜单栏区域

菜单栏区域有文件、编辑、视图、项目、布局、发布、团队、账户、帮助9个菜单项，包含了软件的一些常规操作和功能。

“文件”菜单：

（1）可以新建工程、打开工程及保存工程，这些操作可以使用快捷键或者工具栏快速操作按钮完成；

菜单栏区域文件菜单选项

（2）可以导入RP文件，新建团队项目、打开团队项目；

（3）可以进行打印纸张尺寸设置，打印index页面，导出index图片；

（4）可以设置定时备份软件原型，避免制作软件原型丢失。

“编辑”菜单：

可以完成复制、剪切、粘贴、撤销、重做等操作，也可以使用快捷键来完成这些操作，所以很少会使用这个菜单。

“视图”菜单：

编辑菜单选项视图菜单选项

（１）“工具栏”选项。将工具栏区域划分为基本工具栏和样式工具栏两类，可以通过勾选的方式控制工具栏区域内容的显示，同时提供自定义工具栏功能，工具栏内容可以自行定义；

（２）“功能区”选项，分为5个区域，即页面区域、元件库区域、母版区域、检视区域、概要区域，可通过勾选的方式控制这些区域的显示与隐藏效果，还提供开关左侧功能栏和开关右侧功能栏的功能；

工具栏选项功能区选项

（３）“遮罩”选项，通过勾选的方式来控制隐藏对象、母版、动态面板、中继器、文本链接、热区是否添加遮罩效果。

“项目”菜单：

（1）可对元件、页面的样式进行编辑；

（2）具有自定义元件字段说明和页面字段说明功能；

（3）具有添加全局变量功能。

遮罩选项项目菜单选项“发布”菜单：（1）可以进行原型预览，对预览方式进行设置，选择打开浏览器方式和工具栏设置；（2）可以将原型发布到AxShare上面进行托管；（3）以生成HTML文件的方式进行原型发布；（4）生成需求规格说明书的Word文档；（5）预览和生成原型文件。

发布菜单选项“团队”菜单：

可以创建团队项目和获取团队项目，进行多人协作。“账户”菜单：

可以进行账户登录和服务器代理设置。

团队菜单选项账户菜单选项“帮助”菜单：（1）通过开始演示动画选项，学习原型工具的使用，提供在线培训教学功能及进入Axure论坛

功能；（2）通过管理授权完成注册，获得软件使用的授权；（3）提供软件检查更新及提交软件意见和软件错误功能。

帮助菜单选项2.1.2工具栏区域

工具栏区域包含有使用频率最高的快捷工具。

我们在设计原型的过程中经常会用到这些操作，理解工具栏的功能并掌握它的使用方法，可以提高制作原型的效率。

工具栏区域分为基本工具栏和样式工具栏，同时提供自定义工具栏功能。

下面通过对两个矩形元件的操作，熟悉一下工具栏的使用，如图1.24所示。

工具栏区域1.基本工具栏

新建、打开、保存操作

文件：新建一个工程项目，快捷键是Ctrl+N。

打开：打开一个已有的工程项目（只能打开rp类型的工程），快捷键是Ctrl+O。

保存：保存一个工程项目，快捷键是Ctrl+S。

复制：单击这个快捷按钮，可以复制选中的元件，它的快捷键是Ctrl+C。

剪贴板：可以粘贴复制的元件。单击这个快捷按钮，可以把复制的元件粘贴到工作区域，它的快捷键是Ctrl+V。

撤销：单击这个快捷按钮可以撤销上一步的操作，快捷键是Ctrl+Z。

重做：单击这个快捷按钮可以重做上一步的操作，快捷键是Ctrl+Y。

剪切：单击这个快捷按钮可以剪切选中的元件，快捷键是Ctrl+X。

新建、打开、保存操作实战演练1. 在元件库区域，拖曳两个矩形元件到工作区域，并在矩形元件上分别双击，进行重新命名，一个矩形命名为“矩形一”，另一个矩形命名为“矩形二”，单击保存快捷按钮或者使用Ctrl+S快捷键保存上面的操作，如图1.26所示。

拖曳矩形元件2. 选中“矩形一”元件，利用Ctrl+C快捷键复制出同样的一个元件，再利用Ctrl+V快捷键粘

贴，也可以利用工具栏上快捷按钮操作。

复制矩形元件

选择、连接、钢笔、更多、缩放操作

元件的选择、连接、钢笔、边界点、切割、裁剪、连接点、格式刷以及缩放操作的快捷工具按钮。

选择、连接、钢笔更多

选择：用来选中工作区域中的元件，包括相交选中和包含选中，相交选中所选择的区域只要和元件有接触、有相交，这个元件就会呈现为选中状态；而包含选中是把元件完全包含进来，才会呈现为选中状态。

连接：用来连接两个元件。这个操作多用于绘制流程图。

钢笔：可以绘制出自定义的形状。

缩放：设置工作区域的缩放比例，可以根据页面内容进行调整。

布局操作

布局操作用来设置页面中元件的布局，包括设置元件顶层、底层、组合、取消组合、对齐、分布操作。布局操作按钮

顶层、底层：将工作区域中的元件置于顶层操作和置于底层操作。

组合、取消组合：可以将不同元件设置为一个组合，这样可以把组合的元件一起移动或者进行其他操作；同时也可以将一个组合拆散为单独的元件。

对齐：提供左对齐、左右居中、右对齐、顶部对齐、上下居中、底部对齐方式。

分布：包括水平分布和垂直分布两种分布方式。

水平分布：单击这个按钮，可以让选中的按钮呈现为横向均匀分布。

垂直分布：单击这个按钮，可以让选中的按钮呈现为纵向均匀分布。

对齐方式分布方式

锁定、开关功能栏、发布、登录操作

锁定元件、取消锁定元件、开关左侧功能栏、开关右侧功能栏、预览、共享、发布、登录操作按钮。

锁定、发布操作

锁定、取消锁定：将工作区域中的元件锁定，变为不可以移动，也可以取消锁定，进行移动。

开关功能栏：包括开关工作区域左侧的功能栏和工作区域右侧的功能栏。

预览：以原型预览的方式在浏览器中显示，不生成本地原型文件。

共享：通过共享的方式创建团队项目，发布到AxShare上面。

发布：可以通过预览的方式发布，也可以通过生成本地文件的形式发布。

登录：提供登录的快捷按钮。2.样式工具栏

样式工具栏可用来给文本内容或者元件边框设置样式，可以设置文本内容颜色、字号、字体，也可以给元件边框设置样式。

样式工具栏

：填充背景颜色，同样单击下三角可以选择要填充的颜色。

：设置外部阴影，勾选阴影复选框，让它生效，在这里可以设置阴影的偏移位置和模糊程度，并且可以设置阴影的颜色。

：设置元件边框的颜色，单击下三角，弹出框可用来选择颜色。

：设置元件线宽，单击下三角，弹出框可用来选择边框的宽度。

：设置元件的线条样式，单击下三角，弹出框可用来选择线条样式，实线或虚线。

：可以设置水平线元件和垂直线元件的箭头样式。

实战演练1. 单击矩形一元件，将其边框编辑为红色、粗线、打点式线条；将矩形二编辑成蓝色背景，红色外部阴影。

编辑矩形一和矩形二

2. 将矩形二的文本字体设置为华文琥珀，字体类型设置为BoldOblique，字号设置为28，添加粗体、斜体、下划线设置，字体颜色设置为黄色，水平位置靠左对齐，垂直位置顶部对齐。

矩形二字体设置3. 将矩形二元件的x值设置为360，y值设置为80；宽度w值设置为240，h值设置为100。

编辑元件的位置和大小3.自定义工具栏

工具栏里有很多快捷按钮，有一些按钮是经常会用到的，有一些按钮可能很久都不会用到一次，这时可以自定义工具栏，在自定义工具栏里选择显示什么快捷按钮。

单击视图菜单下工具栏选项，选择自定义工具栏。

自定义工具栏2.1.3页面区域

页面区域是用来显示软件页面的，从这里可以了解到软件的大致结构，有哪些页面，以及页面之间的关系。

页面区域采用树状结构来显示页面，以index页为树的根节点，可以对页面进行增加、移动、删除等操作来管理软件原型的页面。

页面区域2.1.4元件库区域

元件库区域包含了制作原型需要的一些基础元件，AxureRP8中原型设计工具默认包含线框图元件库和流程图元件库、图标元件库。

线框图元件库里提供了40种线框图元件，常用的有图片、文本标签、矩形、占位符、水平线、垂直线、文本框、下拉列表框、复选框、单选按钮、提交按钮。

线框图元件

流程图元件库里提供了13种流程图元件，有各种图形、图片、文件、角色、数据库等。

图标元件库里提供了各种各样的图标，比如箭头、电池、统计图标等。

流程图元件图标元件2.1.5母版区域

母版区域用来设计一些共用、复用的区域，如网站尾部版权区域，可能每个页面都会用到版权信息，也可以设计导航菜单，如移动App的底部标签导航，在母版中设计一次，在其他页面可直接引用，达到共用、复用的效果。

母版区域2.1.6工作区域

工作区域是用来绘制原型的画布。在这个区域里完成原型的设计，就像画画时在画布上尽情绘制。

工作区域1.1.7检视区域

检视区域是用来设计页面或者元件的样式和交互效果的，可以设置属性，如添加页面交互效果，页面载入时触发事件、窗口尺寸改变时触发事件、窗口滚动时触发事件，以及在更多事件里还提供许多其他的事件。

属性设置

在检视区域中可以填写页面或者元件注释，自定义注释的名称，如图1.46所示。

还可以设计页面、元件的样式，比如页面在浏览器中显示的对齐方式是居中对齐还是居左对齐，页面的背景色或者背景图片，还可以设置草图的效果，针对元件设置禁用、选中等属性，也可以给元件添加样式，设置元件的位置和大小、选择元件的样式，以及字体、边框线、圆角半径、对齐方式等。

说明样式2.1.8页面概要区域

页面概要区域用来管理页面上使用的元件，可以查看页面上使用了哪些元件及管理这些元件，比如可以管理动态面板，增加动态面板、移动动态面板及删除动态面板等操作。

页面概要区域2.1 认识软件界面2.2 用页面区域管理软件页面2.3 移动端与PC端的原型制作规范2.4 小结2.2.1 页面区域是什么

2.2.2 页面区域的功能使用2.2.3实战——“百度门户”栏目规划2.2.4 小结2.2.1页面区域是什么什么是页面区域页面区域由两部分组成。一部分是功能菜单，就是一些操作页面的按钮，在页面右键选项里提供更多操作按钮，另一部分是页面，呈现树状结构，与Windows文件存放目录结构一致。通过父与子的页面关系、兄弟和兄弟的页面关系，将设计的产品页面整合起来，形成产品的文档，如图2.3所示。

图2.3页面区域的结构和功能

页面区域能干什么1.页面区域可以用来规划软件的功能单元或者软件的结构

2.页面区域可以让使用者快速地了解软件的结构

3.页面区域方便使用者快速地找到想要的页面

使用页面区域注意事项1.制作软件原型时要规划软件的功能菜单或者栏目结构2.页面的命名要有意义制作原型时要事先规划好软件的功能菜单或者栏目结构，不要随意地在站点地图上新建页面，导致页面结构混乱，根本看不出软件的功能结构。页面的命名要让使用者一看，就能知道这个页面所要表达的含义。要做到顾名思义，不光是页面要命名得有意义，部件也要命名得有意义。2.2.1 站点地图是什么2.2.2 页面区域的功能使用2.2.3 实战——“百度门户”栏目规划2.2.4 小结2.2.2页面区域的功能使用页面区域的功能使用包括两方面内容：

功能菜单的使用01OPTION02OPTION页面管理图2.4页面的功能菜单

除了使用功能菜单来管理页面，也可以在页面上右键单击，通过弹出的

菜单选项管理页面，如图2.5所示。

图2.5页面右键菜单选项

添加：菜单选项，可以所选页面之前或之后新增同级页面，新增文件夹或新增子页面。它的效果和功能条上的新增页面和新增文件夹是一样的。

移动：菜单选项可以移动页面的前后顺序关系，调整页面的层级关系，和功能条上的移动操作一致。

删除：不想要的页面或者文件夹可以通过删除菜单选项来进行删除。如果当前页面下含有子页面，Axure会自动提示，单击提示中的“确认”后会同时删除所有子页面。

重命名：页面的重新命名的方式有3种。

页面重新命名的方式有3种：通过快捷键F2进行页面的重新命名。通过右键菜单选项里的重命名选项来重新命名；选中页面后再单击页面名称；312通过图表（标）类型菜单选项来更改页面的图标类型，可以改为页面或者流程图的图标。图标的更改并不会影响页面的内容，只是便于对页面的管理。通过生成流程图菜单选项，可以生成纵向或者横向的流程图。选中index页面，然后单击鼠标右键，选择生成流程图选项，生成纵向流程图，如图2.6所示。

图2.6纵向流程图2.2.1 站点地图是什么2.2.2 页面区域的功能使用2.2.3 实战——“百度门户”栏目规划2.2.4 小结2.2.3实战——“百度门户”栏目规划

结合前两节学习的内容，我们来做一个“百度”栏目规划的案例，如图2.7所示。

图2.7百度门户百度门户，它有7个一级菜单，也就是被划分为7个大的功能模块。123456（一）首页：这个是很多网站都存在的模块，展示网站的综合信息。（二）百度介绍：也就是企业介绍，也是必有的一个模块。（三）新闻中心：用来介绍公司的一些新闻事件。（四）产品中心：这个模块可以根据实际情况来选择是否有。（五）商业中心：是百度的营销推广模块，可以根据实际情况来选择（六）招贤纳士：是很多门户网站都存在的功能模块。7（七）联系我们：是很多门户网站都存在的功能模块。1.将index页面重新命名为“百度门户”，在百度门户下面建立7个页面，分别命名为“首页”“百度介绍”“新闻中心”“产品中心”“商业中心”“招贤纳士”和“联系我们”，如图2.8所示。

图2.8百度一级菜单

在百度介绍页面新增两个子页面，有两种方式：一种是通过功能条，另一种是通过右键单击

菜单选项。将两个子页面分别命名为“百度文化”和“百度之路”，如图2.9所示。在产品中心页面新增3个子页面，分别命名为“产品大全”“用户帮助”和“投诉中心”，

可以把暂时不需要展示的子页面收缩起来，如图2.10所示。

图2.9百度介绍二级菜单

图2.10产品中心二级菜单

在商业中心页面新增4个子页面，分别命名为“百度推广”“营销中心”“互动营销”和

联盟合作”，如图2.11所示。在招贤纳士页面新增3个子页面，分别命名为“社会招聘”“校园招聘”和“百度校园”，

如图2.12所示。

图2.11商业中心二级菜单

图2.12招贤纳士二级菜单

6. 在联系我们页面新增一个子页面，命名为“参观百度”，如图2.13所示。

图2.13联系我们二级菜单2.2.1 页面区域是什么

2.2.2 页面区域的功能使用2.2.3 实战——“百度门户”栏目规划2.2.4 小结2.2.4小结

本小节主要学习页面区域的使用，通过页面区域管理页面，应当做到以下几点。

（1）了解什么是页面区域，页面区域由两部分组成：功能菜单和页面。它可以管理软件的页面关系。

（2）通过功能菜单和右键菜单选项来管理页面，包括新增页面、移动页面、删除页面及搜索页面等。

（3）学会如何规划软件栏目结构。练习题目：通过页面区域进行“清华大学门户”栏目规划导航菜单有：首页、清华新闻、学校概况（校长致辞、学校沿革、历任领导、现任领导、组织机构、统计资料）、院系设置、师资队伍、教育教学（本科生教育、研究生教育、留学生教育、继续教育）、科学研究（科研项目、科研机构、科研合作、科研成果与知识产权、学术交流）、招生就业（本科生招生、研究生招生、学生职业发展）、人才招聘（招聘计划、招聘信息、我要招聘）、图书馆、走进清华（校园生活、校园风光、实用信息）。【注意】：括号里面是二级菜单。2.1 认识软件界面2.2 用页面区域管理软件页面2.3 移动端与PC端的原型制作规范2.4 小结2.3 移动端与PC端的原型制作规范2.1 认识软件界面2.2 用页面区域管理软件页面2.3 移动端与PC端的原型制作规范2.4 小结2.4小结本章节主要讲解了：认识Axure的软件界面，了解软件界面上的8个区域及它们含义和功能。学习页面区域的使用，通过页面区域管理页面的知识。谢谢观赏互联网＋职业技能系列微课版创新教材上次课程回顾初识Axure软件界面页面区域使用页面区域注意事项1.制作软件原型时要规划软件的功能菜单或者栏目结构2.页面的命名要有意义制作原型时要事先规划好软件的功能菜单或者栏目结构，不要随意地在站点地图上新建页面，导致页面结构混乱，根本看不出软件的功能结构。页面的命名要让使用者一看，就能知道这个页面所要表达的含义。要做到顾名思义，不光是页面要命名得有意义，部件也要命名得有意义。

页面区域的功能使用页面区域的功能使用包括两方面内容：

功能菜单的使用01OPTION02OPTION页面管理页面的功能菜单

除了使用功能菜单来管理页面，也可以在页面上右键单击，通过弹出的

菜单选项管理页面。

页面右键菜单选项练习题目：通过页面区域进行“夸父网”栏目规划导航菜单有：首页、学院介绍（学院简介、学院院长、专业介绍、行政人员、大事记）、师资队伍（学术带头人、客座讲授、兼职教师、教授、副教授、讲师）、教学管理（教务管理、教研活动、教务通知）、学生工作（学生活动、优秀学子）、实习实训（校内实训平台、校外实习基地）、培养成果（考研留学、竞赛获奖、晒就业、学生文集）、创新实验班【注意】：括号里面是二级菜单。

Axure基本元件和母版技术型文科人才系列课程主讲人：王向军文学与传媒学院新媒体产品设计与项目管理大家小时候都玩过积木，积木的形状、大小、长短各不相同，发挥我们自己的想象力，就可以用积木拼出一座桥、一个城堡、一座大楼。

Axure也提供了很多积木，我们称之为组件或者元件，只不过它要比小时候的积木复杂了很多。使用元件，加上设计、经验、想象力，我们可以绘制出想要的软件原型，Axure默认内置了线框图元件库、流程图元件库、图标元件库，除了使用内置的元件库，也可以载入元件库和自定义元件库。

用元件“搭积木”1 Axure基本元件

2

课堂练习：页面顶部和底部3

课堂练习：母版4

小结3.1Axure基本元件AxureRP8原型设计软件里默认内置了基本元件有20种，表单类元件有7种，菜单与表格元件有4种，标记元件有9种。

元件库3.1基本元件的使用 基本元件包括矩形1、矩形2、矩形3、椭圆形、占位符、按钮、主要按钮、链接按钮、一级标题、二级标题、三级标题、文本标签、文本段落、水平线、垂直线、热区、动态面板、内部框架、中继器等。最后3个元件，由于使用比较复杂，交互效果丰富，使用频率非常高，放在后面的章节中详细介绍。

基本元件1.标题元件的使用

标题元件可以用来作为一段文字的标题，也可以用来作为某个区域的标题说明。大家都设计过自己的简历，常把“个人信息”“教育经历”“工作经验”这类文字加粗起强调作用，这时就可以使用标题元件。 Axure提供了一级标题、二级标题、三级标题3个元件，一级标题元件是32号字、加粗、黑色（333333），二级标题元件是24号字、加粗、黑色（333333），三级标题元件是18号字、加粗、黑色（333333）。

标题1、标题2和标题3元件2.文本标签元件和文本段落元件的使用

文本标签元件是单行文本元件，文本段落元件是多行长文本元件。如果只有一行文本选择文本标签

元件，如果有多行文本可以使用文本段落元件。

文本标签和文本段落元件3.水平线和垂直线元件的使用水平线和垂直线是很灵活的两个元件，用它们可以设置一条水平线或者垂直线，可以利用工具栏快捷按钮编辑这两个元件，设置横线和垂直线的颜色、线框、线条样式和箭头方向。

水平线和垂直线元件3.2 课堂练习：锦城学院页面顶部和底部参照锦城学院官网（/index.html），完成顶部和底部的原型设计。顶部参考效果：底部参考效果：用Axure母版减少重复工作

主讲人：王向军文学与传媒学院技术型文科人才系列课程新媒体产品设计与项目管理在原型设计过程中，往往会涉及很多重复的页面内容，包括页面的首部、版权信

息、导航菜单等，如果不使用母版，这些页面就需要重复制作，工作量很大，若使用

母版，在母版里面只需要设计一次页面内容，这样其他页面可以直接使用这个母版，

在母版里修改还可以实现所有引用母版的页面同时更新，也不需要再到每个页面里修

改内容，如图所示。

1 母版功能介绍2 母版3种拖放行为的使用3 实战——锦城学院导航菜单母版设计4 小结1母版功能介绍Axure的母版解决重复制作原型某个类似功能的问题，制作一次母版，其他页面进行复用。在Axure原型设计工具的左下角区域是Axure的母版区域。

实战演练单击“新增母版”按钮可以新增一个母版，也可以单击鼠标右键选择“添加”，输入母版的名称“导航菜单”。单击“新增文件夹”按钮可以新增文件夹，命名为“页面母版”。对母版进行归类，可以存放导航菜单的母版、页首的母版、页尾的母版，单击鼠标右键选择“移动”选项调整页面层级关系。

导航菜单母版母版文件夹在母版上单击鼠标右键的选项里，通过“移动”选项可以调整母版之间的上下顺序和层级关系，通过“删除”选项可以进行删除母版，删除子母版的时候会弹出提示信息。在母版上单击鼠标右键的选项里，除了可以进行新增母版、新增文件夹、移动和删除操作，

还提供母版重命名、母版复制、设置母版拖放行为、将母版添加到页面中、将母版从页面中删除及查看母版使用情况等功能。

1.2制作母版的两种方式实战演练1. 在母版区域里新建一个“导航菜单”母版，进入这个母版里，拖曳5个矩形1元件，宽度设置为100，高度设置为40，制作首页、公司介绍、新闻中心、招贤纳士、联系我们这5个菜单。

1.通过母版区域新建母版2. 在页面区域上新建5个页面，分别命名为“首页”“公司介绍”“新闻中心”“招贤纳士”和“联系我们”，用来显示这5个菜单的内容。

将制作完的母版，引用到5个页面里，需要在导航菜单母版上，鼠标右键单击选择“新增页面”选项，将母版引用到想引用的页面里。进入“首页”页面里，可以看到将母版的“导航菜单”引用到了首页里，其他页面也是一样的。

5. 假如不想将母版引用到页面里，在“导航菜单”母版上单击鼠标右键，选择“页面删除”选项即可，也可以直接在首页里将该母版引用删除。

2.通过元件转换为母版实战演练在页面区域上建立一个页面“首页”。进入“首页”里，同样制作5个菜单。同时选中这5个菜单，单击鼠标右键选择转换为“母版”，新母版命名为“导航菜单”即可。

3. 元件转换完母版后，就可以在母版区域里看到转换后的母版“导航菜单”。

2母版的3种拖放行为母版有3种拖放行为：任何位置、锁定到母版中的位置、从母版脱离。下面来看看母版这3种拖放行为及它们的含义。

2.1拖放行为为任何位置1. 在母版区域新增一个母版，命名为“版权信息”。进入这个母版里，拖曳一个矩形1元件，宽度设置为800，高度设置为100，文本内容输入为“这是版权信息”。

在页面区域上新建5个页面，分别命名为“首页”“公司介绍”“新闻中心”“招贤纳士”和“联系我们”，用来显示这5个菜单的内容。将制作完的母版引用到“公司介绍”“新闻中心”两个页面里，需要在版权信息母版上单击鼠标右键，选择“新增页面”，将母版引用到想引用的页面。

4. 进入“公司介绍”页面，可以看到“版权信息”的母版被引用到了“公司介绍”，移动引用的版权信息内容，发现无法移动，在母版上单击鼠标右键，将“固定位置”取消勾选，就可以随意移动母版内容了，这就是任何位置的拖放行为。

5. 在“版权信息”母版里修改版权信息，回到“公司介绍”“新闻中心”页面里，可以看到引用母版的页面内容也会发生修改。这样当有变更的时候，就不需要到页面里逐个进行修改，只需要在母版里进行修改，引用母版的页面可以自动更新。

2.2拖放行为为锁定到母版中的位置锁定到母版中的位置：母版在引用的页面会处于最底层并被锁定，对母版所做的修改会在所有引用母版的页面同时更新，页面引用母版中的控件位置与母版中的位置相同，这种拖放行为常用于布局和底板。

很多网站需要更换不同的背景色或者背景图片，使用母版可以进行背景色或者背景图片的切换，这样所有的页面背景都会一起更改。

实战演练新增一个母版，命名为“背景图”。打开这个母版，拖曳一个矩形3元件，宽度设置为800，高度设置为1000，位置（0,0）。将“背景图”母版引用到“招贤纳士”页面。打开“招贤纳士”页面，可以看到母版已被成功引用。

3. 在“招贤纳士”页面里可以看到我们无法移动引用的母版内容。如果背景图想换成其他的颜色，比如绿色，只需要在“背景图”母版里，填充为绿色（00CC00），页面的背景图也会随之变为绿色。

2.3拖放行为为从母版脱离

从母版脱离：这种拖放行为会使页面引用的母版与原母版失去联系，页面引用的母版元件可以像一般元件一样进行编辑，常用于创建包含自定义元件的组合。实战演练在母版区域里新建一个“导航菜单”母版，进入这个母版里，同样制作5个菜单。将制作完的“导航菜单”母版，引用到“联系我们”页面里。

3. 进入“联系我们”页面里，可以看到引用的导航菜单内容，默认引用的母版内容是锁定的，不能移动。如果想修改引用的母版内容，需要将其变为一般元件，在母版内容上单击鼠标右键勾选“脱离母版”。

4. 导航菜单从母版脱离后，变为普通元件，导航菜单内容可以随意地移动和放置，就算“导航菜单”母版内容修改，“联系我们”页面内容也不会随之变化。进入“导航菜单”母版，复制一个导航菜单，文本内容为“留言本”，回到“联系我们”页面可以看到，内容并没有更新。

3实战——锦城学院导航菜单母版设计1. 在母版区域新建一个母版，命名为“导航菜单母版”。设计“导航母版”。2.在母版区域新建一个“页尾母版”并设计。将“导航母版”引用到页面上。在“导母版”上单击鼠标右键，选择“新增页

面”选项，在弹出的对话框中单击“全选”按钮将所有页面选中，再单击“确定”按钮即可。将“页尾”母版也引用到页面上。在“页尾母版”上单击鼠标右键，选择“新增页

面”选项，在弹出的对话框中单击“全选”按钮，选中所有页面，再单击“确定”按钮即

可。

小结

本章主要学习Axure母版的使用，应当做到以下几点。

（1）学会Axure母版的基本操作，如新增母版、删除母版、将母版引用到页面、从页面上删除母版等操作。

（2）学会制作母版的两种方式：一种是通过母版区域新建母版，另一种是通过元件转换为母版。

（3）学会母版的3种拖放行为：任何位置、锁定到母版中的位置、从母版脱离。根据不同的场合使用不同的拖放行为。

谢谢

Axure表单元件技术型文科人才系列课程主讲人：文学与传媒学院新媒体产品设计与项目管理本章案例：制作“百度注册界面”，效果如图所示。

回顾:矩形、图片元件1.设置页面居中；添加页面背景填充（图片）;知识点：页面属性2.设置表单背景;知识点：矩形的应用拓展：设置文本框的边框为浅蓝色，圆角半径为15px知识点：添加形状、钢笔工具、更换形状、改变形状（翻转、合并、去除、相交、排除）3.添加图片LOGO.知识点：添加图片、分割图片、裁剪图片、变换图片（翻转、优化、固定边角（圆角））3

实战——制作“仿百度注册原型”1

Axure表单元件2

课堂练习4

小结回顾：

Axure基本元件AxureRP8原型设计软件里默认内置了基本元件有20种，表单类元件有7种，菜单与表格元件有4种，标记元件有9种。

元件库1表单类元件的使用表单类元件是用在设计表单时经常会用到的元件，如登录、注册表单等。

表单类元件包括文本框、多行文本框、下拉列表框、列表框、复选框、单选按

钮、提交按钮。

表单型元件案例：制作“百度注册界面”，效果如图所示。

1.文本框元件和多行文本框元件的使用文本框元件，经常用于收集表单内容，如单行输入框；多行文本框元件，用于多行文本的输入。

文本框和多行文本框元件

在登录网站的时候，经常会在输入框里看到“请输入用户名、手机号或者邮箱”，文本框元件同样可以填写提示信息。

在文本框输入内容时，提示文字会自然消失。在检视区域的属性选项卡里，可以设置文本框的输入类型，如文本（Text）、密码、邮箱、Number等。

文本框类型

选择文本（Text）类型可以设置提示文字的样式，输入文字：“请输入用户名”，字体颜色为浅灰色（CCCCCC），单击“提示样式”来设置。

提示文字

在属性选项卡还可以设置文本框元件文字输入的最大长度，同时也可以隐藏边框、设置为只读或者禁用。

文本框属性

多行文本框元件的右侧属性选项卡里同样可以设置提示文字、隐藏边框、只读和禁用，但是不能设置文本框的类型和最大长度。

多行文本框元件设置2.下拉列表框元件和列表框元件的使用

下拉列表框元件，是经常用到的下拉菜单，只能显示一个下拉菜单选项，而列表框元件可以显示多个下拉菜单选项。

如果页面区域有限，可以使用下拉列表框元件，如果页面区域比较大，只放置一个下拉列表框，感觉整个页面布局不是很美观，使用列表框元件更合适。

下拉列表框元件和列表框元件实战演练1. 拖曳一个下拉列表框元件，双击这个元件，弹出编辑选项对话框，单击加号可以新增一个菜单选项，单击菜单选项可以对它重新命名，命名为“北京”，再新增一个下拉选项，命名为“上海”。

编辑列表选项对话框单击向上箭头和向下箭头，调整下拉菜单选项的顺序，单击红色差号，可以删除选项。单击“添加多个”按钮，弹出添加多个对话框，每行代表一个下拉菜单选项。

调整选项顺序和删除

添加多个选项对话框如果想把某个选项作为默认显示的选项，只需要勾选其前面的复选框。列表框的操作方式和下拉列表框的操作方式一样，但是它允许选择多个默认选项。

设置默认选项列表框设置默认选项3.复选框元件和单选按钮元件的使用

如果允许选择多个选项，可以使用复选框元件，如果每次只能选中一个，适合使用单选按钮元件。

复选框和单选按钮元件4.提交按钮元件的使用提交按钮元件经常被用来作为操作按钮，如注册、登录、保存、取消按钮等。

课堂练习实战1——制作“仿百度注册原型”1.新建项目l新建项目，另存为“百度.rp”;l重命名页面“page1”为“注册”。2.在页面中拖入文本元件。依次拖入一级标题和文本标签，双击画布上的元件，修改元件文字。3.设置文本样式、对齐和分布。框选所有文本元件，点击上方样式面板的“左”对齐和“垂直”分布，使其在画布上平均排列。选择文本“登录”，设置文本颜色为蓝色.4.拖入文本框元件。从上面标尺拖入3条水平页面辅助线，分别到“用户名”、“手机号”、“密码”文本元件处；从左边标尺拖入一条垂直页面辅助线，距离文本元件20px；勾选“视图”→“标尺，网格和辅助线”→“对齐辅助线”命令；从表单元件列表中，拖入3个文本框元件到相应位置。5.设置文本框的提示属性点开“交互”面板的提示属性，设置用户名文本框的类型为“文本”，提示文字为“请设置用户名”，并设置“获取焦点”之后隐藏该提示文字；设置手机号文本框的类型为“电话号码”，提示文字为“可用于登录和找回密码”，并设置“获取焦点”之后隐藏该提示文字；设置密码文本框的类型为“密码”，提示文字为“请设置登录密码”，并设置“获取焦点”之后隐藏该提示文字。6.拖入按钮元件拖入1个主要按钮到页面相应位置；双击按钮元件，修改按钮上的文字为“注册”；选择按钮上的文本，修改样式为：微软雅黑、加粗、16px；修改按钮的填充颜色为浅蓝色；修改按钮的圆角为20px。7.拖入复选框从表单元件列表中拖入1个复选框到页面相应位置，并修改文字。修改文字的颜色。8.预览设置点击快捷功能中的“预览”按钮可以预览页面效果。预览可以选择不同的设置，在“发布（Publish）”菜单中的“预览选项”里设置预览的浏览器等。

实战2——制作“仿百度注册原型”1）打开项目2）设置页面样式（设置“页面对齐（PageAlign）”方式为：居中；设置“填充（Fill）”为“图片”，导入背景图片）3）添加矩形背景（置于表单底部，“填充”颜色为白色，透明度为90%，圆角为12px）。拓展：设置文本框的边框为蓝色。4）添加LOGO图片。5）预览效果小结

本章主要学习Axure元件库的使用，使用元件库绘制软件界面原型，应当掌握线框图元件的含义和使用，包括基本元件、表单型元件。

谢谢观赏技术型文科人才系列课程新媒体产品设计与项目管理

Axure交互基础技术型文科人才系列课程主讲人：文学与传媒学院新媒体产品设计与项目管理第五章AxureRP交互基础5.1AxureRP交互的三要素5.2实现注册信息验证交互功能第五章AxureRP交互基础5.1AxureRP交互的三要素事件（events）：是一个交互的触发器，例如，一个点击，鼠标悬停，鼠标拖动，一个拖放等。不同的部件拥有不同的响应事件。用例（cases）：是响应事件的路径，它可以定义条件逻辑。动作（actions）：对事件的响应，也可以理解为事件的结果。事件：当……，什么时候第五章AxureRP交互基础Axure的事件有两种：页面事件：页面加载时/页面载入……页面载入时OnPageLoad:当页面启动加载时窗口改变大小时OnWindowResize:当浏览器窗口大小改变时窗口滚动时OnWindowScroll:当浏览器窗口滚动时鼠标单击时OnClick:页面中的任何部件被点击时（不含空白处）鼠标双击时OnDoubleClick:当页面中的任何部件被双击时（不含空白处）鼠标右键单击时OnContextMenu:当页面中的任何部件被鼠标右键点击时（不含空白处）鼠标移动时OnMouseMove:当鼠标在页面任何位置移动时按键按下时OnKeyDown:当键盘上的按键按下时按键弹起时OnKeyUp:当键盘上的按键释放时自适应视图更改时OnAdaptiveViewChange:当自适应视图更改时当……什么时候第五章AxureRP交互基础Axure的事件有两种：元件事件鼠标单击时/鼠标移入时……鼠标点击并保持超过2秒时OnLongClick:当一个部件被点击并且鼠标按键保持超过2秒时按键按下时OnKeyDown:当键盘上的键按下时按键弹起时OnKeyUp:当键盘上的键弹起时移动OnMove:当面板移动时显示OnShow:当面板通过交互动作显示时隐藏OnHide:当面板通过交互动作隐藏时获取焦点OnFocus:当一个表单获取焦点时失去焦点时OnLostFocus:当一个部件失去焦点时鼠标单击时OnClick:当部件被点击鼠标移入时OnMouseEnter:当光标移入部件范围鼠标移出时OnMouseOut:当光标移出部件范围鼠标双击时OnDoubleClick:当时鼠标双击时鼠标右键单击时OnContextMenu:当鼠标右键点击时鼠标按键按下时OnMouseDown:当鼠标按下且没有释放时鼠标按键释放时OnMouseUp:当一个部件被鼠标点击,这个事件由鼠标按键释放触发鼠标移动时OnMouseMove:当光标在一个部件上移动时鼠标悬停超过2秒时OnMouseHover:当光标在一个部件上悬停超过2秒时动作动作1.链接：切换用户UI链接动作包括当前窗口打开链接、新窗口/标签页打开链接、弹出窗口打开链接、父窗口打开链接、关闭窗口、内部框架打开链接以及滚动到部件（锚点链接）。动作2.元件：元件效果元件动作是常用到的交互行为，它分为元件的显示/隐藏行为、设置元件文本行为、设置元件图像行为、设置元件选择/选中行为、设置元件选定的列表项行为、设置元件启用/禁用行为，设置元件移动行为，设置元件置于顶层/底层行为、设置元件获得焦点行为、设置元件展开/折叠树节点行为，元件的交互行为越丰富，制作出的原型交互效果体验度越真实。动作3.设置动态面板动态面板的动作包括设置动态面板的显示、隐藏以及设置动态面板的显示效果，同时可以设置动态面板的大小，通过动态面板的使用，可以使原型的交互效果更真实，体验度更好动作4.中继器：动态操作数据中继器的动作可以实现对数据的增加、删除、修改、查询等功能，模拟真实系统的数据库操作，进一步加强交互效果，给用户最真实的系统使用体验。案例当“用户名”文本框获取焦点时，显示提示信息；当“用户名”文本框失去焦点时，隐藏提示信息；交互对象：用户名文本框事件：当用户名文本框获取焦点时动作：显示提示信息事件：当用户名文本框失去焦点时动作：隐藏提示信息注意：提示信息初始状态为隐藏。交互对象：密码文本框事件：当密码文本框获取焦点时动作：显示密码提示信息用例1.新建、删除条件和条件之间关系当选择“全部”的时候，多个条件是并集关系，当设置的条件都满足时，才执行相关动作。选择“任意”的时候，当多个条件有一个满足时，就可以执行相关动作。2.条件设置条件设置部分可以理解为三个部分，用来比较图的圈4和圈6的关系，图圈5是运算符，是比较方式。随着图的圈4选择，圈6也是随着变化。交互对象：密码文本框事件：当密码文本框失去焦点时用例1：密码文本框

元件文字长度<6动作1：隐藏密码提示信息动作2：密码格式提示

设置文本

密码格式不符合要求

用例2：密码文本框

元件文字长度>=6动作：隐藏密码提示信息动作2：密码格式提示

设置文本“”案例当“密码”文本框失去焦点时，判断密码是否大于6位，否则显示提示信息：密码设置不符合要求；案例:多个逻辑条件当鼠标单击“注册”按钮时，如果用户名、手机号、密码文本框为空，则提示“用户名、密码、手机号不符合要求”；当鼠标单击“注册”按钮时，如果未选中“阅读同意协议”，则提示“请阅读并同意用户协议”；当鼠标单击“注册”按钮时，如果文本框不为空且同意协议，则打开链接“注册成功”页面。案例:多个逻辑条件5.2实现注册信息验证交互功能案例描述：当鼠标悬停用户名、手机号、密码文本框或获取焦点时，边框颜色改变；当“用户名”文本框获取焦点时，显示提示信息，失去焦点时，隐藏提示信息；当“密码”文本框失去焦点时，判断密码是否大于6位，否则显示提示信息；当鼠标单击“注册”按钮时，如果用户名、手机号、密码文本框为空，则提示“不能为空”；当鼠标单击“注册”按钮时，如果为选中“阅读同意协议”，则提示“请阅读并同意用户协议”；当鼠标单击“注册”按钮时，如果文本框不为空且同意协议，则打开链接“首页”页面。交互样式当用户名、手机号、密码文本框获取焦点时，边框颜色改变；小结交互：根据用户时间的输入，通过不同的用例和动作，来让元件按照外界的输入来展现出相应的行为，以此实现交互效果。谢谢观赏技术型文科人才系列课程新媒体产品设计与项目管理回顾：交互三要素事件：交互的触发器，我们可以理解为“当……”。如，当鼠标单击某个按钮，当文本框获得焦点，等。动作：对事件的响应，即：交互触发后，发生了什么？如，显示元件、隐藏元件，打开链接页面，等。用例：动作发生的条件。如，只有注册表单信息不为空，才打开注册成功页面。回顾：交互三要素事件动作用例1动作1动作2用例2动作

Axure动态面板技术型文科人才系列课程主讲人：文学与传媒学院新媒体产品设计与项目管理案例引入第六章Axure动态面板目标（1）知识目标：了解动态面板元件及状态的概念；理解动态面板元件及其状态的关系

。（2）能力目标：熟练掌握创建动态面板的方法；熟练掌握动态面板的常用事件和动作；（重点。中阶思维和能力）熟练掌握动态面板制作各种复杂的交互效果。（难点。高阶思维和能力）（3）素养目标：培养学生提出问题、分析问题、解决问题的能力；（高阶思维和能力）培养学生养成知识总结习惯；培养学生表达演示素养。第六章Axure动态面板6.1AxureRP动态面板元件及状态6.2动态面板的事件和动作6.3利用动态面板实现图片自动轮播高阶思维和能力扩展：（1）分别添加左、右箭头（icon元件库中），当点击向左箭头图标时，图片向右滑动切换上一幅图；当点击向右箭头图标时，图片向左滑动切换下一幅图。（2）在动态面板上，鼠标左滑动时，图片向左滑动切换下一幅图；鼠标左滑动时，图片向右滑动切换上一幅图。第六章Axure动态面板6.1AxureRP动态面板元件及状态动态面板有多个状态每个状态本身是一个页面任何时候一个动态面板只能显示一种状态第一个状态为默认状态通过设置面板状态来控制状态的显示顺序或隐藏/达成交互的效果动态面板添加动态面板1.直接通过拖拽的方式从元件面板加入到画布中2.将页面中的元件或元件组转换成动态面板演示：在动态面板状态1中添加图片元件，或将图片转换成动态面板动态面板状态管理（1）双击页面中的动态面板元件。进入到动态面板的第1个状态，在状态顶部菜单中执行【管理面板状态】命令。（2）在【概要】面板中,双击动态面板元件或者也右击它,从弹出的快捷菜单中执行【管理面板状态】命令。可以添加、删除、上移、下移、复制状态,或编辑状态内容等。演示：复制4个状态，分别添加不同的图片6.2动态面板的事件和动作动态面板的事件【载入时】刚在网页中加载动态面板【状态改变时】指从一个状态切换到另一个状态。【拖动时】【拖动开始时】、【拖动结束时】如使用鼠标拖动动态面板完成诸如拼图的游戏等操作。【向左拖动结束时】、【向右拖动结束时】、【向上拖动结束时】和【向下拖动结束时】如滑屏动作6.2动态面板的事件和动作动态面板的动作1.选择状态可以选择动态面板中的某个状态【下一项】显示下一个状态，还可以指定是否向后循环以及循环的间隔时间等。【上一项】显示上一个状态，还可以指定是否向前循环以及循环的间隔时间等。【停止循环】停止动态面板的状态循环。【值】将状态名或状态序列号作为指定的显示状态。2.进入和退出动画可以设置由一个状态进入另一个状态时的动画过渡效果。第六章Axure动态面板事件用例动作动态面板“载入时”

图片动态面板状态改变为“状态2”，动画：向左滑动动态面板“状态改变时”图片动态面板状态改变为“下一项”，“向后循环”，设置动画：向左滑动；重复间隔时间。6.3动态面板实现滑动图片轮播第六章Axure动态面板6.3动态面板实现滑动图片轮播

演示在图片下方，添加圆点动态面板；图片下方小圆点随着图片变化同步变化；（状态变化和时间间隔需要一致）事件用例动作单击圆点热区时

图片动态面板状态随之改变第六章Axure动态面板高阶思维和能力扩展：（1）分别添加左、右箭头（icon元件库中），当点击向左箭头图标时，图片向右滑动切换上一幅图；当点击向右箭头图标时，图片向左滑动切换下一幅图。（2）在动态面板上，鼠标左滑动结束时，面板向左滑动切换下一幅图；鼠标右滑动结束时，面板向右滑动切换上一幅图。事件用例动作图片动态面板“左滑动结束时”

图片动态面板状态变为”下一项”图片动态面板“右滑动结束时”图片动态面板状态变为”上一项”小结动态面板支持在同一个区域内放置多个状态的内容，选择显示其中一个状态的内容，不能同时显示多个状态。支持外部通过命令来切换动态面板的状态，面板的状态有先后顺序，支持正序和倒序变换。在状态变化时支持一些简单的过场动画。谢谢观赏技术型文科人才系列课程新媒体产品设计与项目管理

Axure内联框架技术型文科人才系列课程主讲人：文学与传媒学院新媒体产品设计与项目管理第七章Axure内联框架目标（1）知识目标：了解内联框架元件；理解内联框架的作用

。（2）能力目标：熟练掌握内联框架的使用方法；（重点）熟练掌握热区元件的使用方法。（3）素养目标：培养学生提出问题、分析问题、解决问题的能力；（高阶思维和能力）培养学生养成知识总结习惯；培养学生表达演示素养。网页中嵌入互联网网页、音视频文件、地图等。内联框架组件内联框架是Axurerp9中的一个元件，也相当于一个容器，内联框架支持嵌入外部资源在元件中，包括互联网网页、音视频文件、网页地图等。设置内联框架的样式添加框架目标、隐藏边框、滚动和预览功能内联框架的基本操作嵌入网页跳转网页内联框架可以链接文件路径，文件路径包括本地路径和网络路径，这两种路径分别支持嵌入本地视频和网络视频。本地视频:把视频文件放在生成后的文件夹，内联框架的url设置中写本地路径（带扩展名）。网络视频:分享-通用代码-找到src的值（‘’引号里面的内容）例<iframeheight=498width=510src='/embed/XNTA5NDI1MTc2NA=='frameborder=0'allowfullscreen'></iframe>

嵌入视频嵌入地图案例演练：视频点播案例描述顶部为视频播放控件（内联框架），下方是视频列表，点击任意列表项（热区），即刻播放相关视频内容。事件用例动作单击列表某一热区时

内联框架目标随之改变操作关键点试做：仿微信低保真原型案例描述底部为菜单，点击不同的区域，菜单图标颜色改变，且主屏显示不同页面。谢谢观赏技术型文科人才系列课程新媒体产品设计与项目管