系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

2020-10-23    資深UI設(shè)計(jì)者

今天為大家?guī)淼奈恼率恰傅貓D標(biāo)簽」設(shè)計(jì)。很多App會(huì)內(nèi)嵌地圖功能,這些地圖的功能相對(duì)簡單,更多是起到查看和引導(dǎo)的作用,但在產(chǎn)品中又不可或缺~

除了常見的地圖類App,還有其他很多產(chǎn)品會(huì)根據(jù)使用需求嵌入地圖功能,通過在地圖頁中添加引導(dǎo)性的交互標(biāo)簽,讓用戶了解所處的位置或者導(dǎo)航路線。

如何保持地圖頁面與產(chǎn)品風(fēng)格統(tǒng)一,同時(shí)又方便用戶使用呢?通過系統(tǒng)化的方法可以快速實(shí)現(xiàn)地圖組件的選擇和歸類。

地圖組件的四種類型

1. 圖標(biāo)

地圖上只標(biāo)記圖標(biāo),這種呈現(xiàn)方式能地顯示地圖上的信息,減少內(nèi)容遮擋,也是在設(shè)計(jì)中首先要考慮的類型。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

2. 文本

如果地圖上標(biāo)記的內(nèi)容沒有合適的圖標(biāo)能展示出來,可以直接利用文本來描述。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

3. 圖標(biāo)和文本

隨著地圖的放大縮小,氣泡信息的詳細(xì)程度也會(huì)發(fā)生變化。地圖放大時(shí)將圖標(biāo)和文本相結(jié)合可以顯示更多的信息,而縮小時(shí)只顯示圖標(biāo)。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

4. 圖標(biāo)、文本和注釋

圖標(biāo),文本和注釋相結(jié)合的形式雖然能顯示更多的信息但是需要謹(jǐn)慎使用,因?yàn)闅馀莸某叽缣髸?huì)遮擋地圖的內(nèi)容,反而影響使用。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

只有當(dāng)氣泡內(nèi)容能顯著提升用戶體驗(yàn)時(shí),才使用這種類型。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

地圖組件的視覺樣式

大多數(shù)場(chǎng)景中,地圖組件的底部會(huì)有一個(gè)突出的箭頭,用來標(biāo)記確切的信息或地址。

考慮到后期開發(fā)的難度,箭頭的位置應(yīng)始終位于組件的中間。另外如果一個(gè)頁面中有多個(gè)地圖組件,可以將箭頭調(diào)整到頂部,防止發(fā)生重疊。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

1. 顏色

組件的顏色比較靈活,默認(rèn)情況下是白色,但可以通過改變背景色來匹配品牌色。

顏色通常出現(xiàn)在圖標(biāo)后面用來強(qiáng)調(diào)信息,如果沒有圖標(biāo)可以把整個(gè)氣泡組件都填充上顏色。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

根據(jù)背景色的不同,文本和圖標(biāo)盡可能使用黑色或白色,減少對(duì)內(nèi)容的干擾。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

2. 狀態(tài)

地圖氣泡尺寸的大小根據(jù)點(diǎn)擊需求確定。白色輪廓加上膠囊形狀讓用戶能夠快速識(shí)別出可點(diǎn)擊的對(duì)象,選定后氣泡顏色會(huì)反轉(zhuǎn)。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

3. 內(nèi)容縮放

組件基于地圖縮放級(jí)別和縮放速度展示不一樣的動(dòng)畫效果。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

組件可用性指南

如何判斷設(shè)計(jì)出來的組件是否適合用戶使用?組件需要怎樣設(shè)計(jì)才能適用于不同的使用場(chǎng)景中,有沒有統(tǒng)一的規(guī)范?

1. 組件狀態(tài)

面對(duì)不同場(chǎng)景中的組件,提供多種狀態(tài):重疊、可見、收縮、聚類、分離。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

2. 密度

地圖中至少要保持40%的內(nèi)容是始終可見的,這樣用戶可以明確位置信息,防止產(chǎn)生誤操作行為。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

利用聚類功能將相鄰的氣泡組件合并在一起,通過數(shù)字顯示包含的內(nèi)容,這種形式利于用戶理解和操作。

3. 易讀性

易讀性在地圖中很重要,例如用戶手持使用手機(jī)時(shí)組件中的字體為15pt,當(dāng)用戶駕駛導(dǎo)航時(shí)組件的字體會(huì)變?yōu)?4pt。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

另外還要考慮語言的選擇對(duì)組件的影響,最好避免在氣泡組件中使用長串字符,以防止地圖中的信息被遮擋。

簡單實(shí)用!系統(tǒng)化總結(jié)「地圖標(biāo)簽」設(shè)計(jì)

如果必須要顯示長串字符,需要把氣泡組件的尺寸水平拉長至地圖尺寸的75%,然后換行且最多只能顯示兩行文本。

總結(jié):點(diǎn)擊即導(dǎo)航

在開始設(shè)計(jì)地圖UI界面之前,有必要花費(fèi)時(shí)間了解地圖組件的樣式、類型和可用性指南。

通過這些信息可以幫助設(shè)計(jì)師更快地確定方向,從而設(shè)計(jì)出清晰美觀的地圖界面。

文章來源:優(yōu)設(shè)    作者:Clip設(shè)計(jì)夾


藍(lán)藍(lán)設(shè)計(jì)m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔