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

常規(guī)地圖樣式

地圖作為一種將地理信息以二維的手段展示的圖像。日常紙質(zhì)地圖常常會分為兩個模塊：地圖信息、列表信息。對于現(xiàn) web 端的產(chǎn)品，地圖也保留兩者的信息區(qū)域并進(jìn)行不同的布局排布，如百度地圖等。針對 web 端的產(chǎn)品，因為有交互形式的出現(xiàn)，所以在地圖上會存在更多的信息展示。

地圖信息：

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

列表信息：

• 打點列表主要信息：運用列表的形式展示打點的初步信息。
• 打點的詳情信息：針對打點有再次下鉆的能力，來顯示單個打點的詳情信息。

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

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

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

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

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

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

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

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

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

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

3. 地圖打點與列表的對應(yīng)混亂

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

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

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

地圖中排版以及交互邏輯

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

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

列表交互：針對地圖列表，點擊列表的主要交互操作分為三種

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

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

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

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

而針對列表與地圖的左右排布結(jié)構(gòu)而言，因為兩者處于同其級別的元素，更具左右、上下的閱讀習(xí)慣，其包含了列表為主、地圖為從的邏輯形式。

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

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

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

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

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

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

• 簡單
• 復(fù)雜
• 極復(fù)雜

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

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

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

氣泡彈窗：

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

右側(cè)抽屜：

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

小結(jié)

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

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

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