axure原型设计之语音按钮

2017年3月19日 阅读:527

效果图:axure原型设计之语音按钮

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

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

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

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

3、一个“Mcrophone”的icon;

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

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

在用例中添加3步动作:

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

2、设置等待0毫秒;

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

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

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

2条评论

  • 晓艳 2017年4月26日在下午2:52

    按下前把绿环隐藏按下再show看起来效果会更好呢。当然原型设计不该注重这些细节。谢谢楼主分享。

    • 维度 2017年4月26日在下午5:34

      恩恩,在原有的基础上有更好的改进当然更好了