手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

整理原創(chuàng)寫系列欣賞之-淺析數(shù)字時代地圖設(shè)計

2022-12-13    資深UI設(shè)計者

引言

如今人們出行都離不開手機,都通過手機接觸過互聯(lián)網(wǎng)地圖,手機地圖憑借著可手勢直觀操作、地圖可快速迭代、信息可實時更新的優(yōu)勢,形成了成熟的地圖交互體驗。在解析手機地圖的體驗設(shè)計前,讓我們先看看地圖的發(fā)展歷程。

一、地圖的發(fā)展

地圖擁有著古老的歷史,記錄了人類對世界認知的演進過程,經(jīng)歷過泥板、壁畫、羊皮、紙張等載體,依據(jù)使用和文化需要擁有著豐富多樣的美術(shù)形式。不同時期、材質(zhì)、美術(shù)形式的地圖見證人們認識世界的過程。

隨著照相機和飛機的發(fā)展,出現(xiàn)了航空攝影測量技術(shù),讓地圖的測繪精準度達到頂峰。交通、旅游、印刷業(yè)的發(fā)展,讓紙媒地圖開始融入人們的生活,地圖的平面設(shè)計更是百花齊放,有具體也有抽象,讓地圖兼顧功能、美感、有趣。

再隨著衛(wèi)星影像、瓦片地圖技術(shù)和互聯(lián)網(wǎng)的發(fā)展,人們可以日常地使用電子地圖。受限于網(wǎng)絡(luò)速度的限制,矢量地圖應(yīng)運而生,在特定范圍顯示相應(yīng)的矢量瓦片信息,讓互聯(lián)網(wǎng)地圖的形狀趨向統(tǒng)一化。

iPhone革命性的觸屏體驗,通過手勢與地圖進行直觀自然的交互體驗,結(jié)合內(nèi)置GPS、陀螺儀傳感器,小藍點成為地圖定位的通用標志,激發(fā)更多地圖的功能和創(chuàng)意。

二、手機地圖的創(chuàng)新體驗

手機地圖繼承了互聯(lián)網(wǎng)電子地圖的可快速迭代、信息可實時更新的優(yōu)勢,結(jié)合觸屏手勢操作后,大大的提升了地圖展示信息的維度。電子地圖從工具逐步被引入到各種垂類服務(wù)和社交娛樂中,這些場景也不斷豐富和完善著地圖的信息。

手勢交互讓地圖從移動到縮放都高效地動起來,激勵人們探索更廣的區(qū)域。更革命性的是讓地圖從平面到立體之間的順滑轉(zhuǎn)換,幫助人們更好的映射到真實世界。

可視化信息是互聯(lián)網(wǎng)地圖的主要優(yōu)勢之一,將數(shù)據(jù)轉(zhuǎn)化為可視化圖形,歸類在不同的數(shù)據(jù)層,可以單個或多個層級疊加在地圖上展示,傳達位置上的數(shù)據(jù)。

底圖是手機地圖的基礎(chǔ),通常就是地圖本身,它承托著上面的可視化信息。隨著地圖可更自由地縮放,地圖本身的內(nèi)容不斷細化和歸類,在不同的縮放層級下,展示符合用戶查看場景的核心內(nèi)容。

三、手勢交互:全方位呈現(xiàn)地圖立面

觸屏手勢交互有別于搖桿、鼠標、觸控筆等物理外設(shè)的控制方式,讓用戶在小小的屏幕對大范圍的地圖有更隨心所欲的操作,讓原本受矢量圖形限制的地圖有了更多層次、更豐富立面的信息呈現(xiàn)方式。

單指拖動

拖動是地圖最基本的閱讀操作,一般以用戶的定位為初始中心點,用戶可以有目的有方向地查看附近的地點。

單指劃動

當用戶想快速翻閱時會撥走要略過的內(nèi)容,劃動模擬了這一行為。地圖被劃動后也會模擬物理世界以一定的摩擦力停下,向用戶展示地圖的新區(qū)域,是比拖動要快速的瀏覽方式。

雙指拖動縮放

物理控件只能讓地圖根據(jù)屏幕中心進行縮放,而觸屏縮放能讓地圖根據(jù)兩個指尖的中心點縮放,并同時位移,符合用戶空間操控認知。

雙指劃動縮放

劃動縮放和劃動一樣,讓用戶以更輕量的手勢加速的縮放地圖,并以一定的摩擦力減速停止,讓用戶快速找到目標位置。

單指快捷縮放

為了讓用戶能單手并可控地縮放地圖,不少地圖都設(shè)計了自己獨有的縮放方式。 zenly,通過屏幕兩側(cè)的邊緣,直接完成地圖的最大和最小縮放跨度。

snapchat拖動右側(cè)邊可緣喚起縮放滑塊,并使用emoji來表達距離,充滿幽默感。

騰訊地圖,通過劃動右側(cè)的滑塊,實現(xiàn)單手順滑地縮放,滑塊也支持劃動手勢。

百度地圖,通過點擊一個縮放控件,讓地圖以當前中心點進行分段縮放。

無限循環(huán)的地圖

地球是圓的,可以無限巡航,一些應(yīng)用將縮到最小的世界地圖做循環(huán)處理,以呼應(yīng)地球的循環(huán)轉(zhuǎn)動體驗。

方向視角切換

在陌生的環(huán)境用戶未必能分得清楚南北方向,利用手機的陀螺儀,可以告知用戶正在面向的方向。定位按鈕的二次點擊,將地圖從南北向轉(zhuǎn)到用戶面向的方向,有助于用戶二次確認自己的定位。

更多地圖使用了2D/3D視角的切換方式,2D是南北向的標準地圖,3D是用戶面向方向的地圖,幫助用戶更直觀地對應(yīng)物理空間。

旋轉(zhuǎn)方向

可通過雙指或陀螺儀旋轉(zhuǎn)地圖,地圖上的文字也做出相應(yīng)調(diào)整,保持水平、沿道路方向調(diào)整,以保證可讀性。

3D的旋轉(zhuǎn)也一樣,在保持水平和沿道路方向的同時,文字保持垂直。

當縮小到足夠遠時,用戶面向的方向意義就不大了,蘋果在縮小到一定范圍時,將地圖回彈保持南北向。

雙指拖動調(diào)整視角

地圖3D視角也支持自由調(diào)節(jié),通過雙指平行的上下滑動,可以平順調(diào)整3D視圖鳥瞰的角度。

在地圖的最低視角做回彈處理,生動不呆板。

遠近也能影響鳥瞰的視角變化,視角越低越接近平視,拉進時有俯沖的感覺。

四、可視化信息:生動呈現(xiàn)地圖動態(tài)數(shù)據(jù)

從古代開始,人們就已經(jīng)懂得通過繪制山脈、河流、海洋、建筑等對重要位置信息進行標記,地圖本身就是一個信息可視化工具。 互聯(lián)網(wǎng)地圖最大的優(yōu)勢,就是能提供實時的信息數(shù)據(jù)。將數(shù)據(jù)標記在相應(yīng)位置的坐標上,并分別歸類在不同的層級,疊加在地圖上查看。

地圖的常用數(shù)據(jù)形式可大致分為:點、線、面、熱力圖等,一個地圖可同時喚起多種類型、多個圖層的信息內(nèi)容。

點數(shù)據(jù)

點數(shù)據(jù)是單個地理坐標上的標記,代表該位置上的信息,是地圖上最常用的數(shù)據(jù)信息。地圖通過不同的小圖標來區(qū)分位置類型,使用頻率越高的樣式越簡潔,地標建筑做形象化圖形標識。

聚合圖在地圖上呈現(xiàn)也是點數(shù)據(jù),它實質(zhì)是顯示一定區(qū)域內(nèi)的信息聚合,但不強調(diào)具體的區(qū)域。聚合圖可以避免因為該區(qū)域的點數(shù)據(jù)過多,在地圖上信息過于密集。

百度的充電樁地圖就是以區(qū)域聚合充電樁數(shù)量,根據(jù)縮放調(diào)整數(shù)據(jù)的聚合。

騰訊地圖的文博地圖也是聚合圖,并根據(jù)文物的類型做了快速篩選。

線數(shù)據(jù)

線數(shù)據(jù)在地圖上呈現(xiàn)為線性,一般都沿著可行道路展示信息。導(dǎo)航路線是最常用的線數(shù)據(jù),它提供具體行駛路線方案,并實時展示線路行駛的進度與方向。

也有粗略表示進度的線路數(shù)據(jù),如快遞的物流進度路線就不需要具體的實際線路,只需要示意大致進程。

街景地圖則僅展示有全景圖的道路范圍,不提供進度與方向。

面數(shù)據(jù)

面數(shù)據(jù)要展示地圖上的具體區(qū)域,疫情環(huán)境下出現(xiàn)了區(qū)域風(fēng)控需求,需通過了面數(shù)據(jù)畫出區(qū)域范圍。疫情地圖采用了聚合圖、面區(qū)塊兩種數(shù)據(jù)形式。

zenly使用了反向的面數(shù)據(jù),根據(jù)用戶的行走記錄,將用戶走過的范圍擦亮,用戶未走過的地方是一塊彩色的平面,充滿娛樂感。

熱力圖

熱力圖以特殊的高亮梯度顯示地圖上區(qū)域的熱度,熱力圖的數(shù)據(jù)不會指向地圖上具體的位置,它能呈現(xiàn)熱度變化的趨勢。百度地圖用熱力圖直觀展示地區(qū)上的擁擠程度。

高德地圖的空氣質(zhì)量地圖,使用聚合圖作為空氣質(zhì)量評分,熱力圖作為空氣質(zhì)量范圍。

snapchat使用熱力圖來表現(xiàn)該區(qū)域用戶發(fā)布動態(tài)的熱度,引導(dǎo)用戶發(fā)現(xiàn)內(nèi)容,由于熱力圖不指向具體位置,能更好的保護用戶隱私。

熱力圖并不局限于面,路線也可以反映道路的熱度。Strava利用用戶的騎行數(shù)據(jù),生成光點線路的熱力圖,可以看出哪些是熱門的騎行線路和必經(jīng)地點。

路況也是一種線性的熱力圖,路況使用按段測量的方式,熱力值的梯度相對跳躍。

讓數(shù)據(jù)動起來

地圖是安靜的,但真實世界是忙碌的,讓數(shù)據(jù)動起來,給地圖增添更多情感化設(shè)計,緩解用戶的等待壓力。

忙碌的商家

外賣小哥端午節(jié)雨中送餐

公交努力奔來

五、底圖:為更好呈現(xiàn)信息的色彩系統(tǒng)

手機地圖的底圖最常使用矢量瓦片地圖,因為數(shù)據(jù)體積小,在互聯(lián)網(wǎng)環(huán)境下讀取速度快。矢量地圖用幾何圖形來表達區(qū)域,不展示具體細節(jié),因此需要通過顏色去傳達不同區(qū)域的屬性或功能。

人們對于顏色和環(huán)境是能建立一定的聯(lián)想的,如綠色想到大自然,藍色想到水,紅色想到警示。根據(jù)人們對色彩的聯(lián)想,給矢量地圖中不同屬性的區(qū)域進行配色,幫助用戶理解地圖。谷歌地圖就曾經(jīng)為不同類型的信息標記出700多種顏色,最后簡化為25個顏色,形成了地圖的色彩系統(tǒng)。

工具類地圖應(yīng)用以地圖為核心基礎(chǔ),對矢量圖形有最全面的歸類,因而擁有最豐富的配色系統(tǒng)。由于人們對區(qū)域功能的顏色聯(lián)想是相似的,各地圖廠商的標準地圖的配色都很接近。地圖用色素雅,才能讓多個顏色能和諧的同時存在,降低用戶的視覺疲勞,并能突出地圖上的信息圖層,讓用戶聚焦所關(guān)心的數(shù)據(jù)。

而一些垂直場景的應(yīng)用,地圖區(qū)域功能的描述相對次要,通常會對地圖的用色進行大幅度精簡。以打車應(yīng)用為例,地圖用色少且色調(diào)相近,突出核心的打車狀態(tài)信息顏色,同時體現(xiàn)應(yīng)用的品牌特色。

不少運用地圖的概念設(shè)計中,會更極致的使用單色系地圖,僅突出數(shù)據(jù)信息的顏色,充滿未來感。

六、未來的地圖

隨著網(wǎng)絡(luò)速度的提升,手機硬件的升級,順應(yīng)AR/VR技術(shù)的發(fā)展,地圖逐步進入3D和全真時代。蘋果地圖在現(xiàn)有的地圖的3D視圖下,已對地標建筑賦予更多細節(jié),并在夜間模式模擬了燈光效果。

3D地圖就像是虛擬世界中的基礎(chǔ)建設(shè)一樣,蘋果地圖添加精細地標模型后,同時應(yīng)用到Carplay的導(dǎo)航中,在駕駛時可直觀看到與現(xiàn)實世界對應(yīng)的3D地標。

谷歌更是提出“沉浸式視圖”的高保真3D地圖,使用圖像還原一座城市的面貌,為瀏覽一座城市提供了幾乎真實的鳥瞰視角。

同時全真模擬日照和天氣系統(tǒng),和現(xiàn)實一樣模擬東升西落的光線方向,模擬晚上和雨天下的城市面貌。

隨著地圖的立體全真化,地圖的數(shù)據(jù)也將向空間延伸。相對全真地圖而言,人們本身就身置真實的地圖場景中,未來借助AR設(shè)備,人們無需對照地圖即可完成導(dǎo)航。

結(jié)語

地圖歷來是人們借助藝術(shù)的手法,以極具想象力的方式對世界進行再現(xiàn),它遵循科學(xué)測量的法則,使用幾何的線條和形狀對地球的進行抽象化。地圖反映了制作者對世界的認知,而現(xiàn)代的科學(xué)技術(shù)讓地圖呈現(xiàn)盡可能客觀。但地圖并非單純地呈現(xiàn)地球,而是呈現(xiàn)人們眼中的世界,它寄托著人們對美好生活的想象,更好的認識、探索和規(guī)劃世界。

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。 

作者:騰訊ISUX團隊    來源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍藍設(shè)計www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司                         

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.88yangsc.com

存檔