大廠案例！PC端地圖頁面交互設計規范復盤

設計規范與產品相似，會有不同的發展階段，不同階段下的規范覆蓋內容不盡相同。隨著物流業務場景的多樣變化，便于用戶更可視化獲取和操作信息的地圖頁面變得復雜多樣，本文基于新衍生出的物流業務場景，對地圖交互規范升級進行了分析總結與反思，以期實現設計提效和保證產品一致性。

更多設計規范干貨：

一、背景與意義

隨著物流場景業務的不斷變化，許多后臺系統中都融入了地圖的展示和操作，便于用戶更可視化獲取和操作信息。這意味著地圖的設計形式越來越多樣化，地圖交互規范的 1.0 版本已經無法覆蓋大部分用戶場景，因此需要結合新衍生出的物流業務場景對地圖交互規范進行升級。本次升級將對產品設計、研發開發和用戶使用上都產生積極作用：

• 產品設計：保障產品內不同模塊的設計一致性，同時提高不同設計師間的設計、協作效率
• 研發開發：通過定義的標準規范，提高流程、組件的復用率，提高整體開發效率
• 用戶使用：讓用戶能夠在產品全局感受到統一且完整的體驗，降低使用成本和學習難度

二、洞察與分析

設計規范與產品相似，會有不同的發展階段，不同階段下的規范覆蓋內容不盡相同。我們要搭建合理的設計規范，需要觀內視外，以原子設計理論為指導原則，通過回溯過往設計內容，定義規范分類，明確內容優先級(覆蓋面廣、復用率高)，沉淀優化成完整的交互規范，然后再根據規范統一產品體驗，進一步優化流程和效率。

1. 現狀及業務場景特殊性分析

通過收集整理業務場景下不同頁面流程，與先前 1.0 版本進行差異性對比，我們明確了需要增加或優化升級的核心模塊：

（1）地圖頁面布局

隨著 B 端場景演變的多樣化復雜化，我們發現，地圖頁面布局愈發呈現不定式，目前已經衍生有“左側面板+地圖底圖、右側面板+地圖底圖、左右兩側雙面板+地圖底圖、左側雙面板+地圖底圖”等多重布局樣式，這影響著地圖頁面的一致性，對于開發資源來說也是一種浪費。

（2）頁面要素尺寸

當前用戶使用設備屏幕的分辨率不一，小屏用戶占比依舊不少，甚至有的用戶系統頁面默認按照 150%顯示，這就要求我們在設計地圖頁面中關注小屏分辨率，既要保證用戶可以看清頁面面板中的信息，也要保證地圖區域足夠大以支撐在地圖區域中的交互操作。因此，對于地圖頁面要素的尺寸規定具有必要性。

（3）地圖底圖下鉆

最常見的地圖下鉆場景是“連續性下鉆”，即通過鼠標滾輪、觸控面板手勢、放大縮小按鈕等方式實現地圖底圖的連續放大縮小，但此種下鉆交互只能覆蓋一部分常規業務場景，對于我司的多級業務區域劃分“區域-戰區-片區-營業部”來說不具有操作便捷性，當前需要配合地址選擇器交互來實現到特定某一層級的下鉆。

（4）基礎控件與組件

場景的多樣化帶來了基礎控件與組件的升級，如點元素中重合點新場景以及點與面板聯動交互、線元素中飛線關系場景、面元素中的多重熱力圖等。

2. 競品分析

在定義規范時，可以站在前人肩膀上，常規規范可以快速對比參考，以保證用戶習慣延續性，具有業務場景特性的可以集合業務綜合考慮，這樣可以使整個規范制定效率更高，科學性、指導性更強。

我們對地圖類競品的下鉆交互、頁面布局、面板操作等功能層、表現層進行了對比分析，競品主要包括：配送運輸類產品，例如順豐、三通一達、美團、滴滴等；地圖服務類，如高德地圖、騰訊地圖、百度地圖、蘋果地圖、必應地圖、谷歌地圖等；使用地圖服務的其他各類產品，如購房租房類產品（自如、鏈家、安居客、貝殼）、出行旅游類（攜程、南方航空、大眾點評、58 同城、馬蜂窩）等。

通過分析我們得出:

三、洞察與分析

1. 規范普適性

（1）正向梳理現有產品的設計形式，抽離相同點

輸出規范前先梳理各個產品線中的業務需求，統計場景類型，找到相同點，其中包括用戶目標的相同點、操作的相同點等。此處需要注意的是，規范定義的是覆蓋面廣、復用率高的通用場景，因此需要明確規范的邊界，有的放矢，明確規范內容的優先級，而不是事無巨細。

（2）反向套用設計規范至業務需求，判斷規范的適用性

輸出規范后以現有的業務需求為例，看規范是否能適配需求。

（3）前瞻性設計，提升規范的拓展性

進行設計規范定義時，既要貼合當前業務場景，覆蓋當前場景需要，也需要富有前瞻性，發掘出可能衍生出的潛在用戶場景和需求，便于后續更好的復用和迭代。

2. 界面易用性

（1）優化信息架構，保證信息易讀性

地圖類頁面與其他頁面的最大差異就是信息的展示空間被壓縮，此時我們也應當保證信息的易讀性，通過對信息架構的梳理幫助用戶高效明確的或許信息

（2）狀態可感知，防止用戶迷失

用戶與地圖頁面交互時應當即時展示出當前的狀態，例如正在查看的信息，已經篩選的信息等，讓用戶能感知到當前處在什么環節及什么狀態中。

（3）操作直接，提升交互的自然度

地圖的展示也是一種信息可視化的方式，應當提供對地圖直接操作的方式，例如地圖的縮放、信息的下鉆等，提升人機交互的自然性和直觀性。

（4）原控件的沿襲，貼近用戶認知

地圖頁面是根據業務的變化新衍生出來的頁面，在原來的后臺系統中存在較少，在設計過程中我們需要盡量保持與其他頁面控件/組件的一致性，或基于原控件/組件進行簡單的變形，降低用戶的首次學習成本。

3. 使用高效性

（1）減少頁面跳轉，提升沉浸感

在用戶進行任務處理的過程中應當盡量減少對用戶的打斷性，包括彈窗、浮層、抽屜的出現關閉或頁面間的跳轉等，尤其在地圖頁面中用戶常常需要將地圖與信息對照查看，所以減少頁面跳轉就變得尤為重要。如不得已要有頁面跳轉時應當為用戶提供清晰可見的返回路徑，避免用戶的迷失

（2）減少視線橫跳，關聯信息就近展示

我們在業務場景和競品分析中發現常有地圖類的頁面將地圖放在中間，屏幕左右兩側放信息面板。這種方式的好處是將地圖放在中心位置，信息布局看起來也比較均衡對稱，但缺點是用戶查看信息常常需要在面板間橫跳，信息瀏覽視線較為混亂和冗長。因此當容器面板上的信息具有關聯性時，我們應當通過設計減少用戶的視線橫跳，提升用戶的信息閱讀效率。

四、設計方案

1. 地圖頁面布局

在設計布局前整理地圖頁面的要素，我們研究后發現 B 端物流場景中地圖頁面要素可以分為：導航欄、地圖展示、信息或操作面板、查詢或篩選區域、地圖圖例、地圖常用操作（包含縮放、全屏等）以及地圖的工具欄等。確定頁面要素后將 B 端物流系統的地圖類頁面用戶場景進行歸類，我們將其總結為輔助查看場景和操作配置場景兩大類：

輔助查看場景：輔助用戶更直觀的獲取信息。例如物流場景中末端快遞站點對所屬各路區作業情況的監管，通過地圖能知道各路區的相對位置，路區的實際面積，路區的作業量等信息。

操作配置場景：用戶直接在地圖上進行相關操作。例如快遞站點的管理者對所屬路區進行自定義的范圍規劃和繪制等。

（1）單面板布局

單面板布局是從以上兩大場景入手，分析了每個場景中地圖的作用、用戶的行為和視線流后將地圖的要素進行布局設計。地圖頁面中最重要的兩個元素是面板以及地圖，在輔助查看場景中地圖主要起到輔助性作用，用戶還是以面板中的信息為主，因此遵循 F 型視線流將面板置于左側地圖置于右側，用戶進入頁面后優先獲取面板中的信息再對照地圖進行查看。在操作配置場景中用戶主要是在地圖上進行可視化的繪制操作等，用戶會以地圖為主，因此將地圖置于左側面板置于右側。與此同時，頁面的頂部區域用于查詢欄和工具欄的展示，頁面的底部區域用于圖例的展示，地圖的常用操作區域位于地圖區域的右下角。

此外，由于這類頁面中地圖占據了一部分頁面空間，導致其他信息展示空間變小，因此我們可以在用戶進入頁面時讓側邊導航欄自動收起，放大頁面展示區域，讓用戶更好的獲取信息。

（2）雙級面板布局

在實際的業務場景中避免不了會出現信息較多的場景，此時為了減少頁面的跳轉可以采用雙級面板的布局方式。設計師可以通過對信息架構的梳理，將優先級較高的信息優先在第一級面板上展示出來，其余信息暫時隱藏，用戶通過點擊等交互可以展開詳情信息的面板對其余信息進行查看。需要注意的是，當有雙級面板時應當注意詳情面板的展開關閉與面板的展開收起做交互方式的區分，避免用戶產生困惑。如下圖所示，我們可以通過點擊第一級的信息展開詳情面板，點擊詳情面板右上角關閉，面板的收起是對兩級面板的統一收起。

2. 頁面元素尺寸

在 B 端場景中部分用戶的電腦默認按照 150%顯示，這使得在小屏電腦上設計的面板變得過大會導致地圖展示區域過小，因此，頁面元素尺寸的規范有助于適配不同分辨率的屏幕，特別是最小分辨率設備，保證信息易讀。通過行業實踐經驗、競品要素尺寸對比分析以及結合實際的使用場景，我們對頁面要素尺寸進行了界定：

對于單級信息面板：

單塊信息面板的寬度比例在頁面整體寬度的 25%-30%之間，地圖區域在頁面整體寬度的 50-55%之間，根據場景適當留大地圖區域，不建議地圖區域小于 50%。

對于兩級信息面板：

（1）每級面板的寬度比例在頁面整體寬度的 25%-30%之間，兩級面板的總寬度占頁面整體寬度的 50%以內

（2）地圖區域寬度占頁面整體寬度的 50%以上，根據場景適當留大地圖區域，不建議地圖區域小于 50%

3. 地圖下鉆

在我們實際業務場景中，除了連續性縮放地圖底圖場景，我們還存在著特殊業務場景，例如當前我們的網點是按區域-戰區-片區-營業部多級劃分的，因此用戶想要下鉆到某一特定層級地圖頁面時，例如海淀片區，就很難通過連續縮放下鉆的方式快速觸達，而且實現某一特定層級的快速切換也是不易的。梳理地圖下鉆場景下用戶的需求，我們發現有以下幾點：

1. 滿足用戶常規或特定層級的下鉆/上卷訴求；
2. 明確告訴用戶當前所處的“層級位置”；
3. 可以讓用戶快捷切換其他地區；

對于下鉆上卷需求，我們規范了兩種交互以滿足不同場景需要，

（1）常規的以鼠標滾輪、縮放按鈕或觸控手勢為主的連續性下鉆交互：

1. 鼠標滾輪操作：滾輪向上滑動可從鼠標中心點放大地圖；滾輪向下滑動可從鼠標中心點縮小地圖。
2. 觸控板操作：雙指捏合或同時向上移動縮小地圖，雙指擴張或同時向下移動放大地圖。
3. 頁面按鈕：點擊地圖右下角「+-」按鈕，可從屏幕中心點位置整體放大縮小。

（2）通過點擊交互實現的層級式下鉆和上卷：

1. 對于地圖底圖的信息呈現上我們進行了視覺降噪，可以使用戶聚焦視線在核心區域；
2. 各層級圍欄進行明確劃分，當鼠標 hover 到某一區域時，該區域會高亮凸顯出來，點擊該區域就可以下鉆，點擊邊界圍欄外的空白區域就可以上卷；
3. 除此之外，為了用戶可以知道自己所處的位置和快速切換其他區域，我們將面包屑和選擇器進行了結合優化，輔助用戶快速導航。

五、總結反思/設計要點

在進行地圖規范定義過程中，除了對設計過程進行把控和沉淀，我們也要關注規范設計完成后的效果監控，實現完整設計閉環。

（1）持續跟進規范使用效果

設計規范是不斷迭代生長的，它會隨著業務場景的變化而逐漸優化完整，因此，我們完成設計規范的定義僅僅是階段性成果，我們還需要階段性的回顧規范，遇到規范未能覆蓋或無法指導設計的地方，可以展開新一輪的提煉、總結、沉淀，再反哺規范，形成正向循環促使設計和規范不斷完善。

（2）關注文檔使用便捷性

我們輸出設計規范是為了保證產品設計的一致性，同時也是為設計師提供設計工具和指導，提高設計效率，因此在輸出設計規范文檔時還需要考慮設計師使用文檔的便捷性，即如何讓設計師可以快速從文檔中找到并且使用需要的內容。

（3）降本提效

當我們完成了設計規范定義后，可以和研發側溝通，將常用組件封裝成標準組件。這一步是非常關鍵也是重要的一步，這將大大提高我們后續的組件復用率，保證設計還原度，降低重復性走查的耗時。