如何用插畫說故事?聯合報的數位報導新嘗試

LINE分享給朋友

聯合報新媒體中心本月初推出「好好說再見」插畫專題,是本中心首支運用插畫結合網頁前端技術的專題。最起初的設定是不限內容,但嘗試「插畫x前端工程」技術應用,讓動畫突破影片框架,讀者在閱讀的滑動過程,多一點互動。先有皮再有肉,PM們才著手規劃故事。

如何用插畫說故事?

題目的設定百轉千迴,考量插畫適合呈現「沒有新聞現場」的內容,從一開始想到的、較難取得第一現場畫面的童工議題,到思覺失調症患者的超現實想像,最後注意到安寧醫療。


在討論安寧醫療的過程,「生命價值」是首先抓住注意力的關鍵,從醫療的切角,如果生老病死不可避免,那生命的終點,到底留下什麼?腦海第一個閃過的,是已故毒物權威醫師林杰樑。


林杰樑至今仍是食安風暴來襲時,國人必會想到的「台灣良心、定心丸」,隨手一查發現其已逝世4年,簡直不敢置信,因為即使到現在,林杰樑的「存在感」仍居高不下,逝世的消息彷若昨日。


經過一番琢磨,最終定調「說再見」。失去是人類的共同生命經驗,無論是自己的生命、至親至愛的生命,或者其他更多的傷痛記憶,藉由這題想帶給讀者對「失去」更開闊的想像。


製作過程:提早完成插畫腳本、預留測試期

製作前,PM花了幾天的時間爬完林杰樑、譚敦慈相關所有影音與文字報導、做筆記。雖然從我們設定的「失去」切角,還缺乏不少關鍵的內容待採訪,但對譚敦慈與林杰樑形象與經歷,卻已有足夠的掌控,可以條列出插畫故事的重點脈絡。


沒錯,我們早在採訪前,就完成了插畫腳本,因為新技術的嘗試,要搶跟時間賽跑,避免中間突然出現大問題,或者收尾時發現BUG修不完(家常便飯),所以製作時程的安排,除了要預留較長的測試期,流程也是提前完成最保險。


PM先盡可能把想像中的畫面文字化、能寫得多細就多細,若過去採訪片段中有可參考畫面,也可截圖給設計團隊參考(例如家中擺設、人物外觀等),這是新技術嘗試過程一大關鍵,當呈現方式不再只是文字時,要格外用心確保整個團隊都清楚專題的模樣,方向明確,才能更有效率讓進度向前。

插畫師完成初版草圖後,先與PM討論,進行第一輪修改,確認後再行上色。

接著腳本就交由團隊插畫師動工,完成初版草圖後,插畫師與PM再對焦、進行第一輪修改。這個階段PM也同步啟動採訪,採回來的素材若影響插畫內容,則隨時請插畫師修正,完成採訪時,所有插畫元件也已完成上色,交到動畫師手中。


這次雖然是要做「插畫x前端工程」的嘗試,但插畫的動態仍有團隊中專業動畫師打點,製作出動畫檔,讓工程師好理解上到網頁時應呈現的樣子,動畫師再附上插畫動態序列,和動畫檔一併交給工程師,進入前端工程製作(手機與桌機版),結束後進入測試。

視覺呈現:捨棄桌機 以mobile only為主

由於這次是以手繪插圖為主視覺,考量插畫是圖檔難以用RWD的方式呈現,在前期規劃,團隊就決定此次專題以手機為優先設計,桌機版能清楚閱讀即可。


因此插畫師在一開始的構圖就以直式、符合手機閱讀為基準,將重要的場景都畫在中間,避免在不同尺寸的載具瀏覽時,插畫的重點被裁切,並讓插畫可以同時共用於手機與桌機,避免插畫師畫兩道工。所以這次網頁版首圖,我們也捨棄使用滿版圖呈現。


另外,這次專題是以插畫為主,所以網頁的視覺動線安排是先看插畫再看報導,我們不希望讀者錯過插畫,但同時也必須考量想直接看文字報導的讀者,因此在版面設計上,當讀者滑到第一頁插畫時,右上角會多出一個淺灰色的「看報導」的按鈕,讓讀者在閱讀時,能自行掌控優先想看的內容。


觀察Goole Analytics使用者行為數據,發現僅有4.6%讀者點按頁面右上角的「看報導」按鈕,比例比預期中得少,顯示插畫故事對讀者有吸引力,大部分讀者會順著閱讀情境、一頁頁地看下去。


但是設置「看報導」按鈕仍有必要,一個長型專題若有不同區塊設計,清楚標示出來,讀者使用上會更得心應手。

專題以手機為優先設計,桌機版捨棄滿版圖呈現。

加入配樂 強化閱讀時的情感體驗

另外,為了強化讀者在閱讀時的情感體驗,團隊嘗試在專題裡加入配樂與音效,並在開頭設計提示,強調這是有聲音的報導,「點開右上角的聲音,感受完整故事體驗」,適當地在插畫中加入開門聲、走路、煮飯聲等,除了讓插畫更生動外,也希望增強報導的渲染力。


從Goole Analytics數據發現,約有37%的讀者點開聲音,代表一開頭的提醒頁、與右上角的聲音提示設計得夠明顯清楚,讓使用者知道如何操作。

專題一開始有清楚的聲音提示頁,讓讀者知道這是有聲音的報導。

會動的插畫檔案超巨大

這次專題首次與插畫師和動畫師配合,在分工方面,動畫師負責AE元件動態,插畫師負責插畫和部分動畫,例如網頁開頭,林杰樑醫師走向走廊盡頭消失就是用Photoshop(PS)的動畫功能。


插畫師第一次嘗試用仿手繪的插畫方式製作網頁動畫,最大的困難點是控制檔案大小,最初規劃時沒有想到3秒左右的動畫連續檔這麼大,評估之後,只好減少每秒張數和盡量壓縮檔案,但相對也會影響動畫呈現的流暢感與細緻度。


因為這次作品設定是在網頁上呈現,必須優先考慮網頁是否能運作順暢,在流暢的動態和檔案大小兩者之間,只能優先選擇後者。從這次的經驗中學習到,未來在製作動畫多的網頁時,盡量用大色塊的動畫取代手繪插畫風格,較能避免網頁loading過重的問題。


插畫運用在新聞報導的可能性

插畫究竟適合用在什麼樣的新聞題目上,其實還有很多可以想像的空間,插畫入題最大的好處是能增強故事的情境氛圍,相對於真實影像和照片,必須在採訪現場一次取得全部素材,也要仰賴文字與攝影記者的默契、配合現場環境,才能取得好畫面。但是插畫一切都可事先設定,畫面和腳本之後也還可修改,製作上會有較大的彈性。但相對地,插畫的新聞感較低,比較適合軟調性的題目,尺度也要更費心斟酌,不然容易太過煽情。


此外,在嘗試新技術時,製作團隊會有更多角色加入,這次團隊有文字PM、視覺設計、插畫師、動畫師和工程師,如何確保各方都理解專題的模樣,不能只有口頭討論和憑空想像,必須清楚地文字化、甚至畫出來,或是找參考影像,才能確保團隊間溝通順暢、製作流程順利推進。



LINE分享給朋友
文/新媒體中心 連珮宇、蔡佩蓉、廖克樸,視覺設計中心 許瑋琳、黃微庭、許藹雯
2017.11.17
聯合報聯沙龍研究報告