Axure移动端常用组件骚操作(附案例)

来自老司机的关爱,骚操作不断
Axure 9, 老司机发车;
前言:工具会用,持续学习即可,没必要在工具上投入太多精力,而忽视了产品核心能力。(接受异议,不做反驳)
作为一名老司机,不到万不得已一般不做高保真设计(远远不如交给一个默契的UI/UE基友来的爽)。


本期主要说下,工作中常用的组件设置和一些骚操作,让萌新感受一下来自老司机的关爱。^_^


1,消失的滚动条,移动装逼必备


为什么我用Axure做移动端页面滚动时会有一个恶心的滚动条?那是你还没有遇见关爱你的老司机!


Axure中所有方向的滚动效果都会带有滚动条,这是Axure系统的内置。我们只能通过迂回方式搞定她,这里就需要老司机最爱的动态模板组件上台了。


这招我取名叫做动态之动态(我在瞎扯),首先拖出一个动态模板放入画布,将此模板设置为页面元素所需的位置和大小。


第二步,进入上个动态模板的状态页,再拖一个动态模板。此处是关键,依据需求设置当前模板为横向还是垂直滚动,例子中是设置垂直滚动。将此动态模板对应的滚动条位置拖到上一个动态模板的范围之外(划重点),利用上一个模板大小限制了滚动条的出现,从而达到滚动条消失的效果。


第三步,在第二个动态模板中进行内容的布局设计。老司机建议:先设计好滚动的内容,再来弄动态模板。


效果如图


2,选项组的选中互斥


一组导航按钮(>=3),有选中和不选中2中状态;但是每次都只要一个选中按钮。如何快速实现这种效果呢?别傻傻的去写每个元素的触发状态了,如果按钮很多的话你会疯的。老司机教你一招,包你爽。


首先设置好一组按钮文本,全部选择起来,右键选择交互样式,设置选中时的效果。


第二步,全选后,右键选择选择组,设置一个名称,即完成了一个关键的操作。


第三步,设置元素点击事件,设置点击即选中(实现选中效果)。这一步必须的,不然没有行为事件触发效果。


在案例中我增加了选中下划线效果,此效果设置时,需要注意下划线移动效果必须时移到,而不是经过。此项设置老司机略过。


效果如图


3,自增自减


老司机这里用的是点赞后再取消的效果,此效果实际只影响增1和减1,也可以直接变化用动态面板来做。既然老司机已经出手了,就换种玩法-局域变量实现法。


逻辑梳理,一个点赞icon,一个点赞数文本;点赞后icon换状态,点赞数+1,再次点击icon换为为点赞状态,点赞数减1。


实现核心:点赞icon的状态设置,以及关联的点赞数文本文设置。必须判断当前icon的状态,再依据对应状态增还是减。

其中在设置点赞数时用到局域变量(不要用全局变量--不理解的忽略),设置一个变量为NUM(随意敲的),取值为点赞数的文本。


细节如下:


4,一些小基操


Axure9.0 快捷键强烈推荐
假如你现在手中的伴侣是9版本的,那么建议将那几个单字母快捷键熟练用起来,老司机作证保你爽。T R O E,具体代表啥,自己上手。


页面布局
这里说的是预览时的页面布局,Axure可以设置预览页面的模式,居中还是左对齐,在部分场景下比较有用。


老司机热线,公众号 闲聊产品

回复关键字获取案例组件,“老司机的关爱”

0条评论 添加新讨论

登录后参与讨论
Ctrl+Enter 发表