APP地图如何用Axure画出来

关注公众号学习移动端组件的原型画法,点击底部“阅读原文”学习视频教程。


咱们先看下Axure画出的原型效果,然后再对该组件进行详细讲解。

APP地图如何用Axure画出来

、组件介绍

名称
地图Map
作用
展示地图信息和地理位置
组成
内联框架
位置
内容区
样式
详见上图
交互

①手指双击地图,可以放大地图,

②手指拖动地图,可以移动位置

注意
地图组件仅作原型演示,无需画出高保真。

、实际案例

APP地图如何用Axure画出来

、画出无交互原型

1、从默认元件库拖动“内联框架”到工作区合适位置,修改尺寸为235*100,命名为地图。

APP地图如何用Axure画出来

2、点击该内联框架,右侧边栏切换到“样式”,勾选“隐藏边框”,按需滚动切换成“从不滚动”,无预览图切换为“地图”。

APP地图如何用Axure画出来

3、点击“框架目标”,打开弹窗“链接属性”,点击“链接到一个外部的URL或者文件”,然后输入相应的本地文件地址。

APP地图如何用Axure画出来

请提前打开百度地图生成器生成地图代码,首先定位中心点,选择你的城市,查找相应地址。然后设置地图属性。宽高需要和内联框架尺寸保持一致,取消“地图缩放”,取消“地图缩略图”,取消“地图比例尺”,取消“鼠标滚轮缩放”,取消“键盘方向移动”,取消“鼠标拖动地图”,取消“鼠标双击放大”。无需添加标注,点击“获取代码”按钮,然后复制生成的代码,通过文本编辑软件保存为html文件。

4、点击“预览”按钮,然后在浏览器中查看原型效果。

APP地图如何用Axure画出来

Tips:目前只有百度地图支持生成相应代码,高德地图虽然提供此功能但是存在bug无法使用。

、画出有交互原型

5、如需实现手指双击可以放大,则在生成地图代码的时候勾选“鼠标双击放大”。如需实现手指拖动移动位置,则在生成地图代码的时候勾选“鼠标拖动地图”。

APP地图如何用Axure画出来

6、点击“预览”按钮,然后在浏览器中查看原型效果。

APP地图如何用Axure画出来


、课后作业

画出该组件的常见交互样式,添加到自己的Axure元件库,方便后续画移动端原型的时候使用。

APP地图如何用Axure画出来


转发到朋友圈,添加微信langzipm获取RP源文件。

点击阅读原文,学习“浪子教你画移动端组件”视频教程,系统化的学习常用移动端组件,从而掌握移动端原型的画法。



喜欢这篇文章就点这里

APP地图如何用Axure画出来

来源:浪子讲原型,本文观点不代表自营销立场,网址:https://www.zyxiao.com/p/59599

发表评论

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

侵权联系
分享本页
返回顶部