08第三章2网页交互原型工具Axure的应用规范

网页交互原型工具Axure的应用规范电子信息职业技术学院知识要点05Axure元件——表带|表格|标记元件01Axure软件界面介绍02Axure使用规范的介绍04Axure元件——基本元件03Axure元件的交互1.Axure基础：Axure软件界面介绍第一部分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元件库元件库中元件的图标与提示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元件——基本元件第四部分图片图片的添加123注意、点击插入后选择需要插入的图片即可，插入到画布中。而选择本地文件夹加载，需要在元件库里进行选择图片放到画布中。图片图片的编辑图片的切割与裁剪单击右键该图片，可选择切割或裁剪。也可以使用S和C键盘快捷键。切割工具将图像分成几个部分，每个部分都成为一个新的图像元件。可以使用水平，垂直或横切切割。色彩调整固定边角范围图片的切割与裁剪线条线条的创建直线改曲线12热区热区的添加和作用1.可以添加成链接2.跳转到层或区域3.可以添加交互4.用作跳转5.作为锚点用6.自定义按钮动态面板动态面板的创建动态面板动态面板的创建动态面板的遮罩关闭动态面板遮罩开启动态面板遮罩动态面板设置单个面板状态动态面板概要窗格中设置隐藏和可见从首个状态脱离动态面板边框样式和背景填充对动态特定的事件和交互动态面板的选择组动态面板动态面板与其他元件的联动我们在做原型的时候，有时候会遇到各种列表的联动情况，这里我们做一个使用动态面板实现联动的实例。一个省级选择的下拉列表，下一个是相对于省级列表的各个市区的动态面板内联框架内联框架的使用内联框架内联框架的使用中继器中继器1.由多个零件组成的item，这个item重复多个（你可以在右侧的样式栏目中设置他的布局方式）。2.数据集：用来控制显示外观的数据表。存储在数据集中的文本、图像、数字等等通过中继器的“载入时”交互事件来显示在每个要展示的项目上。中继器中继器的属性间距：指每个item之间的间距像素布局：可选择水平或垂直适应HTML内容启用此选项后，每个中继器项将自动调整大小以适合其包含的小部件浏览器展示时每个页面展示多少个同时可以设置从第几页开始载入中继器项目中继器有多少行说明有多少个重复的item；有多少个列，说明就有多少个需要传递的变量（数据）。可以通过Ctrl+V(Windows)或者CMD+V(Mac)将数据直接粘贴到这里（当然图片还是需要单独导入的）数据集的介绍导入图片需要在，每行的图片列里右键选择导入图片，找到需要图片。中继器数据集的数据显示中继器数据集项目的交互使用点击中继器中图片后跳转到指定的网页，能够通过刚创建的交互导航到中继器数据集中引用的URL和原型页面。文本框和文本域文本框和文本域属于表单控件，可以用于输入终端的键入响应。文本框与文本域的提示文字文本域：针对多行输入，例如一些反馈的表单等等。文本框：针对单行输入，例如用户名或密码等等。文本框与文本域的介绍文本框输入类型的控制注意：输入类型的控制仅针对文本框，文本域无此功能。在移动设备上预览时，对于不同类型的输入类型控制会唤起不同的输入键盘类型，比如数字小键盘等。文本字段类型是HTML的一个特性，并非Axure的特有发明。文本：默认输入密码：文本在输入时被屏蔽邮箱：可以在移动端上提示电子邮件数字：只接受数字输入，移动设备上唤起数字键盘电话号码：移动设备上唤起拨号键盘URL：移动设备上唤起URL输入键盘搜索：默认输入但是多了一个快速清除功能文件：将文本字段更改为Web浏览器中的文件上传按钮，单击该按钮将打开设备的文件浏览器日期：可唤起日期选择器或日历控件月份：可唤起月份和年份选择器时间：可能会提示浏览器样式的时间选择器下拉列表添加，删除和重新排序下拉列表选项下拉列表特殊交互交互演示下拉列表下拉框的提交按钮指定提交按钮列表框复选框复选框复选框选中与特殊交互复选框复选框的提交按钮按住Enter键可以触发指定元件的鼠标单击事件单选按钮单选按钮组单选按钮单选按钮的交互按钮添加交互，单击时，切换单选按钮的选中状态，在设置单选按钮选中改变时设置文本的改变。Axure元件——菜带|表格|标记元件第五部分树树较常用于模拟文件浏览器和其他层次结构的可视化展示。单击树上面各个节点可以在页面上显示不同的元件或打开项目中的不同页面。创建、添加、移动树节点创建：在树元件上右键，