Axure（学习笔记）

Axure学习笔记
学习视频：https://www.bilibili.com/video/BV1ba411m7NY

学习目标

1. 掌握Axure的主要功能和操作
2. 掌握Axure的主要原件使用
3. 能够使用Axure实现动态交互效果
4. 了解Axure中的函数和变量

1.Axure软件介绍

Axure RP是美国“Axure Software Solution”公司出品

应用场景
拉投资使用：让投资人对产品有直观的了解
给项目团队：使用线框图和文字说明，介绍产品细节，方便团队做出产品；出现问题追责；
销售用来做演示：给客户提供定制化产品时，使用原型看到最终的产品模型
项目投标使用：使用高保真原型参与投标，体现公司的实力，提升企业形象
内部收集反馈：为避免需求混乱的资源消耗，先使用高保真原型获取用户反馈并优化
教学使用：使用Axure，可以代替PPT进行项目展示，进行演讲和教学

2.Axure 9 的基础功能

Axure中，总共有4中类型的文件

• .rp：原型文件
• .rplib：元件库文件
• .rpteam：团队项目文件
• .html：网页文件

2.1 组件等

菜单栏：文件、编辑等

工具栏：预览、共享
两类：

• 基本功能工具栏
• 样式工具栏

页面区域：管理原型中所有的页面和文件夹
显示全部的原型页面及文件夹内容
可以针对已有页面和文件夹进行增删改查的操作，编辑他们的层级关系等

概要：显示具体某个页面中的全部元件及层级关系
可以通过调整概要中的元件顺序，变更他们的显示顺序

元件面板：系统自带三个元件库，这些元件的搭配使用就形成了原型

母版区域：跟页面区域类似，管理原型中所有母版
建议将反复被调用的模块做成母版
比如导航、标签栏等
注意：母版只用于当前Axure文件

交互面板：制作页面和原型中所有的交互动作

样式面板：编辑元件及页面的样式

说明编辑区：针对元件或者页面添加说明

画布区域：制作原型使用，坐标的单位是像素

单键快捷键：
添加元件类：

• R：矩形
• L：线段
• O：圆形
• P：绘画
• T：文本

操作类：

• S：图片分割
• >：预览原型
• C：图片裁剪
• /：发布原型到Axure云
• 0：元件透明度0%和100%切换
• N：添加说明
• 1-9：元件透明度10%-90%

3.软件默认元件及应用

3.1 基本元件

1. 矩形：可以用来制作框架、按钮等
   • 调整矩形的圆角、边框
2. 占位符：表示页面中的位置被占用
   • 不建议过多使用
3. 图片：导入外部图片
   • 如何导入不同要求的图片（双击边框的角，使得导入图片自适应图片框的大小）
4. 按钮
5. 文本标签：设置不同的文字效果，字体、字号、字重
6. 热区：增加元件的点击范围
7. 动态面板
8. 内联框架：填写url后在框内显示对应url的内容
9. 中继器：统一调整各矩形框的大小等

3.2 表单元件

1. 文本框：快速实现提示文字和不同类型文字显示的效果
2. 文本域
3. 下拉列表：快速实现下拉框及默认显示项的效果
4. 单选：快速实现单选的效果(设置单选组)
5. 复选：快速实现复选的效果

3.3 菜单表格

1. 树
2. 表格
3. 水平菜单
4. 垂直菜单

3.4 标记元件

1. 快照：在框内显示某一页面的内容等
2. 箭头：做坐标轴等
3. 便签
4. 标记

4.常用的交互设计

事件：当我们给元件添加某个交互之后，其实就是增加了一个交互事件

交互样式

• 鼠标悬停
• 鼠标按下
• 选中
• 禁用
• 获取焦点

注意：

• 鼠标悬停、鼠标按下、获取焦点，可以直接触发
• 选中和禁用，需要设置交互动作

鼠标和键盘交互：

• 单机时
• 双击时
• 鼠标右击时
• 鼠标按下时
• 鼠标松开时
• 鼠标移动时
• 鼠标移入时
• 鼠标移出时
• 鼠标停放时
• 鼠标长按时
• 按键按下时
• 按键松开时

形状交互：

• 移动时
• 旋转时
• 尺寸改变时
• 显示时
• 隐藏时
• 获取焦点时
• 失去焦点时
• 选中
• 取消选中时
• 选中改变时
• 载入时

页面交互：

• 窗口尺寸改变时
• 页面载入时
• 视图改变时
• 窗口向上滚动时
• 窗口向下滚动时
• 窗口滚动时

内联框架交互：

• 移动时
• 尺寸改变时
• 显示时
• 隐藏时
• 载入时

动态面板交互：

• 手势交互
• 动态面板交互

中继器交互：

• 载入时
• 每项加载时
• 列表尺寸改变

中继器使用：
第一步：编辑母版
第二步：在样式中添加数据，编辑列名，文本可以复制excel等，图片需要单独添加
第三步：在交互中绑定数据

条件设置：（类似于if-else）

• 设置条件项
• 选择元件
• 设置具体条件内容
• 设置条件的匹配

文本框交互：

• 跟形状交互类似
• 多了“文本改变时”
• 少了“旋转时”

下拉列表交互：

• 跟形状交互类似
• 多了“选项改变时”
• 少了“旋转时”

单选/复选交互：

• 跟形状交互类似
• 少了“旋转时、尺寸改变时”

树交互：

• 跟单选/复选交互相同

4.1 交互动作

事件 + 动作 = 交互效果
比如，单击时，给元件设置文本

链接动作：

• 打开链接
• 关闭窗口
• 框架中打开链接
• 滚动到元件

元件动作：（可以做下拉框联动等）

• 显示/隐藏
• 设置面板状态
• 设置文本
• 设置图片
• 设置选中
• 设置列表选中项
• 启用/禁用
• 移动
• 旋转
• 设置尺寸
• 至于顶层/底层
• 设置不透明度
• 获取焦点
• 展开/收起树节点

中继器动作：（可以设置添加删除修改表格内容，自动排序，分页等操作）

• 添加排序
• 移出排序
• 添加筛选
• 移出筛选
• 设置当前显示页面
• 设置每页项目数量
• 添加行
• 取消标记
• 更新行
• 删除行

其他动作：

• 设置自适应视图
• 设置变量值
• 等待
• 其他（在弹出窗口中显示提示文字）
• 触发事件

5.变量和函数

5.1 对象、属性、函数

1. 对象：如一个具体的元件
   • 当前元件、目标元件
   • 变量、中继器、中继器数据集中的一行数据
2. 属性：如元件的宽、高、坐标
   • 宽、高、长度、边界
   • 字符串的长度
3. 函数：针对对象的操作
   • 获得各类日期、获取绝对值、取整、取余

5.2 变量

局部变量：

• 使用场景非常多
• 需要先创建
• 只能作用于当前事件
• 命名需要注意，只能英文+数字

全局变量：

• 需要先创建
• 可以作用于整个文档，在任意页面调用或使用

中继器的Item属性：

• Item：获取数据集一行数据的集合，即数据行的对象
• Item.列名：获取数据行中指定列的值
• index：获取数据行的索引编号，编号起始为1，由上至下每行递增1
• isFirst：判断数据行是否为第1行
• isLast：判断数据行是否为最末行
• isEven：判断数据行是否为偶数行、
• isOdd：判断数据行是否为奇数行
• isMarked：判断数据行是否被标记
• isVisible：判断数据行是否为可见行

中继器的Repeater属性：

• Repeater：中继器的对象
• visibleItemCount：中继器项目列表中可见项的数量
• itemCount：加载项数量
  • indexOf(‘searchValue’,start)：从左至右查询字符串在当前文本对象中首次出现的位置。为查询到，返回值为-1
• dataCount：获取中继器数据集中数据行的总数量
• pageCount：获取中继器分页的总数量，即能够获取分页后共有多少页
• pageIndex：获取中继器项目列表当前显示内容的页码

元件的属性：

• This：回去当前元件对象，当前元件指添加事件的元件
• Target：获取目标元件对象，目标元件指添加动作的元件
• x：获取元件对象的X轴坐标值
• y：获取元件对象Y轴坐标值
• width：获取元件对象的宽度值
• height：获取元件对象的高度值
• scrollX：获取元件对象水平移动的距离
• scrollY：获取元件对象垂直移动的距离
• text：获取元件对象的文本
• name：获取元件对象的名称
• top：获取元件对象顶部边界的坐标值
• left：获取元件对象左边界的坐标值
• right：获取元件对象右边界的坐标值
• bottom：获取元件对象底部边界对的坐标轴
• opacity：获取元件对象的不透明度
• rotation：获取元件对象的旋转角度

页面属性：

• PageName：获取当前页面的名称

窗口属性：

• Window.width：获取浏览器的当前宽度
• Window.height：获取浏览器的水平高度
• Window.scrollX：获取浏览器的水平滚动距离
• Window.scrollY：获取浏览器的垂直滚动距离

鼠标指针：

• Cursor.x：获取鼠标当前位置的X轴坐标
• Cursor.Y：获取鼠标当前位置Y轴坐标
• DragX：获取鼠标在水平方向的移动距离（0.01秒）
• DragY：获取鼠标在垂直方向的移动距离（0.01秒）
• TotalDragX：整个拖动过程中，鼠标指针在水平方向上移动的距离
• TotalDragY：整个拖动过程中，鼠标指针在垂直方向上移动的距离
• DragTime：鼠标拖动操作的总时长。从鼠标按下左键到释放左键的总时长，中间过程中，如果未移动鼠标位置，也计算时长

5.3 函数

数字函数：

• toExponential(decimalPoints)：将对象的值转换为指数计数法。decimalPoints为小数点后保留的小鼠位数
• toFixed(decimalPoints)：将一个数字转换为保留指定小数位数的数字，超出的后面小数位将自动四舍五入。decimalPoints为小数点后保留的小数位数
• toPrecision(length)：将数字格式化为指定的长度，小数点不计算长度，length为指定的长度

字符串的属性和函数

• length：返回字符串的字符长度，包括空格，注意：汉字占1个字符
• charAt(index)：返回字符串中指定索引处的字符
• indexOf(‘searchValue’)：返回调用函数的字符串中搜索值的第一个实例的起始索引。如果未找到搜索值，则返回-1
• lastIndexOf(‘searchValue’)：返回调用函数的字符串中搜索之的最后一个实例的起始索引。如果未找到搜索值，则返回-1
• cahrCodeAt(index)：获取当前文本对象中指定位置字符的Unicode编码（中文编码段19968-40622）；字符其实位置为0开始。index为大于等于0的整数
• slice(start,end)：从当前文本对象中截取从指定位置开始到指定位置结束之间的字符串
• substr(start,length)：当前文本对象中从指定位置截取一定长度的字符串。参数：start为截取的其实位置，length为截取的长度，该参数可以省略，省略则表示从其实位置一直截取到文本对象末尾
• subString(from,to)：从当前文本对象中截取从指定位置开始到零一指定位置区间的字符串
• concat(‘string’)：将当前文本对象于另一个字符串组合，string为组合后显示在后方的字符串
• replace(‘searchvalue’,‘newvalue’)：用新的字符串替换文本对象中指定的字符串
• toLowerCase()：将文本对象中所有的大写字母转换为小写字母
• toUpperCase()：将文本对象中所有的小写字母转换为大写字母
• trim()：删除文本对象两端的空格
• toString()：将一个逻辑值转换为字符串
• split(‘separator’,limit)：将当前文本对象中与分隔字符相同的字符转为“,”，形成多组字符串，并返回从左开始的指定数组

数学函数：

• Math.abs(x)：计算参数值的绝对值。参数：x为数值
• Math.acos(x)：获取一个数值的反余弦弧度值，其范围时0_{pi。参考：x为数值，范围在-1}1之间
• Math.asin(x)：获取一个数值的反正弦值。参数：x为数值，范围在-1~1之间
• Math.atan(x)：获取一个数值的反正切值。参数：x为数值
• Math.atan2(y,x)：获取某一个点(x,y)的角度值
• Math.ceil(x):向上取整函数，获取大于或者等于指定数值的最小整数。参数：x为数值
• Math.cos(x)：获取一个数值的余弦函数，返回-1.0到1.0之间的数。参数：x为弧度数值
• Math.exp(x)：获取一个数值的指数函数，计算以e为底的指数
• Math.floor(x)：向下取整函数，获取小于或者等于指定数值的最大整数。参数：x为数值
• Math.log(x)：对数函数，计算以e为底的对数值。参数：x为数值
• Math.max(x,y)：获取参数中的最大值。参数：“x,y”表示多个数值，不一定为2个数值
• Math.min(x,y)：获取参数中的最小值。参数：“x,y”表示多个数值，不一定为2个数值
• Math.pow(x,y)：幂函数，计算x的y次幂
• Math.random()：随机数函数，返回一个0~1之间的随机数
• Math.sin(x)：正弦函数。参数：x为弧度数值
• Math.sqrt(x)：平方根函数。参数：x为数值
• Math.tan(x)：正切函数。参数：x为弧度数值

日期函数：

• Now：获取当前计算机系统日期对象
• GenDate：获取原型生成日期对象
• getDate()：获取日期对象“日期”部分数值（1~31）
• getDay()：获取日期对象“星期”部分的数值（0~6）（0是星期天）
• getDayOfWeek()：获取日期对象“星期”部分的英文名称
• getFullYear()：获取日期对象“年份”部分四位数值
• getHours()：获取日期对象“小时”部分数值（0~23）
• getMillseconds()：获取日期对象的毫秒数（0~999）
• getMinutes()：获取日期对象“分钟”部分数值（0~59）
• getMonth()：获取日期对象“月份”部分的数值（1~12）
• getMonthName()：获取日期对象“月份”部分的英文名称
• getSeconds()：获取日期对象“秒数”部分数值（0~59）
• getTime()：获取当前日期对象中的时间值。该时间值表示从1970年1月1日00:00:00开始，到当前日期对象时，所经历的毫秒数，以格林威治时间为准
• getTimezoneOffset()：获取世界标准时间（UTC）与当前主机时间之间的分钟差值
• getUTCDate()：使用世界标准时间获取当前日期对象“日期”部分数值（1~31）
• getUTCDay()：使用世界标准时间获取当前日期对象“星期”部分数值（0~6）
• getUTCFullYear()：使用世界标准时间获取当前日期对象“年份”部分四为数值
• getUTCHours()：使用世界标准时间获取当前日期对象“小时”部分数值（0~23）
• getUTCMilliseconds()：使用世界标准时间获取当前日期对象的毫秒数（0~999）
• getUTCMinutes()：使用世界标准时间获取当前日期对象“分钟”部分数值（0~59）
• getUTCMonth()：使用世界标准时间获取当前日期对象"月份"部分数值（1~12）
• getUTCSeconds()：使用世界标准时间获取当前日期对象“秒数”部分数值（0~59）
• parse(datestring)：用于分析一个包含日期的字符串，并返回该日期与1970年1月1日00:00:00之间相差的毫秒数。参数：datestring为日期格式的字符串，格式为：yyyy/mm/dd hh:mm:ss
• toTimeString()：以字符串的形式获取一个时间
• toDateString()：以字符串的形式获取一个日期
• toISOString()：获取当前日期对象的ISO格式的日期字串，格式：YYYY-MM-DDTHH:mm:ss.sssZ
• toJSON()：获取当前日期对象的JSON格式的日期字串，格式：YYYY-MM-DDTHH:mm:ss.sssZ
• toLocaleDateString()：以字符串的形式获取本地化当前日期对象。并且只包含“年月日”部分的短日期信息
• toLocaleTimeString()：以字符串的形式获取本地化当前日期对象。并且只包含“年月日”部分的短日期信息
• toUTCString()：以字符串的形式获取相当于当前日期对象的世界标准时间
• Date.UTC(year,month,day,hour,min,sec,millisec)：获取相对于1970年1月1日00:00:00的世界标准时间，与指定日期对象之间相差的毫秒数。参数：组成指定日期对象的年、月、日、时、分、秒以及毫秒的数值
• valueOf()：获取当前日期对象的原始值，从1970年1月1日至date对象的毫秒数
• addYear(years)：将指定的年份数加到当前日期对象的毫秒数
• addYear(years)：将指定的年份数加到当前日期对象上，获取一个新的日期对象。参数：years为整数数值，正负均可
• addMonths(months)：将指定的月份加到当前日期对象上，获取一个新的日期对象。参数：months为整数数值，正负均可
• addDays(days)：将指定的天数加到当前日期对象上，获取一个新的日期对象。参数：days为整数数值，正负均可
• addHours(hours)：将指定的小时数加到当前日期对象上，获取一个新的日期对象。参数：hours为整数数值，正负均可
• addMinutes(minutes)：将指定的分钟数加到当前日期对象上，获取一个新的日期对象。参数：minutes为整数数值，正负均可
• addSeconds(seconds)：将指定的秒数加到当前日期对象上，获取一个新的日期对象。参数：seconds为整数数值，正负均可
• addMilliseconds(ms)：将指定的毫秒数加到当前日期对象上，获取一个新的日期对象。参数：ms为整数数值，正负均可
• year：获取系统日期对象“年份”部分的思维数值
• Month：获取系统日期对象“月份”部分数值（1~12）
• Day：获取系统日期对象“日期”部分数值（1~31）
• Hours：获取系统日期对象“小时”部分数值（0~23）
• Minutes：获取系统日期对象“分钟”部分数值（0~59）
• Seconds：获取系统日期对象“秒数”部分数值（0~59）

布尔运算符：

• ==等于
• !=不封于
• <小于
• <=小于等于

• 大于

• =大于等于

• &&并且
• ||或者
• ! not