为方便大家对地图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模板,还没看过的小伙伴快来体验一下吧~