因?yàn)樽鍪覂?nèi)定位項(xiàng)目，需要涉及到室內(nèi)地圖相關(guān)功能，故分析、探尋高德地圖、百度地圖APP的室內(nèi)地圖設(shè)計(jì)邏輯，以為項(xiàng)目借鑒。本文從室內(nèi)地圖展示，室內(nèi)地圖與導(dǎo)航欄的對(duì)應(yīng)兩方面來(lái)分析對(duì)比，并針對(duì)部分內(nèi)容提出相關(guān)建議。

因?yàn)樯婕暗綄Ｓ忻~，如有不太理解的同學(xué)，可以查看下面來(lái)自百度百科的解釋。

瓦片地圖：

確定地圖服務(wù)平臺(tái)所要提供的縮放級(jí)別的數(shù)量N，把縮放級(jí)別最低、地圖比例尺最大的地圖圖片作為金字塔的底層，即第0層，并對(duì)其進(jìn)行分塊，從地圖圖片的左上角開(kāi)始，從左至右、從上到下進(jìn)行切割，分割成相同大?。ū热?56×256像素）的正方形地圖瓦片，形成第0層瓦片矩陣；在第0層地圖圖片的基礎(chǔ)上，按每2×2像素合成為一個(gè)像素的方法生成第1層地圖圖片，并對(duì)其進(jìn)行分塊，分割成與下一層相同大小的正方形地圖瓦片，形成第1層瓦片矩陣;采用同樣的方法生成第2層瓦片矩陣。。。如此下去，直到第N一1層，構(gòu)成整個(gè)瓦片金字塔。

首先用（如ArcGIS軟件等）對(duì)地圖數(shù)據(jù)進(jìn)行處理，配成需要的圖層方案，并保存方案。

再用軟件自帶功能進(jìn)行切片，切片過(guò)程中選擇切片方案，根據(jù)所選方案不同，例如金字塔級(jí)別不同，地圖切片范圍不同等，都會(huì)影響到切片的速度。切片之后的數(shù)據(jù)稱為瓦片。

POI：

POI是“Point of Interest”的縮寫，中文可以翻譯為“興趣點(diǎn)”。在地理信息系統(tǒng)中，一個(gè)POI可以是一棟房子、一個(gè)商鋪、一個(gè)郵筒、一個(gè)公交站等

一、 室內(nèi)地圖展示

無(wú)論高德地圖還是百度地圖還是其他電子地圖網(wǎng)站為提高瀏覽速度一般以瓦片形式來(lái)逐級(jí)展示具體數(shù)據(jù)，各POI點(diǎn)的圖標(biāo)和標(biāo)注作為覆蓋物覆蓋在瓦片數(shù)據(jù)上。那么具體到室內(nèi)地圖這塊，設(shè)計(jì)人員需要考慮室內(nèi)地圖應(yīng)該如何展示？如果是逐漸展示，那每一級(jí)具體展示什么信息？展示效果應(yīng)該是怎樣？

1、展示效果

我們先看百度地圖和高德地圖的室內(nèi)地圖展示效果。

左圖為百度地圖，右邊兩幅為高德地圖?？梢钥吹桨俣鹊貓D，在標(biāo)注1處，仍然有原室外地圖建筑輪廓外露（顏色同標(biāo)注2處一致），而且室內(nèi)地圖建筑物輪廓用色與室外區(qū)分不明顯。右邊兩幅高德地圖有室內(nèi)地圖的區(qū)域就只展示室內(nèi)地圖，建筑物輪廓與背景色反差也明顯，整體看上去清晰明了。

顯然百度地圖是直接在室外地圖上疊加室內(nèi)地圖圖層，沒(méi)有做任何處理。我們來(lái)分析如何做到像高德地圖一樣？

上面圖一個(gè)為高德地圖的pc端一個(gè)為高德移動(dòng)端的相同位置。PC端紅框標(biāo)出，很明顯仍有室外輪廓外露，對(duì)應(yīng)下面移動(dòng)端相同位置數(shù)據(jù)，紅框標(biāo)出已經(jīng)都沒(méi)有了。那高德地圖APP具體做法，個(gè)人認(rèn)為首先應(yīng)該排除刪除原室外建筑這種做法，因?yàn)閷?duì)于切片地圖而言，如果要?jiǎng)h除有室內(nèi)地圖的原室外建筑，那就得在各級(jí)別的瓦片上查找建筑，進(jìn)行圖片處理進(jìn)行刪除，這樣做顯然太麻煩?；蛘咧匦逻M(jìn)行矢量地圖制作去除掉室外建筑，再切片，然而有室內(nèi)地圖數(shù)據(jù)的建筑總是在更新，每次更新都要重新制作地圖再切片顯然不合理。個(gè)人認(rèn)為高德的做法應(yīng)該是先在疊加室內(nèi)地圖的區(qū)域覆蓋一個(gè)與該區(qū)域相同顏色的純色底圖，底圖大小要能將原室外地圖輪廓都蓋住，在此基礎(chǔ)上再疊加室內(nèi)地圖。

2、逐級(jí)展示

因?yàn)槭覂?nèi)地圖結(jié)構(gòu)比較簡(jiǎn)單，無(wú)論高德還是百度在各個(gè)級(jí)別室內(nèi)地圖展示內(nèi)容都相同，只是隨級(jí)別增加地圖逐漸放大，圖面上的POI點(diǎn)逐級(jí)增多，比如在100米時(shí)，開(kāi)始顯示室內(nèi)地圖，poi點(diǎn)只顯示商場(chǎng)名稱，在50米時(shí)增加幾個(gè)poi點(diǎn)名稱和圖標(biāo)，到25米，POI點(diǎn)圖標(biāo)更多。下圖一從左到右依次為100米，50米，25米的西單大悅城地區(qū)百度室內(nèi)地圖。下圖二從左到右依次為100米，50米，25米的西單大悅城地區(qū)高德室內(nèi)地圖。

分析：

雖然高德和百度室內(nèi)地圖均是逐級(jí)增加POI信息點(diǎn)，但是因?yàn)楸壤卟惶嗤脑颍?jí)別都是100米，但是100米對(duì)應(yīng)的的實(shí)際屏幕尺寸不相同），從圖面我們可以看出同一個(gè)西單大悅城百度地圖室內(nèi)地圖在手機(jī)屏幕上看上去比高德的更小，受制于屏幕展示大小所以逐級(jí)添加的POI 信息點(diǎn)量也少。從出現(xiàn)室內(nèi)地圖，放大兩級(jí)，至25米時(shí)看到的信息量依然很少，給用戶感覺(jué)就是放大這個(gè)操作沒(méi)有更多信息響應(yīng)。而高德地圖到20米級(jí)別時(shí)展示的poi信息量已經(jīng)很豐富。

另還有一個(gè)細(xì)節(jié)：從圖面上看百度地圖是在100米時(shí)，展示了所有室內(nèi)地圖。而高德地圖在100米，君太商城、西單新一代商城都沒(méi)有室內(nèi)地圖，而是在地圖到50米級(jí)別時(shí)才出現(xiàn)。高德將室內(nèi)地圖也做分級(jí)處理，保證了比例尺較小時(shí)，圖面不擁擠，而且從易用性來(lái)看太小面積的室內(nèi)地圖展示也沒(méi)有意義。

因此在室內(nèi)地圖的展示和逐級(jí)內(nèi)容響應(yīng)來(lái)看高德地圖無(wú)論美觀度還是交互體驗(yàn)明顯優(yōu)于百度。

具體做項(xiàng)目設(shè)計(jì)時(shí)在什么級(jí)別開(kāi)始展示室內(nèi)地圖，在各個(gè)級(jí)別展示的POI點(diǎn)具體是哪些，這些都需要產(chǎn)品經(jīng)理根據(jù)實(shí)際業(yè)務(wù)情況給出明確內(nèi)容，保證地圖圖面美觀與易用性，使用戶交互體驗(yàn)更好。

二、樓層切換

一旦進(jìn)入室內(nèi)地圖，那么我們需要考慮室內(nèi)地圖樓層切換?？雌饋?lái)很簡(jiǎn)單，只需要點(diǎn)擊樓層切換條對(duì)應(yīng)的樓層，地圖上進(jìn)行相應(yīng)樓層展示即可。

不過(guò)這當(dāng)中存在兩個(gè)問(wèn)題，樓層導(dǎo)航條何時(shí)出現(xiàn)（具體來(lái)說(shuō)就是通過(guò)什么事件觸發(fā)樓層導(dǎo)航條顯示）；如果出現(xiàn)多個(gè)建筑，樓層導(dǎo)航條與建筑物該如何對(duì)應(yīng)。下面我們逐一進(jìn)行分析。

1、樓層導(dǎo)航條

先上圖，從左到右依次為100米級(jí)別下，初始進(jìn)入沒(méi)有樓層的西單大悅城區(qū)域地圖，進(jìn)行各種平移的西單大悅城區(qū)域地圖，進(jìn)行建筑物點(diǎn)擊后的西單大悅城區(qū)域地圖。

上圖中這幾種情況下都沒(méi)有樓層導(dǎo)航條，推測(cè)這種交互的邏輯為初始顯示室內(nèi)地圖時(shí)，因室內(nèi)地圖范圍較小，用戶即便切換樓層也看不到更多內(nèi)容，所以在該級(jí)別無(wú)需進(jìn)行樓層切換，故不需要展示樓層導(dǎo)航條。

上圖為50米級(jí)別時(shí)，左圖為進(jìn)行平移，右圖為進(jìn)行點(diǎn)擊選中建筑物后的互動(dòng)效果圖，依然不會(huì)出現(xiàn)樓層導(dǎo)航條。

上圖為25米級(jí)別，開(kāi)始展示室內(nèi)地圖，中間圖為同樣區(qū)域稍微挪動(dòng)一點(diǎn)之后，樓層導(dǎo)航條消失，右圖為點(diǎn)擊選中一個(gè)區(qū)域，該區(qū)域進(jìn)行自動(dòng)平移至圖面居中，并顯示樓層導(dǎo)航欄。

通過(guò)以上對(duì)比可以看出，高德地圖在樓層導(dǎo)航欄觸發(fā)和存在的條件為：1、圖面級(jí)別足夠大（高德為25米級(jí)別）；2、必須有建筑物在圖面中心（高德地圖應(yīng)該是設(shè)定了一個(gè)屏幕中心點(diǎn)）。一旦不滿足這兩個(gè)條件之一樓層導(dǎo)航條就消失。

百度地圖在樓層導(dǎo)航條的設(shè)計(jì)邏輯與高德地圖相同，均以圖面級(jí)別與建筑物在圖面中心為必須條件。只是百度地圖在50米級(jí)別即可以進(jìn)行樓層切換（具體多大級(jí)別展示室內(nèi)地圖不在本文討論，見(jiàn)仁見(jiàn)智。）

2、樓層導(dǎo)航條與建筑物對(duì)應(yīng)

基于以上邏輯，無(wú)論有多少室內(nèi)建筑，只需要考慮哪個(gè)建筑物的室內(nèi)地圖觸發(fā)了設(shè)定的中心點(diǎn)，則樓層導(dǎo)航條對(duì)應(yīng)該建筑物即可。

這里涉及到一個(gè)細(xì)節(jié)，高德地圖無(wú)論室內(nèi)室外，都是點(diǎn)擊圖面圖標(biāo)，該區(qū)域自動(dòng)移至屏幕中心。高德地圖當(dāng)級(jí)別足夠大可以出現(xiàn)室內(nèi)地圖時(shí)，點(diǎn)擊某建筑室內(nèi)地圖則該室內(nèi)地圖自動(dòng)移動(dòng)至屏幕中心，則會(huì)觸發(fā)樓層導(dǎo)航欄的對(duì)應(yīng)，則樓層導(dǎo)航欄自動(dòng)切換為該建筑物，以上流程簡(jiǎn)單來(lái)說(shuō)就是高德地圖用戶點(diǎn)擊哪個(gè)室內(nèi)地圖則導(dǎo)航欄對(duì)應(yīng)該建筑。

而百度無(wú)論室內(nèi)室外，點(diǎn)擊圖面圖標(biāo)，該區(qū)域位置不改變，那么當(dāng)出現(xiàn)樓層導(dǎo)航條時(shí)，存在如下問(wèn)題：樓層導(dǎo)航條對(duì)應(yīng)西單大悅城，但是筆者想要看下君太百貨的詳情時(shí)，只能通過(guò)平移地圖，如果點(diǎn)擊君太百貨，僅在底部展示君太百貨概要信息，而樓層導(dǎo)航條依然對(duì)應(yīng)于西單大悅城。這種交互響應(yīng)有些欠缺，畢竟地圖占據(jù)了足夠大的屏幕。用戶更關(guān)注圖面信息。另外，從邏輯上來(lái)說(shuō)，用戶既然點(diǎn)擊君太百貨，必然是需要關(guān)注該區(qū)域。自動(dòng)切換屏幕中心，并將樓層導(dǎo)航條自動(dòng)對(duì)應(yīng)才合理。

3、樓層切換

1）樓層導(dǎo)航條保留記憶

左圖為西單大悅城5層，中間圖為為君太百貨，右圖為從君太百貨再次移動(dòng)至西單大悅城，可以看到有圖樓層導(dǎo)航條會(huì)保留記憶，自動(dòng)顯示為5層。百度地圖與高德地圖均有此功能。

2）導(dǎo)航條的使用

高德地圖的樓層導(dǎo)航條保留五行，對(duì)應(yīng)五個(gè)樓層，導(dǎo)航條第一行和第五行的樓層號(hào)灰色處理，二行和第四行為主要樓層切換區(qū)域，第三行表示當(dāng)前樓層，凡是進(jìn)行樓層切換，整體導(dǎo)航欄的樓層號(hào)自動(dòng)上移或下移，使選中樓層對(duì)應(yīng)到導(dǎo)航欄最中間第三行（見(jiàn)下圖左圖）。即將要切換到最頂層或者最底層時(shí)，上下區(qū)間都會(huì)保留一個(gè)空白格（見(jiàn)下圖右圖），這樣用戶操作不會(huì)存在無(wú)法選中這種情況，而且會(huì)給用戶以相應(yīng)提示已經(jīng)到達(dá)最頂層或者最底層。

而百度地圖如下圖（左圖和中間圖），筆者用盡洪荒之力，依然無(wú)法再向上或向下移動(dòng)一個(gè)樓層，想要切換4層或者10層，必須采用向上或者向下的樓層導(dǎo)航箭頭進(jìn)行切換，而筆者因?yàn)椴粔蚶w纖玉指，實(shí)在夠不到啊，好不容易圖面有所反應(yīng)又是不小心選中了西單商場(chǎng)超市（見(jiàn)下圖右圖）。

分析：

百度地圖的邏輯為如果需要進(jìn)行樓層切換，點(diǎn)擊向上向下箭頭進(jìn)行樓層移動(dòng)即可，那么建議，向上向下的箭頭行高適當(dāng)做大一些，至少可以做到像樓層號(hào)一樣。另外將樓層導(dǎo)航條做到右上方，再使用向上向下的箭頭實(shí)在有種指長(zhǎng)莫及的感覺(jué)。建議樓層導(dǎo)航條適當(dāng)向下挪動(dòng)。而且樓層導(dǎo)航下面的愛(ài)逛圖標(biāo)距離也太近了些，容易誤操作。

三、 ?總結(jié)

邏輯決定交互，細(xì)節(jié)決定品質(zhì)。本文對(duì)百度地圖和高度地圖的室內(nèi)地圖交互邏輯以及相關(guān)細(xì)節(jié)進(jìn)行了分析，并提出相關(guān)建議，希望能夠給大家一定啟發(fā)。

本文由 @giser 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。