国产短视频精品一区二区三区_怡春院欧美一区二区三区免费_特级a级毛片_日本女人逼

首頁?>?知識?資訊?>?地圖在現代網頁設計的表現!?>?正文

地圖在現代網頁設計的表現!

2010/4/12 0:00:00 · 稿源:傳誠信

地圖在現代網頁設計的表現!
線上地圖的基礎知識

當大多數人認為在互聯網上,谷歌,MapQuest和TomTom公司可能浮現在腦海中的地圖。這些都是業界的巨頭,但他們是最有創意的遠。這些公司提供服務的地圖。正如你將看到來自各地的這篇文章中,谷歌并不擁有市場功能的映射應用程序。還有為創意地圖創新的空間很大。

這并不是在制圖課,但了解的目的是地圖可服務于現代Web設計是重要的。三個主要領域似乎代表了大部分任務:

  1. 導航和方向,
  2. 地理上的關系和趨勢表明,
  3. 感興趣的展示點。

互動地圖

對Web技術在過去10年擴張,開辟了若干門介紹在線數據。最迅速改善的工具之一是互動演示地圖。

互聯網上的互動式地圖 目前最有效的數據時,他們邀請用戶操作。顯示數據之間的關系是容易當用戶有能力改變視覺效果。這些優勢,傳統印刷的地圖所沒有的。如果打印地圖最初并不清楚,一個人能做的很少做出清醒的認識。隨著網上互動地圖,移動滑塊簡單的動作周圍揭示數據和內容之間的關系。

平移和縮放是基本的交互式地圖。這些行動使用戶能夠專注于他們的信息量很舒服用自己的瀏覽器。

沒有傳說要求

在傳統的印刷地圖,傳說作為符號翻譯服務使用。 語境窗口需要消除對傳說 在許多網上地圖。而不必提及一個在邊緣的象征解釋,用戶只需點擊以了解更多有關這一點。在更少的步驟,減少眼球運動來達到同樣的目的。為了說明這是多么直觀的一種行動已成為網絡用戶,嘗試了“美國最佳探險“下面的地圖:

Points-of-interest-map in Maps In Modern Web Design: Showcase and Examples
單擊一個點帶出了一個上下文窗口。

傳說,還需要在某些情況下。熱圖,例如,通過顏色的深淺強度顯示,用戶通常需要一個參考,使酒吧的信息意識。上下文菜單不作一刀切過時的傳說只是簡單的“興趣點”。

常見類型的地圖導航

比平移和滾動外,還有一個有趣的方式介紹數字地圖上。下面是一些現代的互動中最常見的地圖。請記住,混合和匹配這些方法大多數是可能的;一不一定妨礙他人使用。

當用戶通過移動的數據,航行鉆風格特異各級普遍提供。該鉆清楚組從“大圖片”到一個個別地方程度的信息。

谷歌分析提出了其世界地圖鉆取風格。通過點擊一個特定國家,重新定位自己的地圖靜音其他國家,那么在國家和市級相同的。這允許用戶控制而不被淹沒的數據特異性。

Analytics-drilldown in Maps In Modern Web Design: Showcase and Examples

時間軸

一個時間軸滑塊顯示進度隨著時間的推移在地圖上。滑塊并不一定代表時間本身。其主要目的是顯示滑塊之間的相關性的度量和地圖的內容。

Immigration-timeline in Maps In Modern Web Design: Showcase and Examples

放大

這是從下鉆方法不同,因為與縮放, 地圖通常不會重建或改組各放大級。隨著縮放,地圖信息,可以更仔細地考察,而不是一個較小的區域集中了數據。

某些數據可能要到一定程度的放大倍率達到可見。這樣可以不受細節,都在這個規模不大凌亂的更廣泛的意見。這是一個街道名稱,這是從視圖中隱藏在下面顯示的放大的例子。

Google-maps-zoom in Maps In Modern Web Design: Showcase and Examples

之前和之后

時間線的做法一樣,這一個顯示在同一地點的多個國家。所不同的是,之前與之后的方法只顯示兩個國家。這種風格已經顯示了最近頻繁得多,特別是衛星圖像。

經過最近的海地災害,紐約時報用于從太空拍攝的圖像來創建一個綜合的互動地圖,顯示了破壞。其結果是驚人的 之前和之后插圖地震的太子港破壞

Before-after-haiti in Maps In Modern Web Design: Showcase and Examples

興趣點

在1點利益地圖設計,簡直是把目標區域的背景下降。這使得用戶可以專注于感興趣的有關要點即刻。額外的信息可以傳達的 相對大小的標記,使其 沒有雜亂容易辨別地點之間的關系

Odopod對這個觀點有更進一步的聯系頁面上提供了其辦公室的前照片。找到合適的建設,是現在容易得多。

Odopod-point-interest in Maps In Modern Web Design: Showcase and Examples

地圖作為信息工具

互聯網和信息的數字化代表著一個有趣的改善印刷的地圖。在調查和用戶反饋一起使用,地圖可以成為信息幾乎是實時的代表性。使用這種方法,比較兩個指標并排僅僅是一個理想的選擇范圍的問題。

在國家地理網站上的地圖說明了如何使用互動式地圖可從搜集的數據顯示全球的趨勢。大地的脈搏地圖,例如,有一個側面,它允許用戶顯示數據,如人口信息,肉類消費和毀林菜單。

Natgeo-earthpulse in Maps In Modern Web Design: Showcase and Examples

從政治世界

位置給出上下文時事。這也不奇怪,那么,新聞機構可視化與Web的地圖,一些世界最具創新活動。

也許最沉重的時間映射時期是2008年美國總統選舉。互動式地圖顯示每天創造了選民的意見。任何時候公布的一項民意調查,你可以肯定,一個交互式地圖將很快跟進。由于信息是不斷更新的數據捆綁,靜態圖將在數小時內已成為無關緊要。

在競賽的白熱化, 美國有線電視新聞網發布了一個工具 允許用戶指定票和項目的候選人將最終獲勝。因此,不僅在地圖 提交 信息,而且成為 1產生的信息工具

Cnn-pick-electoral in Maps In Modern Web Design: Showcase and Examples

一旦大選結束后,該國的投票模式被映射為好。更有趣的版本之一,是華盛頓郵報的地圖按縣下來。該地圖用Flash來提供一個360度的選舉趨勢的看法。整個戰役的結果 有效地總結了在一個圖形。

Election-2008-county-map in Maps In Modern Web Design: Showcase and Examples

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

非傳統地圖

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

Good-roadmap-harmony in Maps In Modern Web Design: Showcase and Examples
“路線圖和諧”打破了基于位置的地圖模具。

未來的位置

在我們查看了地圖大部分是物理位置和建筑物。互動地圖的未來將要容納人的作用,也和人有一點要比磚塊和道路移動。

服務,如 四方Gowalla 是要確保 地圖和位置的智能手機用戶日常生活的一部分。 Twitter的是迅速擴大其API,包括位置數據。凡你在任何時刻都具有顯著的影響。這可能會導致網站,收集這些數據,使之成為地圖,顯示它的運動和趨勢。

Twitter-local-trending in Maps In Modern Web Design: Showcase and Examples

從位置映射行動

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

Foursquare-at-sxsw in Maps In Modern Web Design: Showcase and Examples

以人為中心的地圖

只有依靠對GPS定位的建筑物可能很快成為歷史陳跡。我們可能開始看到有一個“尋找我現在在這里”一節中,利用GPS坐標完整網頁設計師接觸網頁?橄欖球運動員 乍得Ochocinco 已經采取了這種互動的水平 整個新的水平。并沒有什么阻止跳機上的一般人,太(隱私問題盡管)。

在Web地圖的設計魅力

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

Explore-innovista in Maps In Modern Web Design: Showcase and Examples
交互式地圖為Innovista,一個南卡羅來納大學的龐大工程的未來發展。

Oxford-inns-map in Maps In Modern Web Design: Showcase and Examples
酒店牛津方面提出在它的位置。

Everyblock-spots in Maps In Modern Web Design: Showcase and Examples
EveryBlock顯示都市報作為點利益標記。

Cuban-council in Maps In Modern Web Design: Showcase and Examples
一個建筑物的位置夸大渲染。

Kni-maps in Maps In Modern Web Design: Showcase and Examples
克尼使用的地圖顯示工作室的地點。

Victoria-star-3d in Maps In Modern Web Design: Showcase and Examples
即使不是也許規模,維星的地圖提供的所有信息,你需要找到該公司。

Arc-inspiration-locations in Maps In Modern Web Design: Showcase and Examples
一個粗略的指南找到酒吧。

Good-wanderlust in Maps In Modern Web Design: Showcase and Examples
這一次探索著名探險的路線。

Teachingjobs-jquery-map in Maps In Modern Web Design: Showcase and Examples
一個開放的學校教師崗位的jQuery供電地圖。

World-warcraft-map in Maps In Modern Web Design: Showcase and Examples
一個虛構的魔獸世界的互動地圖。

建立自己的

展望生成一個項目,您自己的地圖?雖然JavaScript和HTML5的已經走了很長的路, 基于閃存的替代品如 amMaps 還提供用于最強大的互動式繪圖解決方案的一些。幾乎每一個在此文章中提到的地圖可以使用此興建(或類似)系統。

Ammaps-sample in Maps In Modern Web Design: Showcase and Examples

如果你正在尋找一個非Flash替代看,Carsonified最近出版了一大 案例研究使用jQuery的互動映射,這說明這個過程。任何其他基于互聯網的繪圖系統,設計人員那里知道應該知道的?共享一個鏈接在下面的意見。

選擇北京網站建設公司-傳誠信,優質服務,絕對不容錯過 !
1. 優秀的網絡資源,穩定的網站和速度保證?
配送雙線獨立ip空間,國際A級BGP機房,99.5% 的主機在線時間)?
2. 7年北京網站建設經驗,優秀的技術和設計水平,更放心?
3. 全程省心服務,不必擔心自己不懂網絡,更省心。?

-----------------------------------------------------------------------------------------------------
我們的與眾不同之處:

??? 免費網絡營銷顧問:我們為您提供免費的網絡營銷顧問服務,您需要了解關于如何開展網絡營銷,電子商務網站設計等的事宜,歡迎隨時聯系我們。

??? seo友好的網站管理系統:除了優質的網站空間,網站管理系統,和網站設計外,我們的網站管理系統更是seo友好的,包括:自定義欄目名,Google Sitemap自動生成,靜態頁面生成等等,讓您的網站。

???? 免費網絡營銷培訓:如何更好的投放網絡廣告,如何提高網絡廣告的投資回報,如何發帖子,
??? ?如何優化網站,我們有豐富的經驗開放給您!祝君成功!

聯系我們:010-62199213 62122723-808 賈先生
北京網站建設公司-傳誠信網站:nfxjdb.cn?點擊查看經典網站案例

北京傳誠信網站建設2010年建站套餐及優惠!點擊查看!

  • 相關推薦
  • 大家在看
客戶服務
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354