axure原型设计之语音按钮

我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

互联网在不断地发展,数据信息的载体也是越来越丰富了,常见的有文字、图像、音频和视频。在微信流行起来之后,这个语音信息也跟着流行了起来,比起文字信息,语音信息更加方便输入和读取。语音信息的输入有一个很经典的语音按钮,这一节就说说如何使用axure原型工具制作语音按钮吧!

第一步:拖拉摆放好相关控件

1、一个70X70圆形,底色为透明色,边框为绿色,命名为“绿环”;

2、一个70X70圆形,底色为白色,边框为黑色;

3、一个“Mcrophone”的icon;

4、将白底黑框圆形和“Mcrophone”icon组合起来,并命名为“语音按钮”;

axure原型设计之语音按钮

第二步:为“语音按钮”添加鼠标单击时用例

在用例中添加3步动作:

1、设置“绿环”的尺寸为180X180,锚点为中心,动画为线性,动画时间为400毫秒;

2、设置等待0毫秒;

3、设置“绿环”的尺寸为70X70,锚点为中心,动画为无。

axure原型设计之语音按钮

预览中,点击“语音按钮”就可以看到绿波浪了。同时也可以随时关注我的个人博客: http://weidublog.com ,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图: axure原型设计之语音按钮
附件下载: 语音按钮rp文件

作者:维度
转载请注明出处: http://weidublog.com/index.php/2017/03/19/149/

随意打赏

axure原型图设计axure原型下载axure原型设计axure原型库
提交建议
微信扫一扫,分享给好友吧。