Arthur's Blog

本文要制作BMI身体质量指数计算器小案例，将涉及多种事件触发的交互、动态面板的使用等功能，并对原型设计有更深一步的了解。

效果预览

预览链接：https://icv2qn.axshare.com

一、交互逻辑分析

（1）两种度量制间的切换：公制（千克、厘米）；英制（磅、英寸）【注意后面的单位换算】

（2）根据用户输入的身高、体重计算BMI值并显示；

（3）根据计算出的BMI值，返回身体状态并显示，并改变箭头指向位置；

（4）边界问题：

偏瘦【0<BMI<=18.4】；正常【18.5<=BMI<=23.9】；过重【24.0<=BMI<=27.9】；肥胖【BMI>=28.0】。

二、界面元件搭建

（1）拖入两个单选框，注意将他们设为一组单选框，以实现单选框的特性；【右键单选框->指定单选按钮组->设置成相同的Group Name】。

（2）拖入身高、体重文本框、查询按钮等相关组件。

（3）分别拖出身高、体重单位的文本框，并转换为动态面板，state1为公制单位，state2为英制单位。

（4）同理拖出BMI值并转换为动态面板，BMI的state1为无值，state2为有值，为什么这里设置两个状态后面作出解释。

（5）再拖出身体状态的文本框，转换为动态面板，设置五个状态：初始、偏瘦、正常、过重、肥胖。

（6）最后绘制BMI中国标准表及箭头，界面元件就搭建完成啦！

三、交互界面的实现

（1）设置单选按钮选中不同度量制时设置对应的身高体重单位。

（2）对查询按钮设置交互事件，不同度量制设置对应不同的计算公式：【BMI=kg/（m^2）】。

（3）此处我们期望点击查询按钮后生成“BMI值”及“身体状态”，但身体状态是根据BMI值来判断生成的，但BMI值是进入条件语句后才能算出，由于Axure中无法嵌套条件语句【PS：笔者暂时没发现】，所以无法单纯通过鼠标单击事件生成“身体状态”。

因此要在其他地方设置触发事件，那么应该设置在哪里呢？

（4）笔者尝试了几次，最终选择了将“BMI值”转换成动态面板，当该动态面板“状态改变时”触发“身体状态”相关事件。这也就是之前笔者为什么将“BMI值”设置为两个状态，一开始为无值，最后变为有值，触发“状态改变时”交互事件。

（5）这里笔者创建了一个变量用于放置BMI的值。

（6）为“BMI值”设置交互事件，根据边界条件设置身体状态。

（7）最后根据“身体状态”的动态面板触发“状态改变时”事件，从

今天要讲的是如何用axure做出弹出框的效果，不限于当前窗口所弹出的提示、警告、带遮罩层的弹窗等，可以参考本教程，实用性非常强，应用的场景比较多。

想象一下场景，无论web端还是移动端，点击某个按钮，系统会提示相关提交信息、系统提示是否确认删除某条信息、确认关闭或退出当前界面诸如此类等等等。

原型设计

这个某个APP界面，当点击登录时，会弹出输入账号密码的登录框，这时候我们的设计就能派上用场了哈哈！

我有两种方案，供大家参考。

1. 动态面板

全选当前首页，在全选页面上右键单击“转换为动态面板”，如图，双击动态面板就到这个页面来了。

然后在上方添加一个状态；双击状态更改状态名，如果元件多的话不加名字会很麻烦哦~，我这里增加一个“输入账号密码”；

给输入账号密码画一个界面~有点丑，大家不要介意啊~

开始设置交互，选择“登陆”元件，右侧交互选择“单击时”-“设置面板状态”-选择动态面板-选择跳转的那一页动态-选择相关的效果，点击确定，交互完成。点击预览就可以看到所绘制的原型了~

2. 隐藏

照例，先创建一个首页，另外创建一个登陆窗口，如图

全选登录框，“合并”这个组合-隐藏。

选中“登陆”右侧交互选择“单击时”-“显示/隐藏”-选择元件-上一步隐藏的组合-选择交互方式，确定，大功告成~

#演示链接#

https://lanhuapp.com/url/mAsJ6

本文由 @妖怪口袋 原创发布于人人都是产品经理。 

本期教学为网易云音乐播放界面中唱片旋转和暂停的交互实现细节，一起来看看~

一、交互事件原理讲解

条件判断按钮动态面板决定唱片的旋转是否；点击按钮后，图片的旋转；添加图片“旋转时”事件，控制其循环旋转。

二、界面元件搭建

添加一个动态面板，命名为【按钮】，添加【旋转】和【暂停】两个状态，分别对应按钮命名为“旋转”和“暂停”。添加图片“碟片”，本教程为两张图片，你们也可以采用一张图片。

三、交互事件实现

（1）选中【按钮】动态面板，添加【鼠标单击时】事件

1）如果按钮面板为【旋转】，切换为此面板为下一个状态，向后循环，同时旋转【碟片】，旋转为“相对位置”，角度为5，方向为“顺时针”，动画为线性，时间为500毫秒。

2）否则，此面板切换为下一个状态。

（2）选中【碟片】，添加【旋转时】事件（主要是实现碟片的循环旋转）

同理，旋转为“相对位置”，角度为5，方向为“顺时针”，动画为线性，时间为500毫秒。增加判断条件为：动态面板【按钮】==暂停。

四、预览效果

示例演示：

本文由 @火星人～艾斯 原创发布于人人都是产品经理。 

本人教大家，如何利用Axure制作超简单机械加载效果，enjoy~

看看效果：

可以学到什么？

循环动态面板的应用有关循环动画怎么处理自带元件库的使用第一步：绘制

在系统元件库里搜索“齿轮”。

添加三个到画布，设置尺寸180*180，依次命名齿轮1、齿轮2、齿轮3，如图分布：

第二步：制作动效

创建一个动态面板，添加2个状态，命名“控制”。

新建交互【状态改变时】：

旋转齿轮2顺时针经过360°，动画线性5000ms；旋转齿轮3逆时针经过360°，动画线性5000ms；旋转齿轮1逆时针经过360°，动画线性5000ms。

然后需要驱动“控制”动态面板循环的交互，在什么都不选择的情况下，点击交互，页面载入时，设置“控制”动态面板下一项循环间隔5000ms。

以上做的两个步骤即每隔5秒触发一次动态面板循环，动态面板循环一次，就转动齿轮一周，转动时间5秒。

第三步：效果

有没有感觉很舒服！！！用循环动态面板同样可以做出加载中省略号从一点到三点循环下去的效果，大家动动脑筋做做看吧！

本文由 @索大佩罗娜 原创发布于人人都是产品经理。

本文给大家讲一种banner轮播最简单的实现方法，一起来看看~

前段时间做一个开放平台的原型，大家讨论完需求就希望，快点出原型（第二天），而且要求“高保真”。

于是在“快速”“高保真”的要求下，自己对于所有的页面交互都要求是，对需要使用原型的用户（产品、研发、测试）而言，达到对应的效果，而自己在实现时采用最简单的方法。

正巧今天看到网站上有教程教如何做一个轮播banner ，点开略看了一下，教程做的很复杂。其实使用axure做交互一般都比较简单，但由于其各种小窗口太多了，各种截图放一起，看上去很容易乱。之前小楼老师发布的一个教程，居然也被人吐槽讲的这么乱怎么做产品（扶额）。

原型链接：http://eta1id.axshare.com/

1. 首先看下轮播banner的组成

上图中，左边是页面 展现的 banner轮播的图，右侧则是对应的两个动态面板。

可以看到右侧动态面板命名非常简单（根本起不到提示作用，但这说明此处面板命名不太重要，自己能区分就可以）。

2. 接下来看一下两个面板的交互效果

如上是对于 轮播图片banner的 动态面板设置。

设置面板在 【载入时】有交互，基本就是两个动作：

面板不是在一加载就开始切换的，我设置的先等待1000毫秒。设置面板状态 为【NEXT】（即按照1、2、3的顺序进行切换）；勾选从最后一个到第一个自动跳转；勾选图像轮播间隔。具体时间间隔可自己设置。

为了让banner轮播看上去更逼真，可以加个 进入和退出的动画。此处选择的时向左滑动，用时500毫秒。

以上是banner 面板的全部交互。

做完这个切换之后其实基本算是banner做完了，但是总觉得缺点什么——缺我们常见的banner切换时的页面指示导航按钮。

依然是采用很简单的方式 很暴力的加上的。

首先面板中的1、2、3状态内容如下图：

其对应的交互面板，基本和banner面板的设置是一样的。唯一的不同是，在面板切换间的效果，这里不再是向左滑动，而是淡入淡出（毕竟三个指示按钮滑来滑去，是很滑稽的）。

具体交互页面如下：

额，说到这里，其实就没了。

浏览最后再PO一下原型链接： http://eta1id.axshare.com/

本文由 @科大讯飞 小八原创发布于人人都是产品经理。

在APP功能的设计中，一个功能页面的跳转最好不超过三个页面，有时候为了设计更友好，就需要一些免弹窗设计交互，好，今日说法就到这里，教学开始！

看看效果：

通过本教学能学到什么？

图层的应用交互的回溯动态面板遮罩的妙用清奇的思路第一步绘制所需元素

绘制中部区域，坐标（0,166），尺寸375*266，命名【分隔栏】绘制圆形按钮，坐标（300,360）,尺寸50*50，命名【按钮】

第二步制作交互

点击【按钮】，移动【按钮】到日志列表中心（163,525），动画线性200ms。

等待200ms，设置【按钮】文本为空；设置尺寸【按钮】500*500动画线性300，锚点中心（能覆盖住日志列表就行）

看看效果：

效果看着还不错，但我们发现【分隔栏】被挡住了，于是，添加动作，设置【分隔栏】置于顶层。

看看效果：

第三步、添加新建内容

画出输入框，按钮，时间；组合这些元素命名【新建内容】组合，然后隐藏【新建内容】组合。

添加【按钮】动作，显示【新建内容】组合，动画逐渐300ms

看看效果

添加取消按钮交互

这个其实很简单，直接复制圆形【按钮】的交互，黏贴在【取消】按钮上，然后理清反向回去的动效流程就可以了。

看看效果

第四步、美化最终效果

添加日志列表。

全选所有元件，创建尺寸375*667的动态面板，取消勾选自适应内容。

看看效果：

利用动态面板，完美的遮挡住按钮放大的地方，好了今日说法就到这里，下期老司机带你做社交软件，翻一翻的交互动效，有点小难噢~

提取码：qhug 

本文由 @索大佩罗娜 原创发布于人人都是产品经理。

虽说原型通常不需要做复杂的交互效果，但是有时候为了给客户或开发更真实的表现出产品预期效果，比口头或文档描述的效果会好一些。axure 中继器可以帮我们做相同内容的增删改查处理效果，本文将实现自主向中继器里添加图文数据。

效果预览

预览效果.gif

实现方法

分析，目标是向左侧信息列表里新增图文数据。先要准备一个中继器作为为信息库，再添加数据到中继器里。

第一步：教师列表–设置中继器

设置中继器步骤：

（1）添加中继器到画布，命名“教师库”

（2）设置界面模型

双击中继器，进入中继器，设置中继器界面模型。 删除中继器自带矩形元件，添加自己需要的元件，并分别对元件命名。本例如下图，元件命名分别：头像、姓名、级别、简介。模版里的数据可改可不改，最终中继器是从数据表里读取数据。

退出中继器返回画布，可以看到默认展示里3条数据，接下来我们在样式-数据里设置实际数据。

（3）添加中继器数据

在样式-数据里设置实际数据，每一行代表一条数据，每条数据有4个元件，添加4列并命名。头像是图片格式，需要右键导入图片。本例添加两条数据，如下图：

添加数据后，界面并未发生变化。因为此时中继器不知道你的数据表里的数据都代表什么，需要建立对应关系，让它知道图片是哪个，名字是哪个。

（4）读取数据

设置交互-加载时的动作：动态读取，因此是设置变量值。

头像-设置图片：

姓名 | 级别 | 简介——设置文本：

完成教师库设置，如图：

第二步：添加教师区域

本例最终是想要实现，添加自己选择和输入的图文数据到教师库。因此，再设计一个添加教师的功能区（基础元件，过程省略，注意命名），如图：

注意，添加教师头像的元件是3个基础图片元件。（暂时未发现如何直接添加本地图片到中继器，因此本例直接用一组图片数据代替）

第三步：添加动作

如何点击「确认添加」按钮后，将右侧的图文信息添加到左侧教师库里并显示？

最终是向教师库中继器添加（行）数据，所以单机时要选择中继器添加行：添加中继器头像 为选中的图片；添加中继器姓名为「姓名文本框」文字；添加中继器级别数据为「级别文本框」文字；添加中继器简介数据为「简介文本框」文字。

（1）添加文本

动作：「确认按钮」单机时–中继器–添加行 添加姓名（name）：

添加级别（state）、简介（con）同添加姓名，过程略，结果如下：

到这里已经完成了添加文本数据到中继器，预览可实现。

（2）添加图片（本次案例实现目标的关键点）

先把3个图片元

本文以明日之子投票界面为例，拆解了其中的交互动效，并具体分析了每一个交互动效的操作步骤。

最近在追明日之子每天疯狂给妹妹点赞，所以尝试下投票界面的制作，分享给大家，这是我发布的第一篇文章，欢迎各位产品前辈批评指正！

预览效果链接：https://h3i5no.axshare.com

效果展示：

一、分析交互动效

大致分为以下三个步骤：

中继器的制作，绑定数据（包括选手的头像、姓名、排名、点赞数）。点赞事件的创建，及导致票数的改变。根据点赞数排名，调整数据显示位置。

二、制作交互动效

1. 中继器的制作及绑定数据

（1）创建一个“中继器”，双击进入编辑界面，设计展示选手信息如下：选手头像、选手姓名、排名、点赞数（记得设置好名称，以便后面操作）。

（2）这里我创建了9组数据，每行显示三个，一共三行；点击index里的中继器，在样式中将布局勾选“水平”、“排布网络”，并设定每row项目数为3。

（3）设定数据库数据并绑定给中继器：姓名：nam、点赞数：Num，排名比较特殊，是插入变量里的index，index是直接获取当前数据的行号；这里随便输了些假数据，我没有设置头像，有需要的同学可以再添加一列img并导入图片。

（4）然后给中继器-每项加载时添加用例并绑定数据库数据。

2. 点赞事件的创建，及导致票数及排名的改变

（1）进入中继器的编辑界面，为点赞按钮设置交互用例，点赞会触发三个改变：

一是点赞数：Num二是选手排名的位置三是排名：index，index会根据排名顺序自动更新，这里不需要我们做交互。（2）为中继器“添加排序”，按照点赞数Num的数量进行降序排列。

（3）为中继器数据集“更新行”，点赞数：Num=Num+1。

预览效果链接：https://h3i5no.axshare.com

本文由 @許仙人 原创发布于人人都是产品经理。

本文通过分享一个用Axure做打地鼠小游戏的小案例，希望大家通过这个案例能了解到：循环事件的设置方法；全局变量/局部变量的使用方法；函数公式的使用方法；事件用例的使用方法；数据传值的方法；倒计时的实现。

作为一名经常与客户打交道的设计师，是不是经常遇到下面的场景？

老板：只有两天时间，来不及开发产品去汇报了，做个原型吧

而去汇报了无数次后才发现客户都是这样的：

客户：这里为什么点不了啊？你们产品是不是有bug

我：这只是个原型……

客户：什么是原型？

我：就是假的，示意的。

客户：假的，可是这里又能点啊

我：……

所以，设计师除了要拥有深厚的设计功底、透彻的业务分析，还需要做出一份能以假乱真的原型。

毕竟，给客户汇报就是要尽量规避在沟通时可能造成障碍的问题，一分一秒都不能浪费

所以，最近一直想把这些内容进行整理，和大家分享。整理过程中，就产生了用axure做小游戏的想法，寓教于乐，这次就分享一个用Axure做打地鼠小游戏的小案例，通过这个案例能了解到：

循环事件的设置方法全局变量/局部变量的使用方法函数公式的使用方法事件用例的使用方法数据传值的方法倒计时的实现

1. 梳理需求

不论是做什么产品的demo，首先需要梳理需求，梳理完需求就能了解到我们最终的成品大概是什么模样。我们梳理了本次的“打地鼠”游戏的需求如下：

核心功能：打地鼠，用户可以使用锤子击打随机钻出的地鼠。

配套功能：

分数记录：当击中地鼠后记一分；游戏计时：限定游戏时长，到达指定时长后游戏截止；展示最终分数：到达时长后展示用户分数；设置用户昵称：用户能设置昵称，在游戏展示分数时显示，增强代入感。

2. 游戏流程

功能梳理完成后，下一步我们就需要把功能串联起来，制成流程，方便梳理制作思路。

3. 划分页面

我们将绘制好的流程拆分成单个的页面，将功能划分至不同的页面中（画完后纵向摆放在Axure同一个页面内即可）。

页面1：起始页面

页面2：游戏页面

页面3：结束页面

4. 添加交互事件

接下来我们就开始正菜啦，添加交互事件。

4.1 核心功能：打地鼠

从“打地鼠”页面开始设计，因为“打地鼠”是核心页面所以我们从这个页面开始，现在我们就一起分析下这个页面的交互事件：

地鼠会周期性（每0.5秒一次）从地面随机位置钻出；锤子跟随鼠标移动；当地鼠被锤子击中后会立即缩回底下，并从其他随机位置重新出现；锤子击中地鼠后记一分；限制游戏时长30s。功能1：周期性改变地鼠位置

首先要

在原型设计中，Axure还可以用于实现可伸缩导航功能，展现出菜单栏或者导航栏都无法完全展现的子菜单。那么，通过什么样的操作可以实现呢，本文为我们揭晓了答案。

一、场景简述

我们在进行原型设计时，经常会碰到一些用菜单栏或导航栏无法完全展示的子菜单，这时，可伸缩的导航是非常不错的选择，简单在网上截几个图感受一下：

二、需求分析

鼠标移入菜单时，菜单触发强调效果；鼠标移入菜单时，子菜单显示；鼠标由菜单移入子菜单时，子菜单依旧显示；鼠标移出子菜单时，菜单强调效果消失，子菜单隐藏。

三、功能实现

第一步

拖入矩形+绘制小三角形，如图，组合命名为菜单，填充浅蓝色，字体白色；设置选中状态（强调效果）为深蓝色、文字加粗；设置小三角形为动态面板，state 1为箭头向右，state 2为箭头向左。如图所示：

菜单：

动态面板：

第二步，绘制子菜单

如图，命名为子菜单，设置为隐藏（不要把隐藏设置到热区上了）。

第三步，设置动画

1. 对“菜单”组合设置鼠标移入时-选中-当前原件-true

-显示/隐藏-子菜单组合-显示

-设置面板状态-小三角形-state 2

2. 对“菜单”组合继续设置鼠标移出时–选中–当前原件–false

-显示/隐藏-子菜单组合-隐藏

-设置面板状态-小三角形-state 1

3. 对子菜单上覆盖一层热区，对热区重复以上鼠标移入、移出时的响应动作；

对菜单组合设置动作：

对热区设置动作：

通过以上设置，可以基本实现以下：

鼠标移入菜单，菜单被强调，子菜单显示，若鼠标直接从菜单移出，子菜单消失，菜单恢复；鼠标移入菜单，菜单被强调，子菜单显示，鼠标从菜单移入子菜单，菜单继续被强调，子菜单继续显示；鼠标从子菜单移出，子菜单消失，菜单恢复。

四、问题思考

细心的朋友可能发现问题，鼠标若是直接从空白区域移入子菜单，子菜单同样会显示，菜单同样会被强调，这个又如何解决呢？

我们作如下思考：当且仅当鼠标移入菜单后再移入子菜单，才能触发鼠标移入子菜单时的对应动作，因此我们很容易联想到条件设置，也就是case。

因此，我们引入全局变量，作如下设计：

1. 在鼠标移入菜单时，设置全局变量OnLoadVariable==1；

2. 对热区-鼠标移入设置-添加条件：

变量值- if OnLoadVariable==1

3. 鼠标移出菜单时，恢复OnLoadVariable==0

但是，依然存在一个问题，若鼠标移入菜单，再移入空白区域后，再从空白区域移