聲明:本文來自于微信公眾號 Clip設計夾（ID:ClipppDesign），作者:Clippp，授權轉載發布。
除了常見的地圖類App，還有其他很多產品會根據使用需求嵌入地圖功能，通過在地圖頁中添加引導性的交互標簽，讓用戶了解所處的位置或者導航路線。
如何保持地圖頁面與產品風格統一，同時又方便用戶使用呢?通過系統化的方法可以快速實現地圖組件的選擇和歸類。
01
地圖組件的四種類型
1.圖標
地圖上只標記圖標，這種呈現方式能最大程度地顯示地圖上的信息，減少內容遮擋，也是在設計中首先要考慮的類型。
2.文本
如果地圖上標記的內容沒有合適的圖標能展示出來，可以直接利用文本來描述。
3.圖標和文本
隨著地圖的放大縮小，氣泡信息的詳細程度也會發生變化。地圖放大時將圖標和文本相結合可以顯示更多的信息，而縮小時只顯示圖標。
4.圖標、文本和注釋
圖標，文本和注釋相結合的形式雖然能顯示更多的信息但是需要謹慎使用，因為氣泡的尺寸太大會遮擋地圖的內容，反而影響使用。
只有當氣泡內容能顯著提升用戶體驗時，才使用這種類型。
02
地圖組件的視覺樣式
大多數場景中，地圖組件的底部會有一個突出的箭頭，用來標記確切的信息或地址。
考慮到后期開發的難度，箭頭的位置應始終位于組件的中間。另外如果一個頁面中有多個地圖組件，可以將箭頭調整到頂部，防止發生重疊。
顏色
組件的顏色比較靈活，默認情況下是白色，但可以通過改變背景色來匹配品牌色。
顏色通常出現在圖標后面用來強調信息，如果沒有圖標可以把整個氣泡組件都填充上顏色。
根據背景色的不同，文本和圖標盡可能使用黑色或白色，減少對內容的干擾。
狀態
地圖氣泡尺寸的大小根據點擊需求確定。白色輪廓加上膠囊形狀讓用戶能夠快速識別出可點擊的對象，選定后氣泡顏色會反轉。
內容縮放
組件基于地圖縮放級別和縮放速度展示不一樣的動畫效果。
03
組件可用性指南
如何判斷設計出來的組件是否適合用戶使用?組件需要怎樣設計才能適用于不同的使用場景中，有沒有統一的規范?
組件狀態
面對不同場景中的組件，提供多種狀態:重疊、可見、收縮、聚類、分離。
密度
地圖中至少要保持40%的內容是始終可見的，這樣用戶可以明確位置信息，防止產生誤操作行為。
利用聚類功能將相鄰的氣泡組件合并在一起，通過數字顯示包含的內容，這種形式利于用戶理解和操作。
易讀性
易讀性在地圖中很重要，例如用戶手持使用手機時組件中的字體為15pt，當用戶駕駛導航時組件的字體會變為24pt。
另外還要考慮語言的選擇對組件的影響，最好避免在氣泡組件中使用長串字符，以防止地圖中的信息被遮擋。
如果必須要顯示長串字符，需要把氣泡組件的尺寸水平拉長至地圖尺寸的75%，然后換行且最多只能顯示兩行文本。
04
總結--點擊即導航
在開始設計地圖UI界面之前，有必要花費時間了解地圖組件的樣式、類型和可用性指南。
通過這些信息可以幫助設計師更快地確定方向，從而設計出清晰美觀的地圖界面。
最后幫大家整理了優秀的地圖UI頁設計。后臺回復: 地圖 即可獲取!
— The End —
原文:medium.com/tap-to-dismiss/tap-to-navigate-f8f21e16cad6
作者:Linzi Berry
譯者:Clippp（文章翻譯已獲得作者的正式授權）
