2021-4-14 資深UI設計者
B 端的一些業務場景中常會使用地圖元素來展示信息，但是 B 端的頁面情況較為復雜多變，與 C 端的百度地圖等使用場景以及業務具有一定的差異性。在工作中，我們對于地圖頁面的布局、交互統一性上的研究還是較少，所以我進行了業務場景下的列表與地圖的關系的設計沉淀。
地圖作為一種將地理信息以二維的手段展示的圖像。日常紙質地圖常常會分為兩個模塊：地圖信息、列表信息。對于現 web 端的產品，地圖也保留兩者的信息區域并進行不同的布局排布，如百度地圖等。針對 web 端的產品，因為有交互形式的出現，所以在地圖上會存在更多的信息展示。
地圖信息：
列表信息：
針對現在工作、學習過程中遇到過的具有地圖元素的業務，我進行了整理并總結出了一些不同場景下存在情況以及現業務階段存在的問題。
首先我總結了列表的信息與地圖信息的關系，一共為三種不同的情況。
隨后，我針對打點詳情信息的復雜度進行了三種程度的區分：簡單；復雜；極復雜（較少）
最后，我走查線上業務版本發現了一些現地圖元素的一些問題。
1. 排版不統一
針對地圖的兩種布局，使用較為隨意，并沒有規定其合適的場景使用不同的排版形式。
2. 功能入口的交互不統一
針對于地圖上的列表，常有功能有定位、查看詳情，以及一些特殊場景下的特殊功能入口。然而，這些功能其入口常常不統一，點擊列表，有時承載的是查看詳情，有時是地圖定位、甚者點擊卡片不承載任何功能入口。
3. 地圖打點與列表的對應混亂
有時地圖上會存在多個列表的情況下，從而導致列表信息與地圖上打點信息對應的混亂，這樣會讓用戶感到信息的不明確。
根據以上存在的問題以及情況，我們總結了兩點設計原則，針對地圖模塊進行了修改與推進。
地圖中常包含了四類元素：列表：主要信息、地圖、地圖打點、打點的詳情信息。
針對以上問題，我們從三個點進行了整理分析：列表的交互形式、地圖與列表的整體布局、地圖打點的詳情信息。
列表交互：針對地圖列表，點擊列表的主要交互操作分為三種
地圖布局：為了清晰整體的地圖層級，我們將列表與地圖分為了兩種不同的形式
并且，根據整體的布局結構，我們將這兩種布局形式中包含的隱形的邏輯從而進行了區分，將地圖與列表進行了主從關系的分配。針對于第一種形式，地圖為底，列表作為具有陰影的第二層結構，其包含了隱形的地圖為主、列表為從的邏輯形式；
而針對列表與地圖的左右排布結構而言，因為兩者處于同其級別的元素，更具左右、上下的閱讀習慣，其包含了列表為主、地圖為從的邏輯形式。
而后，根據整體布局的邏輯形式，我們將上文總結的三種不同業務場景進行了分配，并提出了使用建議。
針對于地圖（主）/列表（從）的布局情況：
針對列表（主）/地圖（從）的布局情況：
打點的詳情信息：上文我們根據打點的詳情信息分成了三類：
針對這三種情況，我們提出了三種情況下使用的交互形式。
對于簡單的信息來說，可以推薦使用氣泡彈窗的形式；針對復雜的信息展示嘗試用右側抽屜的形式以及替換當前列表；針對極復雜的場景如需要展示畫布或者列表的話可以考慮底部抽屜的展示形式。
針對氣泡彈窗以及右側抽屜，我們也提出簡單的使用建議。
氣泡彈窗：
右側抽屜：
最后，根據上述總結的內容，我繪制了一張表格簡單的流程圖供大家快速的參考。以上結論，僅僅是一個初步的總結，對于更加的細節的點還需要繼續進行研究迭代，例如簡單于復雜的界限等。
文章來源：優設 作者：土撥鼠
藍藍設計( m.paul-jarrel.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
