實例分析:室內地圖交互體驗分析

8 評論 17917 瀏覽 63 收藏 16 分鐘

因為做室內定位項目,需要涉及到室內地圖相關功能,故分析、探尋高德地圖、百度地圖APP的室內地圖設計邏輯,以為項目借鑒。本文從室內地圖展示,室內地圖與導航欄的對應兩方面來分析對比,并針對部分內容提出相關建議。

因為涉及到專有名詞,如有不太理解的同學,可以查看下面來自百度百科的解釋。

瓦片地圖:

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

首先用(如ArcGIS軟件等)對地圖數據進行處理,配成需要的圖層方案,并保存方案。

再用軟件自帶功能進行切片,切片過程中選擇切片方案,根據所選方案不同,例如金字塔級別不同,地圖切片范圍不同等,都會影響到切片的速度。切片之后的數據稱為瓦片。

POI:

POI是“Point of Interest”的縮寫,中文可以翻譯為“興趣點”。在地理信息系統中,一個POI可以是一棟房子、一個商鋪、一個郵筒、一個公交站等

一、 室內地圖展示

無論高德地圖還是百度地圖還是其他電子地圖網站為提高瀏覽速度一般以瓦片形式來逐級展示具體數據,各POI點的圖標和標注作為覆蓋物覆蓋在瓦片數據上。那么具體到室內地圖這塊,設計人員需要考慮室內地圖應該如何展示?如果是逐漸展示,那每一級具體展示什么信息?展示效果應該是怎樣?

1、展示效果

我們先看百度地圖和高德地圖的室內地圖展示效果。

左圖為百度地圖,右邊兩幅為高德地圖。可以看到百度地圖,在標注1處,仍然有原室外地圖建筑輪廓外露(顏色同標注2處一致),而且室內地圖建筑物輪廓用色與室外區分不明顯。右邊兩幅高德地圖有室內地圖的區域就只展示室內地圖,建筑物輪廓與背景色反差也明顯,整體看上去清晰明了。

顯然百度地圖是直接在室外地圖上疊加室內地圖圖層,沒有做任何處理。我們來分析如何做到像高德地圖一樣?

上面圖一個為高德地圖的pc端一個為高德移動端的相同位置。PC端紅框標出,很明顯仍有室外輪廓外露,對應下面移動端相同位置數據,紅框標出已經都沒有了。那高德地圖APP具體做法,個人認為首先應該排除刪除原室外建筑這種做法,因為對于切片地圖而言,如果要刪除有室內地圖的原室外建筑,那就得在各級別的瓦片上查找建筑,進行圖片處理進行刪除,這樣做顯然太麻煩?;蛘咧匦逻M行矢量地圖制作去除掉室外建筑,再切片,然而有室內地圖數據的建筑總是在更新,每次更新都要重新制作地圖再切片顯然不合理。個人認為高德的做法應該是先在疊加室內地圖的區域覆蓋一個與該區域相同顏色的純色底圖,底圖大小要能將原室外地圖輪廓都蓋住,在此基礎上再疊加室內地圖。

2、逐級展示

因為室內地圖結構比較簡單,無論高德還是百度在各個級別室內地圖展示內容都相同,只是隨級別增加地圖逐漸放大,圖面上的POI點逐級增多,比如在100米時,開始顯示室內地圖,poi點只顯示商場名稱,在50米時增加幾個poi點名稱和圖標,到25米,POI點圖標更多。下圖一從左到右依次為100米,50米,25米的西單大悅城地區百度室內地圖。下圖二從左到右依次為100米,50米,25米的西單大悅城地區高德室內地圖。

分析:

雖然高德和百度室內地圖均是逐級增加POI信息點,但是因為比例尺不太相同的原因(級別都是100米,但是100米對應的的實際屏幕尺寸不相同),從圖面我們可以看出同一個西單大悅城百度地圖室內地圖在手機屏幕上看上去比高德的更小,受制于屏幕展示大小所以逐級添加的POI 信息點量也少。從出現室內地圖,放大兩級,至25米時看到的信息量依然很少,給用戶感覺就是放大這個操作沒有更多信息響應。而高德地圖到20米級別時展示的poi信息量已經很豐富。

另還有一個細節:從圖面上看百度地圖是在100米時,展示了所有室內地圖。而高德地圖在100米,君太商城、西單新一代商城都沒有室內地圖,而是在地圖到50米級別時才出現。高德將室內地圖也做分級處理,保證了比例尺較小時,圖面不擁擠,而且從易用性來看太小面積的室內地圖展示也沒有意義。

因此在室內地圖的展示和逐級內容響應來看高德地圖無論美觀度還是交互體驗明顯優于百度。

具體做項目設計時在什么級別開始展示室內地圖,在各個級別展示的POI點具體是哪些,這些都需要產品經理根據實際業務情況給出明確內容,保證地圖圖面美觀與易用性,使用戶交互體驗更好。

二、樓層切換

一旦進入室內地圖,那么我們需要考慮室內地圖樓層切換。看起來很簡單,只需要點擊樓層切換條對應的樓層,地圖上進行相應樓層展示即可。

不過這當中存在兩個問題,樓層導航條何時出現(具體來說就是通過什么事件觸發樓層導航條顯示);如果出現多個建筑,樓層導航條與建筑物該如何對應。下面我們逐一進行分析。

1、樓層導航條

先上圖,從左到右依次為100米級別下,初始進入沒有樓層的西單大悅城區域地圖,進行各種平移的西單大悅城區域地圖,進行建筑物點擊后的西單大悅城區域地圖。

上圖中這幾種情況下都沒有樓層導航條,推測這種交互的邏輯為初始顯示室內地圖時,因室內地圖范圍較小,用戶即便切換樓層也看不到更多內容,所以在該級別無需進行樓層切換,故不需要展示樓層導航條。

上圖為50米級別時,左圖為進行平移,右圖為進行點擊選中建筑物后的互動效果圖,依然不會出現樓層導航條。

上圖為25米級別,開始展示室內地圖,中間圖為同樣區域稍微挪動一點之后,樓層導航條消失,右圖為點擊選中一個區域,該區域進行自動平移至圖面居中,并顯示樓層導航欄。

通過以上對比可以看出,高德地圖在樓層導航欄觸發和存在的條件為:1、圖面級別足夠大(高德為25米級別);2、必須有建筑物在圖面中心(高德地圖應該是設定了一個屏幕中心點)。一旦不滿足這兩個條件之一樓層導航條就消失。

百度地圖在樓層導航條的設計邏輯與高德地圖相同,均以圖面級別與建筑物在圖面中心為必須條件。只是百度地圖在50米級別即可以進行樓層切換(具體多大級別展示室內地圖不在本文討論,見仁見智。)

2、樓層導航條與建筑物對應

基于以上邏輯,無論有多少室內建筑,只需要考慮哪個建筑物的室內地圖觸發了設定的中心點,則樓層導航條對應該建筑物即可。

這里涉及到一個細節,高德地圖無論室內室外,都是點擊圖面圖標,該區域自動移至屏幕中心。高德地圖當級別足夠大可以出現室內地圖時,點擊某建筑室內地圖則該室內地圖自動移動至屏幕中心,則會觸發樓層導航欄的對應,則樓層導航欄自動切換為該建筑物,以上流程簡單來說就是高德地圖用戶點擊哪個室內地圖則導航欄對應該建筑。

而百度無論室內室外,點擊圖面圖標,該區域位置不改變,那么當出現樓層導航條時,存在如下問題:樓層導航條對應西單大悅城,但是筆者想要看下君太百貨的詳情時,只能通過平移地圖,如果點擊君太百貨,僅在底部展示君太百貨概要信息,而樓層導航條依然對應于西單大悅城。這種交互響應有些欠缺,畢竟地圖占據了足夠大的屏幕。用戶更關注圖面信息。另外,從邏輯上來說,用戶既然點擊君太百貨,必然是需要關注該區域。自動切換屏幕中心,并將樓層導航條自動對應才合理。

3、樓層切換

1)樓層導航條保留記憶

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

2)導航條的使用

高德地圖的樓層導航條保留五行,對應五個樓層,導航條第一行和第五行的樓層號灰色處理,二行和第四行為主要樓層切換區域,第三行表示當前樓層,凡是進行樓層切換,整體導航欄的樓層號自動上移或下移,使選中樓層對應到導航欄最中間第三行(見下圖左圖)。即將要切換到最頂層或者最底層時,上下區間都會保留一個空白格(見下圖右圖),這樣用戶操作不會存在無法選中這種情況,而且會給用戶以相應提示已經到達最頂層或者最底層。

而百度地圖如下圖(左圖和中間圖),筆者用盡洪荒之力,依然無法再向上或向下移動一個樓層,想要切換4層或者10層,必須采用向上或者向下的樓層導航箭頭進行切換,而筆者因為不夠纖纖玉指,實在夠不到啊,好不容易圖面有所反應又是不小心選中了西單商場超市(見下圖右圖)。

分析:

百度地圖的邏輯為如果需要進行樓層切換,點擊向上向下箭頭進行樓層移動即可,那么建議,向上向下的箭頭行高適當做大一些,至少可以做到像樓層號一樣。另外將樓層導航條做到右上方,再使用向上向下的箭頭實在有種指長莫及的感覺。建議樓層導航條適當向下挪動。而且樓層導航下面的愛逛圖標距離也太近了些,容易誤操作。

三、 ?總結

邏輯決定交互,細節決定品質。本文對百度地圖和高度地圖的室內地圖交互邏輯以及相關細節進行了分析,并提出相關建議,希望能夠給大家一定啟發。

 

本文由 @giser 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 關于“某建筑室內地圖則該室內地圖自動移動至屏幕中心”,百度地圖沒有自動移動,我覺得是因為該情境下,百度地圖的重點還是放在室外導航上。當時用戶自身定位處于A地點,在用戶手動定位B地點,而地圖的比例又沒有放大到足夠大的級別時,可以判斷用戶此時是想查詢B地到A地的距離,或使用導航從A地前往B地。

    來自浙江 回復
  2. 讓我對地圖app的交互,尤其是本文談的室內地圖的交互,增加了一定的了解。挺有意思!

    來自上海 回復
  3. 最后百度的樓層選擇你點不上是因為本來他就是個指示,不是點的,看到這種滾動條,第一反應不應該是去滑么?

    來自北京 回復
    1. 謝啦

      來自內蒙古 回復
    2. 確實沒有滑動操作,只是進行了點擊操作

      來自北京 回復
  4. 可以再簡潔通俗些

    回復
  5. 真是寫一堆廢話

    回復
    1. 別人寫的是廢話,你可以不看。你自己倒是寫一篇啊

      來自北京 回復