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

常規(guī)地圖樣式

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

地圖信息：

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

列表信息：

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

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

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

首先我總結了列表的信息與地圖信息的關系，一共為三種不同的情況。

• 一對一：列表與點位一對一的映射
• 點位內容范圍大于列表內容
• 列表內容范圍大于點位內容

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

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

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

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

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

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

3. 地圖打點與列表的對應混亂

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

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

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

地圖中排版以及交互邏輯

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

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

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

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

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

• 以地圖為底的列表浮層結構
• 列表與地圖的左右結構

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

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

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

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

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

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

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

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

• 簡單
• 復雜
• 極復雜

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

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

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

氣泡彈窗：

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

右側抽屜：

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

小結

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

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

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