世大運專題製作心得:打造體育新聞X手機影音新體驗

LINE分享給朋友

今年夏天最熱門的話題無疑就是台北世大運,這是台灣有史以來舉辦最大型的國際體育賽事。預見世大運將在8月掀起一波體育熱潮,6月初同事們就開始討論「世大運是不是可以玩點不一樣的」,做出有別以往、讓人耳目一新的專題,於是就組成了1位專題製作人、2位視覺設計,加上1位工程師的製作團隊。

企畫意圖:教讀者看懂運動比賽門道

這次台北世大運共有22種運動比賽項目,因此製作團隊一開始在發想題目時,便冒出各種天馬行空的想法,「好像可以解析戴資穎的假動作」、「或是解析舉重選手的動作姿勢」、「還是做Quiz,讓讀者猜足球落點」,各種題目不斷丟出,讓製作團隊陷入苦惱,不知從何下手。


由於這是我們初次嘗試做運動題材,因此我們也觀摩許多國外媒體製作的體育專題,如紐約時報的里約奧運專題「The Fine Line」、巴西《環球報》(O Globo)製作的一系列奧運解釋型影音,參考其視覺呈現方式。


經過不斷討論後,我們釐清這次專題是以「視覺技術創新」的目標為出發點,最後便鎖定了速度快的跆拳道擊劍項目,希望透過影片慢動作、定格,結合文字說明,讓讀者看清楚得分瞬間,並進一步解釋運動規則和觀賽重點,讓讀者稍微看懂門道。


競技體操則是嘗試從運動科學的角度切入,因為體操選手有許多旋轉、空翻動作,這些都與生活中常見的科學原理相關,究竟「這些華麗的體操動作是怎麼做出來的」,我們請選手示範動作並拍攝影片,再拿著影片請教運動力學專家,解析跳馬、高低槓運用到的科學原理,並以動畫圖解呈現。


除了跆拳道、競技體操和擊劍三篇運動科普專題外,我們也試著從人物角度切入,採訪有奪牌希望的選手,解析他的得分關鍵技巧,再帶出選手背後辛苦奮鬥的故事,製作一則人物專題報導。我們採訪了體操國手李智凱,解析他的「湯瑪士迴旋」技巧,再記錄他背後苦練的過程,運用大量影音、照片、人物訪談等多媒體素材,希望將故事說得更生動好看。

運動力學專家圖解體操動作運用的「轉動慣量」原理(左圖)。製作團隊用影片結合清楚簡單的箭頭、線條等標示說明。(右圖)

視覺呈現:解釋型影音,結合手機影片自動播放趨勢

從過去我們放在專題裡的影音表現來看,發現讀者其實不喜歡看太長的影片,加上這次的題目主要是介紹運動的規則與得分,內容複雜,較難用文字說明,因此有別於以往剪成一隻完整的解釋型影片,這次的世大運專題我們嘗試將連續動作拆解成每段約10秒內的短影片,搭配簡單清楚的箭頭標示,以及影片慢動作和定格,讓讀者可以輕鬆理解複雜的體育規則。


而在網頁版型設計上,則是以page型式呈現,結合手機影片自動播放趨勢,當讀者用滑的切換到下一頁,影片就會自動播放,以「簡單易懂、手機體驗流暢」作為這次世大運解釋型影音版型的設計基準。


為什麼說手機影片自動播放是一項趨勢?這是因為原本基於流量考量而在mobile web中禁止的video autoplay,在去年底 iOS 10 以及 Chrome for android 53 的更新中,開放了mobile web video autoplay,由於流量的基礎建設已經趨於完整(4G),手機用戶對於影片的需求也越來越高,因此這次我們在專題中就使用了無聲自動播放的影片。


除此之外,考量現在約有8成讀者都是使用手機閱讀,在版面製作時,也以手機的閱讀體驗為最優先考量,並根據不同運動項目特性設計版型,像競技體操選手的華麗翻轉與落地適合做成直式滿版影音;跆拳道與擊劍因為是兩位選手對打、場地受限,較適合做成偏16:9的規格。

針對不同的體育項目設計版型,像跆拳道的影片適合做成16:9,競技體操則適合做成直式滿版影音。

影片後製:不同色調,讓視覺風格更強烈

為了配合以手機為主的版面設計,加上這次專題影音量較多,因此在前期的影音腳本規劃就很重要。我們使用兩台攝影機,加上一台GoPro,從不同角度拍攝選手動作,每一台攝影機拍攝的位置、角度都必須事先安排好,以及要確認每一個畫面放到手機上不會裁切到重點。


另外在影片後製上,為了讓影片與網頁的視覺統一,我們也將三項運動各別調成不同色調,跆拳道-黑白色、競技體操-橘色、擊劍-藍綠色,除了讓整體的視覺風格更強烈、增加記憶點外,最終是希望能帶給讀者新的閱讀體驗。

為了讓影片與網頁的視覺統一,我們也將三項運動分別調成不同色調,跆拳道-黑白色、競技體操-橘色、擊劍-藍綠色。

如何讓影片loading順暢

由於這次的專題是以影音為主,考量整體網頁閱讀的流暢度,在製作上將每段影片控制在10秒內,統一輸出成中位元後,再放到clipchamp網站進行第二次的壓縮。


另外在競技體操的部分,我們也製作了一個小動畫解釋體操選手轉動慣量的原理,以往針對這類循環播放的短動畫都是存成GIF格式,但這次我們嘗試使用由air bnb所開發的AE轉存外掛bodymovin.js,它可直接將AE的動畫輸出成.json檔給工程端,讓設計端所做的動畫和工程端的網頁無縫接軌。

專題中的短動畫首次嘗試運用由air bnb所開發的AE轉存外掛bodymovin.js,比以往輸出成GIF格式運作更順暢。

從數字中獲得的發現

專題上線兩周後,我們透過Google Analytics分析一些數字,從中觀察讀者的閱讀行為。


在專題的平均網頁停留時間與閱讀頁數,四篇專題平均網頁停留時間皆在5分鐘以上,停留時間最長的一篇為李智凱選手的故事,達到8分44秒,手機版讀到最後一頁的比率約30%,網頁版約65%;其他三篇手機版的讀完比率也約有兩到三成,超越過去我們用page型式製作的專題成效(以往手機版讀完比率約一成)。


從這些數字反映出,這次世大運專題整體內容確實有吸引讀者停留,願意一頁頁地接續往下閱讀,我們認為,這與專題內容的敘事結構和份量拿捏非常相關。由於這次有許多影片是連續動作的呈現,讀者會很自然地滑到下一頁,因此閱讀頁數多。


而在內容份量的掌控上,這次特別將每頁字數控制在100到150字左右,不會因文字量太多造成讀者的閱讀壓力。而且整體篇幅不會過長,力求文字精簡,重點放在每一頁的畫面呈現,將細節做到精緻,展現出運動選手的力與美。

Page版型著重在畫面呈現,每一頁的文字量應力求精簡。

小結:探索體育科普內容的新敘事方式

這次世大運專題歷經約兩個月的企畫、拍攝和製作,製作團隊仔細鑽研各種運動比賽,將複雜的規則和知識,想辦法運用各種工具和技術,轉化成簡單易懂的形式,讓讀者感覺「解釋得很清楚」。打破以往用一支完整的解釋型影音呈現方式,拆解成許多段短影片,融入網頁敘事架構當中,讓讀者透過滑動自己掌控閱讀節奏,創造更新、更順暢的手機影片閱讀體驗。


過程中,製作團隊經歷無數次的來回討論和修正,包括影片中每一個箭頭的方向、位置、出現時間,到整體網頁的UI/UX設計,都是不斷地微調之後,找到最佳的使用者體驗。團隊成員也從原本對這些運動完全陌生,到能夠看懂規則、享受觀賞比賽的樂趣,其中探索的過程其實非常有趣。雖然最後在呈現上仍有不足之處,但對我們來說,這是一次製作體育科普內容的新嘗試,也希望透過我們的經驗分享,提供大家對於體育新聞和影音敘事的新想像。



新媒體中心/數位內容製作 蔡佩蓉

在新媒體的世界不斷探索,努力用數位創新的方式說好故事。

視覺設計中心/數位製作人 許瑋琳

從紙本跨到數位的世界,持續探索新聞與設計的可能性。

LINE分享給朋友
文/新媒體中心 蔡佩蓉、鄭偉廷、視覺設計中心 許瑋琳
2017.08.31
聯合報聯沙龍研究報告