Axure 9 常用移动端组件骚操作（附案例）

你需要了解的Axure常用页面组件骚操作

Axure 9, 老司机发车

前言：工具会用，持续学习即可，没必要在工具上投入太多精力，而忽视了产品核心能力。（接受异议，不做反驳）

作为一名老司机，不到万不得已一般不做高保真设计（远远不如交给一个默契的UI/UE基友来的爽）。

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

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

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

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

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

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

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

效果如图

image

2，选项组的选中互斥

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

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

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

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

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

效果如图

image

3，自增自减

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

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

实现核心：点赞icon的状态设置，以及关联的点赞数文本文设置。必须判断当前icon的状态，再依据对应状态增还是减。其中在设置点赞数时用到局域变量（不要用全局变量--不理解的忽略），设置一个变量为NUM(随意敲的)，取值为点赞数的文本。

细节如下：

image

image

4，一些小基操

Axure9.0 快捷键强烈推荐

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

页面布局

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

image

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

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

老司机需要关注，分享，收藏