Facebook加入
LINE加入
2021/12/25
20款巧用地圖元素的優秀網頁設計欣賞
這一次的作品是屬於設計欣賞領域中的網頁設計的相關作品。
文章出處是來自優設的設計欣賞類文章，作品的作者是陳子木，感謝陳子木提供網頁設計的作品範例。
作品大綱:
多數時候，我們在網頁中看到的地圖，都是用百度/谷歌地圖來顯示公司、機構或者店鋪的地理位置。然而，地圖在網頁中的使用真的就只能這麼單調么？
網頁設計作品欣賞
多數時候，我們在網頁中看到的地圖，都是用百度/谷歌地圖來顯示公司、機構或者店鋪的地理位置。然而，地圖在網頁中的使用真的就只能這麼單調么？
加入一點想象力，添加一些技術支持，你會發現地圖可以讓整個網頁的逼格拔高不止一個層次。
將原始的、額外加入的地圖元素轉化成極具吸引力和視覺衝擊力的組成部分，需要進行相當程度的調整，加入特效和互動元素：微妙的動效、基於多媒體的工具、動態指針、扁平化的風格、Lowpoly風的插畫、現代風的線條圖標，甚至是略顯古怪的草圖也能讓地圖煥發出生命力。
描述太過抽象，不妨看看腦洞大開的設計師們是怎樣“改造”網頁中的地圖的吧。
Rolex Awards 2014
設計師使用色彩明亮的點和線搭建出一幅優雅而細膩的世界地圖，它不僅以不同尋常的方式展現出五名年輕的夢想家，而且以一種優雅的方式營造出品牌獨特的風格和氛圍。
TFI World Map
和上一個案例頗為相似，設計師用小圓點優雅地搭建出世界地圖，灰白的色調看起來雅緻而時尚。用戶頭像在地圖的映襯下成為視覺重心，一點違和感都沒有。
Sailing Seas of Plastic
這個網頁反映的是塑料在全球各地的分佈情況，明暗對比鮮明的世界地圖巧妙地揭示了問題的嚴重性。
Cost of Living
想知道哪個歐洲國家的首都生活成本最合理，最令人舒適么?試着探索一下這個項目吧，在地圖上點擊這些國家的首都，你會清晰地看到哪些成本高昂，哪些經濟實惠。
Alfoart Photo Travel
如果你熱衷於參觀名勝古迹，那麼這個項目就是為你量身定製的。復古的地圖樣式，精雕細琢的經典圖標，充滿活力而漂亮的地標，完美的互動性和豐富的信息整合在一起，你一定不要錯過。
Deutschland
在Google的支持之下，你可以藉助這個網站對德國進行更深入的了解。這個使用彩色地標的互動式地圖為你展現了25個不同主題的內容，你可以以任何語言參與到其中的討論。
Beyond the Track
Beyond the Track 是一個有趣而又實用的網站，它以一種更為引人入勝的方式展現了世界摩托車大賽冠軍賽的相關信息，並提供了相關服務。你可以在這裡查看比賽的五大賽道，相關的統計數據，周邊的文化經典，住宿信息，等等等等。
Galapagos
這個網站的團隊專註於尋找更富有活力的三位互動地圖的創意解決方案。通過HTML5來驅動多邊形圖形，以精巧別緻的地圖展現出Galapagos的獨特風景。
Everyday Moments
Everyday Moments 是一個交互可視化的網站，展示關於英國和愛爾蘭的一些日常的推文。設計師採用了柔和的色調，微妙的圖形和賞心悅目的動效，其中地圖的設計最是抓人眼球。
Dangerous Roads
藉助街景技術，這個網站的開發團隊成功地呈現了世界上最危險的道路。雖然地圖的插畫僅僅只是在開頭“歡迎”環節展示了一下，但是整個項目是基於這個地形來構建的。
Windward
打開網站，沉靜的藍色世界地圖美得令人窒息。僅僅只是調整了顏色，稍加修改，就這個簡單。
Wellesley
壯麗的美洲俯瞰圖和大標題組合在一起，簡單但精緻。
Svenska Kyrkans Internationella Arbete
整個網站基於一幅精心定製、點綴許多可交互的地標的地圖，而網站內容旨在通過照片展現人們遭受的各種災難。
Oil Spills in the Beaufort Sea
正如同標題所說，這個網站試圖引導用戶關注海上石油管道泄漏所造成的惡劣影響和可能的解決方案。更重要的是，它是一個複雜而多功能的項目，你可以添加圖層，針對特定領域進行探索。
Get the Look
這是一套精確的矢量地圖，額外的導航菜單被放置在底部，紅色的區域象徵著項目所支持的國家。
Give Holland
Give Holland 這個網站使用了半寫實的地圖來展現那些壯觀的圖片，為用戶提供了一種純粹的樂趣。
Explorez
Explorez la legend 是一個網頁遊戲，3D地球是整個遊戲最關鍵的因素。
Anywayanyday
Anywayanyday 是一個受歡迎的票務預訂服務，線條勾勒的世界地圖是它的加載動畫，看起來頗為不錯。
Ferias para Curtir
網站使用了漂亮的卡通式的地圖插畫，與整個網站風格非常協調。
Grano Armando
網頁在菜單大圖標中使用了優雅而標識清楚的意大利地圖，復古風的網頁中，這樣的圖標使用顯得非常有范兒，不僅展現了店面的覆蓋範圍，還雅緻地展現出品牌氣質。
Lotr Project
很高興能看到指環王的粉絲為自己喜歡的電影設計網站。設計者製作了可交互的中土世界地圖，你可以藉此查看相關的人物、事件和地方。
結語
可交互的地圖通常使用HTML5和JS來實現這些功能，確保用戶體驗的同時，還為信息的展現提供了更多的可能性。
–本文轉載自 http://www.missyuan.net 教學網 —
熱門推薦
留言回覆
