藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.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ù)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

來源：優(yōu)設(shè)網(wǎng)

多數(shù)時(shí)候，我們?cè)?a href="http://m.sillybuy.com/web.html" target="_blank">網(wǎng)頁(yè)中看到的地圖，都是用百度/谷歌地圖來顯示公司、機(jī)構(gòu)或者店鋪的地理位置。然而，地圖在網(wǎng)頁(yè)中的使用真的就只能這么單調(diào)么？

加入一點(diǎn)想象力，添加一些技術(shù)支持，你會(huì)發(fā)現(xiàn)地圖可以讓整個(gè)網(wǎng)頁(yè)的逼格拔高不止一個(gè)層次！

將原始的、額外加入的地圖元素轉(zhuǎn)化成極具吸引力和視覺沖擊力的組成部分，需要進(jìn)行相當(dāng)程度的調(diào)整，加入和互動(dòng)元素：微妙的動(dòng)效、基于多媒體的工具、動(dòng)態(tài)指針、扁平化的風(fēng)格、Lowpoly風(fēng)的插畫、現(xiàn)代風(fēng)的線條圖標(biāo)，甚至是略顯古怪的草圖也能讓地圖煥發(fā)出生命力。

描述太過抽象？不妨看看腦洞大開的設(shè)計(jì)師們是怎樣“改造”網(wǎng)頁(yè)中的地圖的吧！

Rolex Awards 2014

設(shè)計(jì)師使用色彩明亮的點(diǎn)和線搭建出一幅優(yōu)雅而細(xì)膩的世界地圖，它不僅以不同尋常的方式展現(xiàn)出五名年輕的夢(mèng)想家，而且以一種優(yōu)雅的方式營(yíng)造出品牌獨(dú)特的風(fēng)格和氛圍。

TFI World Map

和上一個(gè)案例頗為相似，設(shè)計(jì)師用小圓點(diǎn)優(yōu)雅地搭建出世界地圖，灰白的色調(diào)看起來雅致而時(shí)尚。用戶頭像在地圖的映襯下成為視覺重心，一點(diǎn)違和感都沒有。

Sailing Seas of Plastic

這個(gè)網(wǎng)頁(yè)反映的是塑料在全球各地的分布情況，明暗對(duì)比鮮明的世界地圖巧妙地揭示了問題的嚴(yán)重性。

Cost of Living

想知道哪個(gè)歐洲國(guó)家的首都生活成本最合理，最令人舒適么？試著探索一下這個(gè)項(xiàng)目吧，在地圖上點(diǎn)擊這些國(guó)家的首都，你會(huì)清晰地看到哪些成本高昂，哪些經(jīng)濟(jì)實(shí)惠。

Alfoart Photo Travel

如果你熱衷于參觀名勝古跡，那么這個(gè)項(xiàng)目就是為你量身定制的。復(fù)古的地圖樣式，精雕細(xì)琢的經(jīng)典圖標(biāo)，充滿活力而漂亮的地標(biāo)，完美的互動(dòng)性和豐富的信息整合在一起，你一定不要錯(cuò)過。

Deutschland

在Google的支持之下，你可以借助這個(gè)網(wǎng)站對(duì)德國(guó)進(jìn)行更深入的了解。這個(gè)使用彩色地標(biāo)的互動(dòng)式地圖為你展現(xiàn)了25個(gè)不同主題的內(nèi)容，你可以以任何語(yǔ)言參與到其中的討論。

Beyond the Track

Beyond the Track 是一個(gè)有趣而又實(shí)用的網(wǎng)站，它以一種更為引人入勝的方式展現(xiàn)了世界摩托車大賽冠軍賽的相關(guān)信息，并提供了相關(guān)服務(wù)。你可以在這里查看比賽的五大賽道，相關(guān)的統(tǒng)計(jì)數(shù)據(jù)，周邊的文化經(jīng)典，住宿信息，等等等等。

Galapagos

這個(gè)網(wǎng)站的團(tuán)隊(duì)專注于尋找更富有活力的三位互動(dòng)地圖的創(chuàng)意解決方案。通過HTML5來驅(qū)動(dòng)多邊形圖形，以精巧別致的地圖展現(xiàn)出Galapagos的獨(dú)特風(fēng)景。

Everyday Moments

Everyday Moments 是一個(gè)交互可視化的網(wǎng)站，展示關(guān)于英國(guó)和愛爾蘭的一些日常的推文。設(shè)計(jì)師采用了柔和的色調(diào)，微妙的圖形和賞心悅目的動(dòng)效，其中地圖的設(shè)計(jì)最是抓人眼球。

Dangerous Roads

借助街景技術(shù)，這個(gè)網(wǎng)站的開發(fā)團(tuán)隊(duì)成功地呈現(xiàn)了世界上最危險(xiǎn)的道路。雖然地圖的插畫僅僅只是在開頭“歡迎”環(huán)節(jié)展示了一下，但是整個(gè)項(xiàng)目是基于這個(gè)地形來構(gòu)建的。

Windward

打開網(wǎng)站，沉靜的藍(lán)色世界地圖美得令人窒息。僅僅只是調(diào)整了顏色，稍加修改，就這個(gè)簡(jiǎn)單。

Wellesley

壯麗的美洲俯瞰圖和大標(biāo)題組合在一起，簡(jiǎn)單但精致。

Svenska Kyrkans Internationella Arbete

整個(gè)網(wǎng)站基于一幅精心定制、點(diǎn)綴許多可交互的地標(biāo)的地圖，而網(wǎng)站內(nèi)容旨在通過照片展現(xiàn)人們?cè)馐艿母鞣N災(zāi)難。

Oil Spills in the Beaufort Sea

正如同標(biāo)題所說，這個(gè)網(wǎng)站試圖引導(dǎo)用戶關(guān)注海上石油管道泄漏所造成的惡劣影響和可能的解決方案。更重要的是，它是一個(gè)復(fù)雜而多功能的項(xiàng)目，你可以添加圖層，針對(duì)特定領(lǐng)域進(jìn)行探索。

Get the Look

這是一套的矢量地圖，額外的導(dǎo)航菜單被放置在底部，紅色的區(qū)域象征著項(xiàng)目所支持的國(guó)家。

Give Holland

Give Holland 這個(gè)網(wǎng)站使用了半寫實(shí)的地圖來展現(xiàn)那些壯觀的圖片，為用戶提供了一種純粹的樂趣。

Explorez

Explorez la legend 是一個(gè)網(wǎng)頁(yè)游戲，3D地球是整個(gè)游戲最關(guān)鍵的因素。

Anywayanyday

Anywayanyday 是一個(gè)受歡迎的票務(wù)預(yù)訂服務(wù)，線條勾勒的世界地圖是它的加載動(dòng)畫，看起來頗為不錯(cuò)。

Ferias para Curtir

網(wǎng)站使用了漂亮的卡通式的地圖插畫，與整個(gè)網(wǎng)站風(fēng)格非常協(xié)調(diào)。

Grano Armando

網(wǎng)頁(yè)在菜單大圖標(biāo)中使用了優(yōu)雅而標(biāo)識(shí)清楚的意大利地圖，復(fù)古風(fēng)的網(wǎng)頁(yè)中，這樣的圖標(biāo)使用顯得非常有范兒，不僅展現(xiàn)了店面的覆蓋范圍，還雅致地展現(xiàn)出品牌氣質(zhì)。

Lotr Project

很高興能看到指環(huán)王的粉絲為自己喜歡的電影設(shè)計(jì)網(wǎng)站。設(shè)計(jì)者制作了可交互的中土世界地圖，你可以借此查看相關(guān)的人物、事件和地方。

結(jié)語(yǔ)

可交互的地圖通常使用HTML5和JS來實(shí)現(xiàn)這些功能，確保用戶體驗(yàn)的同時(shí)，還為信息的展現(xiàn)提供了更多的可能性。