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可以设置预览页面的模式,居中还是左对齐,在部分场景下比较有用。
老司机热线,公众号 闲聊产品
回复关键字获取案例组件,“老司机的关爱”