axure8.0原型设计实例:折线图柱形图

2017年5月8日
5+
阅读:798

折线图和柱形图,是后台原型设计的常见元素,做后台产品经理肯定不陌生。但是,作为后台产品原型本来交互性就比较少,而且更加偏重数据与逻辑层面的设计,难道说后台就不需要考虑用户体验?就不需要交互设计?答案肯定不是。有些产品的后台也是要面向大众用户的,比如淘宝的商家后台,那么此时后台的交互设计就很能体现原型的设计的水平了。这里将折线图和柱形图放在一起讲,是因为这两种图形的交互不复杂,但有交互效果和没有交互效果用户体验又完全不是一回事。下面就好好讲讲如何使用axure8.0来制作吧~~

一、拖拉摆放好相关控件(折线图)

1、设计好坐标轴,一条垂直线、一条水平线和一些文本标签组合起来,组合命名为“坐标轴”,纵轴为人数,横轴为日期;

2、设计好参考线,其实就是五条白色等距平行的水平线组成,组合命名为“参考线”;

3、设计好折线,由多条红色的水平线不同角度连接而成,组合命名为“折线”;

4、一个动态面板,动态面板的state1面板状态中,放置一个和背景一样颜色的矩形,以及五条白色等距平行的水平线组合,这五条线与“参考线”一模一样,可以拷贝过来,全部组合起来命名为“遮盖层”。

二、拖拉摆放好相关控件(柱形图)

1、设计好坐标轴,一条垂直线、一条水平线和一些文本标签组合起来,组合命名为“坐标轴”,纵轴为百分比,横轴为年龄段;

2、设计好参考线,其实就是五条白色等距平行的水平线组成,组合命名为“参考线”;

3、一个动态面板,动态面板的state1面板状态中,放置五组十个高度不同矩形,浅蓝色和蓝色两个矩形为一组,全部组合起来命名为“柱形”。

三、为“遮盖层”添加页面载入时用例

1、相对移动“遮盖层”x轴360,动画为线性,时间为3000毫秒;

2、相对移动“柱形”y轴-152,动画为线性,时间为3000毫秒。

点击预览就可以看到折线图和柱形图加载时候的动态效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之折线图柱形图
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/05/08/686/

没有评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注