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

一、背景與意義

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

• 產(chǎn)品設(shè)計：保障產(chǎn)品內(nèi)不同模塊的設(shè)計一致性，同時提高不同設(shè)計師間的設(shè)計、協(xié)作效率
• 研發(fā)開發(fā)：通過定義的標(biāo)準(zhǔn)規(guī)范，提高流程、組件的復(fù)用率，提高整體開發(fā)效率
• 用戶使用：讓用戶能夠在產(chǎn)品全局感受到統(tǒng)一且完整的體驗，降低使用成本和學(xué)習(xí)難度

二、洞察與分析

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

1. 現(xiàn)狀及業(yè)務(wù)場景特殊性分析

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

（1）地圖頁面布局

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

（2）頁面要素尺寸

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

（3）地圖底圖下鉆

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

（4）基礎(chǔ)控件與組件

場景的多樣化帶來了基礎(chǔ)控件與組件的升級，如點元素中重合點新場景以及點與面板聯(lián)動交互、線元素中飛線關(guān)系場景、面元素中的多重?zé)崃D等。

2. 競品分析

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

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

通過分析我們得出:

三、洞察與分析

1. 規(guī)范普適性

（1）正向梳理現(xiàn)有產(chǎn)品的設(shè)計形式，抽離相同點

輸出規(guī)范前先梳理各個產(chǎn)品線中的業(yè)務(wù)需求，統(tǒng)計場景類型，找到相同點，其中包括用戶目標(biāo)的相同點、操作的相同點等。此處需要注意的是，規(guī)范定義的是覆蓋面廣、復(fù)用率高的通用場景，因此需要明確規(guī)范的邊界，有的放矢，明確規(guī)范內(nèi)容的優(yōu)先級，而不是事無巨細(xì)。

（2）反向套用設(shè)計規(guī)范至業(yè)務(wù)需求，判斷規(guī)范的適用性

輸出規(guī)范后以現(xiàn)有的業(yè)務(wù)需求為例，看規(guī)范是否能適配需求。

（3）前瞻性設(shè)計，提升規(guī)范的拓展性

進(jìn)行設(shè)計規(guī)范定義時，既要貼合當(dāng)前業(yè)務(wù)場景，覆蓋當(dāng)前場景需要，也需要富有前瞻性，發(fā)掘出可能衍生出的潛在用戶場景和需求，便于后續(xù)更好的復(fù)用和迭代。

2. 界面易用性

（1）優(yōu)化信息架構(gòu)，保證信息易讀性

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

（2）狀態(tài)可感知，防止用戶迷失

用戶與地圖頁面交互時應(yīng)當(dāng)即時展示出當(dāng)前的狀態(tài)，例如正在查看的信息，已經(jīng)篩選的信息等，讓用戶能感知到當(dāng)前處在什么環(huán)節(jié)及什么狀態(tài)中。

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

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

（4）原控件的沿襲，貼近用戶認(rèn)知

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

3. 使用高效性

（1）減少頁面跳轉(zhuǎn)，提升沉浸感

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

（2）減少視線橫跳，關(guān)聯(lián)信息就近展示

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

四、設(shè)計方案

1. 地圖頁面布局

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

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

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

（1）單面板布局

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

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

（2）雙級面板布局

在實際的業(yè)務(wù)場景中避免不了會出現(xiàn)信息較多的場景，此時為了減少頁面的跳轉(zhuǎn)可以采用雙級面板的布局方式。設(shè)計師可以通過對信息架構(gòu)的梳理，將優(yōu)先級較高的信息優(yōu)先在第一級面板上展示出來，其余信息暫時隱藏，用戶通過點擊等交互可以展開詳情信息的面板對其余信息進(jìn)行查看。需要注意的是，當(dāng)有雙級面板時應(yīng)當(dāng)注意詳情面板的展開關(guān)閉與面板的展開收起做交互方式的區(qū)分，避免用戶產(chǎn)生困惑。如下圖所示，我們可以通過點擊第一級的信息展開詳情面板，點擊詳情面板右上角關(guān)閉，面板的收起是對兩級面板的統(tǒng)一收起。

2. 頁面元素尺寸

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

對于單級信息面板：

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

對于兩級信息面板：

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

（2）地圖區(qū)域?qū)挾日柬撁嬲w寬度的 50%以上，根據(jù)場景適當(dāng)留大地圖區(qū)域，不建議地圖區(qū)域小于 50%

3. 地圖下鉆

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

1. 滿足用戶常規(guī)或特定層級的下鉆/上卷訴求；
2. 明確告訴用戶當(dāng)前所處的"層級位置"；
3. 可以讓用戶快捷切換其他地區(qū)；

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

（1）常規(guī)的以鼠標(biāo)滾輪、縮放按鈕或觸控手勢為主的連續(xù)性下鉆交互：

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

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

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

五、總結(jié)反思/設(shè)計要點

在進(jìn)行地圖規(guī)范定義過程中，除了對設(shè)計過程進(jìn)行把控和沉淀，我們也要關(guān)注規(guī)范設(shè)計完成后的效果監(jiān)控，實現(xiàn)完整設(shè)計閉環(huán)。

（1）持續(xù)跟進(jìn)規(guī)范使用效果

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

（2）關(guān)注文檔使用便捷性

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

（3）降本提效

當(dāng)我們完成了設(shè)計規(guī)范定義后，可以和研發(fā)側(cè)溝通，將常用組件封裝成標(biāo)準(zhǔn)組件。這一步是非常關(guān)鍵也是重要的一步，這將大大提高我們后續(xù)的組件復(fù)用率，保證設(shè)計還原度，降低重復(fù)性走查的耗時。

作者：京東JellyDesign