編輯導(dǎo)讀：地圖是我們經(jīng)常使用的工具，互聯(lián)網(wǎng)讓地圖使用的場(chǎng)景豐富了起來(lái)。不僅可以用地圖進(jìn)行導(dǎo)航，還可以用查找美食、酒店等等。在產(chǎn)品中加入地圖功能時(shí)，需要有哪些考量呢？本文將從四個(gè)方面進(jìn)行分析，希望對(duì)你有幫助。

地圖作為使用率很高的工具，涵蓋了我們生活的方方面面，除了基礎(chǔ)的路線導(dǎo)航功能，解決了我們到陌生地方茫然找路的痛點(diǎn)外，還可以通過(guò)地圖找美食、酒店住宿，甚至是社交。那么，站在設(shè)計(jì)的角度，要在產(chǎn)品中加入地圖的功能，需要有哪些考量？

我們從用戶進(jìn)入地圖前 —— 使用地圖時(shí) —— 退出地圖來(lái)說(shuō)說(shuō)有哪些需要思考。

一、用戶進(jìn)入地圖前

1. 比例尺

比例尺是地圖可視的比例系數(shù)，即用戶進(jìn)入地圖的頁(yè)面時(shí)，呈現(xiàn)給用戶的地圖比例該是多少。

我們先明確前提背景，用戶進(jìn)入地圖的目的是通過(guò)地圖找到目標(biāo)內(nèi)容，地圖的入口可以分為兩種類型：一是通過(guò)目標(biāo)內(nèi)容的地址進(jìn)入；二是有功能明確入口。

用戶通過(guò)目標(biāo)內(nèi)容的地址進(jìn)入時(shí)大多已有一個(gè)明確的地點(diǎn)，這時(shí)更多的需求是查看地點(diǎn)目標(biāo)的周邊進(jìn)行輔助決策，比例尺能合適展示周邊情況即可。

用戶通過(guò)功能入口進(jìn)入時(shí)大多對(duì)目標(biāo)內(nèi)容還不夠明確，需要地圖輔助查找。這類地圖大多為視圖的切換，通常在列表頁(yè)中出現(xiàn)。此時(shí)的比例尺可以分兩種類型來(lái)定義：一是通過(guò)固定顯示內(nèi)容數(shù)量設(shè)置自適應(yīng)的比例尺，二是固定顯示范圍即默認(rèn)一個(gè)比例尺。

• 自適應(yīng)的比例尺根據(jù)數(shù)據(jù)的承載能力和用戶可接受的數(shù)量范圍來(lái)綜合考慮定義初始的比例尺。比例尺不一定是固定的值，可以根據(jù)要展示的數(shù)據(jù)范圍定義自適應(yīng)的比例尺。
• 默認(rèn)比例尺進(jìn)入地圖默認(rèn)比例尺即固定框定一個(gè)范圍來(lái)進(jìn)行顯示，如攜程進(jìn)入地圖時(shí)固定比例尺顯示該城市下的所有區(qū)域，用戶再根據(jù)自己的需要選擇某一個(gè)區(qū)進(jìn)行相應(yīng)酒店的瀏覽。

Tips: 非用戶自發(fā)操作不要輕易變化比例尺用戶進(jìn)入地圖時(shí)需要我們提供合適的比例尺，在用戶進(jìn)入地圖后，用戶可能會(huì)有移動(dòng)、放大、縮小地圖及更改篩選條件等等觸發(fā)地圖數(shù)據(jù)重新加載的行為。在此期間我們要給其足夠的操控權(quán)利，如果不是用戶自發(fā)操作引起的比例尺變化，不要輕易修改地圖比例尺大小。

比例尺的變動(dòng)會(huì)造成地圖的視圖頻繁變化，不是用戶操作帶來(lái)的比例尺變化會(huì)導(dǎo)致用戶找不到想要的目標(biāo)范圍的情景，與用戶心理預(yù)期不符，這對(duì)體驗(yàn)來(lái)說(shuō)是非常不好的。

去哪兒-縮小區(qū)域重新搜索比例尺自動(dòng)發(fā)生變化?

以用戶放大區(qū)域?yàn)槔脩糁幌肟捶糯蟛榭茨繕?biāo)范圍里的更多內(nèi)容，此時(shí)放大區(qū)域會(huì)重新數(shù)據(jù)，我們應(yīng)以用戶當(dāng)前比例尺去重新加載內(nèi)容，而不是重新回到默認(rèn)的比例尺。

若比例尺發(fā)生變化，那么用戶的目標(biāo)范圍也會(huì)有所移動(dòng)，由于地圖上的數(shù)據(jù)內(nèi)容很多，用戶很容易困惑我剛剛要看的地方在哪，特別是對(duì)當(dāng)前目標(biāo)范圍并不熟悉的用戶來(lái)說(shuō)。因此，在用戶進(jìn)入地圖后，要謹(jǐn)慎改變比例尺的大小。

2. 信息聯(lián)動(dòng)

由于地圖數(shù)據(jù)量大，用戶需要接收的信息多，在地圖頁(yè)面通常會(huì)提供篩選條件幫助用戶找到目標(biāo)內(nèi)容。對(duì)于此類的信息聯(lián)動(dòng)，我們需要有以下思考：

進(jìn)入地圖時(shí)要帶入什么條件？用戶進(jìn)入地圖時(shí)，產(chǎn)品需要提供默認(rèn)展示的數(shù)據(jù)，我們要如何保證此時(shí)的默認(rèn)數(shù)據(jù)是最符合用戶心理預(yù)期的呢？在此我們可以根據(jù)用戶進(jìn)入地圖前的數(shù)據(jù)展示和篩選條件來(lái)綜合考量。

以選擇酒店為例，我們假設(shè)一個(gè)場(chǎng)景：用戶選擇了地點(diǎn)、入住時(shí)間段與入住人數(shù)后進(jìn)入酒店列表頁(yè)，在列表頁(yè)滑動(dòng)查看了幾頁(yè)后，對(duì)目標(biāo)酒店還是不太有想法，這時(shí)想要進(jìn)入地圖頁(yè)看看哪些酒店的位置比較方便（此時(shí)用戶的列表頁(yè)已加載到第4頁(yè)）。用戶進(jìn)入地圖模式，我們?cè)摻o用戶呈現(xiàn)同列表頁(yè)第4頁(yè)相同的酒店數(shù)據(jù)，還是重新為用戶提供默認(rèn)的酒店數(shù)據(jù)？

筆者大致分析了幾個(gè)OTA產(chǎn)品，他們大多進(jìn)入地圖頁(yè)不會(huì)與列表頁(yè)當(dāng)前瀏覽的頁(yè)數(shù)進(jìn)行聯(lián)動(dòng)顯示，即進(jìn)入地圖頁(yè)依舊是平臺(tái)給用戶篩選出的最匹配條件的內(nèi)容。

為什么這樣做的理由，筆者猜測(cè)有兩個(gè)原因：

1. 列表頁(yè)的內(nèi)容不一定在地理位置上是臨近的，只是根據(jù)用戶的查詢條件進(jìn)行最佳匹配推薦，若用戶沒有設(shè)置具體位置距離的篩選，這些酒店有可能在地理位置上跨度很大，若要在地圖頁(yè)聯(lián)動(dòng)顯示會(huì)造成進(jìn)入地圖的比例尺偏小，由此影響用戶正常瀏覽。
2. 技術(shù)層面的考慮，若要做聯(lián)動(dòng)需要給列表頁(yè)瀑布瀏覽做頁(yè)碼編碼，且對(duì)應(yīng)關(guān)系也需要特殊處理，比方說(shuō)當(dāng)前列表頁(yè)剛好上半部分是第4頁(yè)下半部分是第5頁(yè)，那么進(jìn)入地圖時(shí)該顯示第4頁(yè)還是第5頁(yè)呢。

大家若有其他想法，歡迎一起交流討論。

二、用戶使用地圖時(shí)

1. 數(shù)據(jù)承載與地圖移動(dòng)的關(guān)系

用戶進(jìn)入地圖后，移動(dòng)地圖是非常常見的操作，理想情況下，地圖是會(huì)跟隨用戶的移動(dòng)進(jìn)行實(shí)時(shí)的數(shù)據(jù)加載與更新。

但同時(shí)會(huì)造成反向的影響：

1）對(duì)于數(shù)據(jù)處理的影響

用戶移動(dòng)的路徑每偏移一個(gè)經(jīng)緯度，后端數(shù)據(jù)需要根據(jù)這經(jīng)緯度進(jìn)行數(shù)據(jù)的加載與更新，對(duì)于數(shù)據(jù)承載是一個(gè)非常復(fù)雜的操作，同時(shí)可能造成數(shù)據(jù)錯(cuò)誤和加載跟不上導(dǎo)致頻繁失敗的反效果。

在開發(fā)數(shù)據(jù)處理的層面，用戶自主觸發(fā)搜索會(huì)涉及到經(jīng)緯度的重新加載，這時(shí)候要框定一個(gè)范圍給開發(fā)大哥們進(jìn)行數(shù)據(jù)處理和實(shí)現(xiàn)。

2）對(duì)于用戶的影響

實(shí)時(shí)加載和更新在用戶界面上會(huì)帶來(lái)頻繁進(jìn)入數(shù)據(jù)加載，可能用戶只是移動(dòng)的速度比較慢，但移動(dòng)過(guò)程中實(shí)時(shí)的加載過(guò)程會(huì)打斷用戶的移動(dòng)過(guò)程，多余的加載反而造成用戶到達(dá)目標(biāo)范圍的干擾。因此，大多帶有地圖功能的產(chǎn)品在用戶移動(dòng)時(shí)都會(huì)出現(xiàn)一個(gè)「重新搜索」的按鈕。這樣不論對(duì)于后端數(shù)據(jù)，還是對(duì)于用戶來(lái)說(shuō)，都是權(quán)衡利弊較友好的設(shè)計(jì)。

2. 放大/縮小視圖

放大和縮小視圖也是地圖移動(dòng)行為，這部分屬于用戶自主進(jìn)行比例尺的改變。在此過(guò)程中，我們依舊要保證用戶足夠的操控權(quán)利，在用戶自主操控放大或縮小的范圍內(nèi)，給其準(zhǔn)確的數(shù)據(jù)呈現(xiàn)。

3. 臨界點(diǎn)處理

地圖做為一個(gè)涵蓋范圍超廣且用戶操作多元的功能頁(yè)面，臨界點(diǎn)是保證功能完整和易用性的基礎(chǔ)。那么，我們需要有哪些臨界的考量呢？

1）跨區(qū)域處理

所謂跨區(qū)域處理，即用戶在移動(dòng)地圖時(shí)進(jìn)入到了非當(dāng)前查詢條件的行政區(qū)域，我們需要平衡技術(shù)實(shí)現(xiàn)能力決定是否要讓用戶繼續(xù)進(jìn)行下一個(gè)行政區(qū)域的瀏覽，若要，需要給予適當(dāng)?shù)奶崾?，且用戶返回列表?yè)時(shí)需要將新的行政區(qū)域帶回到查詢條件中重新刷新列表頁(yè)的內(nèi)容。

2）視圖的臨界區(qū)域

進(jìn)入地圖視圖時(shí)會(huì)顯示一定數(shù)量的內(nèi)容標(biāo)記，很有可能出現(xiàn)標(biāo)簽tag處于屏幕的邊界處，用戶只能看到一半甚至是幾個(gè)像素的內(nèi)容，因此，劃定視圖區(qū)域是保障用戶能夠清晰瀏覽內(nèi)容標(biāo)記的建議方式。

3）最大/最小視圖的臨界點(diǎn)

用戶在放大縮小視圖時(shí)可能會(huì)涉及比例尺的切換，比如從某條街道縮小到某個(gè)市，再到省和國(guó)家，因此，需要定義一個(gè)臨界點(diǎn)，到達(dá)哪里時(shí)默認(rèn)切換到省的比例尺，顯示各省信息。

4）數(shù)據(jù)聯(lián)動(dòng)的臨界范圍

數(shù)據(jù)聯(lián)動(dòng)的臨界范圍，正如我們上面有提到的，當(dāng)視圖涉及不同行政區(qū)域時(shí)，我們需要定義當(dāng)前城市占比多大時(shí)將用戶的條件切換到此城市。

三、用戶離開地圖時(shí)

用戶在地圖查看了內(nèi)容退出時(shí)，若在地圖頁(yè)面有過(guò)篩選、翻頁(yè)、縮放、更換地區(qū)等等操作行為，我們需要視場(chǎng)景和需求考量是否要這些條件帶回以及如何帶回。

這里大致有兩種處理方式：

1. 將篩選條件帶回用戶在地圖頁(yè)有了新的篩選條件即帶回列表頁(yè)中。用戶的行為是連貫，不會(huì)因?yàn)橐晥D的切換有不同的篩選需求。
2. 根據(jù)用戶篩選條件來(lái)看是否要顯示地圖小視圖如攜程在添加了位置距離的篩選條件后，由于此項(xiàng)篩選意味著用戶對(duì)位置周邊是有目標(biāo)范圍和方向的，且位置是用戶的一個(gè)關(guān)鍵決策點(diǎn)，此時(shí)在列表頁(yè)會(huì)顯示地圖的小視圖，方便用戶知曉當(dāng)前酒店大致的位置在哪。同時(shí)若在地圖頁(yè)設(shè)置了該項(xiàng)篩選，那么回到列表頁(yè)也會(huì)顯示地圖的小視圖。

四、設(shè)計(jì)原則與注意事項(xiàng)

綜合上述內(nèi)容，筆者總結(jié)了以下幾條設(shè)計(jì)原則：

1. 要給用戶足夠的操控感，不能隨意替用戶挪動(dòng)顯示區(qū)域我們不能隨意改變用戶的顯示區(qū)域，特別在地圖信息這么復(fù)雜的場(chǎng)景下，用戶迷失了原先確定的目標(biāo)方向，對(duì)于體驗(yàn)是非常不好的。
2. 盡可能減少加載的時(shí)長(zhǎng)，可適當(dāng)呈現(xiàn)較少的數(shù)據(jù)地圖的數(shù)據(jù)龐大復(fù)雜，若無(wú)法確保加載的高效性，倒不如限制一定的數(shù)量分批顯示，我們無(wú)法一口做一個(gè)胖子，用戶也無(wú)法一口吃成一個(gè)胖子。
3. 及時(shí)的反饋地圖功能的復(fù)雜性對(duì)及時(shí)反饋有更高的要求，只有及時(shí)反饋?zhàn)層脩糁獣圆拍芙o予用戶足夠的操控感。
4. 要有閉環(huán)設(shè)計(jì)這里的閉環(huán)設(shè)計(jì)是指對(duì)于信息聯(lián)動(dòng)要有清晰謹(jǐn)慎地思考。用戶的操作行為是連貫的，目標(biāo)是始終如一的，因此從進(jìn)入地圖、使用地圖到退出地圖都要輔助用戶決策，不要輕易改變用戶的方向和已有的明確行為。

共勉之:-)

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。