一、概念:
Axure RP 9 所给出的 原型页面尺寸 是 设备的逻辑分辨率。
如果我们能够获得一个设备的 逻辑分辨率,就能够知道原型尺寸是多少。
1、手机尺寸的 物理分辨率(DP):屏幕上的分辨率的尺寸,独立像素的排布是多少,物理像素就是设备物理像素
逻辑分辨率(DIP):将设备独立像素理解为是设备坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素,它可以由程序转换为物理像素。转换的比例叫独立像素比。(虚拟的一个单位包含多个物理像素)iPhone有的是2个,有的是3个
2、页面结构 是 基于原型结构图搭建的(需要先画出流程结构导图)。流程结构图可以使用中文,但是页面结构的每个页面名字最好能用英文就用英文!!(在在 Linux 服务器中发布的静态网页,中文名字页面找不到链接报错404),英文名字采用小写+下划线 即可。
3、页面布局:页面布局实际上是我们 对功能模块 以及 所包含的子模块 在页面上区域的划分。
对于页面中的区域,不管是整体区域还是局部区域,都可
以划分为上、中、下、左和右 5 个部分。(图 2-20)
当然,如果你喜欢也可以换个划分方式。(图 2-21)
二、基础应用
------------------------------------ 线框草图 ----------------------------------------------
元件拖入选中、样式设置、旋转(command+鼠标,右键重置文本到0)、圆角、改变尺寸、复制粘贴等操作。
元件库:每个元件类型都有 自己的一些 独有属性 ,右键菜单 键 可查看其独有的属性!
图标icons——>双击可变形、阿里SVG图标下载使用(形状—>图片),SVG不是图片格式拖到Axure中为形状的元件。下载png则是图片格式。
流程元件:每个元件的意义、连线的样式设置
基本元件:形状(可添加图片)、图片、文本、热区、动态面板、中继器(中继器是一个模拟列表的元件,例如商品列表、邮件列表、用户列表和标签列表等)
表格元件:通过右键菜单里控制表格的增删改查
标记元件:做标注、注释 使用的元件。
第三方元件:在网络上有很多第三方元件库共享,我们可以下载下来使用。元件库的文件名后缀为“.rplib”,可以通过元件功能面板的“+”按钮进行选择添加、编辑、移除 等操作。
添加本地图片文件把里面的图片当成元件添加到Axure中
----------------------------------------------------------------------------------------------
1、<Ctrl+9>键,即可让画布回到原点。住<Ctrl>键不放,通过鼠标滚轮改变画布显示比例。
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、在工具栏中通过【组合】和【取消组合】的按钮可以进行组合的操作,另外也可以通过快捷键<Ctrl+G>键和<Ctrl+Shift+G>键进行组合与取消组合的操作。
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 的样式功能面板中,中继器右侧样式中 点中(不要双击)数据表 —> 首行首列,通过快捷键<Ctrl+V>粘贴到中继器的数据集中。
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:最后一页
--------------------------------------------------------------------------------------