地圖上的設計

 　　網絡使我們脫離現實世界。實際上，每個網站都是用一套抽象的概念作為我們交流和表達的工具。任何時刻,網站可以被任意一個新式的版本所覆蓋或直接消失掉。我想這就是為什麼那麼多的人渴望創造一個產品,寫一本書或與互聯網的東西打交道。我們需要與物質世界保持聯系並證明(如果只有我們自己)我們是在做真實的事情。

　　我可以繼續搞網絡，挑戰去寫一本書,或者思考我們如何處理真實所需的東西。然而，我將要去探索物質世界和網站都有直接關系的事物——地圖。

　　地圖不僅是個圖表,它具有打開和制定的意義;它形成這裡與那裡，搭建不同想法的橋梁，即便我們並不知道以前是如何連接的。

　　Reif Larsen, The Selected Worksof T.S. Spivet

　　網站上最簡單的地圖形式就是用於顯示具體的位置以及到達的方向。這是一個讓人難以置信的強大工具。那麼,為什麼這麼多網站都恰有一個默認的谷歌地圖卻不用呢?你會在每個網站上都使用深灰色的Helvetica字體嗎?個性何在?定制體驗何在?設計何在?

　　進入設計

　　保持簡單——我們都想成為更好的互聯網人員,而不是地圖制作者。我們不需要研究歷史,數學和制作地圖技術(盡管這些都是非常有趣的研究領域)。出於理智,我將要掩蓋一些技術區域而專注於實際的概念。

　　Tiles

　　如果你曾經注意到地圖的加載部分,這是因為它使用Tiles,一種單獨下載,而不是要求用戶下載他們可能需要的一切。這些Tiles有多種風格並可用於大部分區域，例如基礎地圖和數據。你已經見過可選擇性基礎地圖的例子了，當你使用谷歌地圖時,谷歌提供了衛星圖像和道路地圖,這兩種基礎地圖的形式。他們是用來提供現實世界的環境,或世界任意一個角落的位置。

　　Tiles是物質的表現;它沒有提供環境的逼真畫面。這意味著你可以設計地圖本身。最簡單的方法是設想對比谷歌的路線圖與陸地測量部路的路線圖。這兩個地圖的一切都是不同的：顏色，標簽字體和使用符號。但是都提供同樣精准的環境信息(其他地圖可能提供不同的環境信息,如地形輪廓)。

　　比較谷歌地圖的(頂部)與陸地測量部(底部)

　　精心設計的基礎地圖與一個網站的其他部分同等重要。最明顯，也常被忽略的是如美學與品牌。地圖應該搭配網站的其他部分;例如顏色和線條粗細的搭配，他們可以提高整個設計而不是放棄它。你也可以定義確切的地圖目標,用標志或標簽來顯示、隱藏內容而不是顯示你可以展示的一切詳情。

　　我沒有真正研究過任何基地地圖的可訪問性，但是考慮一些可行的選擇，我認為關注標簽的排版和各種元素的顏色是至關重要的。當然你可以選擇隱藏標簽，通常他們都提供所需有意義的數據地圖。因此,確保每一個縮放級別不要太雜亂足夠顯示環境即可。當你選擇字體時也要像其他設計一樣仔細。對於顏色，你需要密切關注的問題是,色盲使用色彩來傳達信息時。經常一個光譜的顏色將被用來顯示數據或顯示地形, 所以你需要知道,有些人很難看出光譜顏色差異。一個很好的定制基本圖例子源於Michael K Owens’ check-in pages:

　　正如我所提到的，Tiles不僅僅用於基本圖：它們也用於數據。在下面的截圖中可以看到PlymouthMarine Laboratory怎樣使用Tiles來顯示數據和光譜的顏色。

　　來自Marine Operational Ecology數據網站的地圖，顯示了成年北海鳕魚的數量。

　　技術

　　你可能很想知道怎樣設計基本框架。在這裡我將簡單解釋概念，在文章末尾將提供所使用的工具。如果你擔心設計地圖花費時間，完全不會——因為大部分都是自動化。你不需要手繪整個世界的Tile。

　　我們已經了解WEB標准的重要性，所以你將會很高興(我不需要解釋web標准映射開放地理聯盟(OGC)的優勢)稱為網絡地圖服務(WMS)。你可以使用傳統的圖像文件格式,但你需要一種方法來查詢特定的Tiles顯示區域和縮放級別,這就是所謂的WMS。

　　功能

　　Tiles對大區域很適用，但是有時需要特定的小區域。我們把這些稱為功能他們通常由多邊形,線或點組成。例子包括郵編邊界和地方之間的路線,甚至一些不定邊界例如隨著時間推移國家的改變。

　　在地圖上顯示功能提出了有趣的設計挑戰。如果表達遠處地理邊界某些類型的數據,則顏色或形狀需要更加明顯。這確實很難，除了構建復雜的用戶頁面。如下圖，這裡有顯而易見的顏色關系嗎?它需要一種顯示顏色代表什麼的方法嗎?

　　Choropleth map 按郵編排名顯示, 使用 ViziCities.

　　功能用線條或顏色來表示;有效地利用線條或顏色遠遠超過學科知識，更要求審美判斷。

　　Erwin Josephus Raisz, 繪圖師 (1893–1968)

　　哪裡可以明顯的表示許多小而密集的地界(例如大街或購物中心)的邊界，並且用什麼表示?當設計地圖時，最大的挑戰是數據如何處理，怎樣讓用戶理解明白。

　　技術

　　正如你所了解,我們使用WMS為Tiles，另一套標准WFS為特定的功能。我必須要強調兩者之間的區別，WMS為TI領，然而WFS是為特定的功能。兩者都可以使用相似的文件格式，但是用於各自特定的用例。你可能會疑問為什麼不都使用一個定量格式例如KML，GEOJSON(甚至SVG)——當然可以——但是問題在於同樣為WMS：你需要一種方法來查詢數據得到正確的區域和縮放級別。

　　用戶界面

　　當然沒有一個絕對的用戶界面設計方法，因為每個項目都要考慮許多不同的因素。地圖有多種使用方法,如提供簡單的方向信息或用可視化信息解釋大量復雜的數據。當制作地圖時這些因素需要考慮進去。

　　正如開始我所提到，網站上有很多的谷歌地圖以至於人們認為制作地圖的UI方法就只有這種。在某種程度上我們不想改變這種狀況，因為人們知道如何使用;但是每個地圖都需要縮放滑塊或基礎地圖切換嗎? 事實上,用戶都需要放大嗎?回答通常是肯定的，縮放並提供更多的環境信息。

　　有時候,你需要讓用戶在地圖上選擇(如數據層或方向)，因此怎樣顯示和隱藏數據呢?做一個簡單的下拉框還是需要做個搜索呢? 谷歌的基礎地圖切換是相當不錯的,因為它並沒有提供許多選項而是提供了非常不同的環境情景和樣式。

　　直到我們明白這一點才意識到隨意放張谷歌地圖是多麼的荒謬，特別是與其他領域的工作量相比如顏色、字體或如何寫CSS時。這些都很重要因此我們需要確保整個網站都被設計,包括地圖與其他任何內容。

　　實踐

　　我可以花時間漫談下去，我們能做些什麼來自定義地圖使其與網站的個性相適應並正確地表示數據。我想強調概念和標准,因為工具在不斷地變化並且僅僅依靠工具來做這個工作也絕非是一件好事。也就是說,有各種各樣的工具將幫助你把這些概念變成現實。這不是比較,我只是想向你展示制作網站上的地圖有很多種選擇。

　　谷歌

　　好吧,到目前為止我一直在評論關於谷歌地圖,這是因為網絡上有大量的默認地圖。你可以盡量設計它們。他們不可能允許你使用自定義的WMS層但谷歌地圖有自己的版本叫做Calledstyled地圖。使用數組映射功能(用於某種意義上的道路和湖泊和地標,而不是為某種WFS)，你可以用JavaScript設計基本地圖。它甚至允許你隨意切換,這有助於避免太多雜物在地圖上的問題。不僅缺乏WFS，也不支持WFS，但是可以支持GEOJSON和KML所以你仍然可以在地圖上顯示的功能。你同樣應該檢查Google Maps Engine(新版本的地圖)，提供了一個接口用於創建更高級的地圖,與不同選擇的基礎地圖。高級版本是可用的,本質上創建可視化的地圖,提高了谷歌主地圖的加載。一個有用的功能是為你提供數據的采集。

　　Leaflet

　　之前你也許見過Leaflet。它不像谷歌地圖那麼受歡迎，但經常使用絕對是明智的。Leaflet是很小的開放源資源腳本代碼。它不是一種服務所以你不必擔心API限制和期限。Tiling有兩個選擇,要麼能夠使用WMS,或者直接把文件中的文件名使用變量如/ { z } / { x } / { y }. png。我建議使用WMS在動態文件的名稱,因為它是一個標准,僅在一個文件名中使用變量的能力在某些情況下可能是有用的。Leaflet有很強的團體和有據可查的API。

　　MAPBOX

　　作為一個免費增值服務，MAPBOX雖說不是對每個案例都應用完美但是絕對值得期待。服務商提供了令人難以置信的定制工具以及大量的數據源和托管的地圖。它還提供了大量的各種平台庫,所以你不必只在網絡上使用地圖。

　　Mapbox是一種服務，盡管它的地圖設計工具是開放資源。Mapbox Studio是一個只有向量名為Tilemill的以前版本工具。開始，我寫到一個地圖如何排版和配色與網站其他部分同等重要;如果你認為，“對，那究竟怎樣設計地圖的這些部分呢?”那麼這就是一個工具。使用非常簡單。基本上每個地圖都有一個樣式表。

　　如果你不想 買Mapbox，那麼你可以導出Tiles(PNG、SVG等)使用其他的地圖工具。

　　OpenLayers

　　經過長時間的等待,OpenLayers 3已經發布。