axure8.0原型设计实例:标尺参考线定位

2017年5月9日
3+
阅读:310

曾经我在外包公司给气象局做项目的时候,经常用到这个交互设计,因为气象局的项目大多有地图上经纬度的标尺参考线,随着鼠标在地图上移动,参考线也跟着移动,并给出鼠标所指地点的经纬度,一遍工作人员更容易判断台风的转移方向,降雨量的高低分布,温度的高低分布等等。其实不仅仅是这些,比如Photoshop也有,这里就叫教大家如何使用axure8.0来设计这种交互元素。

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

1、一个内联框架,设置从不显示滚动条,切换边框可见性,并且链接到当前项目的“内容”页面;

2、在“内容”页面,放一张地图(命名为“地图”),一条垂直线(命名为“垂直参考线”),一条水平线(命名为“水平参考线”),其中“垂直参考线”和“水平参考线”均设置为虚线。

第二步:为“地图”添加鼠标移入时用例

1、显示“垂直参考线”;

2、显示“水平参考线”。

第三步:为“地图”添加鼠标移出时用例

1、隐藏“垂直参考线”;

2、隐藏“水平参考线”。

第四步:为“地图”添加鼠标移动时用例

1、绝对移动“水平参考线”,x轴为“水平参考线”的x轴坐标,y轴为鼠标的y轴坐标;

2、绝对移动“垂直参考线”,x轴为鼠标的x轴坐标,y轴为“垂直参考线”的y轴坐标。

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

效果图:axure原型设计之标尺参考线定位
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

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

没有评论

发表评论

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