2020-10-23 資深UI設(shè)計者
今天為大家?guī)淼奈恼率恰傅貓D標(biāo)簽」設(shè)計。很多App會內(nèi)嵌地圖功能，這些地圖的功能相對簡單，更多是起到查看和引導(dǎo)的作用，但在產(chǎn)品中又不可或缺～
除了常見的地圖類App，還有其他很多產(chǎn)品會根據(jù)使用需求嵌入地圖功能，通過在地圖頁中添加引導(dǎo)性的交互標(biāo)簽，讓用戶了解所處的位置或者導(dǎo)航路線。
如何保持地圖頁面與產(chǎn)品風(fēng)格統(tǒng)一，同時又方便用戶使用呢？通過系統(tǒng)化的方法可以快速實現(xiàn)地圖組件的選擇和歸類。
1. 圖標(biāo)
地圖上只標(biāo)記圖標(biāo)，這種呈現(xiàn)方式能地顯示地圖上的信息，減少內(nèi)容遮擋，也是在設(shè)計中首先要考慮的類型。
2. 文本
如果地圖上標(biāo)記的內(nèi)容沒有合適的圖標(biāo)能展示出來，可以直接利用文本來描述。
3. 圖標(biāo)和文本
隨著地圖的放大縮小，氣泡信息的詳細(xì)程度也會發(fā)生變化。地圖放大時將圖標(biāo)和文本相結(jié)合可以顯示更多的信息，而縮小時只顯示圖標(biāo)。
4. 圖標(biāo)、文本和注釋
圖標(biāo)，文本和注釋相結(jié)合的形式雖然能顯示更多的信息但是需要謹(jǐn)慎使用，因為氣泡的尺寸太大會遮擋地圖的內(nèi)容，反而影響使用。
只有當(dāng)氣泡內(nèi)容能顯著提升用戶體驗時，才使用這種類型。
大多數(shù)場景中，地圖組件的底部會有一個突出的箭頭，用來標(biāo)記確切的信息或地址。
考慮到后期開發(fā)的難度，箭頭的位置應(yīng)始終位于組件的中間。另外如果一個頁面中有多個地圖組件，可以將箭頭調(diào)整到頂部，防止發(fā)生重疊。
1. 顏色
組件的顏色比較靈活，默認(rèn)情況下是白色，但可以通過改變背景色來匹配品牌色。
顏色通常出現(xiàn)在圖標(biāo)后面用來強調(diào)信息，如果沒有圖標(biāo)可以把整個氣泡組件都填充上顏色。
根據(jù)背景色的不同，文本和圖標(biāo)盡可能使用黑色或白色，減少對內(nèi)容的干擾。
2. 狀態(tài)
地圖氣泡尺寸的大小根據(jù)點擊需求確定。白色輪廓加上膠囊形狀讓用戶能夠快速識別出可點擊的對象，選定后氣泡顏色會反轉(zhuǎn)。
3. 內(nèi)容縮放
組件基于地圖縮放級別和縮放速度展示不一樣的動畫效果。
如何判斷設(shè)計出來的組件是否適合用戶使用？組件需要怎樣設(shè)計才能適用于不同的使用場景中，有沒有統(tǒng)一的規(guī)范？
1. 組件狀態(tài)
面對不同場景中的組件，提供多種狀態(tài)：重疊、可見、收縮、聚類、分離。
2. 密度
地圖中至少要保持40%的內(nèi)容是始終可見的，這樣用戶可以明確位置信息，防止產(chǎn)生誤操作行為。
利用聚類功能將相鄰的氣泡組件合并在一起，通過數(shù)字顯示包含的內(nèi)容，這種形式利于用戶理解和操作。
3. 易讀性
易讀性在地圖中很重要，例如用戶手持使用手機時組件中的字體為15pt，當(dāng)用戶駕駛導(dǎo)航時組件的字體會變?yōu)?4pt。
另外還要考慮語言的選擇對組件的影響，最好避免在氣泡組件中使用長串字符，以防止地圖中的信息被遮擋。
如果必須要顯示長串字符，需要把氣泡組件的尺寸水平拉長至地圖尺寸的75%，然后換行且最多只能顯示兩行文本。
在開始設(shè)計地圖UI界面之前，有必要花費時間了解地圖組件的樣式、類型和可用性指南。
通過這些信息可以幫助設(shè)計師更快地確定方向，從而設(shè)計出清晰美觀的地圖界面。
文章來源：優(yōu)設(shè) 作者：Clip設(shè)計夾
藍(lán)藍(lán)設(shè)計( www.gyxygd.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.gyxygd.cn