中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：在B端產品中，地圖也是一種常見元素。而B端業務場景中的地圖元素又與C端場景有所不同。本篇文章里，作者就對B端地圖設計進行了一個較為詳細的介紹。如果你也想了解如何設計B端地圖的話，那就一起了解一下吧。

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

一、常規地圖樣式

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

1. 地圖信息

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

2. 列表信息

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

二、現業務中常見地圖設計

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

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

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

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

最后，我走查線上業務版本發現了一些現地圖元素的一些問題。

1）排版不統一

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

2）功能入口的交互不統一

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

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

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

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

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

三、地圖中排版以及交互邏輯

地圖中常包含了四類元素。

• 列表：主要信息
• 地圖
• 地圖打點
• 打點的詳情信息

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

1. 列表交互

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

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

2. 地圖布局

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

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

并且，根據整體的布局結構，我們將這兩種布局形式中包含的隱形的邏輯從而進行了區分，將地圖與列表進行了主從關系的分配。

針對于第一種形式，地圖為底，列表作為具有陰影的第二層結構，其包含了隱形的地圖為主、列表為從的邏輯形式。

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

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

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

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

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

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

3. 打點的詳情信息

上文我們根據打點的詳情信息分成了三類。

• 簡單
• 復雜
• 極復雜

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

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

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

1）氣泡彈窗

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

2）右側抽屜

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

四、小結

最后，根據上述總結的內容，我繪制了一張表格簡單的流程圖供大家快速的參考。

以上結論，僅僅是一個初步的總結，對于更加細節的點還需要繼續進行研究迭代，例如簡單與復雜的界限等。

作者：Y.h

原文鏈接：https://www.uisdc.com/b-side-map-design

本文由 @Y.h 授權發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議