StoryMap - Cover

撰寫報導、文章時,常對如何傳達地理訊息的部份感到頭痛嗎?試試看故事地圖吧!美國北西大學奈特實驗室 ( Knight Lab  of Northwest University ) 繼 TimelineJS 後的另一項強大的工具 — StoryMapJS ,幫你快速的利用視覺介面打造出專屬自己的故事地圖,這次就讓我們為大家介紹一下如何使用這個工具吧!

進入 21 世紀,新聞報導的媒介與形式也開始進入未來時代;電子媒體的加持下,越來越多的訊息透過互動、視覺化的方式來傳遞。講故事的手法也開始多元化,以時間軸為主的 TimelineJS、搭配全幅影像與視差捲動的 Long form 、互動式的圖表與文字等等。

身為講故事工具的一員, StoryMapJS - 故事地圖 - 將故事與地圖搭配在一起,讓讀者可以透過地理的角度來了解整個故事的來龍去脈。撰稿者設定好一系列的地點,搭配文字與影像讓讀者隨著地點的轉移理解故事的內容。

Example

建立故事地圖最困難的部份其實是準備故事的素材本身。我們準備好故事需要的素材後,首先連上 StoryMapJS 網站 並利用 Google 帳號登入 ( StoryMapJS 目前只支援 Google 帳號登入 ) :

新增故事並填寫標題後,便可以開始製作我們的故事地圖:

Choose Type StoryMap JS - Editor

故事地圖的設計概念類似製作投影片,每一個地理座標對應到一個「slide」。針對各張 Slide ,我們在地圖上點擊來指定目標地點,也可以上傳一張照片並搭配一段文字敘述來說明:

Fill Content

地圖底圖使用 Google Maps ,所以操作的方式與 Google Maps 類似,滑鼠拖曳或鍵盤方向鍵來移動、使用左上方的縮放扭來放大地圖、在下方文字框鍵入地點搜尋,也可以直接點擊地圖指定目標點:

Use Map

每一張 slide 也可以利用右下角按鈕開啟進階選項來個別設定背景顏色或圖片。這裡特別要注意 StoryMap 會將第一張投影片當做我們故事的封面,他的地圖會用來顯示所有我們有用到的座標點,所以我們不需要自己指定:

Cover Map

編輯完成後,我們可以在左上角的「Options 」設定我們分享時想使用的縮圖與文字描述,接著就可以點擊右上角的「Share」按鈕分享。StoryMapJS 提供直接連結跟嵌入式的分享方式,大家可以視自己的需要來選擇怎麼使用這個成果。下面即是我們搜集台灣山難事件試作成的嵌入範例:

雖然只是一個小範例,可是是不是覺得閱讀起來很順暢呢? 🙂


結語

之前我們分享過基於 TimelineJS 的類似工具「TimeMap」,同樣利用地圖來呈現事件始末;不過 StoryMapJS 的概念與 TimeMap 其實是不一樣的, StoryMapJS 不基於時間關係,而是以故事的敘事線為主軸,同時在呈現上也針對故事地圖的形式做了最佳化。當有需要表現基於時間線的地圖時,我們可以使用 TimeMap 來表現,而要敘說的故事沒有一個主要的時間線時,我們便可以使用 StoryMapJS 。

有意思的是,除了使用 Google Maps 做為底圖以外,在建立地圖時我們也可以選則「GigaPixels」使用自訂影像做為地圖的底圖,這時製作 StoryMap 甚至可以脫離地圖的概念,變成在影像上探索故事!這裡有兩個使用 GigaPixels 的範例,第一個是權力遊戲「Game of Thrones」的其中一條故事線,使用客製的手繪地圖做為底圖;「A Sunday on La Grande Jatte」則將 StoryMap 應用在一張畫上,這兩個例子都很值得一看喔。

看完介紹,是不是有點手癢呢?就如前面所說的,工具的使用其實並不困難,最難的還是準備一個好的故事,想試試看嗎?現在就來用地圖講故事吧!


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *