意派Epub360丨进阶技巧，从3个角度教你打磨地图H5！
近年来，地图H5逐渐兴起。咱们意派的H5项目定制小团队收到了很多关于地图H5的项目咨询，而在咱们意派Epub360平台上做地图H5的用户也越来越多。可以说，地图H5正以其独特的魅力不断吸引甲方客户看到其背后的潜在价值。
为方便大家对地图H5有个简单的认识，下面，咱们就来结合具体作品浅聊一下吧~
一、从功能层面来看
为赋予地图H5较高的实用性、便利性及社交互动性，我们可通过意派Epub360 H5编辑器，或以定制开发的方式，整合超多有趣又实用的功能，包括但不限于：
1.多角度查看地图
用户可采用双指缩放地图、滑屏移动地图等方式自由地浏览地图上的不同区域，从而避免因屏幕限制而无法看清地图细节。
2.信息查询
用户可点击地图上的图标或文字按钮，从而查看相应的图文、音频、视频等内容，这可以满足用户快速获取信息与服务的深层次需求。
3.导航+拨号
用户可在信息查询页的地址及电话位置一键调用导航（地图组件：地图／导航）及拨号（拨打电话怎么做？）功能，从而更好地规划路线并联系相关人员。如此一来，既优化了用户体验，又增加了信息查询结果的实用性。
4.社交互动
用户可通过点赞、留言评论、合成营销海报、转发分享等功能产生社交话题互动。精彩互动的产生和传播满足了用户表达观点、分享感受的需求，也为其他用户提供了参考。
5.游戏+奖励
用户到达特定页面或位置时，可参与打卡、答题、寻宝等互动游戏。通关后或达到一定的排名，即可获得分数、徽章、代金券等奖励。这种游戏化的体验可实现用户的连续互动，并进一步提升H5的黏性。
6.抽奖核销
用户在浏览信息、参与互动后，可参与大转盘、砸金蛋、扭蛋机、九宫格等类型的抽奖（抽奖插件使用教程），并根据相应的规则进行核销。这可以与商家的优惠和券类活动相结合，从而增强H5的商业营销价值。
案例赏析
点击标题体验
出品方：翠屏区融媒体中心
实现方式：意派Epub360 H5编辑器
创意特色：动画、地图、导航
内容简介：用户进入作品后，可浏览一幅手绘地图，地图主要展示了宜宾翠屏区的各种特色景点，用户可点击想要了解的景点名称，从而查看景点信息及路线导航。同系列的H5作品还有：《翠屏玩乐地图2.0》~
点击标题体验
出品：银联、云闪付
制作：默毅文化传媒
实现方式：意派Epub360 H5编辑器
创意特色：插画、动效、动画、游戏、序列帧、抽奖、参数变量
内容简介：该H5的主界面是一张精致的打卡地汇总地图，用户可通过点击操作查看各种名胜古迹的介绍，或进入相应的打卡地，从而集齐5个旅行线索（只需点击各个打卡地中的银联优惠日IP——“元宝”即可）。线索集齐后，用户还可参与抽奖，并通过邀请好友助力的方式获得额外的抽奖机会（每位用户最多可以获得2次额外的抽奖机会）。
点击标题体验
出品：童话云和、网易新闻
实现方式：定制开发
创意特色：插画、动画、小游戏、幻灯、合成海报
内容简介：该H5以手绘地图的形式呈现了四个景区（开犁节、木玩城、仙宫景区、小顺景区），用户可根据提示通过滑屏、双指缩放及点击操作查看地图、参与相应的小游戏，从而获得奖励并查看与云和县相关的民俗、景区介绍。此外，用户还可输入昵称、选择图片，并生成一份专属海报。
点击标题体验
出品：佛山市应急管理局
实现方式：定制开发
创意特色：地图、导航
内容简介：该H5旨在帮助用户随时查询距离自己最近的应急避难场所，并实现一键导航的目的。作品主要包含以下几个功能：①用户可通过页面底部的区域按钮查看市级及五个区（禅城区、南海区、顺德区、高明区、三水区）的应急避难场所在地图上的分布情况；②用户可通过页面顶部的搜索栏搜索附近的居委、学校、避难点；③用户可通过地图右上角的提示按钮切换卫星地图；④用户可点击地图中的地点图标，从而查看该应急避难场所的位置、面积等信息，并开启一键导航功能；⑤用户可通过页面右下角的提示按钮查看自己所在的位置，或生成一份宣传海报。
点击标题体验
出品：长沙市文化旅游广电局
制作：马上工作室
实现方式：意派Epub360 H5编辑器
创意特色：地图、layer容器、参数变量、热区、幻灯、动效、合成海报
内容简介：该H5以手绘地图的形式展示了长沙的美景美食美宿，用户可通过滑屏操作浏览地图全貌，并点击文字标注，进而查看相应的实拍美图及相关简介。此外，用户还可输入ID并进行缘分测试。测试题并不烧脑，只是关于性别、兴趣爱好、年纪方面的小问题。测试完成后，用户即可获得一份合成海报（海报上包含了用户与美景图的缘分值）。
二、从内容层面来看
地图H5往往很注重资源的整合，它能够很好地融入图文资讯、视频介绍、全景VR等内容。而依据这些宣传内容的不同，地图H5可以划分为旅游地图、美食地图、红色地图、影视地图、校园地图、防疫地图等等类别，以下挑几个不同的分类来讲。
1.旅游地图
随着旅游业的复苏，很多文旅单位都热衷于通过旅游地图H5的方式宣传当地的旅游资源，用户可通过H5了解景点介绍、门票价格、线路推荐、周边餐饮/住宿指南等信息。值得注意的是，一些精美的手绘旅游地图的商业价值还不止体现在H5中，由其衍生出的文创产品，如明信片、手机壳、贴纸等也同样很受青睐。
案例赏析
点击标题体验
出品：上海市文化和旅游局
实现方式：定制开发
创意特色：地图、地图缩放
内容简介：该H5旨在带领用户开启乐游沪郊的精彩之旅。作品中的地图都是可以缩放并移动的，用户可通过滑屏、双指缩放、点击操作查看上海九个区的手绘地图，及各个区所拥有的休闲去处/民宿的介绍、地址等信息。
点击标题体验
出品：长沙芙蓉、星辰在线
制作：马上工作室
实现方式：意派Epub360 H5编辑器
创意特色：横屏、地图、动效
内容简介：该H5旨在向用户介绍4条芙蓉区精品旅游线路。用户可通过提示按钮浏览每条线路及线路中的重要景点在地图上的位置，还可查看线路特色及各个景点的图文介绍内容。同系列的H5作品还有：《千年城心·芙蓉等你丨芙蓉区文旅六品牌火热出炉》
2.美食地图
美食地图H5可综合展示地方美食资源，及相应的历史渊源、制作方式、订餐电话等，从而为游客的美食之旅提供重要参考。另外，美食地图H5的有效推广还可以推动城市知名度与美誉度的提高，这对城市营销与旅游业的发展也有很大帮助。
案例赏析
点击标题体验
出品：包河区文化和旅游局、网易安徽
实现方式：定制开发
创意特色：大富翁小游戏、2.5D地图、抽奖
内容简介：这是一款大富翁类的小游戏H5。用户可先选择游戏角色，并填写联系方式，再开始游戏。游戏界面以2.5D插画地图的形式将包河6条特色美食街区融合在了一起，并加入了包河文化、特色美食街区建筑元素。游戏过程中，用户可通过投掷筛子的方式触发角色前进，并领取相应的消费券。待集齐10个消费券后，用户即可参与抽奖。此外，用户还可根据提示按钮进入“我的礼包”板块，并输入秘钥（若用户前往商场并使用消费券，即可从商家处获得“秘钥”）、点亮图标。点亮3个图标后，用户还可获得抽奖机会。
3.红色地图
为更好地传承红色基因、发扬红色精神，各地的党史学习教育开展得如火如荼，这也是党政红色地图H5得到越来越广泛应用的重要原因。红色地图H5可以系统全面地展示当地的红色资源，如革命旧址、纪念馆、烈士陵园等，既具有社会教育意义，也为当地的旅游发展、文化产业和城市品牌建设带来了新的机遇。
案例赏析
点击标题体验
品牌方：学习强国上海学习平台
实现方式：意派科技定制开发
创意特色：艺术字、地图、layer容器、动画、幻灯、视频、导航、擦除
内容简介：用户可沿着地图打卡上海16个区的红色经典线路，并通过涂抹照片查看新旧对比、浏览文字资料、观看视频解说、一键开启导航等方式追寻百年初心印记。
点击标题体验
出品：读特融媒实验室
实现方式：意派Epub360 H5编辑器
创意特色：微信授权、横屏、地图、长页面、参数变量
内容简介：该H5旨在介绍深圳所拥有的28处不可移动革命文物。用户可先通过左右滑屏的方式查看深圳地图全貌，再点击地图中的28处小图片，进而浏览相应的图文介绍并进行点击打卡。此外，用户还可通过地图右下角的“分享打卡按钮”查看自己是第几个打卡的。
4.影视地图
影视综艺拍摄取景地遍布各地，以该内容为主题的影视地图H5主要用于标注经典场景的拍摄点，并与当地历史、文化等联系起来，既容易勾起用户探索拍摄地的兴趣，也能让用户在浏览过程中获取丰富的知识。总之，这对于城市形象来说，也不失为一种好的宣传契机。
案例赏析
点击标题体验
出品：辽宁广播电视台、北斗融媒
实现方式：定制开发
创意特色：地图、视频
内容简介：很多影视作品都把辽宁作为拍摄取景地，该H5旨在带领用户重温曾在辽宁拍摄的、讲述辽宁历史文化的经典影视作品，并在线“云游打卡”。用户可根据提示点击地图上各城市板块中的小图标，及相应的影视作品名称，进而观看充满知识点的精彩视频。
三、从设计层面来看
地图H5中的地图呈现方式众多，如标准地图、手绘地图、动态地图、VR/AR地图等，设计者要从项目的性质与定位等方面综合去考量，从而选择最合适的呈现方式。相对来说，标准地图及手绘地图这两种呈现方式最为常见。
1、标准地图（借助地图软件）
借助腾讯地图、百度地图、高德地图等第三方地图软件来呈现位置信息，是地图最直接的呈现方式。该方式具有地图数据丰富、定位服务精准、行程规划智能等优势，但在视觉上会略显单调。
除此之外，也有人会采用地图软件截图+二次创作的方式呈现位置信息。这可以满足制作者快速而直白的信息传递需求，且大大降低了内容产出的难度与成本。
案例赏析
点击标题体验
出品：惠州市总工会
实现方式：定制开发
创意特色：地图、导航
内容简介：该H5旨在帮助户外劳动者一键直达最近的惠民驿站。作品以点击交互为主，用户可先查看惠民驿站排行（按距离远近排列）、选择最近的驿站、选择弹出的3个导航软件（百度地图、高德地图、腾讯地图），继而获得前往该驿站的路线。
2、手绘地图
手绘地图的制作过程带有一定的创作自由度，它在呈现地理信息的同时，也可以体现出设计师不同的艺术手法与审美情趣。相信大家在平时已经见过很多手绘地图H5了，其中，地图的绘制手法主要有：
（1）轮廓图
在绘制地图时，最基本的一种操作就是仅用简单的线条勾勒出重要的地形轮廓，以表达地理空间的构成。我们只需根据地理环境、行政区划等进行地域划分就OK了，而不用涉及概念、主题、视觉等层面的考量，所以难度相对较小。
案例赏析
点击标题体验
出品：襄阳广播电视台
制作：襄阳广播电视台
实现方式：意派Epub360 H5编辑器
创意特色：地图、热区、动效、长页面、导航、视频
内容简介：该H5旨在向用户推荐襄阳市的各种一日游线路。作品主要以点击、滑屏操作为主，用户可先根据提示任意选择襄阳市地图上的一个地点，再通过“去看看”按钮查看该地点的一日游行程路线图，路线图主要包含各种图文介绍，以及导航或视频。
（2）轮廓图+主题元素
如果觉得简单的地图轮廓不够吸引人，那么，我们可以在此基础上，根据内容添加丰富的插画元素，从而增强手绘地图H5整体的视觉体验，并提高用户的探索乐趣，例如：
①添加与地域文化相关的元素
在地图上的相应位置加上具有代表性的建筑、动物、美食等插画元素，可快速让人识别该地图所描绘的城市或地区，也更有利于唤起用户的记忆，并与之产生共鸣。
②添加与日常生活相关的元素
在符合生活逻辑的前提下，在合适位置加入咖啡馆、公园长椅、出租车、自动售货机、散步的情侣等插画元素，可丰富地图的真实感与生活氛围，也可让静态的地图显得更为生动活泼。
③添加街道、交通标记、路线指引
利用箭头、线条等将地图上的重要路线进行明示，并辅以相关的指示牌、公交站牌等插画，可让地图显得更加真实、立体，也便于用户辨识方向。
另外，在加入这些插画元素时，我们还要注意风格的一致性、元素的投放密度以及整体的层次感，只有布局得当、自然生动，方能达到理想的视觉效果。
案例赏析
点击标题体验
出品：共青团大东区委员会、新浪辽宁
实现方式：定制开发
创意特色：地图、视频、参数变量、合成海报
内容简介：该H5旨在邀请用户线上打卡东中街核心商圈的一批新业态新文化之地。用户可根据提示点击地图上的各个地标按钮，继而浏览相应的视频及文字介绍。打卡结束后，用户还可查看自己是第几位打卡人，并获得一份打卡海报。
（3）1:1还原地方布局
1:1的精细化还原可以表达更丰富的空间细节，也有助于用户对该地区的实际布局与构成有精确的认知，具有较高的实用价值。
但这种方式工作量会较大，难度也较高，因此更适用于较小规模的地区或主题。另外，由于需要严格遵守比例，创意表达也会受到一定限制。且如果没有很好地融入文化与生活元素，地图可能会显得单调乏味、缺乏亲和力。综合来说，非常考验设计师的功力哦~
案例赏析
点击标题体验
出品：上海嘉定州桥景区运营管理有限公司
实现方式：定制开发
创意特色：地图
内容简介：该H5通过手绘地图的方式还原了州桥现存的建筑风貌和景观，细节与内容非常丰富。用户可通过滑屏操作浏览地图，并点击地图中标有红点的建筑，进而浏览相应的中英文介绍。据了解，在绘制过程中，设计师特地参考了卫星航拍图与无人机航拍图，并仔细比较识别，经过数十小时，才终于绘出这幅精美的地图。
（4）网格化管理区域板块
网格化的手绘地图可以通过规则有序的框架结构更清晰简洁地展现区域信息，也更便于用户对每个区域进行识别与查找。
这种方式在一定程度上简化了创作过程，设计师只需考虑好地图面积和要表达的信息量，并合理确定网格的数量和尺寸，再依照规则将插画元素、文字标签等置于相应的位置，不需要过多考虑构图。当然，若想在规则中实现比较好的创意效果，还是需要设计师有较强的美学判断的。
案例赏析
点击标题体验
出品：江南大学招生就业处
实现方式：定制开发
创意特色：地图、VR全景
内容简介：该H5主要通过手绘地图的方式将校园的各个区域进行了规则化梳理，用户可任意点击地图上的图标，并根据提示保存相应的插图或查看VR全景。此外，作品左侧还设置了4个按钮（蠡湖揽秀、翰墨书香、学院印象、乐活江南），用户可通过这些按钮查看学校的不同功能区域。
（5）2.5D地图
2.5D地图可以承载丰富的信息量，并较好地表达各种元素的空间位置关系，它具有较高的商业潜力，也更能吸引用户眼球。
要想绘制2.5D地图，设计师需对立体效果有较为准确的判断和把握，且色彩、布局等也需要不断试验和调整。咱们意派官网就上架了一款原创设计的2.5D地图类的营销小游戏H5模板，还没看过的小伙伴快来体验一下吧~
模板赏析
点击标题体验
模板介绍：该模板中的2.5D地图囊括了建筑、车辆、游乐设施、热气球等元素，给人以轻松活泼的感觉。用户需在限定时间内通过滑动地图、点击星星的方式找到5个隐藏的商品线索，并获得相应的积分。若找不到线索，用户便可通过点击放大镜的方式来获取提示（仅3次机会）。游戏结束后，用户还可根据所获积分领取相应的优惠券。
本次的分享就到这里啦，如果您想自己制作一款地图H5，那就赶紧登录意派Epub360 H5编辑器吧！如果您想与我们合作定制一款地图H5，欢迎联系小派~
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）