aure8.0 原型设计实例：标尺参考线定位

阅读：1

0

曾经我在外包公司给气象局做项目的时候，经常用到这个交互设计，因为气象局的项目大多有地图上经纬度的标尺参考线，随着鼠标在地图上移动，参考线也跟着移动，并给出鼠标所指地点的经纬度，一遍工作人员更容易判断台风的转移方向，降雨量的高低分布，温度的高低分布等等。其实不仅仅是这些，比如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/

来源：维度

关键字：产品经理, 产品设计, 参考

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！