從三種類型的數位專題，談談一個設計師創意發想到執行的過程
近期我在《報導者》協作設計了三個數位專題：
《報導者》藉著戲院放映之際企劃了「搖滾芭比專題」，有別過往以文字談電影，我們邀請了 6 位喜愛電影且擅長繪畫的創作者，用他們具才華的筆，畫下最觸動他們的 Hedwig。
2. 〈 倖存者的餘聲── 自殺者遺族的漫長旅途 〉
自殺者遺族猶如歷劫歸來的人，面對全新的生活，卻已被災難性事件烙上無可磨滅的印記。《報導者》走入三位自殺者遺族的世界，他們分別錄下「現在的自己」對逝去親人說的話，邀請讀者留駐聆聽，那些不因死亡而被切斷的生命連結。
3.〈這些人之後，真能避免下一個冤案？〉
冤案，不但浪費含冤者的生命，更讓受害者家屬沒有得到一個真正的交代。究竟，冤案是怎麼形成的？警察打人，為什麼都不會被辦？科學鑑定出包了，還是繼續做？法官誤判不用賠、也不必被評鑑？
想跟大家談談自己在經手這幾個專題的一點心得。
◊ 插畫策展型版面：搖滾芭比
同一部電影在不同的創作者眼中長出各自的面貌，這個專題最讓人沈醉的部分無庸置疑就是插畫本身了。因此，我設立的目標便是：
如何讓一幅畫作好好地被觀看
曾經考慮讓畫作以全螢幕的方式觀看，但由於插畫有橫、直式，全螢幕在直式的狀態下無法完美呈現。爾後想到展覽時畫作都會裱框，那些框在不干擾畫作的前提下襯托著它們，不僅保護作品、更能讓觀者專心於眼前的作品。
「數位裱框」，讓讀者在不甘擾的狀況下欣賞畫作
想像這個專題是一個虛擬藝廊，當滑到相應的作品時，底色呈現的白與螢幕的邊界形成了這幅畫作的外框，用最不干擾視覺的白色使觀者能投入在畫作中。觀看的同時，也將創作者資訊、媒材等文字置放在同一個畫面，讓使用者能快速取得相關訊息。
「索引列」，讓讀者可自由滑動到不同畫作頁面
另外，左側索引列使用的icon，都是從相應的作品及其QA延伸出來的，算是我與這些作品交互作用的產物、我的詮釋。當然也有一些美中不足的地方，由於當時製作的時程較短，沒考慮到索引列其他的state (default/hover/active)是我覺得較為可惜的部分。
◊ 聲音情感強烈的版型：自殺者遺族
當初開始著手設計前，文稿還沒看就先聽了三個案例的音檔，光是聽聲音就足以讓人落下兩行熱淚，深切地感受到他們對於逝去親人的想念，即便是死亡也無法切割其情感連繫。
除了三個案例外，子午(此文負責記者)也表達希望讀者看完故事後能接續閱讀專業文章，所以這次我的目標便是：
如何讓使用者在閱讀篇幅長且情感沈重的文章時有繼續看的動力。
篇章式索引，幫助理解文章架構
為了處理長文閱讀的問題，能快速切換章節的索引便是我們的最佳解方。除了讓讀者能快速理解文章結構外，也提供不同的閱讀方式以降低跳出率。此外章節的命名也是門學問：每章標題字數最好一致不影響畫面協調性、用字需要與文章調性相符等等，都需要記者的協助。
氛圍定調，強化使用者體驗
#1 色彩及圖像
使用人臉正面張嘴的圖像有兩個含義：一則提醒讀者此區塊的特殊性，二則是有遺族親口說的意象。
配色上一開始直覺使用皮膚色，想到主體是人嘛很理所當然，配完後發覺與文章調性不太相符，便改用了灰階，卻讓整體變得太過沈重且失去焦點，最後決定使用陰鬱的冷色調作基底延伸。
#2 漸層的含義
我將四個章節各定義了一個顏色，由深至淺、由鬱紫至白，讓使用者在閱讀過程中，隨著章節遞進感受越趨光明的希望，而不是停滯在沈重的情緒中。
考慮讀者使用情境
在聆聽的過程中，有時會因個案的狀態不同，加上環境音的干擾，導致讀者理解的差距。我們考慮到用戶習慣以手機瀏覽器閱讀文章，於是將手機用戶的聆聽輔助功能提升。
最後的方法是：「加入字幕」。不僅可幫助使用者理解，更讓他們在無法聆聽的狀態下，同樣能理解音檔內容。
其他關於此專題的製作手記，PM咪咪老師 Mimi Chen 在下面這篇有更詳盡的說明❤
◊ 人物影像鮮明版型：冤獄之後
「這些人(冤獄受害者)講的話都沒有人願意聽，而律師又是聽到哪些細節決定重啟調查？希望讀者去聽。」
在第二次會議時，攝影主任余志偉 偉哥提出這個想法，當下覺得「對！就是這個！」於是讓冤獄受害者、律師、法官三方現身說法 成了這次影像內容核心。而在看完記者的初稿後內心更是為著這些人的遭遇感到憤憤不平，決定將這次視覺風格定調為 控訴。
由 控訴感 出發，閃過腦海的是抗議現場的布條，一筆一畫都用力地如利刃般要把布條劃破 ……
介面的預期心理
由於人物影像會在文章內穿插出現，為了提示讀者，我們決定也以此作為專題的序幕。畫面裡的人皆靜默直視鏡頭，帶出無奈氛圍，而滿版的麥克筆手寫字則是將控訴感放到最大。以影像破題，烘托出氣氛讓整體性更為強烈。
風格與易讀性的取捨
為了加強「控訴感」的情感力道，在影像上我選擇將手寫字放到最大。但在縮小五十倍比例的索引列上，卻無法做到這件事情。縮小後的手寫字讓視覺上變得凌亂且難以閱讀，該字體也不適用索引列上直式的文字方向。
回歸本心，索引列的主要功能是讓「使用者能快速切換章節」，若是為了風格而捨棄易讀性，可說是本末導致，因此最後決定讓索引列維持思源黑體。
相反地，選擇讓「段落標題」使用手寫字則是因為風格的緣故。我希望讓整個專題有「自己的個性」，所以讓副標也同樣使用手寫字。由於副標是橫向文字，加上尺寸也比較大，所以我認為易讀性應是蠻高的。
一個元素用到極致就是風格嗎？風格重要嗎？
當然重要！設計師為專題定調視覺是使用者體驗重要的一環，但這一切必須以User為中心，在功能面維持的前提下創造風格。
總結：有趣的想法容易產生有趣的畫面
這樣說起來好像很廢話，但重點就是，在每次的專題中找到一個自己的詮釋，而這便提供了視覺上很好的切入點。
設計其實是兼具理性與感性的一門學問，在使用者需求、專題訴求與設計師詮釋三者間找到交集與平衡，其中的拿捏是我一直努力的方向。
更多數位專題製作手記文章：
有你，才有《報導者》，邀您用行動支持！
優質深度報導必須投入優秀記者、足夠時間與大量資源⋯⋯我們需要細水長流的小額贊助，才能走更長遠的路。竭誠歡迎認同《報導者》理念的朋友贊助支持我們！
官網：https://www.twreporter.org/
臉書：https://www.facebook.com/twreporter/
