第四章Web端“电商平台”产品交互设计开发-

网页交互原型工具Axure的应用规范知识要点01Web端“电商平台”产品交互设计开发项目背景分析02Web端“电商平台”产品交互设计开发项目需求分析03AxurePR9工具介绍04Axure常用元件05查看原型06项目实施-Web端“电商平台”产品交互设计开发Web端“电商平台”产品交互设计开发项目背景分析第一部分Web端“电商平台”产品交互设计开发项目背景分析Web端“电商平台”产品交互设计开发项目背景分析重点从市场发展以及国家产业规划来进行分析。1.电商平台项目市场迅速发展随着互联网的发展电商平台项目所属行业是在最近几年间迅速发展。行业在繁荣国内市场、扩大出口创汇、吸纳社会就业、促进经济增长等方面发挥的作用越来越明显。2.国家产业规划或地方产业规划我国非常重视电子商务系统领域的发展，国家和地方在最近几年有关该领域的政策力度明显加强，突出表现在如下几个方面：稳定国内外市场；提高自主创新能力；加快实施技术改造；淘汰落后产能；优化区域布局；完善服务体系；加快自主品牌建设；提升企业竞争实力Web端“电商平台”产品交互设计开发项目需求分析第二部分Web端“电商平台”产品交互设计开发项目需求分析Web端“电商平台”产品交互设计开发项目主要从目标顾客、功能规划、业务流程等方面进行需求分析。1.目标顾客适用于各种对数码电子产品感兴趣且有需求的人士，还有学生、上班族、商务人士。2.提供的功能与服务用户可以直接在网站上对比各种产品之间的功能、结构、性能，十分方便快捷的进行商品之间的比较，很快的选出自己感兴趣的商品，对用户来说，节省了大量的时间。3.运行环境:Windows操作系统4.功能规划(1)网站前台部分模块功能介绍(2)后台功能模块介绍5、业务流程图AxurePR9工具介绍第三部分1界面介绍1、菜单栏2、工作区域3、页面栏4、概要视图5、元件库6、母版7、样式窗格8、交互9、注释菜单栏介绍复制、剪切及粘贴区域CtrlX为剪切CtrlC为复制CtrlV为粘贴选择模式第一个相交选中第二个包含选中第三个连接在Axure中，可以选中一段交互进行复制粘贴，值得注意的是，选择某个元件，按下复制按钮或快捷键，然后选中另一个元件按下CtrlAltV即可将前一个元件的格式及公共交互部分复制并粘贴到后一个元件上插入按钮：绘画矩形圆形线段文本图片其他形状拖动方块可以任意改变元件的形状菜单栏介绍将选中的元件置于最下层或最上层选中多个元件点击组合将元件打组实现放大和缩小屏快捷键按住Ctrl键，滑动鼠标滚轮8种对齐方式，左对齐居中对齐右对齐顶部对齐居中底部对齐横向均与分布垂直均匀分布预览和共享预览就是预览原型预览和共享12缺点是不可展示动态交互

使用axure直接预览

文件->导出所有页面为图片使用Chrome浏览器预览时添加插件预览和共享34发布到Axure_shared上，生成链接

生成原型页面到本地文件夹自定义界面自定义界面黑夜模式01Axure元件库DefaultFlowIconsAxure自带基础元件库库的切换在元件库的下拉菜单中可以看到所有的元件库，也可以查看加载好的本地图片文件夹（需要导入图片文件夹）。也可以通过AxureCloud来加载/切换库。Axure元件库库的添加查看元件库存储位置以及删除库的删除：在下拉菜单中选择好该元件库后，直接单击选项Option按钮（在右上角）然后选择RemoveLibrary移除元件库按钮(图片见上图)Axure元件库创建自己的元件库Axure元件库元件库中元件的图标与提示元件的使用元件的使用031元件添加直接单击选择某一个元件将其拖至画布(中间区域)中,也可以通过左上角的插入菜单选择其他形状的部件。元件的使用元件的移动操作元件的移动：拖住元件并在画布上松开鼠标即可；也可以直接在X和Y中直接输入坐标。元件的使用同时定位多个元件进行操作按住CTRL使用鼠标单击每个元件可同时选中多个元件，可以看到坐标X

或者Y（W

与

H、即宽和高）不尽相同。提示：X,Y,W,H

这些参数中只有当多个元件的这些值相同时才会展示，否则在选中时不会展示。元件的使用元件的其他操作旋转。元件的命名元件的组合元件的锁定与隐藏元件的样式

不透明度排版元件的样式

填充边框元件的样式

阴影、圆角、边距元件的样式

元件样式及样式管理器元件的样式

更新和创建样式快速更新快速创建元件的组合元件的组合与取消元件的组合组合的交互元件选中状态页面及其样式1.添加页面：直接在左侧页面样式栏中的右上角点击添加按钮，此时即可以添加一个空白的页面，你也可以在某一个页面上右击，然后添加页面或子页面。2.页面的删除：直接右键单击该页面，选择删除，或者选中某一个页面，然后直接按DELETE键。3.页面的重命名：与WINDOWS电脑文件的重命名一样，可以右键单击，选择重命名

或者缓慢单击该文件名。页面及其样式页面的样式页面的尺寸自适应视图自适应视图视图的颜色通常有这几种：1.蓝绿色：当前在画布上显示的视图。修改将适用于本视图2.黄色：当前显示视图的子视图。在当前修改将会影响此视图3.灰色：当前显示视图的父视图。在当前修改不会影响此视图4.绿色：当前修改会影响所有视图母版的创建母版的使用情形导航栏网站顶部header（包括LOGO)一些常用的按钮或组合，比如分享至第三方平台的按钮Tab的切换（APP中居多）在原型设计中，部件元件或元件的组合会重复使用，这些元件的组合就可被用来创建母版。）母版的创建方法一：选中多个元件后，右键单击，选择转换为母版方法二：从母版栏目中创建母版的使用母版的页面属性母版的页面交互将会在母版所处的任何一个实例页面被触发（前提是达到触发事件），比如你创建一个页面载入时的事件，那么当一个页面包含该母版时，就会触发此事件。母版的添加任意位置：此为默认情况，可将母版放至任意坐标上。母版实例的位置锁定到母版中的位置：此实例的位置与原母版中的位置相同。方法1：直接从母版窗格中拖至画布中。同时该母版将会出现红色遮罩（可在视图–>遮罩中切换）方法2：在需要的母版上右键选择添加母版到页面中母版的添加母版的添加脱离母版母版使用情况母版的引发事件母版视图视图的继承母版视图的编辑窗口蓝绿色：当前编辑对其适用；黄色：当下显示的是子视图，编辑对其适用；灰色：当下显示的是父视图，编辑对其不适用；绿色：影响所有视图被选中，编辑对所有视图适用。连接器菜单的边距填充连接器连接器（线）的形态改变形态添加文本形状形状的创建方法一：从左侧库中拖入画布中；方法二：插入菜单，通过一些快捷键我们可以快速插入常用的图形元件，各矢量图形的快捷键如下：P键钢笔工具R键矩形0键圆形L键线段T键文本钢笔（绘画）工具AXURE中的钢笔工具可以纵向矢量图形形状形状的变换水平翻转垂直翻转合并去除相交排除结合分开形状形状的转换图片引用页面Axure元件的交互样式Axure的交互一个交互由3部分构成：1.元件或页面的事件；2.在此事件上的情形；3.针对该情形的动作。4.事件是通过不同的情形和动作来对外界输入作出的一种反映。所以，事件包含一个或多个情形，而情形中又可包含多个动作不同的情形通过判断各自的条件来进行将要做什么，也就是说，不同的情形是不会同时发生的。交互的构成就相当于写if()语句时，if(条件1)｛

执行case1中actions；｝

if(条件2)｛

执行case2中actions；｝用集合的概念来描述上面三者的关系：事件>情形>动作。因此事件可以理解为Function，情形理解为条件1，2，3，而动作则理解为Actions。事件-情形-动作查看一个元件或页面的事件：单击元件或页面，在右侧交互栏目中可查看；事件的删除：选中某一个事件后，按Delete即可。事件情形情形主要是指附着在事件上的用例，一个事件可以有多个情形，当鼠标悬浮在事件上时，可以看到右侧的添加情形按钮，可以设置触发条件来设置情形的启动。情形的删除：选中某一个情形后，直接按Delete即可。动作动作是在某一情形下的操作。动作的添加：直接在情形的右侧添加目标按钮，亦可单击情形下方的+按钮。同理，可用鼠标来拖动动作的顺序。页面和母版的事件页面载入时：Web浏览器中加载页面时页面单击时：单击页面背景时页面双击时：双击页面背景时页面鼠标右击时：右键单击页面的背景页面鼠标移动时：当光标在页面上移动时连续触发页面按键按下时：按下键盘键时页面按钮松开时：释放键盘键时窗口尺寸改变时：调整浏览器窗口大小时页面载入时：Web浏览器中加载页面时自适应视图改变时：当前自适应视图由于浏览器窗口大小调整而改变，或者通过设置自适应视图操作或原型播放器中的自适应视图下拉列表来设置视图窗口滚动时：当浏览器窗口向任何方向滚动时窗口向上滚动时：当浏览器窗口向上滚动时窗口向下滚动时：当浏览器窗口向下滚动时所有元件适用的事件单击时：当元件被点击时。双击时：元件被鼠标双击时。右击时：当元件被鼠标右键单击时。按下时：当鼠标按下左键没有被释放时。松开时：当元件被鼠标点击，这个事件由鼠标按键释放触发。鼠标移动时：当光标在一个元件上移动时。鼠标移入时：当光标移入元件范围时。鼠标移出时：当光标移出元件范围时。鼠标停放时：当光标在元件上方悬停时。鼠标长按时：当鼠标按下超过2秒没有被释放时。移动时：当元件移动时，在页面中的坐标位发生了变化。按键按下时：键盘上的按键被按下时。按键松开时：当键盘上的按键弹起时。旋转时：当元件旋转时。尺寸改变时：当元件宽度或高度发生改变时。显示时：当元件通过交互动作显示时。隐藏时：当元件通过交互动作隐藏时。获取焦点时：当一个输入项获取焦点时。失去焦点时：当一个输入项失去焦点时。选中时：当复选框或单选按钮被选中时。取消选中时：当复选框或单选按钮取消选中时。选中改变时：适用于下拉框，当下拉框被选中的项发生了改变时，通常作为事件的一个逻辑条件。载入时：当元件从一个页面的加载中载入时。其他元件特有的事件选项改变时：当下拉列表或列表框中的选定选项发生更改时状态改变时：当动态面板被设置了“设置面板状态”动作时。拖动开始时：当一个拖动动作开始时。拖动时：当一个动态面板正在被拖动时。拖动结束时：当一个拖动动作结束时。向左拖动结束时：当一个面板向左拖动结束时。向右拖动结束时：当一个面板向右拖动结束时。向上拖动结束时：当一个面板向上拖动结束时。向下拖动结束时：当一个面板向下拖动结束时。滚动时：当一个有滚动的面板上下滚动时。向上滚动时：当一个有滚动的面板，向上滚动时。向下滚动时：当一个有滚动的面板，向下滚动时。仅用于下拉列表和列表框的事件仅限动态面板仅限中继器每项加载时：当中继器的项目首次加载到Web浏览器中并且中继器的数据集以任何方式更改时列表项尺寸改变时：当中继器项目的大小因任何交互而变化时（例如项目中的小部件被显示，隐藏或调整大小）元件的动作集链接元件1.打开链接：可在以下三个位置中打开URL或原型内部页面：当前窗口：当前的浏览器窗口新窗口/选项卡：新的浏览器窗口或选项卡弹出窗口：弹出窗口父窗口：弹出窗口的父窗口（必须在弹出窗口中加载的页面中使用）2.关闭窗口：关闭当前浏览器窗口或选项卡3.在框架中打开链接：更改内嵌框架窗口小部件或包含嵌入框架的页面中加载的页面内联框架：和页面上的内联框架父框架：包含内联框架的页面（必须在内联框架中加载的页面中使用）4.滚动到窗口小部件（锚点链接）：将浏览器窗口滚动到页面上窗口小部件的位置1.显示/隐藏：更改窗口小部件的可见性2.设置面板状态：更改动态面板的可见状态3.设置文本：更改窗口小部件上的文本4.设置图像：更改图像窗口小部件上的图像5.设置选中：将指定元件的选中状态设置为真6.设置选定列表选项：更改下拉列表或列表框的选定列表选项7.启用/禁用：启用或禁用窗口小部件。禁用的窗小部件无法在Web浏览器中进行交互，并且如果它具有“已禁用”样式效果，则其可视外观会更改8.移动：将小部件移动到页面上的新位置9.旋转：围绕选定的锚点旋转窗口小部件10.设置大小：更改小部件的大小11.带到前/后：将小部件带到页面深度顺序的最前层或最后层12.设置不透明度：更改窗口小部件的不透明度13.焦点：提供窗口小部件浏览器焦点，将文本光标移动到文本输入窗口小部件并突出显示可单击的窗口小部件14.展开/折叠树节点：展开或折叠树窗口小部件的选定节点元件的动作集中继器其他动作1.添加排序：使用指定的排序条件对中继器数据集进行排序2.删除排序：从中继器中删除排序3.添加过滤器：使用指定的过滤条件过滤中继器数据集4.删除过滤器：从中继器中删除过滤5.设置当前页面：显示分页中继器的特定页面6.每页设置项目数：设置分页中继器每页显示的项目数7.数据集>添加行：向中继器的数据集添加新行8.数据集>标记行：标记中继器数据集中符合指定条件的行9.数据集>取消标记行：取消标记中继器数据集中符合指定条件的行10.数据集>更新行：更新中继器数据集中的现有数据11.数据集>删除行：从中继器的数据集中删除行1.设置自适应视图：更改Web浏览器中显示的自适应视图2.等待：在执行任何后续操作之前，以毫秒为单位添加指定时间的暂停3.其他：显示指定的文本描述（作为尚未原型化的操作的占位符）4.设置变量值：设置全局变量的值5.触发事件：在页面，主控或窗口小部件上触发指定的事件变量变量是储存文本和数值的容器。变量的值可在其它元件中显示为文本，也可以在条件逻辑中使用。系统变量：是系统已经创建好的变量，用于直接获取对象的特定属性值。变量可以分类全局变量：主要是用于不同页面之间值的传递。局部变量：主要是用于指定页面内某个特定对象，往往和系统变量配合使用。变量的本质就是：数值的获取和使用系统变量变量全局变量全局变量的设置通过交互设置变量值变量全局变量的访问变量在WEB浏览器中查看全局变量的值在预览原型时，可以在WEBBROWER的控制台中查看该原型所有全局变量的值。变量局部变量的创建可以在编辑文本的对话框中直接输入局部变量的名称并对其表达式进行加工，同时也可以在插入变量或函数菜单中插入一个局部变量。此外，当你更改下方局部变量名称时，上方的局部变量名称亦会同步变动。局部变量的访问条件逻辑条件逻辑的设定条件逻辑是一个规则系统，比如，你可以规定在满足何种条件时才执行某一个动作条件逻辑多个情形的设定注意，在IF-ELSE情况下，如果IF中的条件为TRUE时，后面所有的将不再执行。多个IF-ELSE默认情况下，事件的第一个情形为IF，后面的为ELSE。可以将后面的ELSE改为IF来继续创建IF-ELSE链。右键单击情形名称选择切换为[如果]或[否则]动画和边界可见性效果通常有4+4+1，一共9种效果可供选择。这些效果适用于动作显示/隐藏”操作及“

设置面板状态”动画和边界1.摆动：动画在开始和结束时略慢2.线性：动画在整个时间内以相同的速度进入3.缓慢进入：开始缓慢，逐渐变快，直到结束4.缓慢退出：开始较愉，逐渐缓慢，直到结束5.缓进缓出：开始慢，到中点前快，然后变慢。6.弹跳：具有回弹效果7.弹性：具有弹簧效果运动效果动画和边界移动操作可以指定目标元件（部件）的移动范围。在更多选项中，单击添加边界，即可。上下左右分别可设置。移动的边界交互样式鼠标悬停：当鼠标悬停在元件上时，元件的显示样式。鼠标按下：当鼠标按下元件时，元件的显示样式。选中：元件被选中时的显示样式。禁用：元件被停止使用时的显示样式。获取焦点：当光标聚焦在元件（如文本框）上的显示样式基本样式：部件的基本样式，选中“基本样式”，点击下拉基本样式选择列表，可选择基本样式，一般只有“默认样式”，如果用户有设置新样式，则可选择其他样式；字体：字体设置。选中“字体”，点击字体下拉列表，选择字体。字体类型：字体类型设置。选中“字体类型”，点击字体类型下拉列表，选择字体类型。字号：字号设置。选中“字号类型”，点击字号下拉列表，选择字号。粗体：字体粗体设置。选中“粗体”，点击粗体按钮切换粗体。斜体：字体斜体设置。选中“斜体”，点击粗体按钮切换斜体。下划线：字体下划线设置。选中“下划线”，点击下划线按钮切换斜。字体颜色：字体颜色设置。选中“字体颜色”，点击字体按钮旁的下拉按钮，打开颜色选择器，选择字体颜色。线条颜色：线条颜色设置。选中“线条颜色”，点击线条按钮旁的下拉按钮，打开颜色选择器，选择线条颜色。线宽：线条宽度设置。选中“线宽”，点击线宽按钮旁的下拉按钮，打开线宽列表，选择线宽类型。线型：线条类型设置。选中“线型”，点击线型按钮旁的下拉按钮，打开线型列表，选择线条类型。圆角半径：圆角半径设置。选中“圆角半径”，在输入框内输入圆角半径的数值。填充颜色：填充颜色设置。选中“填充颜色”，点击油漆桶旁的下拉按钮，打开颜色选择器，选择填充颜色。不透明度（%）：填充颜色透明度设置。选中“不透明度（%）”，在输入框内输入不透明度（%）的数值。外部阴影：外部阴影设置。选中“外部阴影”，点击外部阴影旁的下拉按钮，打开设置窗口，设置偏移范围、模糊参数、阴影颜色。内部阴影：内部阴影设置。选中“内部阴影”，点击内部阴影旁的下拉按钮，打开设置窗口，可以设置偏移范围、模糊参数、延伸、阴影颜色。文字阴影：文字阴影设置。选中“文字阴影”，点击文字阴影旁的下拉按钮，打开设置窗口，设置偏移范围、模糊参数、阴影颜色。对齐：字体对齐设置。选中“对齐”，选择右边字体对齐类型：左对齐、中间对齐、右对齐。预览：选中“预览”可以在设置时对设置的交互样式进行预览。

交互样式设置窗口说明选择组1.在画布或页面概要中选多个元件；2.在交互窗格的更多属性中，在“指定选择组”字段中输入新选择组的名称。此时即可新增一个选择组。3.通过选择并清除“指定选择组”字段的选择，从选择组中删除某元件的选项组指定。选择组的创建与清除Axure常用元件第四部分Axure常用元件-动态面板动态面板是一个容器。多个小部件组成的集合称为状态，多个状态的集合构成动态面板。动态面板每次只能呈现一个状态，状态的可见性由动态面板的交互功能设置面板状态来控制。因此，动态面板非常适合创建轮播图或者侧边栏。动态面板是Axure中唯一具有拖动属性和滑动属性的部件。也是唯一可以固定到浏览器中固定位置的部件（元件），在滚动页面时该动态面板不会随之移动。因此它是导航栏和侧边栏的最佳选择。1.创建动态面板动态面板创建的第一种方法，在元件库中找到“动态面板”元件，拖入到画布中，松开鼠标即可创建“动态面板”，如图Axure常用元件-动态面板注意：默认情况下，此动态面板的尺寸是固定的，因此如果希望自动调整大小以适合其包含的内容（其他元件），请勾选上启用“自适合内容”，如图所示。将动态面板设置为“自适合内容”允许其宽度和高度自动调整大小以适合其包含的元件。当在不同大小的面板状态之间切换时，将会进行自适应来进行面板状态的大小调整。要切换此设置，选中或取消勾选自适合内容或选中动态面板并用鼠标手动调整其大小。Axure常用元件-动态面板动态面板创建的第二种方法，使用现有元件创建，即在画布中选择已经有的部件组合，单击鼠标右键，然后在菜单中选择“转换为动态面板”，这种方式创建更方便，更常见些。如图2.动态面板的遮罩默认情况下，动态面板覆盖有蓝色遮罩，以便更容易在画布上被识别。可以在Axure菜单栏中的“视图”>“遮罩”中切换遮罩开关，如图Axure常用元件-动态面板3.设置单个面板状态双击画布上的动态面板进入状态编辑模式，会看到一个青色的边框及画布顶部的工具栏指示。在此模式下，可以在动态面板的每一个状态中添加，删除和编辑包含在单个state里面的元件，。还可以通过单击画布右上角的“隔离”来切换外部元件的可见性，如图所示4.“概要”窗格中设置动态面板在概要窗格中可以直接选中面板的状态或单个状态包含的部件，然后在画布中编辑选中的对象，。在此区域亦可进行状态的复制、删除、新增，按住并拖动可进行排序，如图所示Axure常用元件-中继器中继器是Axure中一个高级的元件,用于显示文本、图像和其他元素的重复集合。中继器存放数据集的容器，通常使用中继器来显示商品列表、联系人信息和数据表，容器中的每一个项目称作"item"，由于"item中的数据由数据集来驱动，因此每一个item可以在展示的时候与其他不同。中继器由数据集（可以理解为轻量级的数据库）来驱动，因此它可以用来显示动态排序和过滤。中继器部件可在Axure左侧的元件部分，直接拖至画布（中间的区域）中，如图选中后双击“中继器”元件，就会进入“中继器”面板，，这里就可以对中继器进行编辑和设置。在“样式”面板中可以对中继器的行数、列数、行中内容进行设置，如图所示。Axure常用元件-中继器1.间距、布局和分页默认情况下，所有中继器的项（item)都是可见的，并在一列中垂直布局，项（item)之间没有空格。可以使用“样式”窗格的“间距”，“布局”和“分页”中的选项对其进行更改，如图所示。注：如果分页每页展示数大于item数时，展示直观上只有一页。2.适应HTML内容“适应HTML内容”复选框位于“样式”窗格中数据集的正上方，默认情况下处于启用状态。启用此选项后，每个中继器项将自动调整大小以适合其包含的小部件，如图所示。如果禁用此选项，则每个中继器项目将保持固定大小，而不管其包含的小组件的大小，位置或可见性是否发生任何更改。如果小部件超出其自身项目的固定边界，则动态移动或显示的小部件可能会与其他中继器项重叠。Axure常用元件-中继器3.中继器的遮罩（Mask)默认情况下，中继器覆盖有绿色遮罩，以使其包含的小部件更容易与画布上的其他小部件区分开来。可以在Axure中“视图”>“遮罩”中切换开关，如图所示。在中继器中，由文本、矩形、图片和其他元素的重复集合称为项目item。可以直接双击画布上的“中继器”或在“概要-页面”栏目中直接双击中继器或者中继器item包含的部件进入到item项目，。在编辑项目item时，将只看到其包含的窗口小部件的一个实例，如图所示。注：如果进入中继器后其他组件对中继器的item有影响，可以通过单击画布右上角的“隔离”来隐藏页面上的其他部件。Axure常用元件-中继器4.数据集（1）添加数据控制中继器项目数据展示的数据表称为“数据集”。可以在“样式”栏目中查看和编辑中继器的数据集。通过“单击“添加列”，“添加行”或使用表格上方的图标，可以增加行或者列。同时也可以在下面的单元格中单击鼠标右键来增加/减少行或者列，。导入图片需要在，每行的图片列里右键选择导入图片，找到需要图片，如图所示Tips:有多少行说明有多少个重复的item；有多少个列，说明就有多少个需要传递的变量（数据）。可以通过Ctrl+V(Windows)或者CMD+V(Mac)将数据直接粘贴到这里（当然图片还是需要单独导入的）。Axure常用元件-中继器（2）数据集的数据显示文本的键入：选中右侧数据集中单元格输入，如图所示文本值在item里面的展示：依次点击每项加载时–>设置文本–>选择元件,选择“设置文本”点击“fx”图标，如图4-57所示，“插入变量或函数”选择一个中继器的列名，如图所示，点击完成即可Axure常用元件-内联框架内联框架可以将HTML、视频、音频和其他媒体文件嵌入到AxureRP中。比如youku视频和Baidu地图，也可以将原型中的其他页面嵌入其中。在元件库中找到内联框架，拖入工作区域中松开鼠标即可开始使用中继器，，双击内联框架元件，弹出了“链接属性”的对话框如图所示，此处可以选择链接至Axure文件中的其他页面或者外部URL地址。Axure常用元件-内联框架默认情况下，内联框架有边框，可以在“样式”窗格中的“隐藏边框”中打开或关闭。当内联框架内的内容超过其本身大小时，可以设置内联框架进行滚动，如图1.内联框架样式内联框架中的内容会在Web浏览器中加载，但不会在Axure画布中加载，为方便在画布中展示，可对预览的样式进行选择：

无预览（默认）

视频

地图

自定义预览（允许导入自己的图像）注意：预览图像仅出现在AxureRP的画布上；它不会在网络浏览器中显示。Axure常用元件-内联框架2.内联框架特殊交互可以通过其他元件在内联框架上使用交互事件，“在框架中打开”，比如在一个按钮上设置一个鼠标单击时的动作，打开内联框架中的一个链接或者页面，。注意：在上述操作中可选择在父级框架中打开链接或者是页面。此时会在框架的上一级中打开链接，如图所示3.内联框架的限制某些网站可能会被限制应用于内联框架，比如像Yahoo。内联框架和框架内的内容页面之间变量的传递在大多数浏览器中不适用。查看原型第五部分查看原型当项目完成后，单击工具栏中“预览”按钮或按【F5】键，。也在“菜单栏”中可以选择“发布>预览”选项，如图所示，即可在浏览器中查看原型效果。Axure原型快速预览查看原型在进行预览时，会看到默认界面的预览效果，。页面分成两部分，左面是站点地图，右面是效果，读者可以对齐进行设置，选择“Projectpages”选项，弹出“站点地图”页面，如图选择“发布>预览选项”选择，弹出“预览选项”对话框，如图所示。在此对话框中可以设置在默认情况下，大家选择那种浏览器进行原型预览。预览选项设置查看原型单击“发布”按钮，在下拉菜单中选择“生成HTML文件”选项，，弹出“生成HTML”对话框，选择想要保存项目的位置，如图所示。点击发布即可把项目生成HTML文件。在默认浏览器找那个预览。Axure原型生成HTML文件查看原型在“生成HTML”对话框中可以配置默认HTML生成器的选项。可以创建多个HTML生成器，在大型项目中可以将图形切成多个部分输出，以加快生成的速度。生成之后可以在Web浏览器中查看。可以在“菜单栏”中选择“发布>更多生成器和配置文件”选项，弹出“生成器配置”对话框，。双击每个选项，可以弹出更多设置对话框，然后对生成器进行设置。例如双击“打印”选项，可以在弹出对话框中完成更多设置，如图所示。Axure原型生成HTML文件查看原型选择“发布>生成Word说明书”选项，弹出“生成说明书”对话框，。在生成说明书对话框中，选择“页面”选项，可以在对话框中设置生成说明书的页面选项，如图所示。在“母版”选择页面中，可以选择需要出现的Word文档中的母版及形式，。在“属性”选择页面中，可以选择生成时需要包含的页面，而且还提供了多种丰富的选项和配置页面信息，这些配置可以应用于Axure文件页面管理面板中所有的页面，如图所示。Axure原型生成Word说明书查看原型在“快照”页面中，AxureRP9生成Word文档功能的一项特别节省时间的方式就是自动生成所有页面的快照，。在“元件”页面中，元件表选项提供了多种选项配置功能，可以对Word文档中包含的元件说明信息进行管理，如图所示。在“布局”页面中，，可以对Word文档页面布局进行选择。而在“模板”页面中，AxureRP9会使用一个Word模板，基于前面格式选项的设置，将所有内容组织起来，在Word模板中可以导入模板，还可以创建模板，如图所示。Axure原型生成Word说明书项目实施-Web端“电商平台”产品交互设计开发第六部分项目实施-Web端“电商平台”产品交互设计开发本案例需要设计制作购物网页的商品轮播图效果，案例效果是通过动态面板元件，让四张商品图片随着一定顺序进行循环播放，图片中的圆点也会随着图片的改变而进行相应的变化。轮播效果实现的原理是，多张图片放进一个动态面板的不同状态里面，“载入时”添加“切换动态面板的状态”的交互效果，这里使用四张图片来演示效果，将四张图片“转换为动态面板”，放在四个不同的状态下，以及四个圆点对应图片状态的一个切换设置，之后需要在交互中进行图片轮流切换图片的设置，图片切换的效果如图所示使用“动态面板”制作Web端Banner轮播效果项目实施-Web端“电商平台”产品交互设计开发制作步骤1.元件基础样式设置在左侧元件库中，选中“动态面板”元件，将其拖入工作区内，。在“交互”面板上，设置“动态面板”的名称为“轮播”，如图所示使用“动态面板”制作Web端Banner轮播效果项目实施-Web端“电商平台”产品交互设计开发双击“动态面板”进入“动态面板”的编辑页面，连续单击“添加状态”按钮，新建三个“动态面板”状态，。在每个状态中都添加一张图片，如图所示。添加完成后，可以在“概要”面板中预览图片和状态，如图所示使用“动态面板”制作Web端Banner轮播效果项目实施-Web端“电商平台”产品交互设计开发在左侧元件库中找到“动态面板”元件，拖入工作区内，设置名称为“but-one”，，然后复制三个状态，然后每个状态中都添加四个圆形，设置大小为12px*12px，然后分别在四个状态中按顺序给代表不同顺序图片的圆形设置一个不同的颜色，其他保持默认颜色，如图所示在添加两个控制左/右进行切换的按钮，并在开始时设置为“隐藏”，。之后将两个动态面板和这个控制按钮全部选中“转换为动态面板”，命名为“动态轮播图”，如图所示。使用“动态面板”制作Web端Banner轮播效果项目实施-Web端“电商平台”产品交互设计开发2.设置元件自动轮播的交互效果。给“动态轮播图”添加交互，在“交互”面板中，点击“新建交互”按钮，在下拉列表中选择“鼠标移入时”事件，添加目标为“控制按钮”，设置为“显示”，动画效果为“弹出效果”，如图所示继续为“轮播”图片，点击“新建按钮”，在下拉列表中选择“载入时”事件，打开“交互编辑器”对话框，选择“设置面板状态”动作，添加目标为“轮播”，设置详细参数，如图所示。使用“动态面板”制作Web端Banner轮播效果项目实施-Web端“电商平台”产品交互设计开发为动态面板“but-one”添加交互动作，点击“新建交互”按钮，在下拉列表中选择“载入时”事件，打开“交互编辑器”对话框，选择“设置面板状态”动作，添加目标为“but-one”，设置详细参数，如图所示“控制按钮”以及“but-one”按钮时图片切换的效果。在“but-one”动态面板中，四个不同状态里的四个圆形分别添加交互事件，首先在状态1中，对第二个按钮，进行点击交互的设置，点击“新建交互”按钮，在下拉列表中选择“单击时”事件，打开“交互编辑器”对话框，选择“设置面板状态”动作，添加两个目标分别是“轮播”动态面板和“but-one”动态面板，因为此时是需要点击某个按钮切换到相应的页面，所以设置的切换状态就不需要循环，只需要切换好制定的状态即可，，当状态切换完后如果没有交互操作需要再次让两个动态面板开始重新循环切换状态，设置详细参数如图所示使用“动态面板”制作Web端Banner轮播效果项目实施-Web端“电商平台”产品交互设计开发接下来给状态1中第三个圆形添加交互动作，如图所示同理状态1中其他“圆形”添加的交互事件，和其他三个状态里的圆形添加的交互事件都类似，只不过需要注意切换到相应的状态即可。给动态面板“控制按钮”中的左右两个箭头添加交互，首先选中“右箭头”元件，在“交互”面板中，点击“新建交互”按钮，动作选择“设置面板状态”，添加两个目标分别是“轮播”和“B.ut-one”，设置详细参数如图所示。同理“左箭头”设置跟“右箭头”除了切换状态的顺序和动画方向不一样外其他都是正常的切换效果。使用“动态面板”制作Web端Banner轮播效果项目实施-Web端“电商平台”产品交互设计开发交互都设置完成后，点击“预览”按钮，打开浏览器预览广告轮播页面，可以发现图片切换和圆形变化是对应的，如图所示使用“动态面板”制作Web端Banner轮播效果项目实施-Web端“电商平台”产品交互设计开发本案例实现在浏览网页时，某些悬浮按钮点击进行显示与隐藏效果的制作。悬浮按钮实现显示与隐藏效果原理就是：利用Axure“动态面板”元件，通过“新建交互”来切换状态，并根据相应的尺寸进行移动和设置动态面板显示的大小来实现。悬浮按钮显示与隐藏效果，如图所示使用“动态面板+显示/隐藏”制作悬浮按钮显示与隐藏效果项目实施-Web端“电商平台”产品交互设计开发制作步骤：1.元件基础样式设置通过“元件库”提供的元件搭建一个设置的悬浮按钮，根据需要设置一个尺寸，本案例尺寸为：50*50，，在制作一个用于弹出的“工具按钮”，本案例尺寸为：130*130，如图所示。这两个尺寸在使用交互功能时需要进行使用，所有在设置尺寸时尽量设置成比较好计算的尺寸。按钮元件制作完后，选中“悬浮按钮”，鼠标右键，在弹出的下拉列表中选择“转换为动态面板”，。设置名称为“悬浮按钮”，如图所示。使用“动态面板+显示/隐藏”制作悬浮按钮显示与隐藏效果项目实施-Web端“电商平台”产品交互设计开发双击“悬浮按钮”动态面板，进入动态面板编辑页面，在顶部选择“添加状态”，并命名为“工具按钮”，。状态添加完后，把之前做的工具按钮放进动态面板的“工具按钮”状态里，并注意一下此时的位置为（0，0），如图所示。动态面板设置完成后，为了能在浏览器中有一个直观的感受，在“元件库”中找到一个“矩形”，拖入工作区，命名为“背景”，设置尺寸为：960*660，，把“悬浮按钮”动态面板，放在背景的右下角，本案例中“悬浮按钮”动态面板所在位置为：（900，600），如图所示。使用“动态面板+显示/隐藏”制作悬浮按钮显示与隐藏效果项目