B 端的一些業(yè)務(wù)場(chǎng)景中常會(huì)使用地圖元素來展示信息，但是 B 端的頁面情況較為復(fù)雜多變，與 C 端的百度地圖等使用場(chǎng)景以及業(yè)務(wù)具有一定的差異性。在工作中，我們對(duì)于地圖頁面的布局、交互統(tǒng)一性上的研究還是較少，所以我進(jìn)行了業(yè)務(wù)場(chǎng)景下的列表與地圖的關(guān)系的設(shè)計(jì)沉淀。

常規(guī)地圖樣式

地圖作為一種將地理信息以二維的手段展示的圖像。日常紙質(zhì)地圖常常會(huì)分為兩個(gè)模塊：地圖信息、列表信息。對(duì)于現(xiàn) web 端的產(chǎn)品，地圖也保留兩者的信息區(qū)域并進(jìn)行不同的布局排布，如百度地圖等。針對(duì) web 端的產(chǎn)品，因?yàn)橛薪换バ问降某霈F(xiàn)，所以在地圖上會(huì)存在更多的信息展示。

地圖信息：

• 地理信息： 以可視化手段、數(shù)理的方式將地理信息處理后的信息。
• 打點(diǎn)地址：打點(diǎn)在地圖上的位置分布，其可看作一個(gè)基于地理信息的可視化方式。
• 在圖上顯示點(diǎn)位的信息。

列表信息：

• 打點(diǎn)列表主要信息：運(yùn)用列表的形式展示打點(diǎn)的初步信息。
• 打點(diǎn)的詳情信息：針對(duì)打點(diǎn)有再次下鉆的能力，來顯示單個(gè)打點(diǎn)的詳情信息。

現(xiàn)業(yè)務(wù)中常見地圖設(shè)計(jì)

針對(duì)現(xiàn)在工作、學(xué)習(xí)過程中遇到過的具有地圖元素的業(yè)務(wù)，我進(jìn)行了整理并總結(jié)出了一些不同場(chǎng)景下存在情況以及現(xiàn)業(yè)務(wù)階段存在的問題。

首先我總結(jié)了列表的信息與地圖信息的關(guān)系，一共為三種不同的情況。

• 一對(duì)一：列表與點(diǎn)位一對(duì)一的映射
• 點(diǎn)位內(nèi)容范圍大于列表內(nèi)容
• 列表內(nèi)容范圍大于點(diǎn)位內(nèi)容

隨后，我針對(duì)打點(diǎn)詳情信息的復(fù)雜度進(jìn)行了三種程度的區(qū)分：簡(jiǎn)單；復(fù)雜；極復(fù)雜（較少）

最后，我走查線上業(yè)務(wù)版本發(fā)現(xiàn)了一些現(xiàn)地圖元素的一些問題。

1. 排版不統(tǒng)一

針對(duì)地圖的兩種布局，使用較為隨意，并沒有規(guī)定其合適的場(chǎng)景使用不同的排版形式。

2. 功能入口的交互不統(tǒng)一

針對(duì)于地圖上的列表，常有功能有定位、查看詳情，以及一些特殊場(chǎng)景下的特殊功能入口。然而，這些功能其入口常常不統(tǒng)一，點(diǎn)擊列表，有時(shí)承載的是查看詳情，有時(shí)是地圖定位、甚者點(diǎn)擊卡片不承載任何功能入口。

3. 地圖打點(diǎn)與列表的對(duì)應(yīng)混亂

有時(shí)地圖上會(huì)存在多個(gè)列表的情況下，從而導(dǎo)致列表信息與地圖上打點(diǎn)信息對(duì)應(yīng)的混亂，這樣會(huì)讓用戶感到信息的不明確。

根據(jù)以上存在的問題以及情況，我們總結(jié)了兩點(diǎn)設(shè)計(jì)原則，針對(duì)地圖模塊進(jìn)行了修改與推進(jìn)。

• 清晰簡(jiǎn)潔：保證整體頁面層級(jí)的清晰；地圖信息的簡(jiǎn)潔，確保地圖信息最大限度的展示。
• 對(duì)應(yīng)明確：明確點(diǎn)位信息與列表信息的對(duì)應(yīng)關(guān)系。

地圖中排版以及交互邏輯

地圖中常包含了四類元素：列表：主要信息、地圖、地圖打點(diǎn)、打點(diǎn)的詳情信息。

針對(duì)以上問題，我們從三個(gè)點(diǎn)進(jìn)行了整理分析：列表的交互形式、地圖與列表的整體布局、地圖打點(diǎn)的詳情信息。

列表交互：針對(duì)地圖列表，點(diǎn)擊列表的主要交互操作分為三種

• 地圖定位
• 查看詳情
• 定位+詳情

地圖布局：為了清晰整體的地圖層級(jí)，我們將列表與地圖分為了兩種不同的形式

• 以地圖為底的列表浮層結(jié)構(gòu)
• 列表與地圖的左右結(jié)構(gòu)

并且，根據(jù)整體的布局結(jié)構(gòu)，我們將這兩種布局形式中包含的隱形的邏輯從而進(jìn)行了區(qū)分，將地圖與列表進(jìn)行了主從關(guān)系的分配。針對(duì)于第一種形式，地圖為底，列表作為具有陰影的第二層結(jié)構(gòu)，其包含了隱形的地圖為主、列表為從的邏輯形式；

而針對(duì)列表與地圖的左右排布結(jié)構(gòu)而言，因?yàn)閮烧咛幱谕浼?jí)別的元素，更具左右、上下的閱讀習(xí)慣，其包含了列表為主、地圖為從的邏輯形式。

而后，根據(jù)整體布局的邏輯形式，我們將上文總結(jié)的三種不同業(yè)務(wù)場(chǎng)景進(jìn)行了分配，并提出了使用建議。

針對(duì)于地圖（主）/列表（從）的布局情況：

• 使用場(chǎng)景：適用于地圖點(diǎn)位內(nèi)容范圍大于列表內(nèi)容。
• 列表交互：推薦點(diǎn)擊單個(gè)列表首要交互為定位功能。

針對(duì)列表（主）/地圖（從）的布局情況：

• 使用場(chǎng)景：適用于列表內(nèi)容范圍大于地圖點(diǎn)位內(nèi)容。
• 列表交互：推薦點(diǎn)擊單個(gè)列表首要交互為 詳情功能。

打點(diǎn)的詳情信息：上文我們根據(jù)打點(diǎn)的詳情信息分成了三類：

• 簡(jiǎn)單
• 復(fù)雜
• 極復(fù)雜

針對(duì)這三種情況，我們提出了三種情況下使用的交互形式。

對(duì)于簡(jiǎn)單的信息來說，可以推薦使用氣泡彈窗的形式；針對(duì)復(fù)雜的信息展示嘗試用右側(cè)抽屜的形式以及替換當(dāng)前列表；針對(duì)極復(fù)雜的場(chǎng)景如需要展示畫布或者列表的話可以考慮底部抽屜的展示形式。

針對(duì)氣泡彈窗以及右側(cè)抽屜，我們也提出簡(jiǎn)單的使用建議。

氣泡彈窗：

• 用于信息復(fù)雜度較低的場(chǎng)景，以簡(jiǎn)潔地圖信息，保證完善展示。
• 不應(yīng)該在小氣泡中承載過多的信息，以滾動(dòng)、切換等呈現(xiàn)。

右側(cè)抽屜：

• 用于信息復(fù)雜度較高的場(chǎng)景。
• 建議在 列表（主）/地圖（從）的布局中使用
• 不建議在地圖（主）/列表（從）的布局中使用：此布局下需要保證圖中僅有一個(gè)與地圖所對(duì)應(yīng)的列表(利用 icon 區(qū)分等形式)，并且此布局下地圖點(diǎn)位數(shù)據(jù)會(huì)較多，若兩個(gè)層級(jí)的點(diǎn)位同時(shí)顯示會(huì)造成干擾。
• 若需要進(jìn)行對(duì)于詳情信息的編輯，建議使用蒙層；若需要使用地圖，建議隱藏主列表，以保證復(fù)雜表單的輸入過程保持專注。

小結(jié)

最后，根據(jù)上述總結(jié)的內(nèi)容，我繪制了一張表格簡(jiǎn)單的流程圖供大家快速的參考。以上結(jié)論，僅僅是一個(gè)初步的總結(jié)，對(duì)于更加的細(xì)節(jié)的點(diǎn)還需要繼續(xù)進(jìn)行研究迭代，例如簡(jiǎn)單于復(fù)雜的界限等。

文章來源：優(yōu)設(shè)  作者：土撥鼠

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)