不跳跃的Axure操作说明文档:进度条

我觉得还应该给这个进度条增加一个判断条件,让它停下来......不要再动了。一个月之前,我问过Jason,你们在做“小猪巴士”App的时候做过进度条吗?他说,做过。可是准备会议的工作一直很忙,一直不得空去看看这样的小东西是怎么做出来的。2016年10月31日或者不是这一天,在Xi‘an上班的迄今为止的最后那几个下午中的一个下午,“ProgressBar”又出现在眼前,没有达成的小心愿,总是放不下、不停冒出来,必须完成做个了结。

“梨花带雨”

在百度上搜索“Axure RP 进度条”会出现好几个版本,有些流程看一眼,就会让人产生一种不信任,就和对着网上某些拼凑得来的菜谱,是永远做不出和图片中的美食一样。好不容易看到有一篇正儿八经的操作流程说明,发现步骤是跳跃的,对于我们这样不了解Axure变量操作的小菜鸟来说,看这些文字,就像路过一个又一个不知该如何选择的岔路口。我,只想做一个进度条,结果发现做好进度条之前,得先需要了解一片森林。

这趟摸索旅程的一开始,我就拉着小鸭子上了这条小木船,志同道合的人,好像一直都是相互拉扯着对方跳进不知深浅的坑,然后再相互激励地爬出来,不过,《阴阳师》这个坑很大,比progressbar大多了吧。接下来,就直接叙述,不存在任何跳跃、缺省的操作步骤,顺带提一下可能会遇到的那些误区:

“一览众山小”

Axure版本:8.0.0.3303

会选用的几个部件:Label、Text Field、Box1

选用Label,因为它可以自定义出可爱的形状啊~这个会成为显示进度数字的背景图案。

选用Text Field,因为它有交互事件OnTextChange~但是它颜值低且无法改变整容,需要透明化处理、隐藏边框。

这个部件将会被选用两次:一个将成为进度条的外框;一个将成为移动的进度条,随后被转化为动态面板。

几个部件变形记:进度框、进度条、动态条、进度数字

——进度框——

1、Libraries --> Common --> Box1 选中Box1矩形,按住鼠标左键拖拽到页面操作区,什么是页面操作区,简单地说,Axure界面在水平方向分为三栏,这个矩形需要被拖至中间这一栏。

不跳跃的Axure操作说明文档:进度条_第1张图片

2、设置矩形大小,红圈提醒:重新命名,便于在以后的操作中快速识别部件的作用。

不跳跃的Axure操作说明文档:进度条_第2张图片

——进度条——

1、重复“进度框”的两个步骤,将其重新命名为“进度条”,进度条和进度框的宽、高分别保持一致,填充颜色。这里需要特别注意:进度条需要置于进度框的上层,如图中红色箭头所示。

不跳跃的Axure操作说明文档:进度条_第3张图片

——动态条——

1、选中“进度条”,右击鼠标,在快捷菜单中选择“Convert to Dynamic Panel”,将“进度条”转换为动态面板,将其命名为“动态条”。

不跳跃的Axure操作说明文档:进度条_第4张图片

2、修改“动态条”的宽度值为“1”,并将“动态条”和“进度框”顶部对齐。

不跳跃的Axure操作说明文档:进度条_第5张图片

——进度数字——

1、“心形Label”:将Labraries --> Common --> Label 拖放☞页面操作区,命名为“心形背景”,选中Label部件,点击部件上方的灰色圆形,将出现如下图所示的Custom Shape,选择喜欢的图案,并填充颜色。

不跳跃的Axure操作说明文档:进度条_第6张图片

2、将Labraries --> forms --> Text Field 拖放☞页面操作区,命名为“进度数字”,修改大小与“心形背景”接近,设置填充色为透明。

不跳跃的Axure操作说明文档:进度条_第7张图片

3、隐藏“进度数字”边框,将“进度数字”与“心形背景”中心对齐,组合为Group。

不跳跃的Axure操作说明文档:进度条_第8张图片
隐藏边框
不跳跃的Axure操作说明文档:进度条_第9张图片
“心形背景”与“进度数字”中心对齐
不跳跃的Axure操作说明文档:进度条_第10张图片
组合为Group

选择不同的部件、属性修改完成进度框、进度条、动态条、进度数字的设置,这些事情都属于界面布局的范畴。接下来是交互设置,它将完成两个动态效果:进度数字的变化、动态条填充变化。

不跳跃的Axure操作说明文档:进度条_第11张图片
在页面载入的时候:显示进度数字、设置动态条的动画效果、设置进度数字Group与动态条的同步移动;在 数字变化的时候,对全局变量进行+1,直到100,由此得到进度的百分比。

——Page : OnPageLoad——

不跳跃的Axure操作说明文档:进度条_第12张图片

——Text Field : OnTextChange——

不跳跃的Axure操作说明文档:进度条_第13张图片

关于全局变量

这个案例中用的是OnLoadVariable,Axure自带的全局变量,全局变量的设置是在主菜单的Project,在使用全局变量之前,需要为其设置初始值。另外,也可以case设置的时候,再进行全局变量设置。

不跳跃的Axure操作说明文档:进度条_第14张图片
不跳跃的Axure操作说明文档:进度条_第15张图片
初始值设置为0

关于局部变量

Page : OnPageLoad 的动态条动画用到了局部变量,这里用动态变量只是避免了由于进度条宽度的改变出现的修改工作。

不跳跃的Axure操作说明文档:进度条_第16张图片

关于函数表达

在设置Text field :OnTextChange用例的时候,每次触发事件,全局变量会被重新赋值,值为[[OnLoadVariable+1]]。在Axure RP中有字符串函数、数学函数、日期函数、数字函数、部件函数、窗口函数、鼠标函数、中继器、条件操作符,好吧,很多,我也在学习......

不跳跃的Axure操作说明文档:进度条_第17张图片
[[OnLoadVariable+1]] 设置步骤一
不跳跃的Axure操作说明文档:进度条_第18张图片
[[OnLoadVariable+1]] 设置步骤二
不跳跃的Axure操作说明文档:进度条_第19张图片
[[OnLoadVariable+1]] 设置步骤三:选择变量名称之后,修改表达式

上面用到变量、函数都非常简单,条件判断也只是基于变量值。

再分享一个Axure中文教程的网址:Axure基础教程 、 Axure高级教程、Axure案例 这些教程的内容基本摘自《Axure RP 8 实战手册-网站和APP原型制作案例精粹》,这本书的作者是小楼一夜听春语,小楼老师也是经常在北京、上海等地开展Axure线下培训活动。很早之前,我还用过金乌老师编著的《Axure RP 7 网站和APP原型制作从入门到精通》这本书,现在金乌老师已经出版了《Axure RP 8 网站和APP原型制作 从入门到精通》。金乌、小楼两位老师之间好像一直指责对方抄袭什么的,对于我们来说,这些只是软件工具的说明书,看个人阅读习惯和喜好。

你可能感兴趣的:(不跳跃的Axure操作说明文档:进度条)