近年來(lái)，地圖H5逐漸興起。咱們意派的H5項(xiàng)目定制小團(tuán)隊(duì)收到了很多關(guān)于地圖H5的項(xiàng)目咨詢，而在咱們意派Epub360平臺(tái)上做地圖H5的用戶也越來(lái)越多。可以說(shuō)，地圖H5正以其獨(dú)特的魅力不斷吸引甲方客戶看到其背后的潛在價(jià)值。

為方便大家對(duì)地圖H5有個(gè)簡(jiǎn)單的認(rèn)識(shí)，下面，咱們就來(lái)結(jié)合具體作品淺聊一下吧~

一、從功能層面來(lái)看

為賦予地圖H5較高的實(shí)用性、便利性及社交互動(dòng)性，我們可通過(guò)意派Epub360 H5編輯器，或以定制開(kāi)發(fā)的方式，整合超多有趣又實(shí)用的功能，包括但不限于：

1.多角度查看地圖

用戶可采用雙指縮放地圖、滑屏移動(dòng)地圖等方式自由地瀏覽地圖上的不同區(qū)域，從而避免因屏幕限制而無(wú)法看清地圖細(xì)節(jié)。

2.信息查詢

用戶可點(diǎn)擊地圖上的圖標(biāo)或文字按鈕，從而查看相應(yīng)的圖文、音頻、視頻等內(nèi)容，這可以滿足用戶快速獲取信息與服務(wù)的深層次需求。

3.導(dǎo)航+撥號(hào)

用戶可在信息查詢頁(yè)的地址及電話位置一鍵調(diào)用導(dǎo)航（地圖組件：地圖／導(dǎo)航）及撥號(hào)（撥打電話怎么做？）功能，從而更好地規(guī)劃路線并聯(lián)系相關(guān)人員。如此一來(lái)，既優(yōu)化了用戶體驗(yàn)，又增加了信息查詢結(jié)果的實(shí)用性。

4.社交互動(dòng)

用戶可通過(guò)點(diǎn)贊、留言評(píng)論、合成營(yíng)銷(xiāo)海報(bào)、轉(zhuǎn)發(fā)分享等功能產(chǎn)生社交話題互動(dòng)。精彩互動(dòng)的產(chǎn)生和傳播滿足了用戶表達(dá)觀點(diǎn)、分享感受的需求，也為其他用戶提供了參考。

5.游戲+獎(jiǎng)勵(lì)

用戶到達(dá)特定頁(yè)面或位置時(shí)，可參與打卡、答題、尋寶等互動(dòng)游戲。通關(guān)后或達(dá)到一定的排名，即可獲得分?jǐn)?shù)、徽章、代金券等獎(jiǎng)勵(lì)。這種游戲化的體驗(yàn)可實(shí)現(xiàn)用戶的連續(xù)互動(dòng)，并進(jìn)一步提升H5的黏性。

6.抽獎(jiǎng)核銷(xiāo)

用戶在瀏覽信息、參與互動(dòng)后，可參與大轉(zhuǎn)盤(pán)、砸金蛋、扭蛋機(jī)、九宮格等類(lèi)型的抽獎(jiǎng)（抽獎(jiǎng)插件使用教程），并根據(jù)相應(yīng)的規(guī)則進(jìn)行核銷(xiāo)。這可以與商家的優(yōu)惠和券類(lèi)活動(dòng)相結(jié)合，從而增強(qiáng)H5的商業(yè)營(yíng)銷(xiāo)價(jià)值。

案例賞析

《翠屏玩樂(lè)地圖》

點(diǎn)擊標(biāo)題體驗(yàn)

出品方：翠屏區(qū)融媒體中心

實(shí)現(xiàn)方式：意派Epub360 H5編輯器

創(chuàng)意特色：動(dòng)畫(huà)、地圖、導(dǎo)航

內(nèi)容簡(jiǎn)介：用戶進(jìn)入作品后，可瀏覽一幅手繪地圖，地圖主要展示了宜賓翠屏區(qū)的各種特色景點(diǎn)，用戶可點(diǎn)擊想要了解的景點(diǎn)名稱(chēng)，從而查看景點(diǎn)信息及路線導(dǎo)航。同系列的H5作品還有：《翠屏玩樂(lè)地圖2.0》~

《快來(lái)！和元寶云游中國(guó)~》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：銀聯(lián)、云閃付

制作：默毅文化傳媒

實(shí)現(xiàn)方式：意派Epub360 H5編輯器

創(chuàng)意特色：插畫(huà)、動(dòng)效、動(dòng)畫(huà)、游戲、序列幀、抽獎(jiǎng)、參數(shù)變量

內(nèi)容簡(jiǎn)介：該H5的主界面是一張精致的打卡地匯總地圖，用戶可通過(guò)點(diǎn)擊操作查看各種名勝古跡的介紹，或進(jìn)入相應(yīng)的打卡地，從而集齊5個(gè)旅行線索（只需點(diǎn)擊各個(gè)打卡地中的銀聯(lián)優(yōu)惠日IP——“元寶”即可）。線索集齊后，用戶還可參與抽獎(jiǎng)，并通過(guò)邀請(qǐng)好友助力的方式獲得額外的抽獎(jiǎng)機(jī)會(huì)（每位用戶最多可以獲得2次額外的抽獎(jiǎng)機(jī)會(huì)）。

《來(lái)自「云和」的禮物》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：童話云和、網(wǎng)易新聞

實(shí)現(xiàn)方式：定制開(kāi)發(fā)

創(chuàng)意特色：插畫(huà)、動(dòng)畫(huà)、小游戲、幻燈、合成海報(bào)

內(nèi)容簡(jiǎn)介：該H5以手繪地圖的形式呈現(xiàn)了四個(gè)景區(qū)（開(kāi)犁節(jié)、木玩城、仙宮景區(qū)、小順景區(qū)），用戶可根據(jù)提示通過(guò)滑屏、雙指縮放及點(diǎn)擊操作查看地圖、參與相應(yīng)的小游戲，從而獲得獎(jiǎng)勵(lì)并查看與云和縣相關(guān)的民俗、景區(qū)介紹。此外，用戶還可輸入昵稱(chēng)、選擇圖片，并生成一份專(zhuān)屬海報(bào)。

《佛山應(yīng)急避難場(chǎng)所導(dǎo)航》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：佛山市應(yīng)急管理局

實(shí)現(xiàn)方式：定制開(kāi)發(fā)

創(chuàng)意特色：地圖、導(dǎo)航

內(nèi)容簡(jiǎn)介：該H5旨在幫助用戶隨時(shí)查詢距離自己最近的應(yīng)急避難場(chǎng)所，并實(shí)現(xiàn)一鍵導(dǎo)航的目的。作品主要包含以下幾個(gè)功能：①用戶可通過(guò)頁(yè)面底部的區(qū)域按鈕查看市級(jí)及五個(gè)區(qū)（禪城區(qū)、南海區(qū)、順德區(qū)、高明區(qū)、三水區(qū)）的應(yīng)急避難場(chǎng)所在地圖上的分布情況；②用戶可通過(guò)頁(yè)面頂部的搜索欄搜索附近的居委、學(xué)校、避難點(diǎn)；③用戶可通過(guò)地圖右上角的提示按鈕切換衛(wèi)星地圖；④用戶可點(diǎn)擊地圖中的地點(diǎn)圖標(biāo)，從而查看該應(yīng)急避難場(chǎng)所的位置、面積等信息，并開(kāi)啟一鍵導(dǎo)航功能；⑤用戶可通過(guò)頁(yè)面右下角的提示按鈕查看自己所在的位置，或生成一份宣傳海報(bào)。

《測(cè)一測(cè)丨想見(jiàn)我？快來(lái)一百種風(fēng)情速配》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：長(zhǎng)沙市文化旅游廣電局

制作：馬上工作室

實(shí)現(xiàn)方式：意派Epub360 H5編輯器

創(chuàng)意特色：地圖、layer容器、參數(shù)變量、熱區(qū)、幻燈、動(dòng)效、合成海報(bào)

內(nèi)容簡(jiǎn)介：該H5以手繪地圖的形式展示了長(zhǎng)沙的美景美食美宿，用戶可通過(guò)滑屏操作瀏覽地圖全貌，并點(diǎn)擊文字標(biāo)注，進(jìn)而查看相應(yīng)的實(shí)拍美圖及相關(guān)簡(jiǎn)介。此外，用戶還可輸入ID并進(jìn)行緣分測(cè)試。測(cè)試題并不燒腦，只是關(guān)于性別、興趣愛(ài)好、年紀(jì)方面的小問(wèn)題。測(cè)試完成后，用戶即可獲得一份合成海報(bào)（海報(bào)上包含了用戶與美景圖的緣分值）。

二、從內(nèi)容層面來(lái)看

地圖H5往往很注重資源的整合，它能夠很好地融入圖文資訊、視頻介紹、全景VR等內(nèi)容。而依據(jù)這些宣傳內(nèi)容的不同，地圖H5可以劃分為旅游地圖、美食地圖、紅色地圖、影視地圖、校園地圖、防疫地圖等等類(lèi)別，以下挑幾個(gè)不同的分類(lèi)來(lái)講。

1.旅游地圖

隨著旅游業(yè)的復(fù)蘇，很多文旅單位都熱衷于通過(guò)旅游地圖H5的方式宣傳當(dāng)?shù)氐穆糜钨Y源，用戶可通過(guò)H5了解景點(diǎn)介紹、門(mén)票價(jià)格、線路推薦、周邊餐飲/住宿指南等信息。值得注意的是，一些精美的手繪旅游地圖的商業(yè)價(jià)值還不止體現(xiàn)在H5中，由其衍生出的文創(chuàng)產(chǎn)品，如明信片、手機(jī)殼、貼紙等也同樣很受青睞。

案例賞析

《足不出滬樂(lè)游滬郊》

點(diǎn)擊標(biāo)題體驗(yàn)

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

實(shí)現(xiàn)方式：定制開(kāi)發(fā)

創(chuàng)意特色：地圖、地圖縮放

內(nèi)容簡(jiǎn)介：該H5旨在帶領(lǐng)用戶開(kāi)啟樂(lè)游滬郊的精彩之旅。作品中的地圖都是可以縮放并移動(dòng)的，用戶可通過(guò)滑屏、雙指縮放、點(diǎn)擊操作查看上海九個(gè)區(qū)的手繪地圖，及各個(gè)區(qū)所擁有的休閑去處/民宿的介紹、地址等信息。

《千年城心·芙蓉等你丨芙蓉區(qū)精品旅游路線推介》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：長(zhǎng)沙芙蓉、星辰在線

制作：馬上工作室

實(shí)現(xiàn)方式：意派Epub360 H5編輯器

創(chuàng)意特色：橫屏、地圖、動(dòng)效

內(nèi)容簡(jiǎn)介：該H5旨在向用戶介紹4條芙蓉區(qū)精品旅游線路。用戶可通過(guò)提示按鈕瀏覽每條線路及線路中的重要景點(diǎn)在地圖上的位置，還可查看線路特色及各個(gè)景點(diǎn)的圖文介紹內(nèi)容。同系列的H5作品還有：《千年城心·芙蓉等你丨芙蓉區(qū)文旅六品牌火熱出爐》

2.美食地圖

美食地圖H5可綜合展示地方美食資源，及相應(yīng)的歷史淵源、制作方式、訂餐電話等，從而為游客的美食之旅提供重要參考。另外，美食地圖H5的有效推廣還可以推動(dòng)城市知名度與美譽(yù)度的提高，這對(duì)城市營(yíng)銷(xiāo)與旅游業(yè)的發(fā)展也有很大幫助。

案例賞析

《美食界“大富翁”地圖噴香出爐》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：包河區(qū)文化和旅游局、網(wǎng)易安徽

實(shí)現(xiàn)方式：定制開(kāi)發(fā)

創(chuàng)意特色：大富翁小游戲、2.5D地圖、抽獎(jiǎng)

內(nèi)容簡(jiǎn)介：這是一款大富翁類(lèi)的小游戲H5。用戶可先選擇游戲角色，并填寫(xiě)聯(lián)系方式，再開(kāi)始游戲。游戲界面以2.5D插畫(huà)地圖的形式將包河6條特色美食街區(qū)融合在了一起，并加入了包河文化、特色美食街區(qū)建筑元素。游戲過(guò)程中，用戶可通過(guò)投擲篩子的方式觸發(fā)角色前進(jìn)，并領(lǐng)取相應(yīng)的消費(fèi)券。待集齊10個(gè)消費(fèi)券后，用戶即可參與抽獎(jiǎng)。此外，用戶還可根據(jù)提示按鈕進(jìn)入“我的禮包”板塊，并輸入秘鑰（若用戶前往商場(chǎng)并使用消費(fèi)券，即可從商家處獲得“秘鑰”）、點(diǎn)亮圖標(biāo)。點(diǎn)亮3個(gè)圖標(biāo)后，用戶還可獲得抽獎(jiǎng)機(jī)會(huì)。

3.紅色地圖

為更好地傳承紅色基因、發(fā)揚(yáng)紅色精神，各地的黨史學(xué)習(xí)教育開(kāi)展得如火如荼，這也是黨政紅色地圖H5得到越來(lái)越廣泛應(yīng)用的重要原因。紅色地圖H5可以系統(tǒng)全面地展示當(dāng)?shù)氐募t色資源，如革命舊址、紀(jì)念館、烈士陵園等，既具有社會(huì)教育意義，也為當(dāng)?shù)氐穆糜伟l(fā)展、文化產(chǎn)業(yè)和城市品牌建設(shè)帶來(lái)了新的機(jī)遇。

案例賞析

《上海16區(qū)共繪紅色學(xué)習(xí)地圖》

點(diǎn)擊標(biāo)題體驗(yàn)

品牌方：學(xué)習(xí)強(qiáng)國(guó)上海學(xué)習(xí)平臺(tái)

實(shí)現(xiàn)方式：意派科技定制開(kāi)發(fā)

創(chuàng)意特色：藝術(shù)字、地圖、layer容器、動(dòng)畫(huà)、幻燈、視頻、導(dǎo)航、擦除

內(nèi)容簡(jiǎn)介：用戶可沿著地圖打卡上海16個(gè)區(qū)的紅色經(jīng)典線路，并通過(guò)涂抹照片查看新舊對(duì)比、瀏覽文字資料、觀看視頻解說(shuō)、一鍵開(kāi)啟導(dǎo)航等方式追尋百年初心印記。

《一張手繪地圖帶你看遍深圳28處紅色印記》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：讀特融媒實(shí)驗(yàn)室

實(shí)現(xiàn)方式：意派Epub360 H5編輯器

創(chuàng)意特色：微信授權(quán)、橫屏、地圖、長(zhǎng)頁(yè)面、參數(shù)變量

內(nèi)容簡(jiǎn)介：該H5旨在介紹深圳所擁有的28處不可移動(dòng)革命文物。用戶可先通過(guò)左右滑屏的方式查看深圳地圖全貌，再點(diǎn)擊地圖中的28處小圖片，進(jìn)而瀏覽相應(yīng)的圖文介紹并進(jìn)行點(diǎn)擊打卡。此外，用戶還可通過(guò)地圖右下角的“分享打卡按鈕”查看自己是第幾個(gè)打卡的。

4.影視地圖

影視綜藝拍攝取景地遍布各地，以該內(nèi)容為主題的影視地圖H5主要用于標(biāo)注經(jīng)典場(chǎng)景的拍攝點(diǎn)，并與當(dāng)?shù)貧v史、文化等聯(lián)系起來(lái)，既容易勾起用戶探索拍攝地的興趣，也能讓用戶在瀏覽過(guò)程中獲取豐富的知識(shí)。總之，這對(duì)于城市形象來(lái)說(shuō)，也不失為一種好的宣傳契機(jī)。

案例賞析

《H5丨遼寧影視地圖》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：遼寧廣播電視臺(tái)、北斗融媒

實(shí)現(xiàn)方式：定制開(kāi)發(fā)

創(chuàng)意特色：地圖、視頻

內(nèi)容簡(jiǎn)介：很多影視作品都把遼寧作為拍攝取景地，該H5旨在帶領(lǐng)用戶重溫曾在遼寧拍攝的、講述遼寧歷史文化的經(jīng)典影視作品，并在線“云游打卡”。用戶可根據(jù)提示點(diǎn)擊地圖上各城市板塊中的小圖標(biāo)，及相應(yīng)的影視作品名稱(chēng)，進(jìn)而觀看充滿知識(shí)點(diǎn)的精彩視頻。

三、從設(shè)計(jì)層面來(lái)看

地圖H5中的地圖呈現(xiàn)方式眾多，如標(biāo)準(zhǔn)地圖、手繪地圖、動(dòng)態(tài)地圖、VR/AR地圖等，設(shè)計(jì)者要從項(xiàng)目的性質(zhì)與定位等方面綜合去考量，從而選擇最合適的呈現(xiàn)方式。相對(duì)來(lái)說(shuō)，標(biāo)準(zhǔn)地圖及手繪地圖這兩種呈現(xiàn)方式最為常見(jiàn)。

1、標(biāo)準(zhǔn)地圖（借助地圖軟件）

借助騰訊地圖、百度地圖、高德地圖等第三方地圖軟件來(lái)呈現(xiàn)位置信息，是地圖最直接的呈現(xiàn)方式。該方式具有地圖數(shù)據(jù)豐富、定位服務(wù)精準(zhǔn)、行程規(guī)劃智能等優(yōu)勢(shì)，但在視覺(jué)上會(huì)略顯單調(diào)。

除此之外，也有人會(huì)采用地圖軟件截圖+二次創(chuàng)作的方式呈現(xiàn)位置信息。這可以滿足制作者快速而直白的信息傳遞需求，且大大降低了內(nèi)容產(chǎn)出的難度與成本。

案例賞析

《惠民驛站》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：惠州市總工會(huì)

實(shí)現(xiàn)方式：定制開(kāi)發(fā)

創(chuàng)意特色：地圖、導(dǎo)航

內(nèi)容簡(jiǎn)介：該H5旨在幫助戶外勞動(dòng)者一鍵直達(dá)最近的惠民驛站。作品以點(diǎn)擊交互為主，用戶可先查看惠民驛站排行（按距離遠(yuǎn)近排列）、選擇最近的驛站、選擇彈出的3個(gè)導(dǎo)航軟件（百度地圖、高德地圖、騰訊地圖），繼而獲得前往該驛站的路線。

2、手繪地圖

手繪地圖的制作過(guò)程帶有一定的創(chuàng)作自由度，它在呈現(xiàn)地理信息的同時(shí)，也可以體現(xiàn)出設(shè)計(jì)師不同的藝術(shù)手法與審美情趣。相信大家在平時(shí)已經(jīng)見(jiàn)過(guò)很多手繪地圖H5了，其中，地圖的繪制手法主要有：

（1）輪廓圖

在繪制地圖時(shí)，最基本的一種操作就是僅用簡(jiǎn)單的線條勾勒出重要的地形輪廓，以表達(dá)地理空間的構(gòu)成。我們只需根據(jù)地理環(huán)境、行政區(qū)劃等進(jìn)行地域劃分就OK了，而不用涉及概念、主題、視覺(jué)等層面的考量，所以難度相對(duì)較小。

案例賞析

《H5 | 一日游襄陽(yáng) 精品線路來(lái)啦！》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：襄陽(yáng)廣播電視臺(tái)

制作：襄陽(yáng)廣播電視臺(tái)

實(shí)現(xiàn)方式：意派Epub360 H5編輯器

創(chuàng)意特色：地圖、熱區(qū)、動(dòng)效、長(zhǎng)頁(yè)面、導(dǎo)航、視頻

內(nèi)容簡(jiǎn)介：該H5旨在向用戶推薦襄陽(yáng)市的各種一日游線路。作品主要以點(diǎn)擊、滑屏操作為主，用戶可先根據(jù)提示任意選擇襄陽(yáng)市地圖上的一個(gè)地點(diǎn)，再通過(guò)“去看看”按鈕查看該地點(diǎn)的一日游行程路線圖，路線圖主要包含各種圖文介紹，以及導(dǎo)航或視頻。

（2）輪廓圖+主題元素

如果覺(jué)得簡(jiǎn)單的地圖輪廓不夠吸引人，那么，我們可以在此基礎(chǔ)上，根據(jù)內(nèi)容添加豐富的插畫(huà)元素，從而增強(qiáng)手繪地圖H5整體的視覺(jué)體驗(yàn)，并提高用戶的探索樂(lè)趣，例如：

①添加與地域文化相關(guān)的元素

在地圖上的相應(yīng)位置加上具有代表性的建筑、動(dòng)物、美食等插畫(huà)元素，可快速讓人識(shí)別該地圖所描繪的城市或地區(qū)，也更有利于喚起用戶的記憶，并與之產(chǎn)生共鳴。

②添加與日常生活相關(guān)的元素

在符合生活邏輯的前提下，在合適位置加入咖啡館、公園長(zhǎng)椅、出租車(chē)、自動(dòng)售貨機(jī)、散步的情侶等插畫(huà)元素，可豐富地圖的真實(shí)感與生活氛圍，也可讓靜態(tài)的地圖顯得更為生動(dòng)活潑。

③添加街道、交通標(biāo)記、路線指引

利用箭頭、線條等將地圖上的重要路線進(jìn)行明示，并輔以相關(guān)的指示牌、公交站牌等插畫(huà)，可讓地圖顯得更加真實(shí)、立體，也便于用戶辨識(shí)方向。

另外，在加入這些插畫(huà)元素時(shí)，我們還要注意風(fēng)格的一致性、元素的投放密度以及整體的層次感，只有布局得當(dāng)、自然生動(dòng)，方能達(dá)到理想的視覺(jué)效果。

案例賞析

《五四青年節(jié)-大東新青年運(yùn)動(dòng)地圖，邀你來(lái)打卡！》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：共青團(tuán)大東區(qū)委員會(huì)、新浪遼寧

實(shí)現(xiàn)方式：定制開(kāi)發(fā)

創(chuàng)意特色：地圖、視頻、參數(shù)變量、合成海報(bào)

內(nèi)容簡(jiǎn)介：該H5旨在邀請(qǐng)用戶線上打卡東中街核心商圈的一批新業(yè)態(tài)新文化之地。用戶可根據(jù)提示點(diǎn)擊地圖上的各個(gè)地標(biāo)按鈕，繼而瀏覽相應(yīng)的視頻及文字介紹。打卡結(jié)束后，用戶還可查看自己是第幾位打卡人，并獲得一份打卡海報(bào)。

（3）1:1還原地方布局

1:1的精細(xì)化還原可以表達(dá)更豐富的空間細(xì)節(jié)，也有助于用戶對(duì)該地區(qū)的實(shí)際布局與構(gòu)成有精確的認(rèn)知，具有較高的實(shí)用價(jià)值。

但這種方式工作量會(huì)較大，難度也較高，因此更適用于較小規(guī)模的地區(qū)或主題。另外，由于需要嚴(yán)格遵守比例，創(chuàng)意表達(dá)也會(huì)受到一定限制。且如果沒(méi)有很好地融入文化與生活元素，地圖可能會(huì)顯得單調(diào)乏味、缺乏親和力。綜合來(lái)說(shuō)，非常考驗(yàn)設(shè)計(jì)師的功力哦~

案例賞析

《州橋故事》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：上海嘉定州橋景區(qū)運(yùn)營(yíng)管理有限公司

實(shí)現(xiàn)方式：定制開(kāi)發(fā)

創(chuàng)意特色：地圖

內(nèi)容簡(jiǎn)介：該H5通過(guò)手繪地圖的方式還原了州橋現(xiàn)存的建筑風(fēng)貌和景觀，細(xì)節(jié)與內(nèi)容非常豐富。用戶可通過(guò)滑屏操作瀏覽地圖，并點(diǎn)擊地圖中標(biāo)有紅點(diǎn)的建筑，進(jìn)而瀏覽相應(yīng)的中英文介紹。據(jù)了解，在繪制過(guò)程中，設(shè)計(jì)師特地參考了衛(wèi)星航拍圖與無(wú)人機(jī)航拍圖，并仔細(xì)比較識(shí)別，經(jīng)過(guò)數(shù)十小時(shí)，才終于繪出這幅精美的地圖。

（4）網(wǎng)格化管理區(qū)域板塊

網(wǎng)格化的手繪地圖可以通過(guò)規(guī)則有序的框架結(jié)構(gòu)更清晰簡(jiǎn)潔地展現(xiàn)區(qū)域信息，也更便于用戶對(duì)每個(gè)區(qū)域進(jìn)行識(shí)別與查找。

這種方式在一定程度上簡(jiǎn)化了創(chuàng)作過(guò)程，設(shè)計(jì)師只需考慮好地圖面積和要表達(dá)的信息量，并合理確定網(wǎng)格的數(shù)量和尺寸，再依照規(guī)則將插畫(huà)元素、文字標(biāo)簽等置于相應(yīng)的位置，不需要過(guò)多考慮構(gòu)圖。當(dāng)然，若想在規(guī)則中實(shí)現(xiàn)比較好的創(chuàng)意效果，還是需要設(shè)計(jì)師有較強(qiáng)的美學(xué)判斷的。

案例賞析

《江南大學(xué)VR全景校園》

點(diǎn)擊標(biāo)題體驗(yàn)

出品：江南大學(xué)招生就業(yè)處

實(shí)現(xiàn)方式：定制開(kāi)發(fā)

創(chuàng)意特色：地圖、VR全景

內(nèi)容簡(jiǎn)介：該H5主要通過(guò)手繪地圖的方式將校園的各個(gè)區(qū)域進(jìn)行了規(guī)則化梳理，用戶可任意點(diǎn)擊地圖上的圖標(biāo)，并根據(jù)提示保存相應(yīng)的插圖或查看VR全景。此外，作品左側(cè)還設(shè)置了4個(gè)按鈕（蠡湖攬秀、翰墨書(shū)香、學(xué)院印象、樂(lè)活江南），用戶可通過(guò)這些按鈕查看學(xué)校的不同功能區(qū)域。

（5）2.5D地圖

2.5D地圖可以承載豐富的信息量，并較好地表達(dá)各種元素的空間位置關(guān)系，它具有較高的商業(yè)潛力，也更能吸引用戶眼球。

要想繪制2.5D地圖，設(shè)計(jì)師需對(duì)立體效果有較為準(zhǔn)確的判斷和把握，且色彩、布局等也需要不斷試驗(yàn)和調(diào)整。咱們意派官網(wǎng)就上架了一款原創(chuàng)設(shè)計(jì)的2.5D地圖類(lèi)的營(yíng)銷(xiāo)小游戲H5模板，還沒(méi)看過(guò)的小伙伴快來(lái)體驗(yàn)一下吧~

模板賞析

《福利黃金期，全城樂(lè)享季》

點(diǎn)擊標(biāo)題體驗(yàn)

模板介紹：該模板中的2.5D地圖囊括了建筑、車(chē)輛、游樂(lè)設(shè)施、熱氣球等元素，給人以輕松活潑的感覺(jué)。用戶需在限定時(shí)間內(nèi)通過(guò)滑動(dòng)地圖、點(diǎn)擊星星的方式找到5個(gè)隱藏的商品線索，并獲得相應(yīng)的積分。若找不到線索，用戶便可通過(guò)點(diǎn)擊放大鏡的方式來(lái)獲取提示（僅3次機(jī)會(huì)）。游戲結(jié)束后，用戶還可根據(jù)所獲積分領(lǐng)取相應(yīng)的優(yōu)惠券。

本次的分享就到這里啦，如果您想自己制作一款地圖H5，那就趕緊登錄意派Epub360 H5編輯器吧！如果您想與我們合作定制一款地圖H5，歡迎聯(lián)系小派~