axure9 邮件点击效果_Axure9操作学习

一、概念：

Axure RP 9 所给出的  原型页面尺寸是 设备的逻辑分辨率。

如果我们能够获得一个设备的  逻辑分辨率，就能够知道原型尺寸是多少。

1、手机尺寸的   物理分辨率(DP)：屏幕上的分辨率的尺寸，独立像素的排布是多少，物理像素就是设备物理像素

逻辑分辨率(DIP)：将设备独立像素理解为是设备坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素，它可以由程序转换为物理像素。转换的比例叫独立像素比。(虚拟的一个单位包含多个物理像素)iPhone有的是2个，有的是3个

2、页面结构  是  基于原型结构图搭建的(需要先画出流程结构导图)。流程结构图可以使用中文，但是页面结构的每个页面名字最好能用英文就用英文！！(在在 Linux 服务器中发布的静态网页，中文名字页面找不到链接报错404)，英文名字采用小写+下划线 即可。

3、页面布局：页面布局实际上是我们 对功能模块以及 所包含的子模块在页面上区域的划分。

对于页面中的区域，不管是整体区域还是局部区域，都可

以划分为上、中、下、左和右 5 个部分。(图 2-20)

当然，如果你喜欢也可以换个划分方式。(图 2-21)

图2-20

二、基础应用

------------------------------------ 线框草图 ----------------------------------------------

元件拖入选中、样式设置、旋转(command+鼠标，右键重置文本到0)、圆角、改变尺寸、复制粘贴等操作。

元件库：每个元件类型都有 自己的一些 独有属性，右键菜单键 可查看其独有的属性！

图标icons——>双击可变形、阿里SVG图标下载使用(形状—>图片)，SVG不是图片格式拖到Axure中为形状的元件。下载png则是图片格式。

流程元件：每个元件的意义、连线的样式设置

基本元件：形状(可添加图片)、图片、文本、热区、动态面板、中继器(中继器是一个模拟列表的元件，例如商品列表、邮件列表、用户列表和标签列表等)

表格元件：通过右键菜单里控制表格的增删改查

标记元件：做标注、注释 使用的元件。

第三方元件：在网络上有很多第三方元件库共享，我们可以下载下来使用。元件库的文件名后缀为“.rplib”，可以通过元件功能面板的“+”按钮进行选择添加、编辑、移除 等操作。

添加本地图片文件把里面的图片当成元件添加到Axure中

----------------------------------------------------------------------------------------------

1、键，即可让画布回到原点。住键不放，通过鼠标滚轮改变画布显示比例。

2、编辑文字：部分元件可以添加文字内容。在未开启单键快捷键功能时，直接输入即可替换当前文字内容；开启单键快捷键功能时，需要双击元件或者在元件上点击按下回车键进入文字编辑状态。

3、阿里图标库  下载  下来的 SVG 文件(下载SVG格式！)，可以拖入 AxureRP9 的画布中；或者，先从默认元件库中拖入图片元件，双击导入 SVG 文件。然后，在图标上点击鼠标右键，上下文菜单的【变换图片】选项中选择【转换 SVG 图片为形状】。

4、流程图

流程图标说明

5、表单元件：文本框、文本域、下拉列表、列表框、单选按钮、复选框 ——这些元件在画布中的很多操作  基本  通过右键菜单中完成，例如：行、列、节点、菜单项的添加、删除、移动等操作。

6、元件的样式设置：在软件  右侧的功能模块中 + 右键菜单 中 ——>可对元件的外观修改形状的填充颜色、修改边框的线段类型和改变文字字号等等。透明、文字排版、填充(背景)、线段、阴影、圆角、边距 等属性进行设置。

7、布局排列：层级排序、组合(选中多个元件组合/取消)、对齐(选中多个元件进行对齐操作—>元件是相对选中的第一个元件 进行 对齐操作)、分布(工具栏中提供了多个元件的分布功能，能够让多个元件快速的进行  水平或垂直方向的等距分布 )

8、绘制草图：绘制草图只是不同元件的搭配组合。

-------------------------------------------- 交互设置 ------------------------------------------------------

1、交互事件：右侧面板中 选择“交互” ——>添加操作——>选择动作——>选择元件(菜单中有 “当前元件” 选他即可)——>选择样式  (操、作、元、样)注意：Axure中一个 操作事件 —> 可以 添加多个动作 —> 添加多个元件 (一个事件让多个元件动起来！！！)改变的不仅是自己，可能是其他、甚至多个、全部！

2、交互样式：选中元件 右键菜单中 “交互样式” ，这个交互样式通过  添加的事件！ 来进行切换(选中多个元件进行统一设置交互样式——>在墨刀中就是 组件的状态，墨刀中通过组件的元件点击 进行状态切换 )(鼠标悬停、鼠标按下、选中、禁用、获取焦点 ——>四个状态样式)注解：交互样式 是在 不同 场合下的  "样式"!!!!，只要 场合变化—>样式也就变了

交互事件 触发——>改变的是 元件的 “属性”!!!!!(触发就变不回来了)

Axure和墨刀的区别：

墨刀——>通过事件 —> 触发某个 组件状态 / 页面状态 ——>达到元件 属性/样式 的变化  (墨刀中可以理解，“每个状态” 都是个 “新的页面/组件”   "某个状态下的事件"—>"触发另一个状态展示" !!  )

Axure是通过 事件 ——>改变 元件的 “属性”！——>达到元件的 属性/样式 变化

Axure可以 让一个  事件 中  添加多个动作 —> 让多个元件动起来！！

总结：墨刀 的交互样式——>是  多个页面的切换！

Axure 的交互样式 —>在一个页面添加 不同的事件(控制参数) 来回切换！

3、添加的事件 在面板中选中右键 可以进行复制 ——> 选中别的元件进行 粘贴 则可把事件直接进行复制到别的元件上。

4、选中多个元件 ——>设置成 选项组，这样多个元件可实现 单选的效果。

----------------------------------------------------------------------------------------------------------------

-------------------------------------------- 发布原型 ------------------------------------------------------

1、导出图片：软件导航栏的【文件】菜单中，可以完成页面导出为图片的操作。(选中哪个页面就可以导出哪个页面为图片，也可选择导出所有页面为图片)

2、预览：

3、发布到Axure云

4、生成HTML文件 ——>浏览器查看

----------------------------------------------------------------------------------------------------------------

-------------------------------------------- 元件属性 ------------------------------------------------------

1、单选按钮：可选中多个单选按钮设置为 相同组(其他元件也可多选成为组)，即可实现单选效果   、 可设置单选按钮框的大小，文字的对齐方式

2、形状与图片：1>为多个形状或图片元件添加相同的组名称，用于实现元件单选的交互效                                       果。

2>引用页面(图片无此项)：为形状元件添加页面链接，点击形状时即可跳                                  转至引用的页面。

3>选项组——>单选效果实现 (先设置交互状态 + 添加事件！)

----------------------------------------------------------------------------------------------------------------

-------------------------------------------- 使用母版 ------------------------------------------------------

使用母版是 为了 让页面中 某一模块内容可以重复使用，并且在修改内容时能够同步更新。

1、制作母版——>添加母版 ——> 把母版添加到页面 / 把母版从页面删除

2、双击当前母版——>编辑母版 (注意：母版一变化—>导致所有页面的母版都会变化！)

3、编辑母版：选中母版—>左侧样式—>编辑母版视图—>添加 继承(基本) —> 母版新状态 (【影响所有视图】的勾选 记得取消，否则默认影响所有母版状态)  可以添加新的元件！

(注意的一点是修改视图内容时 仅限!!!  改变 "位置/ 尺寸/ 样式"。元件上的文字、图片以及交互发生改变时，即便取消【影响所有视图】的勾选，其他视图依然会受到影响。)

4、使用母版：右键菜单中添加到页面 、直接拖拽

5、使用母版不同状态：选中母版—>右侧 有个基本(点击可以选不同的状态)

6、母版上元件上 文字/图片 修改 ：选中母版—>右侧 有“重写” 下面的每个元件都可以重写编辑文字/图片

----------------------------------------------------------------------------------------------------------------

---------------------------------- 内联框架 ----------------------------------

1、内联框架：页面中的窗口—>这个窗口可以加载页面

2、内联框架播放本地文件：把 “文件” 放在 原型导出的HTML文件中 最外层，在Axure中编辑内联框架元件 ——>链接属性 改为 链接本地文件 直接输入 文件名字+后缀——> 即可播放本地文件了

3、通过第2步骤的功能，可实现 视频、音频的播放。

--------------------------------------------------------------------------------------

三、文档应用

---------------------------------- 页面流程 ----------------------------------

线框图：完整表达了 产品的 结构与功能。 + 业务流程、交互描述  ——>完成产品文档PRD大部分功能。

1、绘制流程图：使用 “快照” 元件 ，双击元件 —> 弹出引用选项 —> 选择一个页面进行引用

2、功能描述：1>单页面功能描述：右键菜单 【编辑连接点】可在元件上添加任意连接点(形                           状/图片 在 【变换形状】菜单中)，在页面旁边添加说明，并指向某个地方进                             行连线。

2>通过元件—>取消 “适应比例” 改变页面的位置以及比例，单独说明某块的功能 描述。或者 双击快照 —> 即可拖动 快照里的 页面！选择 着重说明的功能。

3>在同一个页面进行多个 快照元件中页面进行 功能描述。

3、功能场景：通过 AxureRP 的快照元件，我们可以让用户的操作流程以另一种形式呈现。(将某块功能场景放在一个页面，通过快照把页面 功能场景流程连接起来 —> 形成了一个功能场景。)

4、说明功能：元件右侧面板—>说明功能，可以设置添加多个说明标签，进行描述

功能场景

--------------------------------------------------------------------------------------

四、交互应用

条件思维导图

事件上添加条件

上面的图 添加的条件 ——> 说明这个条件不一定跟当前元件有关，只要这个条件满足就会触发事件执行！

好好看！！选择类型干嘛的 (元件不限于当前！！！！！)

---------------------------------- 条件判断 ----------------------------------

1、事件 “添加情形”：鼠标移动到事件上，右上角 “启动情形” (一个情形—>对应一个动作!!!!) —> 添加多个情形——> 必须添加多个执行动作！！我们在最左侧的下拉列表中 选择判断的 内容类型，再选择  带有这种内

容类型的  判断目标，然后选择 比较关系，再选择 右侧的 比较的内容类型以及

达到的条件目标。

比较内容类型 比较内容类型 —>条件目标

当选择的这个目标(不限于当前设置事件的元件)到达 要求，事件就会触发！

2、一个情形可以添加多 条件，多个添加的关系—> 可以选择 并且 / 或者  两个关系

--------------------------------------------------------------------------------------

----------------------------------- 值的运算 -----------------------------------

1、【值】的设置可以写入运算公式。运算公式需要写在 两对中括号中。例如，计算 3 乘以 5，公式为：[[3*5]]为什么公式“ [[3* [[5+6]]-4]]”中的“[[5+6]]”没有被运算呢？

1>两对中括号内部的公式会被运算出结果!!!.

2>两对中括号外部的内容会和两对中括号内部的公式运算结果连接。

3>程序会 从左至右依次寻找可计算的公式，进行运算后将结果与其它内容连接。

[[ [[3*5]]+[[6-4 ]]]]  ——> [[15+2]] :所以这个可以算出来

总结：[[ 内部只能是运算公式 ]]—> 公式 左右两侧不能出现任何符号！否则不能计算！

2、运算符：Axure RP 中进行【值】的设置时，我们可以点击值输入框后方的【fx】按钮，打开编辑值的界

面。在这个界面中，我们点击【插入变量或函数】按钮，就能够打开变量与函数列表。

--------------------------------------------------------------------------------------

----------------------------------- 变量详解 -----------------------------------

1、变量：系统变量 和 自定义变量(全局变量+局部变量)

2、Axure中 变量 遵守程序中的变量命名规则

3、局部变量：在事件 面板中  点击值  输入框后方的【fx】按钮，打开编辑值的界 ——>下方有 “添加局部变量”  ——> 值的地方 就可以 进行计算公式、拼接计算(公式里可直接使用全局变量)

通过设置一个变量 ——>来获取 页面上 某个元件的  1>文字内容 / 2>全局变量  / 3>元件对象!!!

4、全局变量：全局变量作用范围是整个原型，也就是说全局变量的 名称是唯一的。(全局变量在任何地方都可以直接使用!!)

在 顶部菜单中 【项目】—> 全局变量 ——> 可添加 全局变量。 可以在 “添加情形” 中使用这个全局变量 作为条件使用。

5、系统变量：系统变量是由 系统已经创建好的变量，并且变量的写入也有系统自动完成，我们需要做的  只是读取变量值进行运算。——> 在【值】的设置中，打开值的编辑界面，点开【插入系统变量或函数】的  列表  就能够 看到  系统变量。1、对象概念：每个元件可称为 元件对象 (对象英文命名 第一个字母必须大写)

“This”和“Target” ——> 分别表示 当前元件(This)和目标元件(Target)。

2、属性：元件的系统变量—>都是 第一个字母小写 的系统变量为属性。

“width”是元件的宽度，“name”是元件的名称

通过这种 系统变量——>可以在  【fx】中 获取 页面的属性 、某个元件的属性 等来进行运算！

以上总结：交互事件 ——>添加 “限制情形”(添加多个条件 + 逻辑 且/或)

值的运算——> 公式运算(使用 [[公式]]  ) ——>添加 “局部变量”(获取页面元件的值) ——>添加 “全局变量” (任何地方都可以直接使用变量名字)——>使用“系统变量” (把元件当成对象，使用元件的属性)

--------------------------------------------------------------------------------------

----------------------------------- 函数详解 -----------------------------------

1、函数定义：在【值】的编辑界面中，【插入变量或函数】的列表除了包含  系统变量(对象.属性)，还包含函数。这些函数都是 Javascript 脚本编程语言中的常见函数。

2、函数使用：函数是由 名称、括号、参数组成，例如：字符串函数“charAt(index)”。函数使用类型：

1、直接使用函数 ：function(param) ——>输出： 值

2、由 对象调用函数：对象.function(param) ——>输出： 值

--------------------------------------------------------------------------------------

----------------------------------- 元件组合 -----------------------------------

1、在工具栏中通过【组合】和【取消组合】的按钮可以进行组合的操作，另外也可以通过快捷键键和键进行组合与取消组合的操作。

2、组合使用场景：要 统一显示、隐藏、移动的多个元件，或者为 多个元件统一添加交互！！，都可以通过组合来完成。(Axure里显示与隐藏 提供了丰富的动画效果！)

3、组合也可以添加 交互事件 ——> 点击组合中 任何一个元件都可以触发 ”组合事件“

--------------------------------------------------------------------------------------

----------------------------------- 动态面板(唯一带滚动效果的元件) -----------------------------------总结：Axure的动态面板 跟墨刀中的状态效果类似！但是Axure的动态面板功能要比墨刀中更强！

1、动态面板：将动态面板放入画布之后，它是一个带有半透明颜色的元件。实际上我们所看到的颜色并不是动态面板的颜色，这是 为了方便我们进行编辑所带有的颜色。

画布中也能够让透明的元件变得完全透明，通过导航栏中的【视图】菜单，取消【遮罩】子菜单中【动态面板】的勾选项即可。查看原型时，动态面板是完全透明的元件。

2、容器：动态面板是一个容器！！，可以分层(多个状态 —>类似 墨刀中的状态)。双击动态面板—>进入编辑状态。

如果不需要多层的话，动态面板能够像组合一样使用!!，把元件放入动态面板默认的层(状态)中，

完成统一的交互。

3、固定位置：动态面板 能够  固定  在 页面的某一位置上。

4、拖动：动态面板是 唯一 具有  拖动交互事件的元件。

5、滚动区域：内容过多，过长、动态面板是个容器，可以装下进行滚动！！

6、适应宽度：动态面板  有个属性——> 100%宽度！，勾选后，动态面板 宽度  将与浏览器同宽

7、多状态：(轮播图的制作，状态切换时的 进入动画 + 上一个状态退出动画)

--------------------------------------------------------------------------------------

----------------------------------- 中继器(类似OC中的tableView和CollectionView) -----------------------------------

1、中继器元件：一般用于模拟列表。(列表进行 增删改查 、排序、筛选 等操作)

2、中继器 基本操作：1>中继器  编辑状态  中  创建列表  选项模板。(创建cell)

2>中继器样式中 组织数据。(获取数据)

3>中继器交互中  将数据与模板元件绑定。(赋值cell数据)

4>中继器样式中 进行布局等设置。(布局cell)2—2：添加数据

1>数据可以从 Excel 表格中进行复制，回到 Axure RP 的样式功能面板中，中继器右侧样式中 点中(不要双击)数据表—> 首行首列，通过快捷键粘贴到中继器的数据集中。

2> 双击数据集自动创建的列名  进行修改，将列名与 模板中对应的元件  命名保持一致

选中中继器，右边样式中的表格操作，往里填入数据2—3：添加交互，将 数据与模板元件进行绑定。( 在  中继器  的【每项加载时】添加交互—> 逐个设置 “模板”  上的 “每个元件” 的文本 的值 ！)

【"Item"是中继器加载每一项时数据行的对象，通过这个数据行对象调用列名即可获取列值。】

通过 插入函数 —>获取item对象，结合 item的属性 数据表中的每列 数据设置的名字 ——> 获取到数据表中的每个值！ —> 剩下的就是 字符的拼接。

例如：1>在中继器的【每项加载时】添加交互，【设置图片】“GoodsImage”为【插入变量或函数】列表中的“[[Item.GoodsImage”]]。

2>绑定商品名称：这里需要注意，商品名称最多为 32 个文字。

在交互中继续添加【设置文本】的动作，设置商品名称“GoodsName”的【值】为【插入变量或函数】列表中的“Item.GoodsName”，并且对商品名称通过函数“substr()”进行截取，只保留前 32 个文字，具体的公式为“[[Item.GoodsName.substr(0,32)]]”。

2—4：调整中继器列表的外观。

在样式功能面板中，让商品列表【水平】【布局】【网格排布】，【每行项数量】为“4”个，并且商品项之间的【行】【间距】为“20”像素，【列】【间距】为“10”像素。

3、交互—>添加 列表条目：添加交互—> 选择 中继器 添加行 —> 添加一行数据(数据可以规定 / 也可通过变量 来获取数据) —> 点击完成。(我们添加的是 中继器数据表格中的数据，不用管 模板上数据样式！)

4、交互—>删除 列表条目：按照标记去删在点击“删除”时，不能直接进行【删除行】的动作，而是要把当前这一项对应的

数据行进行【标记】，确认删除的时候，删除【已标记】的行。

我们需要 先将【全部!!】的数据行【取消标记】，然后再【标记】【当前】所需要删除

的数据行。(先取消全部的标记 —> 再标记当前，事件也有顺序别整反了！)

5、交互—>排序：中继器“GroupList”【载入时】，我们【添加排序】，依次 添加 按秒的列

值降序排序、按分的列值 降序排序、按小时的列值降序排序以及 按日

期的列值降序排序。 可以添加多种排序！设置排序名称！

【排序的 条件 ：选择一个 属性—>选择属性 类型 —> 选择 升/降 序  —> 设置 该排序名称】

【在取消排序时，按照名字进行取消哪个排序】

6、交互—>更新： 交互——>更新行 ——> 填写规则条件 (查找哪些item) —> 选择列 属性字段 ——> 设置值

7、交互—>筛选：交互——> 添加筛选 条件 ——> 填写规则(条件)

8、中继器 系统变量：中继器相关的属性能够帮助我们显示一些关于列表的信息，例如加载的 列表项数量、当前页码以及 分页总数量等等。这些属性都是系统变量，通过   【中继器对象调用属性】即可获取到相应的数值。

9、中继器—>分页：设置 分页数量——>必须连带！！修改 中继器的尺寸

10、中继器—>翻页：修改中继器的 当前显示页面。

1> value ：设置指定的页面 ——>跳到 指定页面

2>Previous:：前一页

3>Next：下一页

4>Last：最后一页

能操作的属性

--------------------------------------------------------------------------------------