地圖在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)的表現(xiàn)！

地圖在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)的表現(xiàn)！
線上地圖的基礎(chǔ)知識(shí)

當(dāng)大多數(shù)人認(rèn)為在互聯(lián)網(wǎng)上，谷歌，MapQuest和TomTom公司可能浮現(xiàn)在腦海中的地圖。這些都是業(yè)界的巨頭，但他們是最有創(chuàng)意的遠(yuǎn)。這些公司提供服務(wù)的地圖。正如你將看到來自各地的這篇文章中，谷歌并不擁有市場(chǎng)功能的映射應(yīng)用程序。還有為創(chuàng)意地圖創(chuàng)新的空間很大。

這并不是在制圖課，但了解的目的是地圖可服務(wù)于現(xiàn)代Web設(shè)計(jì)是重要的。三個(gè)主要領(lǐng)域似乎代表了大部分任務(wù)：

1. 導(dǎo)航和方向，
2. 地理上的關(guān)系和趨勢(shì)表明，
3. 感興趣的展示點(diǎn)。

互動(dòng)地圖

對(duì)Web技術(shù)在過去10年擴(kuò)張，開辟了若干門介紹在線數(shù)據(jù)。最迅速改善的工具之一是互動(dòng)演示地圖。

互聯(lián)網(wǎng)上的互動(dòng)式地圖 目前最有效的數(shù)據(jù)時(shí)，他們邀請(qǐng)用戶操作。顯示數(shù)據(jù)之間的關(guān)系是容易當(dāng)用戶有能力改變視覺效果。這些優(yōu)勢(shì)，傳統(tǒng)印刷的地圖所沒有的。如果打印地圖最初并不清楚，一個(gè)人能做的很少做出清醒的認(rèn)識(shí)。隨著網(wǎng)上互動(dòng)地圖，移動(dòng)滑塊簡(jiǎn)單的動(dòng)作周圍揭示數(shù)據(jù)和內(nèi)容之間的關(guān)系。

平移和縮放是基本的交互式地圖。這些行動(dòng)使用戶能夠?qū)Ｗ⒂谒麄兊男畔⒘亢苁娣米约旱臑g覽器。

沒有傳說要求

在傳統(tǒng)的印刷地圖，傳說作為符號(hào)翻譯服務(wù)使用。 語境窗口需要消除對(duì)傳說 在許多網(wǎng)上地圖。而不必提及一個(gè)在邊緣的象征解釋，用戶只需點(diǎn)擊以了解更多有關(guān)這一點(diǎn)。在更少的步驟，減少眼球運(yùn)動(dòng)來達(dá)到同樣的目的。為了說明這是多么直觀的一種行動(dòng)已成為網(wǎng)絡(luò)用戶，嘗試了“美國(guó)最佳探險(xiǎn)“下面的地圖：

單擊一個(gè)點(diǎn)帶出了一個(gè)上下文窗口。

傳說，還需要在某些情況下。熱圖，例如，通過顏色的深淺強(qiáng)度顯示，用戶通常需要一個(gè)參考，使酒吧的信息意識(shí)。上下文菜單不作一刀切過時(shí)的傳說只是簡(jiǎn)單的“興趣點(diǎn)”。

常見類型的地圖導(dǎo)航

比平移和滾動(dòng)外，還有一個(gè)有趣的方式介紹數(shù)字地圖上。下面是一些現(xiàn)代的互動(dòng)中最常見的地圖。請(qǐng)記住，混合和匹配這些方法大多數(shù)是可能的;一不一定妨礙他人使用。

鉆

當(dāng)用戶通過移動(dòng)的數(shù)據(jù)，航行鉆風(fēng)格特異各級(jí)普遍提供。該鉆清楚組從“大圖片”到一個(gè)個(gè)別地方程度的信息。

谷歌分析提出了其世界地圖鉆取風(fēng)格。通過點(diǎn)擊一個(gè)特定國(guó)家，重新定位自己的地圖靜音其他國(guó)家，那么在國(guó)家和市級(jí)相同的。這允許用戶控制而不被淹沒的數(shù)據(jù)特異性。

時(shí)間軸

一個(gè)時(shí)間軸滑塊顯示進(jìn)度隨著時(shí)間的推移在地圖上?；瑝K并不一定代表時(shí)間本身。其主要目的是顯示滑塊之間的相關(guān)性的度量和地圖的內(nèi)容。

放大

這是從下鉆方法不同，因?yàn)榕c縮放， 地圖通常不會(huì)重建或改組各放大級(jí)。隨著縮放，地圖信息，可以更仔細(xì)地考察，而不是一個(gè)較小的區(qū)域集中了數(shù)據(jù)。

某些數(shù)據(jù)可能要到一定程度的放大倍率達(dá)到可見。這樣可以不受細(xì)節(jié)，都在這個(gè)規(guī)模不大凌亂的更廣泛的意見。這是一個(gè)街道名稱，這是從視圖中隱藏在下面顯示的放大的例子。

之前和之后

時(shí)間線的做法一樣，這一個(gè)顯示在同一地點(diǎn)的多個(gè)國(guó)家。所不同的是，之前與之后的方法只顯示兩個(gè)國(guó)家。這種風(fēng)格已經(jīng)顯示了最近頻繁得多，特別是衛(wèi)星圖像。

經(jīng)過最近的海地災(zāi)害，紐約時(shí)報(bào)用于從太空拍攝的圖像來創(chuàng)建一個(gè)綜合的互動(dòng)地圖，顯示了破壞。其結(jié)果是驚人的 之前和之后插圖地震的太子港破壞。

興趣點(diǎn)

在1點(diǎn)利益地圖設(shè)計(jì)，簡(jiǎn)直是把目標(biāo)區(qū)域的背景下降。這使得用戶可以專注于感興趣的有關(guān)要點(diǎn)即刻。額外的信息可以傳達(dá)的 相對(duì)大小的標(biāo)記，使其 沒有雜亂容易辨別地點(diǎn)之間的關(guān)系。

Odopod對(duì)這個(gè)觀點(diǎn)有更進(jìn)一步的聯(lián)系頁(yè)面上提供了其辦公室的前照片。找到合適的建設(shè)，是現(xiàn)在容易得多。

地圖作為信息工具

互聯(lián)網(wǎng)和信息的數(shù)字化代表著一個(gè)有趣的改善印刷的地圖。在調(diào)查和用戶反饋一起使用，地圖可以成為信息幾乎是實(shí)時(shí)的代表性。使用這種方法，比較兩個(gè)指標(biāo)并排僅僅是一個(gè)理想的選擇范圍的問題。

在國(guó)家地理網(wǎng)站上的地圖說明了如何使用互動(dòng)式地圖可從搜集的數(shù)據(jù)顯示全球的趨勢(shì)。大地的脈搏地圖，例如，有一個(gè)側(cè)面，它允許用戶顯示數(shù)據(jù)，如人口信息，肉類消費(fèi)和毀林菜單。

從政治世界

位置給出上下文時(shí)事。這也不奇怪，那么，新聞機(jī)構(gòu)可視化與Web的地圖，一些世界最具創(chuàng)新活動(dòng)。

也許最沉重的時(shí)間映射時(shí)期是2008年美國(guó)總統(tǒng)選舉。互動(dòng)式地圖顯示每天創(chuàng)造了選民的意見。任何時(shí)候公布的一項(xiàng)民意調(diào)查，你可以肯定，一個(gè)交互式地圖將很快跟進(jìn)。由于信息是不斷更新的數(shù)據(jù)捆綁，靜態(tài)圖將在數(shù)小時(shí)內(nèi)已成為無關(guān)緊要。

在競(jìng)賽的白熱化， 美國(guó)有線電視新聞網(wǎng)發(fā)布了一個(gè)工具 允許用戶指定票和項(xiàng)目的候選人將最終獲勝。因此，不僅在地圖 提交 信息，而且成為 1產(chǎn)生的信息工具。

一旦大選結(jié)束后，該國(guó)的投票模式被映射為好。更有趣的版本之一，是華盛頓郵報(bào)的地圖按縣下來。該地圖用Flash來提供一個(gè)360度的選舉趨勢(shì)的看法。整個(gè)戰(zhàn)役的結(jié)果 有效地總結(jié)了在一個(gè)圖形。

這是地圖往往重疊（甚至成為）資訊圖像。所不同的是在演示和設(shè)計(jì)。在華盛頓郵報(bào)的地圖， 這些資料是直接與某一特定地區(qū)。這些數(shù)據(jù)，然后，將只適用于它在收集范圍內(nèi)。一位30歲的女性選民在加州不是作為一個(gè)30歲的紐約女性選民一樣。

非傳統(tǒng)地圖

雖然這篇文章中的地圖大多數(shù)是物理位置，不要覺得你必須堅(jiān)持這一點(diǎn)。 地理圖是不是那里的地圖只有一種。 地圖也可以用來研究更多抽象的信息，而不是像 靜態(tài)資訊圖像。良好的說明了這與它的“和諧路線圖“文稿。其結(jié)果是既符合邏輯和鼓舞地創(chuàng)造性。

“路線圖和諧”打破了基于位置的地圖模具。

未來的位置

在我們查看了地圖大部分是物理位置和建筑物?；?dòng)地圖的未來將要容納人的作用，也和人有一點(diǎn)要比磚塊和道路移動(dòng)。

服務(wù)，如 四方 和 Gowalla 是要確保 地圖和位置的智能手機(jī)用戶日常生活的一部分。 Twitter的是迅速擴(kuò)大其API，包括位置數(shù)據(jù)。凡你在任何時(shí)刻都具有顯著的影響。這可能會(huì)導(dǎo)致網(wǎng)站，收集這些數(shù)據(jù)，使之成為地圖，顯示它的運(yùn)動(dòng)和趨勢(shì)。

從位置映射行動(dòng)

想想有多少人在今年檢查的SXSWi會(huì)議研究。整個(gè)會(huì)議的參加者是映射到基于位置的徽章感謝。這不僅僅是對(duì)個(gè)人偶爾更新其位置，它是一個(gè)示范如何 整個(gè)事件的“個(gè)性”，可以映射根據(jù)其參與者的行動(dòng)。有了這么多的參加者在每個(gè)事件檢查，數(shù)據(jù)可以被用于從飲食習(xí)慣，以決定一切的小組的興趣。

以人為中心的地圖

只有依靠對(duì)GPS定位的建筑物可能很快成為歷史陳跡。我們可能開始看到有一個(gè)“尋找我現(xiàn)在在這里”一節(jié)中，利用GPS坐標(biāo)完整網(wǎng)頁(yè)設(shè)計(jì)師接觸網(wǎng)頁(yè)？橄欖球運(yùn)動(dòng)員 乍得Ochocinco 已經(jīng)采取了這種互動(dòng)的水平 整個(gè)新的水平。并沒有什么阻止跳機(jī)上的一般人，太（隱私問題盡管）。

在Web地圖的設(shè)計(jì)魅力

我們已經(jīng)覆蓋了許多基礎(chǔ)知識(shí)今天。下面編譯的魅力 更多的例子地圖為你的靈感。由于 塔模式 為使所設(shè)計(jì)元素相對(duì)無痛的（盡管它尚未有地圖節(jié)尋找的過程）。在下面的例子很多都是從那里清理和其他地點(diǎn)。

交互式地圖為Innovista，一個(gè)南卡羅來納大學(xué)的龐大工程的未來發(fā)展。

酒店牛津方面提出在它的位置。

EveryBlock顯示都市報(bào)作為點(diǎn)利益標(biāo)記。

一個(gè)建筑物的位置夸大渲染。

克尼使用的地圖顯示工作室的地點(diǎn)。

即使不是也許規(guī)模，維星的地圖提供的所有信息，你需要找到該公司。

一個(gè)粗略的指南找到酒吧。

這一次探索著名探險(xiǎn)的路線。

一個(gè)開放的學(xué)校教師崗位的jQuery供電地圖。

一個(gè)虛構(gòu)的魔獸世界的互動(dòng)地圖。

建立自己的

展望生成一個(gè)項(xiàng)目，您自己的地圖？雖然JavaScript和HTML5的已經(jīng)走了很長(zhǎng)的路， 基于閃存的替代品如 amMaps 還提供用于最強(qiáng)大的互動(dòng)式繪圖解決方案的一些。幾乎每一個(gè)在此文章中提到的地圖可以使用此興建（或類似）系統(tǒng)。

如果你正在尋找一個(gè)非Flash替代看，Carsonified最近出版了一大 案例研究使用jQuery的互動(dòng)映射，這說明這個(gè)過程。任何其他基于互聯(lián)網(wǎng)的繪圖系統(tǒng)，設(shè)計(jì)人員那里知道應(yīng)該知道的？共享一個(gè)鏈接在下面的意見。