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:最后一页


能操作的属性

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

你可能感兴趣的:(Axure9操作学习)