【數位專題製作手記】滑動式動態資訊圖表的製作流程,外加記者、設計師、工程師的心聲

《報導者》的第一個滑動式動態資訊圖表-,終於上線了!

這次製作的經驗其實蠻特別的,因為不光是資料蒐集遇到一些困難,在思考呈現的時候也比一般圖表複雜,因為這次想挑戰的是滑動觸動動畫的形式,所以畫草圖的時候有點像在寫動畫腳本,一直會想到觸發前觸發後,與設計師和工程師來回討論,草圖前後大概改了三四次。

專題時程

這個專題一開始沒有設限形式,只有一個明確的目標「要告訴讀者台灣的遠洋漁業有多強大」!於是我們從發想主題、整理資料、來回討論、製作,大概耗時一個多月,分為三個階段。

前期-

專題規劃:主題發想、報導角度、盤點資料、與工程師討論技術可行性。

剛開始天馬行空的亂想主題,想破頭
大鲔鱸鰻原來長這樣...

中期-

蒐集資料:專題記者與資料分析記者蒐集、疏理資料、列出資料發現、確認主題可行性、資料單位轉換、不斷修正草圖。

分析資料有初步結果後,開始分幾部分化草圖
阿阿阿都先亂畫阿

後期-

製作:資料定版、草圖定版、工程師開始製作、修正成品。

設計師與工程師討論動畫後,更簡化了原本的設計
就像是設計腳本一樣,圖表從觸發到結束的過程都要設計

這次的專題團隊主要有四個人-專題記者、資料分析記者、設計師、工程師。對我來說,花最多時間應該是在中期尋找資料、轉換資料的過程。

喬不攏的資料、轉不好的單位

專題核心是資料,而這個專題的資料真的非常繁雜,因為牽涉到國際的資料。途中遇到的往往不是技術上的困難,而是國際漁業的資料來源、計算單位、格式都不一致等問題。

國際上不同漁場組織不一樣,統計方式就會不太一樣。而關切不同產業面向的組織蒐集資料的基準也會不一樣。例如:聯合國農糧組織(FAO)主要會是「魚種」的漁獲量,可是在對外漁協方面,就會是「漁法」的漁獲量。

種種「不一樣」,讓我們在疏理資料,比較台灣與世界各國差異的時候,會變得很困難。在統計母數不同的狀況下,最後只能選擇單一單位的資料、或是用訪談過後的內容,輔以相關資料推估現實狀況。

其次是單位轉換的問題,原本以為很簡單的轉換,出乎意料的花了不少時間。我們認為把無感的龐大數字,換成民眾有感的單位,是個蠻重要的環節。但到底怎麼樣叫做「有感」?

16萬公噸的鮪魚撈補量,與400萬隻鮪魚

8億個鮪魚罐頭,與可以繞地球一圈半的鮪魚罐頭

哪個比較讓人有「哇」的感覺呢?

我們在每個數字都下了一些功夫,嘗試不同的單位(像是貨櫃啦、大安森林公園啦、小巨蛋啦、到月球的距離啦...)最後選出我們認為最適當的量詞。

但其實在換算過程也遇到不少困難,以隻數來算的話,要考量到不同品種、年紀、體重的魚類,最後在專家建議下採取各類魚種平均體重的作法。

來聽聽團隊不同角色的心聲

除了資料的問題,其實我們團隊的四個角色分別有不同的心得,請看以下OS們…

資料分析記者的OS:

Q:記者與資料分析記者的合作過程?(一個自問自答的概念)

這次合作模式有點奇妙,以前做資料新聞很多時候是自己一個人做,包含了解資料背景、找資料、處理分析資料、採訪。我一直認為光有分析資料的能力是不夠的,必須要去研究這份資料背後的脈絡跟相關的知識,才能寫成一個好報導。

但這次其實是專題記者採訪了一段時間後,我才進入幫忙分析資料。當時對漁業的一切完全不了解,因此非常仰賴專題記者的專業。在打開資料夾後,發現當時蒐集的「資料」很多都是文字檔、像是漁業年報的某段文字、漁業報告的某些結果,跟自己以往蒐集的「資料」其實不一樣。

文字檔會像是這樣的「資料」

鮪延繩釣漁業為我國最重要的遠洋漁業之一,近三年平均產量逾20萬6千公噸,約佔我遠洋漁業總漁獲量79萬9千公噸的25.85%, 產值超過新台幣 242 億元,約佔我遠洋漁業總產值 458 億的 52.84%

我想像的「資料」是

其實都是「資料」啦,差別在於原始資料可以做不同交叉分析,也可以做比較多樣化的詮釋。例如上述文字,可以分解成的資料就有:歷年不同魚種漁獲量、歷年不同魚種產值,可以發現的細節比較多,也不容易被詮釋角度影響。

這次合作真的學到蠻多阿!之後如果有機會做類似題目,應該會強調「原始資料」的重要性,然後用google spreadsheet整理資料真的很重要阿!不要用word阿!

專題記者水水的OS:

Q:整理資料最麻煩的地方?

A:對我來說最麻煩的是「產業複雜」,關切不同產業面向的組織蒐集資料的方式跟基準就會不一樣。例如:聯合國農糧組織(FAO)主要會是漁種的漁獲量,可是在對外漁協方面,就會是漁法漁獲量的年報。

像是鮪魚又分很多種種類,不同區域組織因為漁場不同,他們就會用不同的方式把他們加在一起。種種加起來,會讓我們在疏理資料,或是比較台灣跟世界各國的時候,會變得很困難。

另一個問題是,在數字要換算的時候,因為魚種不同、體長、體重等都會影響,所以要換算成一個民眾比較可以理解的數字是蠻困難!

我們在討論單位的時候,一直不停討論要用什麼單位,例如:大安森林公園、貨櫃、魚網距離等,換算過程比想像中麻煩。

後來有問專家,他拿不同魚種的噸數去問同事該怎麼轉換。他同事很不能理解為什麼要轉換,直接用噸數就好了。那時候他才意識到,在專業領域的行話,其實很難跟民眾溝通。學術界或相關領域的專家可能沒想過要換算成尾數。當然轉化有極限,不可能很精準,但是一個相對理解方式!

最後想跟大家說:

「不要為了花俏而花俏,會把工程師惹怒!簡單清楚、資訊明確是最重要的!」

設計師妹妹的OS:

Q:你覺得最困難的地方是?

A:最難的是把「資訊換成圖像」的過程,不能只是好看或有趣就好,要跟資訊本身要有一定程度的連結。不能為了做而做!跟一般資訊圖表不一樣的是,這個專題比較需要「連貫性」它是一個連續的圖,每個物件之間的差異不能太大,大家要維持一樣的風格

其實做起來跟平常做圖表差不多,只是變得比較複雜。以前就一次處理一個,這是一次要處理很多個。這次最大差異就是「動態」,靜態圖表出去就出去,也不用想說圓餅圖或折線圖的動畫方式。但這次變成動畫,配合插畫兩個搭配,比較困難。

Q:跟工程師溝通最多次,耗最多心力的事情?

A:剛開始卡最久的是一開始的圓餅圖,動畫比我們想像中的困難,一直有技術上的困難要克服。

這個專題要考慮的事情比一般圖表多,掌握尺寸很重要,三種裝置(手機、平板、桌機)都要好好呈現。一般圖表會遇到「字級大小」影響不同裝置的閱讀,但動態要考慮的是整個「載具的呈現」。

資料夾跟檔案的命名」也很重要,因為工程師寫程式的時候,資料夾跟檔名很重要。例如說:像是opening是一塊、各部分的圖表叫做area-1、area-2。此外,每一個動畫配件都要畫出來給工程師,哈哈,所以就重新整理了一遍。

Q:這次最大的心得是?下次會怎麼做呢?

A:這次一開始很鑽牛角尖,原本的想法是設計的樣式要大於資訊本身,有點太重形式,因為想要吸引大家目光,所以想把它做很美。後來跟大家討論後,發現凸顯資訊本身才是這個專題最重要的事情。插畫包裝是解決完資訊呈現,後面才做的。

還是會覺得資訊呈現是很重要的事情,資料本身不能破壞結構下,去變化。不能讓資訊失真,不然就沒有意義。下次就會從資料本身的結構開始思考。

工程師大大的OS:

Q:記者可以注意的地方?

A:製作期有分前期、中期、後期,記者在前期就會有比較天馬行空的想法,我就要把它想成實務層面的,有時候很難當下知道做得做不出來,要去survey。如果是已經確定要做什麼,就很快,如果只是發想,我就要花時間去做功課,但最後卻可能不做。

如果一開始大家對網站設計、技術有基本概念,就比較不會有這個問題,大家至少懂說哪些東西困難、簡單,發想的時候就會平衡。

Q:是什麼基本概念呢?

A:唯一的解法是學寫程式(但不太可能XD),所以就是看或是做夠多的project,要有經驗啦!如果做夠多就知道做哪些事情要花少時間。

Q:跟設計合作最困難的地方?

A:一開始在做這個專題,想用的技術方式,需要很多設計協助。所以設計需要知道寫程式的邏輯、或方式,才能把設計的零件用在程式碼裡面。最困難的地方是要溝通他要給我哪些元素。例如:像是一個船會動,他要怎麼動,他會畫完整個圖給我,但其實他在動畫的時候不會是那樣動畫,不會是沒有突然到最後一張圖,就像拍影片,每個影格組起來就是動畫。所以設計要把影格給我,串起來才是動畫。

所以我在寫程式的時候,設計可能要跟我心電感應。(羞)大概要知道我需要的東西要多細,需要切割的多細節。設計真的很重要!


有你,才有《報導者》,邀您用行動支持!

優質深度報導必須投入優秀記者、足夠時間與大量資源⋯⋯我們需要細水長流的小額贊助,才能走更長遠的路。竭誠歡迎認同《報導者》理念的朋友贊助支持我們!

官網: 臉書:

《報導者開放實驗室》

《報導者》為非營利媒體,致力於深度調查報導,長期蹲點社會議題,並嘗試與數位新工具結合,探索讓讀者更貼近新聞議題的方式。實驗室將不定時更新《報導者》活動內容、製作數位專題的心得以及不同主題的記者經驗分享。

Mimi Chen

Written by

Mimi Chen

分享新聞數位專題製作、專案管理、使用者體驗(UX)等經驗。chenchenhua1112@gmail.com

《報導者開放實驗室》

《報導者》為非營利媒體,致力於深度調查報導,長期蹲點社會議題,並嘗試與數位新工具結合,探索讓讀者更貼近新聞議題的方式。實驗室將不定時更新《報導者》活動內容、製作數位專題的心得以及不同主題的記者經驗分享。