Axure RP9 案例:那些熟悉的交互,原来都可以用函数实现

上一节我们讲解了Axure RP 9.0为我们提供的函数以及对应的使用说明,本节将通过具体的应用案例来说明函数在实际场景中的运用。

| 知乎详情导航

首先请大家打开知乎App,点击任意一个问题,进入回答详情页,观察知乎详情页中顶部导航的效果。默认情况下,顶部导航为搜索框样式,向上滚动页面,查看回答内容时,顶部导航发生了变化,变成了提问内容;向下回滚页面至第一屏时,导航栏又变成了搜索框。从始至终,导航栏始终固定在窗口顶部。
为了节省时间让大家能够尽快掌握原型制作的方法,这里就不手动绘制线框图了,我们直接从知乎App中截取页面作为基本素材。这里至少需要两张图片,第一张是顶部导航为搜索框的图片,第二张是顶部导航为问题内容的图片。截取第一张图片时,最好能截取长屏,如果你的手机不支持长屏截取,你需要多截取几屏图片了。如果页面长度不够,将无法在浏览器中滚动窗口。下面我们开始原型的制作:

  1. 拖动图像元件至设计区域,双击图像元件从本地导入第一张图片。由于手机像素较高,导入到PC中,图片尺寸较大,建议等比例缩小图片。锁定宽高比例,宽度设置为375即可。右键点击图片,选择切割图片,将导航栏区域和回答区域分割。


    剪切图片.png
  2. 右键点击导航栏,选择转换为动态面板,命名为顶部导航。在样式面板中,选择自适应内容,点击固定到浏览器,设置固定属性,水平固定选择左侧,垂直固定选择顶部,勾选始终保持顶层(仅浏览器中有效)。


    设置动态面板样式.png
  3. 拖动图像元件至设计区域,双击元件从本地导入第二张图片。锁定宽高比例,宽度值设计为375,完成图片等比缩放。右键点击选择裁剪图片,保留导航栏区域,将多余区域裁减掉。

  4. 双击第2步的动态面板,点击添加状态,将第3步的导航栏图片剪切移入至状态2面板中,点击右上角关闭按钮,退出编辑状态。


    导航栏-问题内容.png
  5. 点击页面空白处,点击新建交互,选择“窗口向下滚动时”事件(对应页面向上滚动),选择动作“设置面板状态”,选择动态面板,选择状态2(导航栏为问题内容),点击完成。点击添加情形,点击添加条件,弹出条件创建窗口。选择文本,点击fx,点击插入变量或函数,选择窗口函数Window.scrollY,点击确定。回到条件创建窗口,选择>,选择文本,输入100,点击确定,完成条件的添加。


    窗口向下事件.png

    窗口向下条件.png

6.从元件库拖入一个热区元件至动态面板与回答内容交界处。

  1. 点击页面空白处,点击新建加交互,选择“窗口向上滚动时”事件(对应页面向下滚动),选择动作“设置面板状态”,选择动态面板,选择状态1(导航栏为搜索框),点击完成。点击添加情形,点击添加条件,弹出条件创建窗口。条件表达式从左至右依次选择元件范围,选择顶部导航动态面板,选择接触,选择元件范围,选择热区,点击确定,完成条件的添加。


    窗口向上事件.png

    窗口向上条件.png
  2. 点击预览,查看原型。

案例中运用了窗口函数Window.scrollY来判断切换顶部导航样式的时机。

| 简易计算器

设计一个可以进行加减乘除简单运算的计算器,计算器效果图如下:


简易计算器.png

我们可以看到每一种运算都有两个输入框,用来输入数据,运算符右侧为计算输出结果,右侧为触发计算指定的操作按钮。下面我们开始制作原型:

  1. 从元件库拖动准备8个单行文本框至设计区域,作为数据输入项,8个单行文本框分别命名为“加数、被加数、减数、被减数、乘数、被乘数、除数、被除数”。

  2. 拖动4个文本标签放置在每一排两个文本框中间,文编标签的内容编辑为“+-×÷”运算符。再拖动四个文本标签至每一排文本框的右侧,编辑文本标签为“=”。

  3. 拖动4个文本标签至等于号右侧,作为计算结果的输出项,分别命名为“求和、求差、求积、求商”,拖动四个下划线至计算结果下方。

  4. 拖动四4个按钮至计算结果右侧,编辑按钮文字为“计算”。

  5. 为加法计算按钮添加交互,选中按钮,点击新建交互,选择事件“鼠标单击时”,选择动作“设置文本”,目标元件选择“求和”,点击fx,进入值设置面板,添加两个局部变量LVAR1和LVAR2,分别为加数元件文字和被加数元件文字,插入表达式[[LVAR1+LVAR2]],点击确定,点击完成,完成加法计算的交互设置。


    求和.png
  6. 为减法计算按钮添加交互,选中按钮,点击新建交互,选择事件“鼠标单击时”,选择动作“设置文本”,目标元件选择“求差”,点击fx,进入值设置面板,添加两个局部变量LVAR1和LVAR2,分别为减数元件文字和被减数元件文字,插入表达式[[LVAR1-LVAR2]],点击确定,点击完成,完成减法计算的交互设置。


    求差.png
  7. 为乘法计算按钮添加交互,选中按钮,点击新建交互,选择事件“鼠标单击时”,选择动作“设置文本”,目标元件选择“求积”,点击fx,进入值设置面板,添加两个局部变量LVAR1和LVAR2,分别为乘数元件文字和被乘数元件文字,插入表达式[[LVAR1*LVAR2]],点击确定,点击完成,完成乘法计算的交互设置。


    求积.png
  8. 为除法计算按钮添加交互,选中按钮,点击新建交互,选择事件“鼠标单击时”,选择动作“设置文本”,目标元件选择“求商”,点击fx,进入值设置面板,添加两个局部变量LVAR1和LVAR2,分别为除数元件文字和被除数元件文字,插入表达式[[(LVAR1/LVAR2).toFixed(2)]],函数toFixed(2)意思为保留小数点后两位,并对小数点后两位的数字进行四舍五入。点击确定,点击完成,完成除法计算的交互设置。


    求商.png
  9. 点击预览,查看原型。

本案例中运用了数学函数+-×÷来进行数学运算,计算结果,其中除法运算中还运营了数字函数toFixed(decimalPoints),控制小数位数。

| 滑竿

滑竿.png

我们知道当拖动滑杆球时,可以让圆球沿着进度条进行移动,一般常用于多媒体播放器中控制音量或视频的播放进度。下面我们来制作这样的滑动效果:

  1. 拖动水平线元件至设计区域,命名为“进度条”边框宽度的设置为4,宽度设置为22。

  2. 拖动圆形元件至设计区域,锁定宽高比例,宽度设置为20。

  3. 拖动鼠标同时选中滑竿和进度条,设置为上下居中对齐。右键点击滑竿,选择转换为动态面板,命名为“滑竿”。

  4. 选中动态面板,点击新建交互,选择事件“拖动时”,选择动作“移动时”,选择当前元件,移动方向选择With Drag X(沿水平方向移动)。点击更多选项,沿直线轨道移动,设置移动边界,左侧≥[[LVAR1.left]],局部变量LVAR1为进度条元件;右侧≤[[LVAR1.right]],局部变量LVAR1为进度条元件,点击完成。


    拖动时-设置移动效果.png

    设置左边界.png

    设置右边界.png
  5. 选中动态面板,点击新建交互,选择事件“拖动结束时”,选择动作“移动时”,选择当前元件,X轴达到[[LVAR1.x]]、Y轴到达[[LVAR1.y]],变量LVAR1为当前元件,点击更多选项,选择沿直线轨道移动,点击完成。


    移动结束时.png

    设置移动坐标-x轴.png

    设置移动坐标-y轴.png
  6. 点击预览,查看原型。

案例中运用了元件函数left和right来控制滑竿移动的范围边界,运用元件函数this.x和this.y获取元件坐标。

| 文字计数

文本计数.png

当我们发表微博、发表评论、撰写文章标题,都会限制我们输入的字数,甚至提供了计数功能,提示你还能输入多少字。我们以文章标题计数功能为例,说明如何实现计数并提示用户还能输入xx字的原型效果。

  1. 拖动当行文本框元件至设计区域,命名为“标题-输入”,拖动文本标签至设计区域,编辑文本内容“请输入30字以内的标题”,命名为“计数提示”。

  2. 选中文本框,点击新建交互,选择事件“文本改变时”,选择动作“设置文本”,目标选择“计数提示”,设置为富文本,编辑文本,首先将当前元件文字添加为局部变量LVAR1,富文本编辑框中输入“你还可以输入[[30-LVAR1.length]]字”,将[[30-LVAR1.length]]文字颜色设置为红色,点击确定,点击完成。


    设置计数.png

    编辑提示信息.png
  3. 点击插入动作,选择当前元件,设置为文本,点击fx,首先将当前元件文字设置为局部变量LVAR1,然后插入表达式[[LVAR1.substring(0,30)]],点击确定,点击完成。


    限制输入字数.png

    截取显示的字符串.png
  4. 点击预览,查看原型。

案例中运用了字符串函数length进行文字的计数,运用函数substring(from,to)截取显示的字符串内容,案例中的函数表示截取0位至30位区间的字符串文字,不包含第30位。

更多关于函数的使用说明与介绍,请查看连载上篇文章 Axure 9.0高级教程:最新最全的函数使用手册,建议收藏

推荐阅读更多精彩内容