原型设计-Axure RP 交互设计

1 页面事件

事件名称 事件说明
页面加载时事件 页面加载时事件
窗口尺寸改变时事件 浏览器窗口改变大小时,在调整浏览器窗口时发生,可多次发生
窗口滚动时事件 浏览器窗口滚动时事件
窗口向上滚动时事件 浏览器窗口向上滚动时发生
窗口向下滚动时事件 浏览器窗口向下滚动时发生
页面鼠标单击时事件 页面单击时事件,在空白区域,或者在没有添加“鼠标单击时”事件的元件上进行单击操作时,将会发生该事件
页面鼠标双击时事件 页面双击时事件,在空白区域,或者在没有添加“鼠标双击时”事件的元件上进行双击操作时,将会发生该事件
页面鼠标右击时事件 页面右击时事件,在空白区域,或者在没有添加“鼠标右击时”事件的元件上进行右击操作时,将会发生该事件
页面鼠标移动时事件 鼠标移动时事件,在空白区域,或者在没有添加“鼠标移动时”事件的元件上进行移动操作时,将会发生该事件
页面按键按下时事件 键盘按键按下时事件。在空白区域,或者在没有添加“键盘按下时”事件的元件上进行键盘按下操作,将会发生该事件
页面按键松开时事件 键盘按键松开时事件。在空白区域,或者在没有添加“键盘松开时”事件的元件上进行键盘松开操作,将会发生该事件
自适应视图改变时事件 自适应视图更改时事件,当切换到另一视图时,发生一次,该事件可发生多次

2 元件事件

为元件添加事件的方法与页面添加事件的步骤一样,但针对不同的元件,事件类型有所不同。

事件名称 事件说明
鼠标单击时事件 内联框架元件、中继器元件不包含该事件
鼠标移入时事件 内联框架元件、中继器元件、提交按钮元件、树、表格、菜单元件不包含该事件
鼠标移出时事件 内联框架元件、中继器元件、提交按钮元件、树、表格、菜单元件不包含该事件
鼠标双击时事件 内联框架元件、中继器元件、提交按钮元件、树、表格、菜单元件不包含该事件
鼠标右击时事件 内联框架元件、中继器元件、提交按钮元件、树、表格、菜单元件不包含该事件
按键按下时事件 鼠标按键按下并且没有释放时事件,内联框架元件、中继器元件、提交按钮元件、树、表格、菜单元件不包含该事件
按键松开时事件 鼠标按键释放时事件,内联框架元件、中继器元件、提交按钮元件、树、表格、菜单元件不包含该事件
移动时事件 中继器元件、树、表格、菜单元件不包含该事件
显示时事件 显示元件时事件,中继器元件、树、表格、菜单元件不包含该事件
隐藏时事件 隐藏元件时事件,中继器元件、树、表格、菜单元件不包含该事件
获取焦点时事件 元件获得焦点时事件,中继器元件、提交按钮、树、表格、菜单元件不包含该事件
失去焦点时事件 元件获得焦点时事件,中继器元件、提交按钮、树、表格、菜单元件不包含该事件
文本改变时事件 文本框和多行文本框元件包含该事件
选项改变时事件 下拉列表和列表元件包含该事件
选中改变时事件 选中改变时发生该事件,复选框和单元框包含该事件
状态改变时事件 只有动态面板包含该事件
拖动开始时事件 只有动态面板包含该事件
拖动时事件 只有动态面板包含该事件,在一次拖动开始,拖动结束事件中,可以包含多次拖动时事件
拖动结束时事件 只有动态面板包含该事件
向左拖动时事件 只有动态面板包含该事件
向右拖动时事件 只有动态面板包含该事件
向上拖动时事件 只有动态面板包含该事件
向下拖动时事件 只有动态面板包含该事件
载入时事件 加载元件时发生的事件
滚动时事件 只有动态面板包含该事件,向上或向下滚动时事件
尺寸改变时事件 调整元件大小时发生

3 用例和动作

事件是通过不同的用例和动作对外界输入做出的一种反映。事件包含一个或多个用例。通过判断各自的条件来执行具体的动作,不同的用例不会同时发生。

4 变量

在 Axure RP 8 中变量被用于实现多种交互效果。从 Axure RP 6 版本开始,就增加了全局变量的功能,因此,Axure RP 8有两种变量:全局变量和局部变量。

4.3 变量应用场合

变量的应用场合丰富多样,关键还是看设计人员如何使用,用得好就是神来之笔,用得不好反而会使原型设计复杂化。以下两种应用场景最为常见。

  • 1)赋值载体:简单来说就是发挥中间人的作用,因为全局变量支持多达 9 种赋值方法,其中有 6 种是获取元件值的,因此,其可以作为页面间值的传递媒介。局部变量是在内部做赋值载体,或者在此基础上进行二次运算。
  • 2)条件判断载体:全局变量的赋值方式很多,当获取到值进行直接使用时,就是用来做条件判断。如在某个页面中根据登录用户的不同登录名,确定是否显示某部分内容时,可以直接将全局变量作为条件判断载体。

    5 函数

Axure函数的基本语法

在axure交互设计时,函数可以用在条件公式和需要赋值的地方,其基本语法是用双方括号包含,变量值和函数用英文句号连接。

例如:

1
2
3
[[LVAR. Width]] 表示变量LVAR的宽度。

[[This. Width]] 当前元件的宽度

5.1 元件函数

函数名称 函数说明
This 获取当前元件对象。当前元件是指当前添加交互动作的元件。
Target 获取目标元件对象。目标元件是指当前交互动作控制的元件。
x 获取元件对象的X轴坐标值。
y 获取元件对象的Y轴坐标值。
width 获取元件对象的宽度值。
height 获取元件对象的高度值。
scrollX 获取元件对象的水平滚动距离(当前仅限动态面板)。
scrollY 获取元件对象的垂直滚动距离(当前仅限动态面板)。
text 获取元件对象的文本文字。
name 获取元件对象的自定义名称。
top 获取元件对象的上边界坐标值。
left 获取元件对象的左边界坐标值。
right 获取元件对象的右边界坐标值。
bottom 获取元件对象的下边界坐标值。
opacity 获取元件对象的不透明比例。
rotation 获取元件对象的旋转角度。

5.2 鼠标指针函数

函数名称 函数说明
Cursor.x 鼠标指针在页面中位置的X轴坐标。
Cursor.y 鼠标指针在页面中位置的Y轴坐标。
DragX 鼠标指针沿X轴拖动元件时的瞬间(0.01秒)拖动距离。
DragY 鼠标指针沿Y轴拖动元件时的瞬间(0.01秒)拖动距离。
TotalDragX 鼠标指针拖动元件从开始到结束的X轴移动距离。
TotalDragY 鼠标指针拖动元件从开始到结束的Y轴移动距离。
DragTime 鼠标指针拖动元件从开始到结束的总时长。

5.3 Axure RP窗口函数

函数名称 函数说明
Window.width 打开原型页面的浏览器当前宽度。
Window.height 打开原型页面的浏览器当前高度。
Window.scrollX 浏览器中页面水平滚动的距离。
Window.scrollY 浏览器中页面垂直滚动的距离。

5.4 页面函数

函数名称 函数说明
PageName 获取当前页面的名称。

5.5 数字函数

函数名称 函数说明
toExponential(decimalPoints) 把数值转换为指数计数法。参数:decimalPoints为保留小数的位数。
toFixed(decimalPoints) 将一个数字转为保留指定位数的小数,小数位数超出指定位数时进行四舍五入。参数:decimalPoints为保留小数的位数。
toPrecision(length) 把数字格式化为指定的长度。参数:length为格式化后的数字长度,小数点不计入长度。

5.6 数学函数

函数名称 函数说明
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)的角度值。 参数:“x,y”为点的坐标数值。
Math.ceil(x) 向上取整函数,获取大于或者等于指定数值的最小整数。 参数:x为数值
Math.cos(x) 余弦函数。 参数:x为弧度数值。
Math.exp(x) 指数函数,计算以e为底的指数。 参数:x为数值。
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次幂。 参数:x不能为负数且y为小数,或者x为0且y小于等于0。
Math.random() 随机数函数,返回一个0~1之间的随机数。 示例:获取10-15之间的随机小数,计算公式为Math.random()*5+10。
Math.sin(x) 正弦函数。 参数:x为弧度数值。
Math.sqrt(x) 平方根函数。 参数:x为数值。
Math.tan(x) 正切函数。 参数:x为弧度数值。

5.7 时间函数

函数名称 函数说明
Now 获取当前计算机系统日期对象。
GenDate 获取原型生成日期对象。
getDate() 获取日期对象“日期”部分数值(1 ~ 31)。
getDay() 获取日期对象“星期”部分的数值(0 ~ 6)。
getDayOfWeek() 获取日期对象“星期”部分的英文名称。
getFullYear() 获取日期对象“年份”部分四位数值。
getHours() 获取日期对象“小时”部分数值(0 ~ 23)。
getMilliseconds() 获取日期对象的毫秒数(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)。
Date.parse(datestring) 用于分析一个包含日期的字符串,并返回该日期与1970年1月1日00:00:00之间相差的毫秒数 参数:datestring为日期格式的字符串,格式为:yyyy/mm/dd hh:mm:ss。
toDateString() 以字符串的形式获取一个日期。
toISOString() 获取当前日期对象的IOS格式的日期字串,格式: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() 获取当前日期对象的原始值。
addYears(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)。

5.8 字符串函数

函数名称 函数说明
length 获取当前文本对象的长度,即字符个数;1个汉字的长度按1计算。
charAt(index) 获取当前文本对象中指定位置的字符; 参数:index为大于等于0的整数。
charCodeAt(index) 获取当前文本对象中指定位置字符的Unicode编码(中文编码段19968 ~ 40622);字符起始位置从0开始。 参数:index为大于等于0的整数。
concat(‘string’) 将当前文本对象与另一个字符串组合。 参数:string为组合在后方的字符串。
indexOf(‘searchValue’,start) 从左至右获取查询字符串在当前文本对象中首次出现的位置。未查询到时返回值为-1。 参数:searchValue为查询的字符串;start为查询的起始位置。该参数可省略,官方未给出此参数,经测试可用。
lastIndexOf(‘searchvalue’,start) 从右至左获取查询字符串在当前文本对象中首次出现的位置。未查询到时返回值为-1。 参数:searchValue为查询的字符串;start为查询的起始位置。该参数可省略,官方未给出此参数,经测试可用。
replace(‘searchvalue’,’newvalue’) 用新的字符串替换当前文本对象中指定的字符串。 参数:searchvalue为被替换的字符串;newvalue为新文本对象或字符串。
slice(start,end) 从当前文本对象中截取从指定起始位置开始到终止位置之前的字符串。 参数:start为被截取部分的起始位置,该数值可为负数;end为被截取部分的终止位置,该数值可为负数。该参数可省略,省略该参数则由起始位置截取至文本对象结尾。
split(‘separator’,limit) 将当前文本对象中与分隔字符相同的字符转为“,”,形成多组字符串,并返回从左开始的指定组数。 参数:separator为分隔字符,分隔字符可以为空,为空时将分隔每个字符为一组;limit为返回组数的数值,该参数可以省略,省略该参数则返回所有字符串组。
substr(start,length) 从当前文本对象中指定起始位置开始截取一定长度的字符串。 参数:start为被截取部分的起始位置;length为被截取部分的长度,该参数可省略,省略该参数则由起始位置截取至文本对象结尾。
substring(from,to) 从当前文本对象中截取从指定位置到另一指定位置区间的字符串。右侧位置不截取。 参数:from为指定区间的起始位置;to为指定区间的终止位置,该参数可省略,省略该参数则由起始位置截取至文本对象结尾。
toLowerCase() 将文本对象中所有的大写字母转换为小写字母。
toUpperCase() 将当前文本对象中所有的小写字母转换为大写字母。
trim() 去除当前文本对象两端的空格。
toString() 将一个逻辑值转换为字符串。

5.9 中继器函数

函数名称 函数说明
Repeater 中继器的对象。Item.Repeater即为Item所在的中继器对象。
visibleItemCount 中继器项目列表中可见项的数量。比如:项目列表共有15项,分页显示为每页6项。当项目列表在第1、2页时,可见项数量为6;当项目列表在第3页时,可见项数量为3。
itemCount 获取中继器项目列表的总数量,或者叫加载项数量。默认情况下项目列表的总数量会与中继器数据集中的数据行数量一致,但是,如果进行了筛选,项目列表的总数量则是筛选后的数量,这个数量不受分页影响。
dataCount 获取中继器数据集中数据行的总数量。
pageCount 获取中继器分页的总数量,即能够获取分页后共有多少页。
pageIndex 获取中继器项目列表当前显示内容的页码。
Item 获取数据集一行数据的集合,即数据行的对象。
TargetItem 目标数据行的对象。
Item.列名 获取数据行中指定列的值。
index 获取数据行的索引编号,编号起始为1,由上至下每行递增1。
isFirst 判断数据行是否为第1行;如果是第1行,返回值为“True”,否则为“False”。
isLast 判断数据行是否为最末行;如果是最末行,返回值为“True”,否则为“False”。
isEven 判断数据行是否为偶数行;如果是偶数行,返回值为“True”,否则为“False”。
isOdd 判断数据行是否为奇数行;如果是奇数行,返回值为“True”,否则为“False”。
isMarked 判断数据行是否为被标记;如果被标记,返回值为“True”,否则为“False”。
isVisible 判断数据行是否为可见行;如果是可见行,返回值为“True”,否则为“False”。

实例-实现数字时钟逻辑

  • case 1 seconds 不等于59时,seconds+1
  • case 2 else if seconds=59,minutes=59,hours=23 时,seconds,minutes,hours置零
  • case 3 else if seconds=59,minutes=59,hours+1
  • case 4 else if seconds=59,minutes+1