一、地圖組件的四種類型
地圖上只標(biāo)記圖標(biāo)，這種呈現(xiàn)方式能最大程度地顯示地圖上的信息，減少內(nèi)容遮擋，也是在設(shè)計(jì)中首先要考慮的類型。
如果地圖上標(biāo)記的內(nèi)容沒(méi)有合適的圖標(biāo)能展示出來(lái)，可以直接利用文本來(lái)描述。
隨著地圖的放大縮小，氣泡信息的詳細(xì)程度也會(huì)發(fā)生變化。地圖放大時(shí)將圖標(biāo)和文本相結(jié)合可以顯示更多的信息，而縮小時(shí)只顯示圖標(biāo)。
圖標(biāo)，文本和注釋相結(jié)合的形式雖然能顯示更多的信息但是需要謹(jǐn)慎使用，因?yàn)闅馀莸某叽缣髸?huì)遮擋地圖的內(nèi)容，反而影響使用。
只有當(dāng)氣泡內(nèi)容能顯著提升用戶體驗(yàn)時(shí)，才使用這種類型。
二、地圖組件的視覺(jué)樣式
大多數(shù)場(chǎng)景中，地圖組件的底部會(huì)有一個(gè)突出的箭頭，用來(lái)標(biāo)記確切的信息或地址。考慮到后期開發(fā)的難度，箭頭的位置應(yīng)始終位于組件的中間。另外如果一個(gè)頁(yè)面中有多個(gè)地圖組件，可以將箭頭調(diào)整到頂部，防止發(fā)生重疊。
1、顏色
組件的顏色比較靈活，默認(rèn)情況下是白色，但可以通過(guò)改變背景色來(lái)匹配品牌色。顏色通常出現(xiàn)在圖標(biāo)后面用來(lái)強(qiáng)調(diào)信息，如果沒(méi)有圖標(biāo)可以把整個(gè)氣泡組件都填充上顏色。
根據(jù)背景色的不同，文本和圖標(biāo)盡可能使用黑色或白色，減少對(duì)內(nèi)容的干擾。地圖氣泡尺寸的大小根據(jù)點(diǎn)擊需求確定。白色輪廓加上膠囊形狀讓用戶能夠快速識(shí)別出可點(diǎn)擊的對(duì)象，選定后氣泡顏色會(huì)反轉(zhuǎn)。
組件基于地圖縮放級(jí)別和縮放速度展示不一樣的動(dòng)畫效果。
三、組件可用性指南
如何判斷設(shè)計(jì)出來(lái)的組件是否適合用戶使用？組件需要怎樣設(shè)計(jì)才能適用于不同的使用場(chǎng)景中，有沒(méi)有統(tǒng)一的規(guī)范？面對(duì)不同場(chǎng)景中的組件，提供多種狀態(tài)：重疊、可見、收縮、聚類、分離。
2、密度
地圖中至少要保持40%的內(nèi)容是始終可見的，這樣用戶可以明確位置信息，防止產(chǎn)生誤操作行為。
利用聚類功能將相鄰的氣泡組件合并在一起，通過(guò)數(shù)字顯示包含的內(nèi)容，這種形式利于用戶理解和操作。
易讀性在地圖中很重要，例如用戶手持使用手機(jī)時(shí)組件中的字體為15pt，當(dāng)用戶駕駛導(dǎo)航時(shí)組件的字體會(huì)變?yōu)?4pt。
另外還要考慮語(yǔ)言的選擇對(duì)組件的影響，最好避免在氣泡組件中使用長(zhǎng)串字符，以防止地圖中的信息被遮擋。
如果必須要顯示長(zhǎng)串字符，需要把氣泡組件的尺寸水平拉長(zhǎng)至地圖尺寸的75%，然后換行且最多只能顯示兩行文本。
四、總結(jié)–點(diǎn)擊即導(dǎo)航
在開始設(shè)計(jì)地圖UI界面之前，有必要花費(fèi)時(shí)間了解地圖組件的樣式、類型和可用性指南。通過(guò)這些信息可以幫助設(shè)計(jì)師更快地確定方向，從而設(shè)計(jì)出清晰美觀的地圖界面。
原文地址：Medium
譯文地址：Clip設(shè)計(jì)夾（公眾號(hào)）
作者：Linzi Berry
譯者：Clippp
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》簡(jiǎn)單實(shí)用！系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.jjddy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
