意派Epub360丨进阶技巧,从3个角度教你打磨地图H5!HTML5创意营销

为方便大家对地图H5有个简单的认识,下面,咱们就来结合具体作品浅聊一下吧~

用户可采用双指缩放地图、滑屏移动地图等方式自由地浏览地图上的不同区域,从而避免因屏幕限制而无法看清地图细节。

用户可点击地图上的图标或文字按钮,从而查看相应的图文、音频、视频等内容,这可以满足用户快速获取信息与服务的深层次需求。

用户到达特定页面或位置时,可参与打卡、答题、寻宝等互动游戏。通关后或达到一定的排名,即可获得分数、徽章、代金券等奖励。这种游戏化的体验可实现用户的连续互动,并进一步提高H5的黏性。

点击标题体验

出品方:翠屏区融媒体中心

实现方式:意派Epub360H5编辑器

创意特色:动画、地图、导航

出品:银联、云闪付

制作:默毅文化传媒

创意特色:插画、动效、动画、游戏、序列帧、抽奖、参数变量

内容简介:该H5的主界面是一张精致的打卡地汇总地图,用户可通过点击操作查看各种名胜古迹的介绍,或进入相应的打卡地,从而集齐5个旅行线索(只需点击各个打卡地中的银联优惠日IP——“元宝”即可)。线索集齐后,用户还可参与抽奖,并通过邀请好友助力的方式获得额外的抽奖机会(每位用户最多可以获得2次额外的抽奖机会)。

出品:童话云和、网易新闻

实现方式:定制开发

创意特色:插画、动画、小游戏、幻灯、合成海报

出品:佛山市应急管理局

创意特色:地图、导航

内容简介:该H5旨在帮助用户随时查询距离自己最近的应急避难场所,并实现一键导航的目的。作品主要包含以下几个功能:①用户可通过页面底部的区域按钮查看市级及五个区(禅城区、南海区、顺德区、高明区、三水区)的应急避难场所在地图上的分布情况;②用户可通过页面顶部的搜索栏搜索附近的居委、学校、避难点;③用户可通过地图右上角的提示按钮切换卫星地图;④用户可点击地图中的地点图标,从而查看该应急避难场所的位置、面积等信息,并开启一键导航功能;⑤用户可通过页面右下角的提示按钮查看自己所在的位置,或生成一份宣传海报。

出品:长沙市文化旅游广电局

制作:马上工作室

创意特色:地图、layer容器、参数变量、热区、幻灯、动效、合成海报

地图H5往往很注重资源的整合,它能够很好地融入图文资讯、视频介绍、全景VR等内容。而依据这些宣传内容的不同,地图H5可以划分为旅游地图、美食地图、红色地图、影视地图、校园地图、防疫地图等等类别,以下挑几个不同的分类来讲。

随着旅游业的复苏,很多文旅单位都热衷于通过旅游地图H5的方式宣传当地的旅游资源,用户可通过H5了解景点介绍、门票价格、线路推荐、周边餐饮/住宿指南等信息。值得注意的是,一些精美的手绘旅游地图的商业价值还不止体现在H5中,由其衍生出的文创产品,如明信片、手机壳、贴纸等也同样很受青睐。

出品:上海市文化和旅游局

创意特色:地图、地图缩放

内容简介:该H5旨在带领用户开启乐游沪郊的精彩之旅。作品中的地图都是可以缩放并移动的,用户可通过滑屏、双指缩放、点击操作查看上海九个区的手绘地图,及各个区所拥有的休闲去处/民宿的介绍、地址等信息。

出品:长沙芙蓉、星辰在线

创意特色:横屏、地图、动效

出品:包河区文化和旅游局、网易安徽

创意特色:大富翁小游戏、2.5D地图、抽奖

内容简介:这是一款大富翁类的小游戏H5。用户可先选择游戏角色,并填写联系方式,再开始游戏。游戏界面以2.5D插画地图的形式将包河6条特色美食街区融合在了一起,并加入了包河文化、特色美食街区建筑元素。游戏过程中,用户可通过投掷筛子的方式触发角色前进,并领取相应的消费券。待集齐10个消费券后,用户即可参与抽奖。此外,用户还可根据提示按钮进入“我的礼包”板块,并输入秘钥(若用户前往商场并使用消费券,即可从商家处获得“秘钥”)、点亮图标。点亮3个图标后,用户还可获得抽奖机会。

为更好地传承红色基因、发扬红色精神,各地的党史学习教育开展得如火如荼,这也是党政红色地图H5得到越来越广泛应用的重要原因。红色地图H5可以系统全面地展示当地的红色资源,如革命旧址、纪念馆、烈士陵园等,既具有社会教育意义,也为当地的旅游发展、文化产业和城市品牌建设带来了新的机遇。

品牌方:学习强国上海学习平台

实现方式:意派科技定制开发

创意特色:艺术字、地图、layer容器、动画、幻灯、视频、导航、擦除

内容简介:用户可沿着地图打卡上海16个区的红色经典线路,并通过涂抹照片查看新旧对比、浏览文字资料、观看视频解说、一键开启导航等方式追寻百年初心印记。

出品:读特融媒实验室

影视综艺拍摄取景地遍布各地,以该内容为主题的影视地图H5主要用于标注经典场景的拍摄点,并与当地历史、文化等联系起来,既容易勾起用户探索拍摄地的兴趣,也能让用户在浏览过程中获取丰富的知识。总之,这对于城市形象来说,也不失为一种好的宣传契机。

出品:辽宁广播电视台、北斗融媒

创意特色:地图、视频

内容简介:很多影视作品都把辽宁作为拍摄取景地,该H5旨在带领用户重温曾在辽宁拍摄的、讲述辽宁历史文化的经典影视作品,并在线“云游打卡”。用户可根据提示点击地图上各城市板块中的小图标,及相应的影视作品名称,进而观看充满知识点的精彩视频。

地图H5中的地图呈现方式众多,如标准地图、手绘地图、动态地图、VR/AR地图等,设计者要从项目的性质与定位等方面综合去考量,从而选择最合适的呈现方式。相对来说,标准地图及手绘地图这两种呈现方式最为常见。

借助腾讯地图、百度地图、高德地图等第三方地图软件来呈现位置信息,是地图最直接的呈现方式。该方式具有地图数据丰富、定位服务精准、行程规划智能等优势,但在视觉上会略显单调。

除此之外,也有人会采用地图软件截图+二次创作的方式呈现位置信息。这可以满足制作者快速而直白的信息传递需求,且大大降低了内容产出的难度与成本。

出品:惠州市总工会

内容简介:该H5旨在帮助户外劳动者一键直达最近的惠民驿站。作品以点击交互为主,用户可先查看惠民驿站排行(按距离远近排列)、选择最近的驿站、选择弹出的3个导航软件(百度地图、高德地图、腾讯地图),继而获得前往该驿站的路线。

手绘地图的制作过程带有一定的创作自由度,它在呈现地理信息的同时,也可以体现出设计师不同的艺术手法与审美情趣。相信大家在平时已经见过很多手绘地图H5了,其中,地图的绘制手法主要有:

在绘制地图时,最基本的一种操作就是仅用简单的线条勾勒出重要的地形轮廓,以表达地理空间的构成。我们只需根据地理环境、行政区划等进行地域划分就OK了,而不用涉及概念、主题、视觉等层面的考量,所以难度相对较小。

出品:襄阳广播电视台

制作:襄阳广播电视台

创意特色:地图、热区、动效、长页面、导航、视频

内容简介:该H5旨在向用户推荐襄阳市的各种一日游线路。作品主要以点击、滑屏操作为主,用户可先根据提示任意选择襄阳市地图上的一个地点,再通过“去看看”按钮查看该地点的一日游行程路线图,路线图主要包含各种图文介绍,以及导航或视频。

如果觉得简单的地图轮廓不够吸引人,那么,我们可以在此基础上,根据内容添加丰富的插画元素,从而增强手绘地图H5整体的视觉体验,并提高用户的探索乐趣,例如:

在地图上的相应位置加上具有代表性的建筑、动物、美食等插画元素,可快速让人识别该地图所描绘的城市或地区,也更有利于唤起用户的记忆,并与之产生共鸣。

在符合生活逻辑的前提下,在合适位置加入咖啡馆、公园长椅、出租车、自动售货机、散步的情侣等插画元素,可丰富地图的真实感与生活氛围,也可让静态的地图显得更为生动活泼。

③添加街道、交通标记、路线指引

另外,在加入这些插画元素时,我们还要注意风格的一致性、元素的投放密度以及整体的层次感,只有布局得当、自然生动,方能达到理想的视觉效果。

出品:共青团大东区委员会、新浪辽宁

创意特色:地图、视频、参数变量、合成海报

内容简介:该H5旨在邀请用户线上打卡东中街核心商圈的一批新业态新文化之地。用户可根据提示点击地图上的各个地标按钮,继而浏览相应的视频及文字介绍。打卡结束后,用户还可查看自己是第几位打卡人,并获得一份打卡海报。

1:1的精细化还原可以表达更丰富的空间细节,也有助于用户对该地区的实际布局与构成有精确的认知,具有较高的实用价值。

但这种方式工作量会较大,难度也较高,因此更适用于较小规模的地区或主题。另外,由于需要严格遵守比例,创意表达也会受到一定限制。且如果没有很好地融入文化与生活元素,地图可能会显得单调乏味、缺乏亲和力。综合来说,非常考验设计师的功力哦~

出品:上海嘉定州桥景区运营管理有限公司

创意特色:地图

内容简介:该H5通过手绘地图的方式还原了州桥现存的建筑风貌和景观,细节与内容非常丰富。用户可通过滑屏操作浏览地图,并点击地图中标有红点的建筑,进而浏览相应的中英文介绍。据了解,在绘制过程中,设计师特地参考了卫星航拍图与无人机航拍图,并仔细比较识别,经过数十小时,才终于绘出这幅精美的地图。

网格化的手绘地图可以通过规则有序的框架结构更清晰简洁地展现区域信息,也更便于用户对每个区域进行识别与查找。

这种方式在一定程度上简化了创作过程,设计师只需考虑好地图面积和要表达的信息量,并合理确定网格的数量和尺寸,再依照规则将插画元素、文字标签等置于相应的位置,不需要过多考虑构图。当然,若想在规则中实现比较好的创意效果,还是需要设计师有较强的美学判断的。

出品:江南大学招生就业处

创意特色:地图、VR全景

内容简介:该H5主要通过手绘地图的方式将校园的各个区域进行了规则化梳理,用户可任意点击地图上的图标,并根据提示保存相应的插图或查看VR全景。此外,作品左侧还设置了4个按钮(蠡湖揽秀、翰墨书香、学院印象、乐活江南),用户可通过这些按钮查看学校的不同功能区域。

2.5D地图可以承载丰富的信息量,并较好地表达各种元素的空间位置关系,它具有较高的商业潜力,也更能吸引用户眼球。

要想绘制2.5D地图,设计师需对立体效果有较为准确的判断和把握,且色彩、布局等也需要不断试验和调整。咱们意派官网就上架了一款原创设计的2.5D地图类的营销小游戏H5模板,还没看过的小伙伴快来体验一下吧~

THE END
1.中国地图线条版epsai元素素材背景边框免费下载爱给网提供海量的元素合辑资源素材免费下载, 本次作品为eps,ai 格式的中国地图线条版, 本站编号15431713, 该元素合辑素材大小为442k, 该素材已被下载:234次, 更多精彩元素合辑素材,尽在爱给网。 浏览本次作品的您可能还对 其他矢量图 感兴趣。 压缩包内容概览: ...https://www.aigei.com/item/zhong_guo_di_tu_60.html
2.世界地图线条图片素材世界地图线条PNG设计图片下载熊猫办公网站共为您提供234个世界地图线条设计素材以及精品世界地图线条图片素材下载,汇集全球精品流行的世界地图线条免抠元素完整版模板,下载后直接替换文字图片即可使用,方便快捷的不二选择。https://www.tukuppt.com/sopng/shijiedituxiantiao.html
3.老挝地图,国家领土轮廓自画动画。线条艺术。图虫创意标准QUICKTIME4K3840 × 2160px118.3MB 扩展MP4HD1920 × 1080px118.3MB 扩展QUICKTIME4K3840 × 2160px118.3MB 下载原片 免费下载样片 如需下载无水印样片可致电4000-666-417或联系在线客服 关键词查看更多 动画国家地图地理对象形状手绘插图旅行极简主义概念状态白色线条艺术老挝背景轮廓边框领土黑色...https://stock.tuchong.com/video/detail?videoId=1831109822234494220
4.中国地图公路高清版大图片车友交流懂车帝提供中国地图公路高清版大图片的车友交流详细内容,懂车帝是一个汽车资讯平台,懂车更懂你。我们提供最新汽车报价,汽车图片,汽车价格大全,行情、评测、导购等内容,看车选车买车就上懂车帝。https://www.dongchedi.com/tag/ugc/13660441
5.《广舆图》绘制方法与数据来源研究(一)为了能在以往研究的基础上,回答“中国古代地图是如何绘制的?”这一中国古代地图史研究的基本问题,本文选择《广舆图》作为研究对象,尽可能的复原《广舆图》的绘制方法和数据来源。 选择《广舆图》作为研究对象主要是基于以下四点考虑:1、前人已经对该图进行了广泛的研究,使得本文的撰写有着大量可资参考的研究成果;2、...http://lishisuo.cass.cn/zsyj/zsyj_lsdlyjs/201506/t20150630_2055116.shtml
6.单色中国地图图片单色中国地图高清图片大全觅元素是设计素材的免费下载网站,提供单色中国地图图片下载,屈原高清图片大全免费下载,下载图片就来觅元素。https://www.51yuansu.com/sophoto/116134745de2181874607.html
7.中国地图轮廓图片中国地图轮廓设计素材红动中国素材网提供4个中国地图轮廓图片、中国地图轮廓素材、中国地图轮廓背景、中国地图轮廓模板、中国地图轮廓海报等PS素材下载,包含PSD、AI、PNG、JPG、CDR等格式源文件素材,更多精品中国地图轮廓设计素材下载,就来红动中国,最后更新于2023-12-28 16:56:43。https://so.redocn.com/zhongguo/d6d0b9fab5d8cdbcc2d6c0aa.htm
8.中国地图轮廓图图片大全免费下载高清摄影图千图网高清图片频道为您找到37个中国地图轮廓图艺术字图片大全、中国地图轮廓图艺术字素材供你在线下载使用,找中国地图轮廓图相关艺术字设计、精选艺术字、精品字体等就来千图网。https://www.58pic.com/tupian-tupian/zhongguoditulunkuotu.html
9.矢量中国地图轮廓图矢量中国地图轮廓图 中国地图轮廓图,中国地图矢量图,高清中国地图,矢量中国地图,世界地图矢量图,行政区划,矢量世界地图,矢量地图 矢量图共享与免费下载网站-素材公社(www.tooopen.com)https://www.tooopen.com/view/2563406.html
1.数据可视化DataInsight2D中国地图该组件主要以二维轮廓形式展示对应地区热力分布、点位标记等,支持在各地区范围内自定义散点、提示框、飞线、热力等地理信息数据。 组件结构 2D中国地图组件主要由「父组件」及「子组件」两部分组成,可根据实际场景分别定义对应配置项。 父组件配置 子组件管理 ...https://ecloud.10086.cn/op-help-center/doc/article/39802
2.地理有效课堂之:中国地图画法中国地图轮廓的一般步骤: 第一步,顺时针(画这一步时,要观看黑板的大小,把握好东北的大小,使中国地图能在黑板范围内完整画出来) 第二步,逆时针(画时用眼睛余光看着东北,使西北与东北整体谐调,否则,不是头太大,就是屁股太大) 第三步,逆时针(停下来,观看整个图是否谐调,如果不,则适当调整一下,往下画时把握...http://www.360doc.com/content/15/0518/09/418127_471372167.shtml
3.CAD绘制中国地图的轮廓教程3d溜溜设计问答平台为广大设计师们提供各种CAD绘制中国地图的轮廓教程问题解答,3d溜溜素材问答平台汇聚全球各地的设计师、名师名司、设计爱好者等设计灵感和经验,迅速为您解决CAD绘制中国地图的轮廓教程的困惑。https://www.3d66.com/answers_relation/relation_500567_34.html
4.制作中国地图Documentation现在,该地图显示了中国轮廓。 您将放大到中国,然后打开河流图层并为其设置样式。 在图层窗格中,单击China_Rivers图层的可见性按钮以打开该图层。 河流使用浅紫色线条样式。 为了帮助表示这些线条代表河流中的水,您会将颜色更改为蓝色。 确保在图层窗格中选择China_Rivers图层,然后在设置工具栏中单击样式。 https://learn.arcgis.com/zh-cn/projects/make-a-map-of-china/
5.幼儿园十一主题活动方案(精选14篇)小结:从图上看中国地图轮廓像一只鸡,我们国家土地面积很大,人口很多,一共有56个民族。 三、了解少数民族庆祝国庆的方式 1、播放其他一些少数民族的图片,让幼儿欣赏。 2、了解各民族庆祝国庆的方式 小结: 10月1日是中国的国庆节,这一天,全国各民族人民都在欢庆节日,各民族的人穿上自己民族的服装,跳着自己民族的舞...https://www.ruiwen.com/fangan/5777247.html
6.中国古代地图的起源史在我国已发现的6000多处原始社会人类活动遗址中,有多处在陶钵或甲骨上刻划着几何形线条或多种多样的图案和图象,可以认为这是原始形态的简陋地图。现在能看到的最古老的地图,大约是公元前2500年前制作在粘土片上的古代巴比伦地图,图上表示了山脉、四个城镇、流入海洋的河流及其他地理特征,这是古代地图中有代表性的...https://www.douban.com/note/204029819/
7.游戏“换皮”抄袭成行业毒瘤,法院确认游戏地图受著作权保护判断游戏场景地图是否属于著作权法意义上的作品,属于何种作品类型,是案件的争议焦点。 据游戏行业专家介绍,游戏地图的设计过程通常需要由承担不同任务的设计人员组成的团队合作完成,其创作至少需要经过七个阶段。不同的游戏地图,在线条轮廓、构图、地图内部素材选择、内部结构安排、布局安排、色彩搭配等方面具有独创性空间...https://www.thepaper.cn/newsDetail_forward_5465595
8.如何做好视觉可视化设计?我总结了这72种图表类型优设网8. 面积图 通过用颜色填充线条下面的空间来表示两个或多个折线图之间的差异。使用此图表进行趋势比较。 示例:这种图表可以在 Bereau Oberhaeuser 的《Brockhaus 信息图表百科全书》中的时间轴上找到。 《Brockhaus 百科全书信息图表》 9. 散点图 这种图表很适合展示集群和孤立点。在这里,我们要准确展示数值的位置。https://www.uisdc.com/72-chart-type
9.sketchup怎么在地图上制作中国地图图形的书架?图形图像软件教程1、切换到顶视图模式,导入一张中国地图轮廓。 2、然后使用手绘线根据轮廓绘制出中国地图轮廓。 3、使用偏移工具偏移出厚度,然后修改掉一些多出来的线条。 4、再根据需要添加搁板线。 5、使用推拉工具推拉出高度。 6、放到墙上,完成效果。 注意事项: 注意各个线条的闭合。 https://www.jb51.net/softjc/473628.html
10.中国轮廓地图,高清中国轮廓地图图片/素材/模板,免费中国轮廓地图...图品汇是领先中国万千中国轮廓地图素材图库网中免费设计素材模板网,提供免费中国轮廓地图素材,模板,高清原创正版图片下载,为您优选原创中国轮廓地图模板下载,中国轮廓地图素材。精品原创,作品严格审核,高速免费下载。https://m.88tph.com/tupian/1909780/