在短影音與碎片化資訊主導的時代，兒少還能如何讀懂新聞？

《少年報導者》這次網站改版，並不只是介面優化，而是重新思考「閱讀」這件事本身──從單篇文章到閱讀歷程，從個人理解到互動思考。我們透過設計實踐，逐步拆解閱讀的不同階段，並在其中建立更清晰的引導與支持機制，嘗試營造一個更適合兒少閱讀的數位體驗。

本文將從產品設計的角度出發，回顧這次改版如何從閱讀行為的觀察出發，逐步轉化為具體的設計決策，並梳理我們在過程中的思考與取捨。

文／劉邦豐（《報導者》產品設計師）

文章架構：

▸ 在碎片化時代回應閱讀的挑戰
▸ 從單點功能走向整體重構
▸ 本次改版的設計目標
▸ 我們如何重新設計閱讀體驗
▸ 後記：在當下做出選擇，為未來留下空間

在碎片化時代回應閱讀的挑戰

《少年報導者》自成立以來，始終致力於成為兒少的公共議題窗口。我們希望透過轉譯複雜的社會事件，為孩子建立多元價值觀與思辨能力。

然而，我們正面臨一個前所未有的轉折點。隨著短影音橫掃全球，兒童的閱聽行為已產生根本性的質變。根據 2022 年國際學生能力評量計畫（PISA）的報告，台灣兒童的閱讀能力正呈現顯著的「M 型化」趨勢。這不僅是學習能力的差異，更揭示了數位時代下，資訊獲取能力的階級落差正隨之擴大。

當娛樂性強、大腦思考密度低的碎片化資訊占據了孩子的感官，我們開始深思：該如何讓兒少讀者願意在需要深度思考的新聞平台停留？

透過與十多位第一線教師的訪談，以及團隊內部的深度辯證，我們意識到單純的「提供資訊」已不足夠。因此，《少年報導者》決定推行「兒少深度閱讀探索」的功能，透過「提高閱讀意願引導」、「讀後問答與反思」、「議題探究與延伸」3 個面向的功能設計，來提升兒少的閱讀質量，讓深度閱讀不再是高門檻的負擔。

從單點功能走向整體重構

作為產品設計師，我最初的任務是設計「呼叫報導仔」功能。這項設計以早期微軟 Office 的「迴紋針小幫手」為靈感，希望透過《少年報導者》的專屬 IP「報導仔」，在閱讀過程中提供兒少讀者適時的引導與協助。

然而，專案進程因人員異動而暫緩，這段意外的空檔反而成為了審視整體的契機。我與產品經理偉婷在討論過程中逐步釐清，網站早期由外部開發，移回內部後設計稿與現行版本之間存在落差，且缺乏完整的數位設計系統，使後續延伸設計的成本提高。與其在不穩定的基礎上疊加新功能，我們最終決定在新工程師到職前，徹底優化《少年報導者》的數位體質。

我們從首頁開始檢視全站的資訊呈現與閱讀體驗，並梳理既有的設計問題。

本次改版的設計目標

我們將改版目標歸納為以下三個方向：

ㄧ、讓內容被好好看見

在既有的網站中，內容其實並不缺乏。文章、議題與各種延伸素材都已經存在，但它們往往缺乏清晰的呈現與引導，使讀者難以快速辨識哪些內容重要、又該從何開始閱讀。

這樣的問題，也反映在許多介面細節之中。例如，進站第一畫面（First Screen）所呈現的資訊有限，甚至難以清楚看見文章標題；頁面中使用多種顏色，卻缺乏明確的層級區分，使操作選擇變得模糊。互動元素之間缺乏辨識差異，加上元件沒有提供明確的操作回饋，也讓讀者難以判斷哪些內容可以被點擊。

這些設計細節共同指向一個問題：內容沒有被有效地呈現與組織，讀者需要額外付出認知成本，才能看見與理解資訊。

因此，設計的第一步，放在重新調整內容的呈現方式，讓讀者在進入網站的當下，就能找到理解的起點。

二、從「單篇文章」走向「閱讀歷程」

傳統的新聞網站，多以「單篇文章」作為閱讀的基本單位。當設計以內容為中心時，關注的往往是文章本身，例如篇幅長短、資訊完整性，或敘事品質。

然而閱讀是一個隨時間展開的過程，對於仍在發展閱讀能力的兒少讀者而言，這一段從引發、投入到回應的過程更為關鍵。

因此，我們將閱讀重新理解為一段「歷程」、一段可被設計的經驗，並藉由《少年報導者》的角色 IP「報導仔」，在不同階段提供引導與陪伴，讓閱讀得以被展開，而不是停在某一篇文章之中。

三、讓理解不只停在個人閱讀

在多數情境中，閱讀往往是一種單向的過程：資訊被傳遞，讀者接收，而理解也停留於此。但我們認為理解並不是終點，而是思考的起點；若缺乏進一步回應與交流的機會，這樣的理解容易停留在既有的認知之中，難以持續深化。

因此，我們嘗試讓理解可以被延續。讓讀者在理解之後，有機會回應問題、看見他人的觀點，並在彼此之間形成思考的互動，使閱讀不只是被理解，也能被討論，逐漸轉化為個人的觀點。

讓內容被看見，是閱讀的起點。

當閱讀被視為一段歷程，理解在陪伴中得以逐步展開。

當理解不只停在個人閱讀，思考才真正發生。

我們如何重新設計閱讀體驗

在確立上述目標後，我們將這次改版的設計聚焦於三個方向：

ㄧ、重新建立資訊的可辨識性

(1) 讓內容的組織能被一眼理解：

我們從整體結構著手，改用與母品牌《報導者》一致的分類選單設計，讓使用者在進站時就能快速理解網站的內容架構，降低尋找內容的成本。

(2) 讓操作與辨識變得直覺

我們重新整理操作與視覺提示的語言，將全站按鈕統一為報導仔的品牌紅，建立一致的操作指引；並針對按鈕與卡片補上完整的互動狀態設計，使可操作的元素在不同情境下都能被清楚辨識。

插圖也被重新定義為兩種層級：一是用於建立區塊情境的大型插圖，強化整體氛圍；二是用於輔助辨識的插畫型 icon，協助使用者快速理解內容類型，使插圖成為資訊的一部分，而非裝飾。

(3) 讓內容的分區與節奏自然被看懂

我們重新設計首頁的區塊劃分，區隔「專題」、「編輯推薦」、「最新文章」與「各類主題策展」，讓不同內容在版面中各自具有明確的定位。

• 最上方的「專題」作為主要閱讀入口，置於首頁最上方，透過大尺寸卡片與場景化的波浪插圖，建立清楚的視覺焦點，引導讀者開始閱讀。
• 中段的「編輯推薦」與「最新文章」透過版型與資訊層次的差異，讓讀者在瀏覽過程中快速理解內容定位，並在不同內容之間自然切換。
• 下方的「各類主題策展」則重新整理原有分類結構，將分散的多層分類收斂為四個主要類別，並以「關鍵字跑馬燈」的形式，輪播呈現不同主題，使分類之間形成清楚的層級，同時維持版面的節奏與閱讀的流動性。

二、在閱讀歷程中設計引導節點

我們將「報導仔」轉化為閱讀過程中的陪伴角色，並在前、中、後每一個節點設計對應的支持方式。

在設計師 Ethan 與工程師秉錡的協作下，為「報導仔」設計並實作一系列對應不同情境的動態表現，使其能在文章頁的不同閱讀階段中，提供小讀者們適時的提示、回應與陪伴。

(1) 開始閱讀前，降低進入的門檻

進入文章頁面後，「報導仔」會跳出並以簡短且具吸引力的內容摘要，協助讀者快速理解主題、建立清楚預期，並產生進一步閱讀的興趣。

(2) 在閱讀過程中：陪伴與鼓勵

我們希望讓讀者能持續專注於內容本身，避免過多干擾；此時「報導仔」並不會直接介入閱讀，而是透過翻頁時的動態變化，陪伴讀者持續前進。

同時，我們也設計了隱性的節點：當閱讀進度達一定比例後，若讀者主動點擊「報導仔」展開對話視窗，將會看到不同階段的鼓勵訊息，例如「進度很棒！再看一下下，最後會有小挑戰等你破解！」，在不打斷閱讀的前提下，提供動力。

(3) 閱讀之後，與AI協作提問、引導思辨

我們將讀後問答設計為閱讀歷程中的下一個關鍵節點。讀者在完成文章閱讀後，會進入選擇題和思辨題的回應過程，透過問題引導，將原本停留在理解的內容，轉化為主動的思考與表達。

在這個機制背後，我們也導入 AI 問題生成功能：系統會先針對文章內容進行分析，依據多項指標生成初步題目，再透過人工校正與調整，產出更貼近兒少閱讀脈絡的思辨問題。透過這樣的人機協作流程，我們得以在維持題目品質的同時，提高內容產出的效率，讓更多文章能延伸出可被回應與討論的提問。

除了讀後的思辨引導，我們也進一步設計延伸閱讀的路徑。讀者可以在站內持續瀏覽《少年報導者》的相關文章，或進一步連結至母品牌《報導者》的深入報導，依據自身興趣與理解程度，逐步拓展對議題的認識。

三、讓閱讀產生回應與連結

我們在讀者完成思辨題後，設計下一個延續閱讀的節點。透過「報導仔」的引導，讀者可以進入聚合所有回應的「小讀者觀點大集合頁」，看見不同人如何回應同一個議題，並透過按下星星表達共鳴。

在這些觀點之間來回對照，兒少讀者得以接觸更多不同的思考角度，逐步擴展對議題的理解；同時，對於容易受到同儕影響的青少年而言，這樣的設計也讓他們更容易從他人觀點出發，進一步拓展探索面向與思考深度。

當閱讀被這樣重新理解，設計所面對的也不再只是畫面的優化，而是需要回應閱讀在不同階段中的轉換──如何被看見、如何被引導，以及如何被延續；而這些設計的背後，其實都在回應同一件事：

我們如何分配注意力、聚焦於什麼，並讓其他雜訊退到背景。

後記：在當下做出選擇，為未來留下空間

這次改版的過程中，我逐漸意識到，對一個仍在發展中的品牌而言，設計不只是做出更完整的樣子，而是回應此刻真正需要的問題。

一開始，在處理《少年報導者》既有的紅、黃、藍三色印象時，我直覺地嘗試用更多視覺效果來豐富畫面，例如將色塊做成模糊背景。但隨著討論推進，我們逐漸發現，現階段更重要的，或許不是增加新的風格語言，而是先補上數位產品層面的缺漏。

從品牌發展的時間軸回頭看，《少年報導者》初期建立的是平面識別，但對網站這個產品來說，仍缺乏一套能支撐閱讀與操作的數位設計系統。因此這次改版，我們沒有選擇一次完成整體品牌重整，而是回到更根本的問題：哪些設計，能讓內容被更好地理解與使用，並在未來持續延伸。

也因此，這次的設計多從「沿用與轉化」出發。我們延續既有的三色印象，重新思考其在數位介面中的位置；保留插圖語言，重新定義其角色；沒有急著加入新的視覺風格，而是先讓網站長出一套可被使用的設計基礎。

對我來說，這樣的轉向，其實很符合《少年報導者》所談的成長。那些未實現的完美設想，曾讓我感到可惜與遺憾，但回過頭來看，它們並不是被捨棄，而是暫時保留、騰出位置──讓這個產品，能在此刻先長出最需要的樣子，同時保留未來發展的可能。

如果對《少年報導者》的網站有任何建議或感想，歡迎留言給我們回饋！喜歡這篇文章，請拍拍手👏給我們鼓勵吧！

📣有你，才有《報導者》
 
《報導者》秉持深度、開放、非營利的精神，透過讀者的贊助支持來營運，不仰賴商業廣告置入。
如果您認同我們的理念，歡迎與我們一起前進，共同推動這場媒體小革命。
 
☛贊助我們：https://bit.ly/3ylK401
 
官方網站：https://bit.ly/3rTeR1V 
粉絲專頁：https://bit.ly/37jjGYD
Instagram：https://bit.ly/3rWFQJV

為兒少重新打造數位閱讀體驗：《少年報導者》網站改版的設計思考 was originally published in 報導者開放實驗室 on Medium, where people are continuing the conversation by highlighting and responding to this story.

去年（2025）12月，台南新營圓環標線改造完工、成為台灣首座「螺旋圓環」之際，《報導者》推出〈全台圓環體檢〉系列報導（上篇、下篇）。我與記者雨佑合作，梳理全台灣119個圓環的事故數據，並且透過碰撞型態資料，解析圓環中的事故都發生在何處、哪些是好圓環，以及哪些有待加強。最後也透過攝影佩穎和設計師Ethan的協作，製成一系列互動圖表與第一人稱（POV）影片。

系列報導數據奠基於過去6年（2020至2025年）的警政署A1、A2傷亡事故資料庫，雖然是公開資料，但《報導者》透過詳盡的資料清洗與對照，不僅從資料海中獨立出圓環事故，更製成能夠詳細到解釋「車禍如何發生」的碰撞型態地圖。

本文將分享我們逐步探索、轉換資料庫的方法論，以及如何結合記者的實地觀察和專家建議，將219萬筆資料的龐雜公開資料庫，轉化為清晰的圖像與故事，提供對交通事故資料有興趣的讀者參考。

交通議題數字不少，卻缺乏「立體感」

台北市政府2025年6月宣布拆除公館圓環時，各方都提出數據爭論圓環與正交路口的安全性、效率等議題，卻無法取得共識。

．「公館圓環拆除 事故件數狂降47％」
．「標線重繪路型，歸仁圓環事故降三成五」

這些是在現況交通描述與工程成果時，最常見的詮釋方法：單一的數字增降幅。但影響這些指標的層面很廣，從直觀的交通流量、分隔島位置，到微小的標線設計巧思，都有可能大幅影響傷亡事故數量。

我們希望除了提供發生「多少件」事故、「在哪裡」最容易發生等統計數字之外，能透過資料的整理與視覺化，呈現將事故「為什麼發生」與交通數據的「立體感」；讓長年交通領域對圓環、事故等的論述，可以用數據、圖像被證實出來。

想要做到這點，就必須要精準地呈現事故發生位置與「碰撞型態」，以下將說明我們如何克服資料清洗上的兩個障礙：

障礙1：沒有圓環分類，從茫茫點位中找到「圓環列表」

在題目聚焦之後，我進入資料庫，想辦法篩選出屬於「圓環」的欄位。攤開219萬筆的資料表後發現，記錄地點的欄位，除了GPS座標之外，只剩下敘述性的「發生地點」欄位。且這裡的文字敘述並沒有統一的規格、細緻程度不一，從「基隆路羅斯福路口」到「新北市三重區重新路3段49號前0.0公尺」都是常見的說法。

幸好，再仔細篩選資料之後，我們發現「道路類型子型態」欄位中有圓環這個選項，並以此作為第一波篩選圓環事故地圖的標的。

不過當第一版資料跑出來之後，我跟記者雨佑都覺得事故數量有點不太對，跟官方新聞稿數據對不起來，也跟報導公館圓環時自台北市政府交工處取得的數據相差甚遠。

果然，再把資料放進GIS地圖軟體後，我們發現這個欄位的篩選效果，只有涵蓋實際上GPS座標在圓環中事故的一半。代表許多實際發生在圓環的事故，並沒有「圓環」這個標籤。

可能的原因有很多，我們透過採訪得出的推論是，現行交通填表的說明指引有限，連公部門自己都沒有圓環的清楚定義或列表，且圓環種類複雜，現場填表記錄的員警難以判斷「這裡算不算圓環」，就將事故記錄為「多岔路」或「彎曲路」等相近的選項。

因為現場紀錄可能會填錯分類，所以我們不能只看表格裡寫了什麼，必須直接用地圖定位去抓「在哪裡發生的」，才能把將近一半被漏記的圓環事故找回來。我們從下列兩階段步驟得出圓環事故地圖：

步驟1：從少量資料中先找出「圓環在哪裡？」

圓環在交通統計中沒有明確的定義，更不可能有公開的「圓環列表」，所以我們在畫出範圍整理資料前，必須先從現有資料中找到「圓環在哪裡」。

從「道路類型子型態」篩選出來的點位雖然有所缺漏，但還是非常有價值。我們接著應用機器學習技術中的群聚演算法DBSCAN，它可以幫助我們將空間中密度較高的相似點位聚集在一起，並且排除低密度的「例外點位」。操作時可以直接在地理圖資系統軟體QGIS中分析、或是將資料匯出後使用Python Scikit-learn 套件計算。

套用在事故資料庫上，演算法可以幫我們將鄰近的事故點位標記為同一個群組，並且初步排除只有少數點位、可能是登記錯誤的事故。

電腦演算法只能告訴我們「這裡有一個圓環」，接著需要拿著這些群組的座標，人工透過Google地圖、街景等方式，辨識出圓環的名稱、所在縣市等資訊，至此我們才獲得全台119個圓環總表。

步驟2：人工畫出119圓環空間範圍重新篩選

接著，我們再逐一繪製119個圓環的矩形空間範圍，標準為至少涵蓋圓環全部圓形範圍、最遠畫至路口行人穿越道為止。後重新進到資料庫，篩選出實際空間上發生在圓環中的事故資料。

人工檢查、比對並移除不合理路名等點位後，我們才有一個完整的圓環事故點位地圖，此時整理後的資料，大約是一開始使用「道路類型子型態」欄位篩選的兩倍。

以台南民生綠園圓環為例，使用空間範圍篩選出來的事故數，約是僅使用欄位篩選的兩倍

將圓環統計出來之後，我們也更加確信自行處理資料、掌握數據的重要性：在《報導者》整理的圓環資料中，過去6年（2020至2025年）台北市事故數最多的圓環，其實是「景福門圓環」。只不過在政府官方數據（例如交通部道安司道安總動員）的統計方法中，這個圓環是由5個路口所組成，並沒有聚集成為一個路口，就像一個蛋糕被切成五塊一樣，上面的草莓自然不會比整塊蛋糕多。

障礙2：資料中「怎麼撞」不夠完整，透過補充資訊與兩塊鳳梨酥還原事故型態

如果要回答圓環中事故都「如何」發生，單有圓環列表跟事故地圖是不夠的，我們需要更加明確的「碰撞型態」。意思是我們需要知道這件事故是擦撞、側撞，還是追撞等，以及它們的「方向性」是左轉進環、還是右轉出環等等。

一開始我們希望透過縣市政府交通局，拿到這些路口、圓環的「碰撞構圖」，這是各工程單位在做道路改造前，向警察局索取事故現場手繪圖，人工判讀畫出的路口碰撞分析地圖，也是最精準的事故分析。然而，我們發現這類圖資是在工程單位有需求時才會製圖，並非所有路口都有這些資料，只好回到我們手上的公開資料持續擴充。

回到事故資料庫的欄位，我們看到「事故類型及型態子類別名稱」欄位有記錄側撞、追撞、擦撞等類型，但缺了更細緻的「方向性」。我再次把資料欄位中前2當事人的「行動狀態」和「碰撞部位」排列組合對照表拉出來，研究可能的對照方式，嘗試「解剖」事故資料庫，切出更具有分析意義的標籤。

中秋節後的某天上午，我跟雨佑在《報導者》辦公室看著這張表逐一對照事故資訊與型態，當需要釐清「A車右轉、B車向前」且「A車右側車身撞擊、B車左側車身撞擊」是什麼事故類型時，我們就拿起桌上（可能放了超過一個月）的兩塊鳳梨酥分別作為A車、B車，盡可能一案一案將事故類型還原出來，記錄在公開的對照表中。

地圖終於完成後，感謝雨佑的豐富經驗與反覆盤查，我認為我們確實做到將交通數據「立體化」了！例如：打開台南後甲圓環的地圖，除了從照片中發現它是一個中間有正交路口的圓環之外，更可以從事故型態的標記中發現，正交路口常見的交叉撞卻出現在圓環的出入環處，說明了此類路口設計的瑕疵。

設計師：「第一次畫有25個圖例的地圖」
我們如何聚焦地圖資料、視覺化並製作互動元件

完成圓環傷亡資料庫後，除了使用ArcGIS設計成互動地圖外，我們也應用在報導中，透過互動元件的設計，呈現每個圓環最主要的碰撞類型。

因為交通事故類型繁雜，每一種不同的方向性、碰撞類型都有各自的意涵，以致於我們最終整理的資料庫中有多達25種圖例。但在文章呈現的個案圓環中，並非所有事故都是我們主要呈現的類別，例如台南後甲圓環強調路口設計導致交叉撞、台南歸仁圓環則強調標線改造後向右側撞減少。

為此，我們自行設計了嵌入文章版本的互動元件，讓讀者即時篩選我們想要強調的四種事故型態，並且切換圓環改造前後的底圖和事故類型──透過簡單的互動，協助讀者能進一步了解我們想傳達的觀點。雖然是微小的細節，但我們都希望可以多做一些讓報導更好閱讀、更好吸收。

此外，為了讓讀者能夠更明確地體會到交通設計的優劣之處，記者雨佑和攝影佩穎也到多個圓環現場，結合第一人稱影片製成動態圖卡，讓文章除了空拍、衛星圖俯瞰之外，有了更親切的視角。

結語

唯有了解資訊、指標的產製方式，才能夠掌握數據的解釋權，找出最適合的切角。

〈全台圓環體檢〉系列報導是我第一次如此細緻地整理公開資料集，透過各種形式的比對，在既有資料庫基礎上處理，從不缺乏數字的交通議題中，看到新的詮釋方式。過程中結合技術應用、量化數字、質化的訪談，以及不可缺少手工業，才整理出這筆資料庫。也感謝雨佑、Ethan以及Data小組奕甫、毅慧的協助，讓我在整個題目近3個月的製作期中，能夠逐步聚焦、迭代資料處理以及視覺化方向。

若對資料有任何建議或疑問，或想交流任何資料新聞（Data Journalism）想法，可寄信至《報導者》Data小組信箱：data@twreporter.org

📣有你，才有《報導者》
 
《報導者》秉持深度、開放、非營利的精神，透過讀者的贊助支持來營運，不仰賴商業廣告置入。
如果您認同我們的理念，歡迎與我們一起前進，共同推動這場媒體小革命。
 
☛贊助我們：https://bit.ly/3ylK401
 
官方網站：https://bit.ly/3rTeR1V 
粉絲專頁：https://bit.ly/37jjGYD
Instagram：https://bit.ly/3rWFQJV

〈全台圓環體檢〉數據幕後：兩塊鳳梨酥＋機器學習演算法，如何幫我們從219萬筆交通資料庫拆解圓環設計問題？ was originally published in 報導者開放實驗室 on Medium, where people are continuing the conversation by highlighting and responding to this story.

這個全新的平台，前身是我們在 2024 年選前推出的「立委發言儀表板」。當時不僅在社群上引發廣大討論，也帶來上千次贊助頁面的點擊，清楚顯示出民眾對理解國會政治的高度需求，這促使我們在 2025 年進一步打造出更完善的觀測工具。

本文將從產品設計的角度，分享我們如何透過使用者研究，把這些期待一步步轉化為《報導者觀測站》的設計，來回應資訊過載、缺乏脈絡等挑戰，以及我在過程中的收穫與學習。

文／劉邦豐（《報導者》產品設計師）

文章架構：

ㄧ、兩大族群的使用情境探查
二、我們聽見的四個聲音
三、設計如何回應這些發現
四、後記：勇於假設，輕盈前行

一、兩大族群的使用情境探查

在產品開發之前，我們先做了一個網站原型，並規劃對潛在使用者進行訪談與易用性測試。目標很單純：確保《報導者觀測站》成為一個清晰、好用的政治分析工具。

研究的切入點來自第一線記者跑新聞的經驗──《報導者》記者許詩愷在接受英國西敏寺民主基金會（Westminster Foundation for Democracy,WFD）委託研究員的訪談時，分享了自己在使用立法院資料、記錄分析立委在委員會與院會的質詢發言時分別遇到哪些挑戰。從中我們看到一個核心需求：如何將冗長的發言逐字稿，轉化為可閱讀的資訊。

在這份紀錄裡，「質詢」對記者而言既是機會，也是挑戰。好處在於，透過立委的發問，原本難以取得的政府資料會被迫揭露，成為報導的線索；然而，這些追問也常夾雜複雜的政治語言與策略性修辭，需要謹慎判讀──而這些機會與限制，都在逐字稿中被完整留下。

因此，我們決定以記錄了發言逐字稿的「立法院公報」為核心，展開使用者訪談。依使用頻率，將受訪對象分為兩大族群：

❶ 重度使用者：國會議員助理、立委辦公室主任、政治線記者、學術研究員、NGO 工作者、小黨成員與中央機關公務員。

❷ 一般使用者：關心公共議題、但非專職使用國會資料的群體。

我們採用半結構式訪談。

• 對重度使用者，訪談重點圍繞在：日常工作流程、資料整理方式、公報的使用經驗、對《報導者觀測站》的需求與期待，以及他們對工具潛在影響力的看法。
• 對一般使用者，則聚焦於：關注政治議題的觸發點、持續追蹤議題的方式與管道、對產品的設計想法，以及對政治資訊透明度的期待。

同時，我們也安排了易用性測試，請受測者操作網站原型並以「放聲思考法（think-aloud）」描述思路。我們設計了 7 項任務，觀察他們如何查找立委發言、特定議題、切換瀏覽模式與使用篩選工具，來檢驗介面是否真正回應需求。

二、我們聽見的四個聲音

我們邀請 10 位使用者進行訪談與易用性測試，了解他們在立法院網站找資料的困境，以及對《報導者觀測站》網站原型的感受與建議，整理出 4 個反覆出現的痛點，這些研究洞察成為後續設計調整的依據：

1. 在龐雜資訊裡找不到方向

各類使用者皆面臨政治資訊龐雜、零散難整合的困境。立委助理必須處理海量資料卻缺乏有效工具；NGO 與記者難以快速掌握議題脈絡；民眾則多依賴社群片段內容，對資訊真實性也存疑。

2. 想快速理解，卻缺少摘要與脈絡

現有資訊缺少摘要、背景與時間軸，導致議題難以理解。立委助理與 NGO 需要快速掌握要點，卻受制於冗長的公報與影音；民眾則期待以白話列點和法案進度時間軸來釐清前因後果。

3. 搜尋不到、介面難用的挫折

立法院現有系統被批評搜尋不精準、介面不直覺。立委助理需要反覆下載檔案手動查找；NGO 與記者難以定位議題內容；公務員與民眾則認為操作門檻高、使用體驗差，嚴重影響效率與使用意願。

4. AI 摘要：一邊期待，一邊擔憂

使用者期待 AI 協助摘要與整理龐雜資訊，提升效率；但同時也擔心誤判、偏誤與資料安全，強調仍需人工審核。專業使用者看重 AI 在處理冗長公報與影音的潛力；民眾則希望獲得白話摘要與脈絡，但普遍關注其準確性。

三、設計如何回應這些發現

綜合上述研究洞察，我們將《報導者觀測站》的設計改善聚焦於 3 個方向：

1. 補足背景脈絡

(1) 在進站接觸點上呈現相關資訊

• 首頁：由原本的「看立委」改為預設顯示「看議題」，方便使用者從宏觀角度切入，讓議題導向的使用路徑更清晰。
• 立委獨立頁：呈現基本資料、本屆所屬委員會與曾任屆期等個人化資訊，幫助使用者快速建立對立委的基本認識。
• 議題獨立頁：呈現發言人數、發言總數，以及《報導者》在該議題的相關文章，讓使用者能同時掌握數據概況與延伸閱讀。

透過這些設計，使用者無論是從哪個入口進站，都能立即獲得清晰的脈絡資訊，減少摸索成本並提升理解效率。

(2) 建構質詢時間軸與重點切片

在「質詢紀錄全文頁」，我們針對冗長的逐字稿，提供列點摘要作為前言，並新增列席質詢對象與相關議題，讓使用者能快速鎖定重點。同時，也提供該發言的 iVOD 連結與當天前後相鄰的發言紀錄，讓使用者理解發言在整體流程中的前後脈絡，從而更有效掌握議題進程。

(3) 固定基礎資訊與常用工具，不隨頁面捲動

在「質詢紀錄全文頁」的滾動閱讀時，固定顯示標題與日期，確保使用者在長篇內容中始終掌握核心資訊。同時保留字體大小調整、列印與社群分享，以及 iVOD按鈕等常用工具，提升操作效率與便利性。

2. 精準搜尋與自由探索並行

在最初的規劃裡，我們把全站搜尋排在 Phase 2。這樣的安排源於我們對搜尋品質的要求：若搜尋結果不夠精準，反而會削弱整體體驗。因此， 在 Phase 1 的設計中，我們以「側邊欄探索」設計作為主要入口。使用者可以透過動態點擊不同的議題或立委，自由切換側邊欄的顯示內容。

然而，在幾場訪談與易用性測試後，我們發現幾乎所有人都把「快速找到需要的資訊」列為首要需求。這迫使我們重新檢視策略：全站搜尋必須提前釋出，並成為 Phase 1 的核心功能。

同時，我們也反覆討論是否要保留側邊欄。它的設計初衷是滿足探索需求──當讀者沒有明確關鍵字時，能透過逐步篩選縮小範圍，甚至意外發現資訊。最終，我們選擇兼容兩者：在強化搜尋的同時，保留側邊欄作為探索的輔助，讓《報導者觀測站》同時兼顧效率與探索的多樣需求。

3. 建立可信的回報機制

在立委／議題獨立頁及質詢紀錄全文頁，右下角新增了「問題回報」按鈕，讓使用者能直接回饋 AI 摘要或資訊內容的疑慮。這些回報將會即時串接至《報導者》內部的 Slack 頻道，交由編輯團隊人工審核與調整，確保資訊品質與可信度。

四、後記：勇於假設，輕盈前行

《報導者觀測站》是我加入《報導者》後的第一個專案。作為產品設計師，從零打造新產品並執行研究的經驗彌足珍貴。在這段旅程中，有兩件事至今仍令我印象深刻。

首先，是及早意識到「搜尋」功能的關鍵性。
原本它規劃在 Phase 2 才會推出，但透過多場訪談與易用性測試，我們意識到這是使用者最急迫的需求。於是我們調整策略，將其提前納入 Phase 1。能在初期就察覺使用者需求，提前滿足、避免危機，對我而言實在是既幸運又幸福的深刻經驗。更讓我再次體會到使用者研究帶來的龐大價值。

其次，是易用性測試獲得了遠超預期的評價。
10 位受測者在 SUS 量表（System Usability Scale）的平均分數高達 86.75 分（超過 80 分即評級為 A）。這不僅肯定了介面的友善度，更深刻反映出讀者們對《報導者》所承載的夢想與信任。然而，這樣的高分同時也帶來一份「戒慎恐懼」，提醒我必須更加謹慎，用更高的標準來檢視自己的設計，以不負眾人期待。

最後，想分享一段在過程中時常浮現在我腦海的話：

在精實創業模式裡，初創事業所做的每一件事，包括每項產品、每種功能、每套行銷活動，都被解讀成一個為了獲得「驗證後的學習心得」所進行的實驗。

這句話不僅點出了產品開發的本質，也提醒我在面對設計的解題焦慮時，要用「墊步」般的小動作調整步伐，保持實驗心態，輕盈前行。

如果對《報導者》的新產品《報導者觀測站》有任何建議或感想，歡迎留言給我們回饋！喜歡這篇文章，請拍拍手👏給我們鼓勵吧！

📣有你，才有《報導者》
 
《報導者》秉持深度、開放、非營利的精神，透過讀者的贊助支持來營運，不仰賴商業廣告置入。
如果您認同我們的理念，歡迎與我們一起前進，共同推動這場媒體小革命。
 
☛贊助我們：https://bit.ly/3ylK401
 
官方網站：https://bit.ly/3rTeR1V 
粉絲專頁：https://bit.ly/37jjGYD
Instagram：https://bit.ly/3rWFQJV

【報導者觀測站設計幕後】我們如何透過使用者研究，打造一個清晰易用的政治分析工具 was originally published in 報導者開放實驗室 on Medium, where people are continuing the conversation by highlighting and responding to this story.

身為政治系學生、有一點數據和全端程式背景的我，一直以來都被《報導者》結合議題、數據、多媒體技術的調查報導深深吸引，覺得這正好就是我所有興趣與專長的集合，因此成為了長期的讀者（兼小粉絲）。今年寒假自告奮勇地寄了一封信到《報導者》信箱，詢問實習機會（收到回信的時候差點在路上尖叫）。在與《報導者》幾位同事聊過之後，決定以實習數據記者的身分開始在《報導者》的旅程。

對於數據處理和分析，在學校課程或是自己的閒暇時間，都曾經接觸過。但無論使用多大的資料集、先進的分析工具、學了多少統計指標和資料視覺化，每次把數據整理出來後，卻總覺得「少了點什麼」，不知道要如何接續討論。時常會問自己：這張圖很漂亮但代表了什麼？

若你也曾經看著自己的作品、作業問過這個問題，這篇文章將會分享我報到第一天，就開始上工處理這個有點複雜的《財劃法》數據科普的心得。雖然過程很緊張，但透過這次的經驗與練習，用樸實的工具，我學會為每組數據、圖表賦予意義，找出能夠回答核心問題的數據切角。

時隔25年，掌握中央與地方財權分配的《財政收支劃分法》，2024年末在立法院通過修正案，對各層級政府預算皆有不小的影響。在各黨派的紛爭中，我們希望透過數據，回答兩個讀者最關心的問題：

1. 《財劃法》需要修嗎？現在地方政府的財政狀況如何？
2. 修正案通過後，有沒有預算或施政項目可能受到影響？程度有多大？

除了使用政府提供的統計數字、指標外，《報導者》也嘗試以程式爬梳地方政府預算書資料，解析政府預算來源。

以下將分享我們的思考歷程、使用的工具，以及將PDF格式的政府預算書清洗成結構化資料的過程，提供想要研究政府預算書的讀者參考。

解析政府預算書資料（Data Parsing）

中央政府依據《財劃法》挹注地方政府的財源可以分成3類：統籌分配稅、一般性補助以及計畫型補助。2024年末的修正案，除了擴大統籌分配稅款之外，更為一般性補助款設定了不得低於施行前一年度金額的下限。對於中央政府來說，若要調度財源、減少補助支出，只能從刪減「計畫型補助」著手。因此，解析計畫型補助對地方政府的重要性以及衝擊，成了本題分析的第一步。

攤開縣市政府預算書，歲入、歲出、規費收入、教育支出等項目，都有自己的加總值，唯獨「一般性補助」和「計畫型補助」，與其他協助收入，被合併在「補助與協助收入」中計算，沒有獨立的統計欄位，使我們無法快速取得計畫型補助款項。

計畫型補助藏在哪裡？

我們發現，取得計畫型補助資料唯一的方式，就是在「歲入來源別預算表」中，逐條尋找計畫型補助後加總。然而每份動輒上百頁的預算表，在有限的時間內要人工梳理，看來是一個不可能的任務。

更艱難的挑戰是，所有預算表都是合併表格PDF檔案，並非結構化資料，無法直接分析。在嘗試了AI工具，發現結果不太精準之後，我們決定走回傳統的資料清洗模式：從觀察資料的「規律」開始，寫Python程式碼處理。

在真正把頭洗下去寫程式之前，我們要先觀察資料的「規律」是否存在？此時我做的第一步是先用「文字敘述」歸納22縣市政府預算表中通用的規則。在經過多次的觀察和嘗試之後，我們發現：

每一頁的表格，雖然科目名稱的長度與行數都不同，但是每個科目名稱都會附上一筆「數字編號」。這頁裡面有多少條項目，就有多少組數字編號。因此，以下圖為例，「名稱及編號」欄中的第二組數字，和隔壁「本年度預算數」與「上年度預算數」欄的第二組數字應該被當作同一列。

檢驗這段述敘在每份預算表都適用之後，就可以真正開始處理數據了。

一、資料預處理：提取PDF表格工具

把給「印表機」看的檔案，翻譯給電腦看

第一步我們透過公民科技社群g0v工程師王向榮（@ronnywang）製作的PDF Tables Extractor工具，將PDF中的表格，轉檔成CSV格式。

透過這個工具產出的資料仍是合併表格的形式，尚未完成結構化，同一列中包含需要被切分的多列資訊，這時候就需要用上資料的規則，將每列合併起來的資訊重新切開。

二、正則表達式 （Regex）

把「文字敘述」的規則，翻譯給電腦看

這個步驟我們用到的工具是「正則表達式」（Regular Expression, Regex）。它是由特殊符號組成的「文字模板」，可以讓我們把文字敘述的規則，轉換成可以透過程式操作的語法。像「篩子」一般，從一長串的文字中，逐一比對篩選出我們想要的資料。

以下是我們用來拆分「名稱和編號」欄位的Regex：

(\d+)|([ ]+)|([^\d ]+)

這段 Regex 由幾個語法和文字組成：

• ( )：表示「群組」，可以將我們分別想要配對的文字分組，像這裡就有3個群組
• |：「或」符號，表示我們希望配對的是3個群組中任一種
• [ ]：「文字集合」符號，配對裡面寫的任一符號，例如 [abc] 就會配對到 a 或 b 或 c 任一個字母
• \d：表示「任一數字」
• +：表示「一個或多個」不限數量的文字，例如 \d+ 表示配對任何連續不限長度的數字
• ^：「否定」符號，代表「不是」的意思，例如 ^\d 就表示配對所有「不是」數字的符號

測試出適合的Regex語法之後，就可以透過Python或任何程式語言（Regex的優點之一就是其跨語言的通用性），將3組「群組」的資料切開來，獲得結構化的資料。

工具分享：Regex101

Regex101可以用來快速測試Regex語法是否符合需求：把我們的Regex語法和一組測試字串輸入之後，可發現字串的確根據我們的需求，自動被切分成不同色塊，形成有意義的資料。

經過一番整理之後，我們從22縣市政府預算書中，提取出約400筆的計畫型補助款資料。並將其視覺化之後回答計畫型補助「有多重要」、「用在哪裡」、「沒有會怎樣」這三個重要的問題。

AI幫得上忙嗎？怎麼幫？

初期訂定方法論時，我們也嘗試使用AI工具處理政府預算書資料。首先我們嘗試幾種ChatGPT的模型，雖然已可辨識預算表的內容，但抓出的筆數太少且數字不準確；接著我們使用較擅長寫程式、數據分析的Claude模型，大約可以抓出8成的資料，但仍有缺漏。期望未來模型的發展可以提高資料清洗準確度，讓AI幫我們解析預算書資料。

AI工具雖然不能直接給我們魚，卻也提供幾支實用的釣竿，為我們節省很多時間：若看完前述的Regex語法介紹仍然覺得有點霧嗄嗄（bū-sà-sà，一頭霧水）的話，可以將你的測試字串與觀察到的規律提供給AI，讓它協助產出適合的Regex語法。

搭配Regex101測試工具，可以大幅減少切分字串作業的時間。

惡魔藏在細節：這個指標、項目真能表達我們想說的嗎？

處理完最複雜的資料後，我們把焦點轉回第一個問題：《財劃法》有需要修嗎？我們希望透過數據，更宏觀地了解地方政府財務狀況。

由於初期研究需要多項不同的指標，以及較大的時間跨度，我們找到了由行政院主計總處製作的「縣市重要統計指標查詢系統」。這套系統提供地方政府從民生、醫療、照護到財政多個統計指標，時間尺度從1998年到現今的資料都包含，更可分別查詢縣市改制前後的資料。

難題1：資料庫很完整，但既有指標能給的可能很有限

雖然這個系統和其他政府網站提供了完整的結構化資料，但我們最後並未在資訊圖表中採用其提供的數據。原因主要是因為系統上既有的指標，未能完全符合我們希望呈現的觀點──

我們原先使用了「補助依存度」這個指標來衡量地方財政狀況，但學者受訪時建議採用通用的地方政府「自有財源率」，作為評估地方財政自主情況的指標。

然而，「統計指標查詢系統」並未提供我們「自有財源」的指標，也因為公式上的些微不同，我們無法簡易地透過公式換算從補助依存度轉換出自有財源率。

補助依存度＝補助及協助收入÷歲出

自有財源率＝（歲入—補助及協助收入）÷歲出

若我們僅是將補助依存度反過來，公式的算法與數字會有出入。

因此，雖然指標能夠快速提供我們對地方財政狀況的宏觀視角，但若要挖得更深，就必須要回到原始預算書資料的清洗，才能整理出最新且最適合的角度。

難題2：報表間不同統計方法，難以相互轉換

另外，我們在處理縣市政府「財政僵化」時，也遇到一些困難。我們原先希望可以從「人事＋退撫」費用占政府自有財源的比例，了解縣市政府若沒有中央補助，在付完這些「不能省」的支出之後，還剩下多少經費可以活用？

然而在詢問台北市政府後，官員告訴我們預算書上兩筆分別和「人事」與「退撫」相關的資料是來自兩種不同的報表項目，無法直接加總：

1. 歲出人事費用彙計表是「用途別」，表示用在「人事」上的費用，也就是所有僱員的薪水
2. 歲入歲出簡明比較分析表中的退休撫卹支出是「政事別」，表示為了達成「退撫」工作的所有支出，包含退撫金之外，也涵蓋處理發放退撫金的「業務費」（可能包含人事、辦公室水電等）

因此想要更完整的資料，就必須要再深挖預算書資料，才能精準計算。後續因為時間的關係，短影音〈誰是新版《財劃法》贏家？數據解析修法關鍵結果與隱憂〉則單獨以「人事費占歲出比例」做呈現，這也是這題比較遺憾沒有詳細處理到的部分。

思考視覺化：如何讓圖表一目瞭然？

在定題到上稿的過程中，數據小組提供給記者參考的數據圖表和簡報，一直在更新。而這樣的更新並非是因為數據來源或公式有誤，而是為了因應局處機關的新說法、受訪學者的建議，我們不斷地尋找新方法、數據切角，一目瞭然地呈現我們想要告訴讀者的觀點。

透過圖表直接傳達觀點和Insight

讓想傳達的資訊轉愈少彎愈好

在處理資料的過程中，作為接觸相對多資訊的我，時常會陷入已知的知識中，只著重在呈現「數字」的改變，並沒有將數據的現象，套入背景知識中詮釋。

試想這兩個陳述：

1. 修法後苗栗縣的自有財源率從50%提升到66%
2. 修法後自有財源比例未達50%的縣市從15個變成2個，代表大部分縣市的財源中，有一半是自己控制的

前者的說法，可能讓不了解脈絡的讀者，單看數據無法與現實連結，可能也看不懂從50%到66%的意義是什麼。而後者提供輔助指標（50%）及意義，以及現況如何改變，讓讀者可以更快理解數據背後的現實。

透過這次的經驗，我也了解到，過往我洋洋灑灑說明了「數字」的移動現象之後，常常會給人一種話沒說完、「然後呢？」的感覺，就是因為忽略了背景知識，以及最重要的直接「意義」和「Insight」，這些反而成了給讀者的回家作業，需要自行連結起來才能看懂數據分析。

呈現時間、類別間的數據差異幅度：Connected-dots Plot

在本題中，比較修法前後的影響是關鍵，因此呈現不同「時間點」間的差異就是資料視覺化的重點。我們這次捨去經典但資訊量較低的長條圖及折線圖，改透過Connected-dots形式的視覺圖表，在同一個數值軸上，呈現不同時間段的資料，讓讀者可以分別從「同一個縣市不同時間」和「同一時間不同縣市」兩個層面了解人均自有財源「差了多少？」

結語

總結來說，面對AI都抓不出來的文件時，雖然處理起來有更多的步驟，但只要善用資料「規律」的觀察，就可以讓我們用簡單的工具，一步一步把給印表機看的PDF「文件」，透過清洗、分析變成規律的「數據」。同時注意數字和議題的連結，就可以產出好懂的觀點與圖表。

透過這次觀察與清洗資料的練習，讓我從各種程式語言、統計方式等「工具」的研究稍微脫離，將自己放入「讀者」的角色，進化成可以整合議題與數據，給出有意義的觀察以及好懂的詮釋，協助製作新聞的數據記者。

最後想要分享一個插曲：在驗算各縣市政府「歲入合計」金額時，我發現不同來源的預算資料有出入，重新確認了好幾次資料還是對不起來，最後在記者追問下才得以釐清細節。這次的經歷，也再次讓我看到在《報導者》「數據」與「議題」結合的重要性，透過數據小組和記者的密切合作，才能把小至數字出入、大至修法影響的分析，做得更完整。

練習給出觀察的同時，我也體會到：所有的數據或圖表，都並非全然客觀的資料，而是帶有特定觀點。不同的指標和詮釋方式，有可能會給出不同的政策結論。因此在製作與分析數據的過程中，必須要格外注意，我們想要透過這張圖，傳達給讀者什麼觀點。

在這篇報導的製作過程中，我很感謝毅慧、馥伊、德琳和彥成的幫忙與提點，才能讓初入資料新聞世界的我能夠產出更完整的數據分析。

以上是我們製作《財劃法》數據科普的心得與方法分享，希望能幫助到對數據分析、政府預算書有興趣的讀者。

📣有你，才有《報導者》

《報導者》秉持深度、開放、非營利的精神，透過讀者的贊助支持來營運，不仰賴商業廣告置入。
如果您認同我們的理念，歡迎與我們一起前進，共同推動這場媒體小革命。

☛贊助我們：https://bit.ly/3ylK401

官方網站：https://bit.ly/3rTeR1V
粉絲專頁：https://bit.ly/37jjGYD
Instagram：https://bit.ly/3rWFQJV

《財劃法》數據科普幕後，我們如何處理近四千頁AI看不懂的政府預算書？ was originally published in 報導者開放實驗室 on Medium, where people are continuing the conversation by highlighting and responding to this story.

秉持深度、開放、非營利精神，《報導者》自創立以來，每個數位新聞專題作品的原始碼皆公開於 GitHub 平台供社會大眾自由使用，在一次次的數位敘事實驗與研究中，我們發現有些功能適合單獨取出、應用在個別報導中，因此著手開發易於使用的新聞小工具（網頁元件），並公開釋出技術，讓不會寫程式的使用者也能透過《報導者》開發的「報導者數位敘事元件庫」取得直接置入網頁中的程式碼，不必額外撰寫程式碼。

如果你是第一次接觸「報導者數位敘事元件庫」，可以參考文章：〈報導者數位敘事元件庫：一站完成元件的編輯與產出〉。

一開始，我們真的想很簡單

2020年，《報導者》推出了5個新聞敘事元件，其中之一是「報導者／橫著滾吧照片！」，當時工程師只是想解決照片「太寬」的閱讀體驗問題，這5年來，我們嘗試讓各種影像「橫著滾」，開發出多元敘事可能。

例如〈黃郁菁／命運不再沉默──離開新疆的維吾爾人，與他們手心上的故事〉打破以往圖文報導都是照片、文字、照片……由上往下一次排列的閱讀順序，直接以書籍版面視覺再設計，5名新疆維吾爾人的面容依次出現娓娓向讀者述說他們的故事。

〈高架化開發下縮水的國定古蹟：彰化扇庫搶救2.0，鐵道文資保存再一戰〉報導則以彰化扇形車庫的全景照直覺顯示國定古蹟劃定範圍只包括遊客最愛拍照的扇庫主體，捨去了哪些具鐵路文史意義的設施。

《從盜伐到買賣──圍繞千年神木的罪行與交易》專題中則出現圖表設計的嘗試，記者希望在文章中說明台灣最常被盜伐的四個樹種：紅檜、牛樟木、肖楠、扁柏，以一般網站原本影像呈現方式，要讓文字說明夠大，圖卡本身無法一眼看全貌，希望圖卡在網頁完整呈現文字又太小，「橫著滾」元件不只手機桌機閱讀都剛好「滿版」，還能一字排開方便比較不同樹種的差異。

此外，還有「柬埔寨詐騙手法」、「漫畫新聞」等形式，5年累積下來，同事從實作發現問題、並提出各種功能許願，工程師也對於元件的改進有不少想法，因此趁著團隊製作賽鴿專題時，我們順手將元件進化成 2.0 版本。

2.0 版本提供了以下幾個新功能：

一、新增區塊：文字、照片或embed code皆可放

在 1.0 的元件裡，如果照片需要提供文字資訊，會需要設計師將文字加工在照片當中，成為照片的一部分；此舉有兩個顯而易見的缺點：

第一，文字會因為鑲嵌在照片中，受到照片解析度影響，看起來有點模糊、不夠銳利。
第二，文字資訊不易被搜尋引擎建立索引，不利於SEO。

為了解決上述痛點，2.0 元件提供使用者可在底圖照片上「任意」新增「文字框」，可以拖拉文字框到合適的位置，也可以隨意地調整文字框的大小，文字框區塊內不只可以輸入文字，還能以照片或是 embed code呈現（下方示意圖中的「動態設計」，即是使用「embed code」）。

二、設定元件高度、最大高度和最小高度

舊版 1.0 元件在呈現照片時，預設會佔滿整個螢幕的高和寬。因此，若是讀者使用大螢幕，照片看起來會特別巨大，也會因為解析度不夠，而讓照片糊糊的。

2.0 提供照片高度、最大高度等選項，讓你可以設定照片的最大高度。當螢幕的高度大於最大高度時，照片的高度會停留在最大高度，不再撐滿整個螢幕。

舉例：我們可以設定「高度」為 100vh （撐滿整個螢幕高），「最大高度」為 800px 。照片呈現時，預設會撐滿螢幕高，但當螢幕高度大於 800px 時，照片的高度會停留在 800px 。

三、所見即所得編輯器

舊版 1.0 元件製作時僅需要把照片上傳，再把網址複製到產生器，所以沒有編輯器需求。

但 2.0 版本提供使用者在照片上新增文字框，為此，我們做了編輯器，讓使用者可以更簡單地產生「橫著滾吧！」元件。

以下是編輯器的操作方式：

1. 產生新的元件

登入「報導者數位敘事元件庫」後，點擊左側導覽列的「橫著滾吧！」，可以列出目前已經產生的元件列表。再點擊「Create 橫著滾吧！」藍色按鈕，並且輸入你要的名稱後，即可產生元件。

註：系統使用的框架還沒有支援多語系，所以會出現中英夾雜，還請包涵。

2. 新增照片

在「編輯圖片和字幕」區塊，點擊「+」按鈕，會從右側滑出圖片網址輸入框，輸入圖片網址，便能為元件添加照片。

註：照片的網址需要是 .jpg 、 .png 或是 .webp 等副檔名結尾，如果不知道怎麼將照片上傳到網路上，你可以使用左側導覽列的「上傳照片」按鈕，將照片上傳到網路空間，或是參考我們之前的文章。

3. 全螢幕編輯

點擊最左側的放大按鈕，可以將編輯器展開至全螢幕，在全螢幕模式下，你便可以新增／刪除／修改文字框。

4.新增文字

點擊最右側的新增文字框按鈕後，你的游標會變成文字框 icon；
將游標移至照片中欲添加文字的地方點擊左鍵，出現灰底方框代表已成功插入文字框。

你可以隨意放大／縮小文字框，亦可以點擊文字框左上角的「鉛筆」按鈕，進入文字框編輯模式，或是點擊「垃圾桶」按鈕，刪除該文字框。

5. 預覽畫面

點擊「眼睛」按鈕，即可隨時進入預覽模式，看看元件呈現效果。

6.儲存檔案

元件編輯告一段落時，記得儲存檔案。
你可以結束編輯模式，將頁面滑至最底端，點擊 Save Changes 按鈕，儲存目前編輯進度。

7.複製 embed code 且貼至網頁

儲存檔案後，系統會產生 embed code，你可以在 embed code 區塊看到程式碼，點擊 Copy to Clipboard 按鈕，便可一鍵複製程式碼。

接下來，只要將複製的程式碼貼到你的網頁上，便大功告成。

最後，關於已知問題，以及報導者需要的幫助

若你是用 Wix、Webflow 或是 WordPress 等架站服務產生網頁，那麼元件庫產生的 embed code 可能無法直接使用。

架站服務一般為了安全性的考量，會改寫我們貼上的 embed code，將 <script> 標籤改成用<iframe>的方式呈現。但「橫著滾吧！」元件設計需要與使用者的滑鼠滾動產生互動，因此當 embed code 被轉成以 <iframe>呈現時，會出現功能異常的情況。

數位產品團隊問了 AI 上述問題，AI 回覆 Webflow 和 WordPress 可以付錢升級，升級的版本似乎可以要求系統不要將 embed code 轉換成 <iframe>。但因為《報導者》沒有使用上述架站服務，所以這裡就需要有在使用升級版的讀者幫忙實驗，不管實驗結果如何，都歡迎來信跟我們分享，也許會有新的發現。

目前我們還沒有想到怎麼破解<iframe>產生的問題，如果你有什麼想法，歡迎你寫信到報導者數位產品部信箱： developer@twreporter.org，解救為此苦惱的工程師。

目前這個元件庫還屬於「公測版」，歡迎每一個想提前嚐鮮體驗的朋友填寫表單申請使用，期待看到你們活用這些敘事元件！

若您對更多數位敘事及新聞幕後有興趣，歡迎追蹤我們的頁面 👉 報導者開放實驗室 The Reporter Lab

﹡相關程式採 MIT 授權條款，程式碼公開在我們的 GitHub 上。

📣有你，才有《報導者》

《報導者》秉持深度、開放、非營利的精神，透過讀者的贊助支持來營運，不仰賴商業廣告置入。
如果您認同我們的理念，歡迎與我們一起前進，共同推動這場媒體小革命。

☛贊助我們：https://bit.ly/3ylK401

官方網站：https://bit.ly/3rTeR1V
粉絲專頁：https://bit.ly/37jjGYD
Instagram：https://bit.ly/3rWFQJV

「橫著滾吧照片！」升級2.0：從只是一張圖，到有了編輯與設計可能 was originally published in 報導者開放實驗室 on Medium, where people are continuing the conversation by highlighting and responding to this story.

當一個活生生的人，透過日常照片、噓寒問暖進入你的世界，你看到的這個真實景像會是什麼？如果在10年前提問，答案很少會是否定，而現在這個真實景像可能根本只是機器擬像，加上用PUA的心理設陷，在你眼前打造一幅極度真實的華麗虛幻。

大約一個月前，我們發佈了一系列6篇報導，詳述並剖析這樣的現象、手法及當事者故事。

全詐騙時代來襲：直擊社交網路時代下的沉浸式騙局 - 報導者 The Reporter

在報導發佈前兩個多月，大家進行了第一次題目激盪討論，「虛與實」成了這個題目的討論重點，在這個愈趨「虛實交融」的時代，那個「虛」往往比「實」還要「真」，不像過去的「虛」是一種「無」。一個禮拜後大家針對這個概念再討論視覺的呈現，是該「實中帶虛」、「虛中帶實」？還是「虛實各半」？要如何的視覺風格才能符合整體題目的氛圍和調性？

以「雜訊干擾、數位系統故障(glitch)」元素介入每篇主照片及專題主視覺，讓每張真實照片帶有虛擬感(cyber)，亦暗示真實世界之愛在網際空間遭駭、破壞的意象。

經過交互激盪後，我們歸納出上述的結論，也希望在整體及各篇的視覺能給讀者存在這樣的印象。從最後的專題主視覺及各篇視覺狀態，我覺得算是有所突破，達到設定。

在開始進入製作前，我們手邊有一些資源，包括AI自動合成的照片網頁、AI Deepfake的線上短影音產生器、操作手法及詐騙訊息截圖，而設計便依這些資源及視覺風格著手專題主視覺的製作，攝影則預期用自動生成的AI照片結合AI Deepfake的工具生成短影音(用當事者的聲音+AI自動生成的照片)，來克服當事者無法露臉現身的困難。

但在攝影方面沒有如預期的順利，線上短影音的AI生成器經過反覆操作，最終都以失敗作收，判斷應該是網站該功能已被移除。在題目持續進行採訪中，攝影嚴重卡關，最壞的打算只能勉強拍到配合照片而沒有整體視覺風格。

大約在卡關的差不多時間，知名的馬格蘭通訊社(Magnum)發佈了一則新聞訊息，指出成員Jonas Bendiksen的新書《The Book of Veles》運用大量的3D人形模組，經由電腦運算合成進入實際的場景之中，在這則新聞訊息發佈之前，幾乎沒有人發現，甚至還在法國的Visa Pour L’image國際新聞攝影節中發表。這個消息重新啟發了我們達成原初目標的想像。

整個過程中我們採訪到4位當事者，同時也拍攝了一些不露臉的情境照片，這些情境是依據4位當事者不同的自身經歷所設計，而後我們再依4位當事者的樣貌、體型、穿著、姿態找了相似的人來進行拍攝，再詮釋一次4位當事者的情境。我們預期打亂虛實的界線，有些用真實當事者，有些用替身，甚至是替身的正面。

當我們以為可以順利過關時，對一個不知情的讀者而言，他幾乎不會意識到我們暗置打亂虛實界線的意圖，同時也不會感受到整體題目的視覺風格定調(直觀的)，這個意圖只對我們內部的製作者有意義，我們還是陷入了僵局。但解方其實就在我們的初心，

真實世界之愛在網際空間遭駭、破壞。

真實世界的愛，是在網際空間遭到駭入及破壞，如果沒有進到網際空間，就不符合這個題目的主述，要進到網際空間，視覺上的直觀就是採用glitch介入，讓真實世界的愛與人，象徵性的進入題目主述的網際空間。在設計的研究及協助下，我們試出了一個理想的版本。

最後我們將理想的版本套用在4位真實當事者及替身身上，並且在6篇系列報導中合適之處調弄虛實界線，他們既是真實當事者，亦是諸多當事者的化身代表，喻意著：

人人都可能被騙，只是你或妳還沒有遇到而已。

※強力推薦設計師、記者與PM超沉浸精緻之作：https://www.twreporter.org/a/online-scams-solutions

你看到的真實是什麼？ was originally published in 報導者開放實驗室 on Medium, where people are continuing the conversation by highlighting and responding to this story.

「報導者數位敘事元件庫」公測版9月上線後，陸續收到使用者的反饋：「在第一個步驟『貼上檔案URL』就卡關」。進一步了解發現，許多使用者沒有程式資源或背景，存在「缺乏存放各類型檔案空間」的困境，也對「檔案絕對位址」觀念不甚清楚，經過討論，我們決定做出改變，讓元件庫更加親民好上手。

讓技術和資源限制不再阻攔好報導的誕生

為何我們如今決定重啟討論、開發可上傳檔案的功能？起心動念，是當我們知悉申請使用的支持者中，有學生、也有極小組織單位的工作者時，我們看見，有一群人甚至是沒有存放檔案的空間資源，在使用上所遇到的困境比我們預期的更多。

最終，在評估開放檔案上傳功能下，《報導者》可負擔的成本後，我們決定，開放讓使用者可以上傳音檔、影片和照片，但每個使用者至多只能上傳各 5 個檔案，且每個檔案大小上限為 25MB。不過，如果使用者為10人以下的組織團隊或是具備學生身分，都可以來信申請增加可上傳的檔案數量。

開放上傳檔案，存在較高的成本壓力，因此我們也調高了檔案被快取的時間長度，如果使用者有更新檔案並重新上傳，會直接產生新的檔案URL，使用者需要重新更新檔案URL到所使用的元件裡。舉例來說，如果上傳的某一張圖片有修改，可以透過更新圖片的方式，重新產生圖片URL，再將此URL更新到所使用的元件裡。

這個公共資源，是倚靠《報導者》既有的贊助來源才能存續，成本的管理是我們所必須平衡之處，兩難的取捨，希望獲得使用者的理解，也歡迎成為我們的贊助者，讓這樣的公共資源有機會可以更長久的經營下去。

如何上傳檔案？

1、上傳音檔

步驟1.進入上傳音檔畫面

在左側列表選擇「上傳音檔」後，將會看到《報導者》所提供的編輯範例；未來，所有由你的帳號上傳的音檔也會出現在這個頁面。

點擊上方的「Create Audio」，即可進入上傳檔案畫面（如右圖）。

步驟2. 命名、上傳檔案

為音檔命名，並填寫音檔描述，方便日後檢視檔案可作為參考資訊，點擊檔案下方的「Upload File」可開啟本機電腦的檔案選取畫面，選取要上傳的檔案並確認後，顯示畫面如右圖。

步驟3. 完成檔案上傳

點擊「Create Audio」即完成檔案上傳，並同時產生「音檔網址」，可複製此網址用於所需的元件裡。

2、上傳影片

步驟1.進入上傳影片畫面

在左側列表選擇「上傳影片」後，將會看到《報導者》所提供的編輯範例；未來，所有由你的帳號上傳的影片也會出現在這個頁面。

點擊上方的「Create Video」，即可進入上傳檔案畫面（如右圖）。

步驟2. 命名、上傳檔案

為影片命名，並填寫影片描述，方便日後檢視檔案可作為參考資訊，點擊檔案下方的「Upload File」可開啟本機電腦的檔案選取畫面，選取要上傳的檔案並確認後，顯示畫面如右圖，可為影片添加封面畫面，於「首圖」下方的選取區塊選擇已上傳的照片即可。

步驟3. 完成檔案上傳

點擊「Create Video」即完成檔案上傳，並同時產生「影片網址」，可複製此網址用於所需的元件裡。

3、上傳照片

步驟1.進入上傳照片畫面

在左側列表選擇「上傳照片」後，將會看到《報導者》所提供的編輯範例；未來，所有由你的帳號上傳的照片也會出現在這個頁面。

點擊上方的「Create Photo」，即可進入上傳檔案畫面（如右圖）。

步驟2. 命名、上傳檔案

為照片命名，並填寫照片描述。方便日後檢視檔案可作為參考資訊，點擊 Image File 下方的「Upload File」可開啟本機電腦的檔案選取畫面，選取要上傳的檔案並確認後，顯示畫面如右圖。

步驟3. 完成檔案上傳

點擊「Create Photo」即完成檔案上傳，並同時產生「照片網址」，可複製此網址用於所需的元件裡。

如何更新檔案？

步驟1.進入檔案資訊畫面

點擊 「Image File／檔案」 底下的「Change」，可開啟本機電腦的檔案選取畫面，選取要上傳的更新檔案並確認後，顯示畫面如步驟2。

步驟2.儲存更新

點擊最下方的「Save change」即完成檔案更新。

步驟3.使用新的檔案URL

完成檔案更新後，檔案網址也會自動更新成新的網址，複製此網址至需要更新檔案的元件即可。

如何刪除檔案？

方法1、於列表直接刪除

步驟1.在列表勾選要刪除的檔案

有項目被勾選時，搜尋列下方的列表資訊就會替換成勾選資訊，並顯示「Delete」(如步驟2)。

步驟2.點擊第一次「Delete」

點擊「Delete」後，會跳出再次確認是否刪除的提示框(如步驟3左圖)。

步驟3.點擊第二次「Delete」，完成刪除

點擊提示框的「Delete」後，此檔案即完成刪除（如右圖）。

方法2、進入檔案資訊畫面進行刪除

進入該檔案的資訊畫面後，其右下角有「Delete」按鈕，點擊後會跳出再次確認是否刪除的提示框（如右圖），再此點擊「Delete」即完成刪除。

為何不行用 Google 雲端連結？如何辨識有效的檔案URL？

有部分使用者回報，輸入「檔案URL」後，元件沒有正常作用，幾乎都是因為其輸入的是「檔案網址」而非「檔案絕對路徑」，很多元件都會需要使用「檔案URL」，但什麼是「檔案URL」呢？

這裡所指的「檔案URL」是指該檔案的絕對路徑，一般而言，絕對路徑的網址最後面，會顯示該檔案格式的副檔名，例如「.mp3」（音檔的副檔名）、「.mp4」（影片的副檔名）、「.png」或「.jpg」（照片的副檔名）。

如果使用 Google 雲端硬碟存放資料，該檔案的網址不是有效的「檔案URL」，因為這是 Google 所產生的頁面網址但不是該檔案的絕對路徑，同樣，透過 YouTube 所產生的也是這個影片的網址，而非影片檔案的絕對路徑，因此都會是無效的「檔案URL」，從而導致元件抓取不到檔案資料而無法正常作用。

可以再看看下圖無效和有效的「檔案URL」對照，進一步掌握「檔案URL」的使用！

持續的使用和回報問題

感謝已經加入「報導者數位敘事元件庫」的每個使用者，讓我們可以切換到使用者的角度，逐步的優化和改善這個元件庫，如果使用者有任何的困難，歡迎使用問題回報，也許下一次的優化改善就是出於你的貢獻！

如果你們已經開始產出很棒的報導，也歡迎來信與我們分享，為我們帶來最棒的鼓勵！

邀您一起公測「報導者數位敘事元件庫」

「報導者開放實驗室 The Reporter Lab」的任務之一，是提供開源的數位敘事小工具，增加說故事的方式，並且幫助減少資訊產製過程中不必要的重複工作，讓內容生產者能專注在生產優質的內容。

過去，我們陸續推出「橫著滾吧照片」、「大事件圖表產生器」、「左右互搏網頁版型」、「捲動式影片」、「大圖點我」等新聞小工具（網頁元件），讓不會寫程式的使用者也能輕鬆使用。

2024年9月，《報導者》推出了「報導者數位敘事元件庫」，以更簡單好上手的方式推送給大家，成為每個人完成數位敘事的好幫手。目前這個元件庫還屬於「公測版」，歡迎每一個想提前嘗鮮體驗的朋友填寫表單申請使用，期待看到你們活用這些敘事元件！

若您對更多數位敘事及新聞幕後有興趣，歡迎追蹤我們的頁面 👉 報導者開放實驗室 The Reporter Lab

📣有你，才有《報導者》

《報導者》秉持深度、開放、非營利的精神，透過讀者的贊助支持來營運，不仰賴商業廣告置入。
如果您認同我們的理念，歡迎與我們一起前進，共同推動這場媒體小革命。
☛贊助我們：https://bit.ly/3ylK401

官方網站：https://bit.ly/3rTeR1V
粉絲專頁：https://bit.ly/37jjGYD
Instagram：https://bit.ly/3rWFQJV

報導者數位敘事元件庫微改版：回應使用困境，開放上傳音檔、影片和照片！ was originally published in 報導者開放實驗室 on Medium, where people are continuing the conversation by highlighting and responding to this story.

自2022年底以來，AI技術的迅速發展對媒體產業產生了深遠的影響。當文字、圖像，甚至影片內容都可以輕鬆透過一個按鍵生成，記者的角色面臨哪些改變？對新聞編輯室而言，AI究竟是帶來了機遇，還是潛藏著威脅？

8月底，《報導者》舉辦了第一場「開箱報導者」活動，以AI生成的應用為主軸，邀請《報導者》設計部副主任黃禹禛、《報導者》Data小組召集人柯皓翔與《報導者》攝影部主任黃世澤，分享他們的日常工作中，關於AI的新聞實踐與反思。

活動一開始，《報導者》團隊先分享過去幾年曾在工作中應用到AI技術的案例。

設計師的AI探險記：以《獵童風暴》專題為例

《報導者》設計師黃禹禛首先分享，儘管她在2～3年前就曾使用不同的AI工具來生成圖像，但直到《獵童風暴》這則專題，她才有機會更深入地摸索Midjourney的可能與邊界。

《報導者》的專題報導在開始製作前，會由編輯部召開跨部門會議，邀請記者、攝影記者、設計師與編輯討論題目的呈現方式；而在《獵童風暴》這則專題，因為牽涉到敏感議題，不方便直接呈現當事人的畫面，因此需要設計部協助製作新聞裡的圖像。

在創作過程中，設計師會請記者提供文章的主題和關鍵字，而為了更準確地反映文章內容，設計師會不斷地與記者交換意見，確保彼此的理解一致，避免最終的視覺呈現出現落差。

在AI生成圖像的過程中，使用者會需要為AI提供prompt，也就是生成圖像的指令。然而，AI的生成結果並不總是符合需求，有時會與設計師的想像不同，或者因敏感字詞無法生成特定場景。黃禹禛舉例，她曾試圖生成與廁所相關的圖像，卻被Midjourney認定含有敏感字詞而被封禁，最終只能選擇生成「學校」等其他青少年場景。

儘管如此，AI所生成的學校場景與設計師的想像還是有落差，無論是太具中國特色的建築風格或者過於老舊的校舍，都與台灣現代的學校樣貌不符。禹禛發現，只有「家中書房」、「咖啡廳」、「自習室」等較為日常的一般場景，Midjourney才能製作出比較符合期待的圖像。

謹慎使用AI，避免生成圖像引發不當聯想

雖然AI生成工具為圖像創作者帶來了巨大的便利性，但禹禛對於其背後的風險非常謹慎。每當看到關於人像的AI生成圖，她都會心想「世界上一定有長這樣的人存在」，即使知道映入眼前的是AI生成圖像，其真實感依然令她感到驚訝。有一次，同事甚至指著某一張AI生成圖像對禹禛說：「這個人長得好像妳喔！」當下毛骨悚然的感覺還令她記憶猶新。因此，只要處理到關於人像的AI生成圖片，她都會格外小心，尤其是在處理《獵童風暴》這樣的敏感議題時，無論涉及人物或場所的圖像，都需要謹慎處理，避免影射特定個人或地點。

禹禛也強調，《報導者》設計師並不會直接使用AI生成圖像作為文章最終呈現的圖片，所有AI生成圖像都會經過後製處理，這樣的原則後來也被寫進了「《報導者》AI使用守則」裡。

準備超過一年的《報導者》AI使用守則⋯⋯

《報導者》AI使用守則從何而來？《報導者》數據記者柯皓翔接續在禹禛的分享之後說明。

皓翔先指出：「新聞媒體是面對新興技術的第一線。」隨著Midjourney、ChatGPT等AI技術在過去1～2年猛爆發展，《報導者》團隊逐漸意識到，AI不僅僅是新技術，它將徹底改變未來，這是無法忽視的趨勢。過去2～3年，《報導者》也曾嘗試在報導的設計影像中使用AI技術，例如交友詐騙專題、跨國捐卵專題，或者如島鏈專題輔助程式碼撰寫、立委儀表板專案助力資料大量分類等，隨著實驗的推進，團隊逐漸意識到需要更明確的倫理守則，尤其在與讀者溝通的方面；因此從去年開始，《報導者》團隊開始討論AI的應用，並舉辦了數場內部沙龍，邀請攝影部、社群部、編輯部和設計部等相關團隊共同探討AI工具能否融入日常編務。

在初步交換意見後，團隊發現許多跟AI有關的倫理和實務的問題需要解決，例如：圖像處理可能涉及的版權及隱私問題、數據應用伴隨的隱私風險⋯⋯在經過多次的內部討論與法律顧問諮詢後，《報導者》終於開始著手制定具體的AI使用規範。

經過超過一年的討論與準備，2024年7月2日，《報導者》正式推出了AI使用守則。此項守則的推出，也標誌著《報導者》在AI應用方面已步入正軌。

編輯室引入AI的界線在哪裡？

活動中，皓翔也分享了團隊在制定原則過程中所設想的各種情境，並進行了一場小型的讀者調查。

Ｑ：你覺得新聞媒體可不可以用AI寫報導（文字）？

（Ａ）可以，只要確認真實性無誤的前提下，應該引入AI人機協作，幫忙內容產製（17位）
（Ｂ）可以，但應限定於特定類型的報導，如財經資訊、地震消息（14位）
（Ｃ）不可用於「寫稿」，但可用於「改錯字、修體例」等單純編輯任務（8位）
（Ｄ）不可以，新聞報導的每一字一句仍應出自人類之手並掛名，與AI做出區隔（0位）

現場簡易的調查顯示，多數讀者對於AI參與報導寫作的界線偏向開放，然而《報導者》所有的報導文字其實全都是人工撰寫，並未使用AI生成。皓翔強調，團隊認為「原創性」是《報導者》非常重視的價值，如果讓AI生成的文字取代記者和編輯撰寫的文字，將會削弱報導內容的原創性，因此在可預見的未來裡，《報導者》仍會堅持由記者親自撰寫報導文字。

《報導者》注重內容原創性，所有原生報導文字內容皆為記者及編輯撰寫，未來也將以專業新聞工作者撰稿為原則。

──《報導者》AI使用守則

除了撰稿以外，皓翔也補充，AI生成內容不應該被直接用作事實查證的依據，雖然AI能生成看似真實的答案，但偶爾也會出現「幻覺」或「胡說八道」的情況；因此，《報導者》AI使用守則特別提到，AI生成內容必須採用「人機迴圈（Human-in-the-loop）」的協作模式，所有的事實查核工作，依然必須由記者和編輯親自進行，以確保內容的真實性。

所謂「人機迴圈」，是指在人與AI的互動中，即便由AI完成部分工作，最終的判斷還是必須由真人來進行。在《報導者》新聞產製作業裡，真人在AI應用過程中的判斷力至關重要──AI應用在新聞工作的定位終究是「輔助」，而非「替代」。

談及AI應用，當然不可迴避關於生成圖像的規範。皓翔繼續第二題讀者調查：

Ｑ：你覺得新聞媒體能否在報導中使用生成式圖像？

（Ａ）不可以，報導是為了述說真實發生的事，應該避免使用任何圖像生成物（0位）
（Ｂ）可以，但風格不能是「紀實攝影照片」，而應該採「非寫實」風格或抽象處理（13位）
（Ｃ）可以，也可以生成「紀實攝影」風格的照片，但要標註清楚（12位）
（Ｄ）可以，但前提應該是難以拍攝到真實照片時，才用AI生成（10位）
（Ｅ）不可以，避免捲入潛在著作權問題（0位）

儘管讀者對於圖像生成的開放態度不一，現場並沒有任何人反對新聞媒體在報導中使用生成圖像。

至於《報導者》的態度，皓翔說明，現階段無論AI生成圖像在《報導者》作品中的占比有多小，都必須加以標註，這樣嚴格的要求旨在確保讀者了解內容的來源，《報導者》也希望透過透明化的處理方式，能持續對讀者保持誠實。

回歸初衷，保持原創與新聞專業

此外，攝影記者所拍攝的真實照片始終是《報導者》的首選。除非遇到無法重現的場景，或者因倫理問題不便使用真實照片，才會考慮使用AI生成圖像；即便使用AI生成圖像，《報導者》在過程中也會進行後製處理，確保最終呈現的圖片保留一定的原創性，這樣的加工也是為了避免觸犯生成圖像的著作權問題。

皓翔總結，AI守則的制定不僅是為了管理風險，也是為了建立內外部的共識。守則的核心在於揭露生成式圖像的來源，讓讀者有更多判斷內容真實性的權利。對《報導者》而言，新聞報導的責任在於傳遞真實，而適當的揭露能幫助讀者更好地理解和信任內容。隨著AI技術的進步，守則也可能會在未來進行滾動修正。

人們會如何透過AI圖像理解「真實」？

關於「真實性」的思考，活動最後一位分享者──《報導者》攝影部主任黃世澤也向讀者提出了他的觀察與見解。

已在媒體從事攝影工作近20年的世澤指出，讀者在看到一張新聞照片時，通常會假定它是真實的，而這正是新聞攝影的力量所在。如果新聞機構過於依賴AI生成圖像，且未明確標註圖像來源，可能會削弱讀者對新聞媒體的信任。

但即使明確標註，可能還不足以完全解決AI生成圖片在新聞應用所伴隨的倫理問題，因為讀者仍然可能會將AI生成的形象與真實人物混淆。

以《獵童風暴》影音報導為例，因為議題敏感性高，團隊考慮使用AI生成圖像來呈現兒少性剝削受害者的形象。最初，影音小組設計了幾張AI生成的圖片，試圖將其與受害者的訪談內容搭配。然而，團隊很快意識到這樣的處理方式可能引發誤解，即使圖片上清楚標註「此為AI生成」，讀者仍然可能將其誤認為真實人物。

世澤解釋，「即便我們在圖片上標明這是AI生成的，讀者仍可能會不自覺地將其視為真實的受害者形象。」這樣的誤解可能會讓讀者在腦海中形成不準確的印象，這不僅影響新聞的真實性，還可能加深對受害者形象的刻板印象。

因此，《報導者》AI使用守則明列，使用AI圖像必須考慮讀者的感受與認知，《報導者》在應用AI圖像時，除了標註圖像來源，還會對圖像進行後期處理，以避免讓讀者誤以為這些圖像是從現場拍攝的真實照片。

不只是呈現影像，更要賦予影像意義

在《報導者》，攝影記者特別注重「圖片編輯」的概念，每一篇報導裡的每一張影像，都要經手「圖片編輯」。在文章編版前，攝影記者需要蒐集所有相關的影像素材（除了到現場拍攝外，可能還包含受訪者提供的影像、地圖、歷史文件、設計師的插畫、AI影像等），負責圖片編輯的攝影記者再根據文章脈絡與整體性去安排影像。

「圖片編輯」的概念，打開了新聞影像敘事的可能性。即便攝影記者無法進到新聞現場，仍有許多圖片處理方式，而非只能透過AI生成圖像。

世澤進一步提醒「AI生成」與「攝影」的對立性：AI生成圖像的過程必須透過語言下指令，是非常文字化的過程，形式更接近於「繪畫」，因此在下指令的過程中，可能帶著個人的立場與刻板印象，甚至是虛構的場景；而攝影按下快門的瞬間，記錄的「影像」是真實的時刻，記錄的當下已有前提存在。他引用台灣重要攝影家張照堂的名言──「攝影是遺憾的藝術」，以此表達攝影的美好之處在於其不完整與神祕性，這些特質也是新聞攝影追求真相之外，引人入勝的核心之一。

如果「不完整」成為必然，那麼新聞攝影可以傳達什麼呢？

世澤強調：

「媒體的責任不只是去（現場）拍照，也不只是傳遞真相，更重要的是溝通對於事件認知的過程。」

回到《獵童風暴》的文字專題報導，因犯罪現場畫面難以取得，報導中又需要有影像的呈現，因此攝影記者便透過各種方式來「設計」影像，例如：用重複曝光的方式拍攝、借孩子的玩具當作道具並搭配偷拍社團截圖等，使讀者感受兒少性剝削的暗黑產業對未成年孩子帶來傷害。這些經過設計處理的圖片仍然具備敘事性，但並不會誤導讀者相信這是真實的新聞現場照片。

探討至此，世澤以一句話作結：「虛構中（必要的）真實，真實中（必須被知會的）虛構。」AI生成技術作為工具化的產物，的確加速了工作流程，滿足一部分的需求；然而，這些生成的圖像應該屬於素材或配圖，而不是用來替代實際拍攝的照片，媒體工作者應避免將兩者混用，造成認知上的差異。

新聞工作者會被AI取代嗎？

AI的相關討論，往往伴隨著人類存在價值的辯證。對於產製內容的報導者而言，會不會也擔心被AI給取代呢？

3位分享者一致認為現階段AI技術仍難以取代記者的價值。如同《報導者》AI使用守則第一條所示：

《報導者》面對AI發展，認為應保持「開放但審慎」的態度，導入AI之正當性是為幫助新聞團隊提高生產力、更專注於原創及創新內容，提供讀者更高品質之報導；AI之使用不該以取代從業者之新聞專業為目的。

在新聞產製過程中，一些基礎、重複性的工作或許會被AI取代，但這反而讓記者能有更多精力處理複雜的任務。無論是設計圖像、數據整理、影像編輯，新聞記者的核心價值始終在於引導讀者理解真相，只要對真實性的把關需求存在，新聞工作就不會被AI完全取代。

📣有你，才有《報導者》

《報導者》秉持深度、開放、非營利的精神，透過讀者的贊助支持來營運，不仰賴商業廣告置入。如果您認同我們的理念，歡迎與我們一起前進，共同推動這場媒體小革命。

☛贊助我們：https://bit.ly/3ylK401

官方網站：https://bit.ly/3rTeR1V
粉絲專頁：https://bit.ly/37jjGYD
Instagram：https://bit.ly/3rWFQJV

【開箱報導者】AI時代下，《報導者》的新聞實踐與反思 was originally published in 報導者開放實驗室 on Medium, where people are continuing the conversation by highlighting and responding to this story.

2024 年 9 月，在 「nDX 台灣新聞數位創新計畫」的支持下，《報導者開放實驗室》醞釀將近一年的「報導者數位敘事元件庫」公測版上線，實現數位敘事元件公共化的新進展，除維持一貫的技術開源之外，更是為所有元件的使用搭建更低技術門檻的編輯台，使更多媒體同業都能共享《報導者》所累積的數位敘事經驗和手法。

夢想可以暫停但不能終止

《報導者開放實驗室》在 2020 年釋出了5款敘事元件，當時我們便計畫打造一個屬於數位敘事的元件庫，然而隨著各種人事變動，這個計畫沉寂在光陰的膠囊裡，但就像冥冥之中有雙手計畫和推動一切，計畫停滯的時光裡，《報導者》仍有夥伴不斷使用已經打造出來的「輪子」，反覆聚焦在「怎麼說新聞」的核心價值上，推出各種數位敘事報導。

當我們不再聚焦於「技術展示」而是「如何說故事」，2023年，整個團隊的成員再次有新一輪的改變，與此同時，Google 宣布成立「台灣新聞數位共榮基金」協助台灣新聞組織推動數位轉型與創新，《報導者》獲選第一年度第一梯次的獎助，這才有錢、有人投入這個「數位敘事元件庫」的打造，將最初的夢想再往前推進一點點⋯⋯

由內向外，逐步建構而成的數位敘事元件庫

最一開始，我們從許多數位敘事報導裡嘗試萃取出最經典不敗的敘事手法，並一步步收攏這些數位敘事的互動模式和應用場景，推出了一個又一個可以重複使用的敘事元件，經過幾年的累積，元件數量即將邁入雙位數之際，便開始需要一個編輯台進行元件的彙整和收攏。

我們先在《報導者》內部嘗試這個作法，讓多媒體數位敘事作品的元素內容不再四散於不同夥伴的雲端硬碟裡，而是能有一個後台去收攏所有的作品產生，一站式的管理數位敘事元件的創作和應用， 2024 年起新開發的聲音、影像敘事元件，也都直接採用這個後台去做元件的編輯和產出，經過 9 個月的使用和不斷修正，我們在成立9週年推出免費公開、任何人都能使用的公共化數位敘事元件庫。

過往內部開發的經驗不斷告訴我們，產品開發和使用者之間最遠的距離，就是想像和使用的落差，因此我們決定在這個階段先推出「公測版」，讓核心關注我們的支持者加入測試使用，成為我們一起建造公共數位敘事元件庫的夥伴，壯大認同並支持數位敘事元件公共化的群體，使這個元件庫有機會走得更遠。

Start：如何登入元件庫？

步驟1. 填寫表單，耐心等待

公測版第一階段，每個外部使用者須透過表單向《報導者》提出使用申請，提供有效的 Email 並給我們一點鼓舞，就可以提交申請。 我們會在收到申請的一週內完成帳號開立，並發送通知信到您所填寫的Email（務必寫對啊）。

步驟2. 登入、改密碼、開始體驗元件庫

進入「報導者數位敘事元件庫」後，建議先到「使用者」進入自己的帳號畫面，點擊「Change Password」更換自己的密碼。對了，只要有編輯行為，最後都要點擊「Save changes」完成設定。

接下來，就可以從左側的元件列表展開探索。以下介紹各元件基本操作步驟：

Step by step 使用教學

1、捲到式聲音 Scroll To Audios

步驟1. 進入元件畫面

在左側列表選擇「捲到式聲音」後，將會看到《報導者》所提供的編輯範例；未來，所有由你的帳號建立的「捲到式聲音」內容也會出現在這個頁面。

點擊上方的「Create Scroll To Audio」，即可進入新元件建立畫面（如右圖）。

步驟2. 上傳音檔URL、命名

為新的捲到式聲音元件的命名，並輸入所要使用的聲音檔案URL，點擊下方的「Create Scroll To Audio」就能建立元件（如右圖）。

（㊙️延伸閱讀：貼檔案URL時，一直出現錯誤訊息？請見：「直接上傳」新功能教學與「檔案絕對路徑」說明）

步驟3. 複製程式碼、放到文章中，完成！

每次產生的捲到式聲音元件包含「起始」、「結束」和「聲音提示」3個 embed code（內嵌程式碼），每段程式碼下方都有「Copy to Clipboard」按鈕，可以一鍵複製，你只需根據敘事需求將其貼到網頁位置即可，若點擊「Preview」可先預覽這個程式碼的實際效果。

「聲音提示 embed code」多數使用於文章的最開始，能幫助讀者進入閱讀前，可以預期這是一篇有聲音的文章，並且決定是否要開啟聲音。 「起始 embed code」添加在希望進入這段聲音的文章段落之前，並在需要聲音結束的文章段落之後添加「結束 embed code」。

★ 延伸閱讀：《報導者》聲音敘事元件三連發，開啟聲歷其境的新聞閱讀體驗

2、捲動式影片 Scrollable Videos

步驟1. 進入元件畫面

在左側列表選擇「捲動式影片」，一樣會有《報導者》所提供的範例，以及你之後建立的所有捲動式影片元件，點擊上方的「Create Scrollable Videos」即可進入新元件建立畫面（如右圖）。

步驟2. 命名、上傳檔案URL，注意分2種尺寸！

輸入此捲動式影片元件的名稱和所要使用的背景影片檔案URL，點擊下方的「Create Scrollable Videos」就能建立元件（如右圖）。

（㊙️延伸閱讀：貼檔案URL時，一直出現錯誤訊息？請見：「直接上傳」新功能教學與「檔案絕對路徑」說明）

⚠️留意影片檔案URL分兩種尺寸，桌機版為16:9，手機版為2:3。

步驟3–1. 編輯 — — 讓字幕在期待的時間點出現

在「編輯字幕」區塊的下方（左圖框起部分），有4個方形按鈕，分別代表「播放▶️」、「暫停⏸」、「添加字幕✚」、「全螢幕編輯」，最右側數字分別是影片的現在時間和時間總長。

你可以直接「播放▶️」影片，當播到欲添加字幕的畫面時，直接點擊「添加字幕✚」；亦可先「暫停⏸」再點擊「添加字幕✚」來增加字幕。或是直接拖曳影片的時間軸至指定位置後，點擊「添加字幕✚」。

有建立字幕的位置，會出現黑色圓形⚫️圖釘（如右圖）。

步驟3–2. 編輯 — — 字幕的位置、顏色、大小，還能加圖片或客製

點擊黑色的圓形圖釘「⚫️」，將切換顯示「編輯」（上方藍色鉛筆圖示）和「刪除」（下方紅色垃圾桶圖示），點擊「刪除」即刪除此字幕，點擊「編輯」可以開啟字幕編輯視窗（如右圖）。

「字幕內容」區塊不只輸入文字，也可以放入圖片或程式碼，並提供超連結和變換文字前景和背景顏色等功能；
「字幕出現秒數」可以修正此字幕出現的起始時間點；
「字幕出現位置」提供置左、置中和置右3種選擇；
「字幕寬度」提供寬版和窄版兩種選擇；
如果你想要更細緻的調整，且熟悉CSS語法，可以直接在「客製化 CSS」針對此字幕進行個人化設計。

編輯完成點擊「Confirm」即可儲存編輯結果。

步驟3–3. 編輯 — — 切換全螢幕編輯

點擊「全螢幕編輯」可以放大編輯視窗，切換成模擬實際捲動效果的方式（如右圖），若要結束全螢幕編輯狀態，點擊右上角的「關閉全螢幕」即可切換回左圖的編輯畫面。

在全螢幕編輯模式，可以透過上下滑動觀看字幕進入和離開的實際效果；字幕右上方有「編輯」（筆型圖示）和「刪除」（垃圾桶圖示），點擊「刪除」即刪除此字幕，點擊「編輯」即可開啟此字幕的編輯畫面（如右圖），其他字幕編輯界面與操作同「步驟3–2」。

步驟4. 其他設定

除了字幕樣式，你還可以控制以下細節：
「主題色」：捲動式影片元件提供提供 Dark 和 Light 兩種預設模式選擇，前者字幕顯示效果為黑底白字，後者則是白底黑字；
「毎滑一個視窗的高度對應影片多少秒鐘」則可以控制滑動時影片播放的速度；
「客製化CSS」，同樣需要會使用CSS語法，不同於前者針對「字幕」內容，此處可調整整個捲動式影片的設計樣式。

步驟5. 複製程式碼、放到文章中，完成！

完成編輯，記得儲存（Save changes）。
接著在建立元件畫面最下方，找到自動產生的捲動式聲音元件「embed code」，點擊其下方的「Copy to Clipboard」複製這段程式碼，再將其貼到你想要放置的網頁位置即可，想要先預覽這個程式碼的實際效果，則可點擊「Preview」。

3、捲動式3D Scrollable Three Models（測試版）

步驟1. 進入建立元件畫面

在左側選擇「捲動式3D」，可以看到《報導者》所提供的範例和所屬帳號建立的捲動式3D元件清單，點擊上方的「Create Scrollable Three Models」即可進入新元件建立畫面（如右圖）。

步驟2. 命名、上傳檔案URL

輸入此捲動式3D元件的名稱和所要使用的 3D model 檔案URL，點擊下方的「Create Scrollable Three Models」就能建立元件（如右圖）。

⚠️注意事項：目前「元件庫」尚未提供 3D model 檔案上傳，因此，您的檔案若要在此編輯器使用，該檔案資源的回應需要包含允許跨域請求的標頭（response header）：

Access-Control-Allow-Origin: https://lab-storytelling.twreporter.org

步驟3–1. 編輯 — — 切換全螢幕

為了更好的體驗，建議以「全螢幕編輯」模式編輯捲動式3D元件。 點擊編輯畫面右上角的圖示即可開啟或關閉「全螢幕編輯」模式。點擊其下方的眼睛圖示👁即可進入預覽畫面，檢視元件實際的互動效果。

步驟3–2. 編輯 — — 在特定影格建立字幕

使用者可以透過鍵盤上的箭頭鍵或WASD 鍵、滑鼠滾輪或是觸控板來前後左右移動鏡頭。點擊滑鼠後拖拉可以轉動鏡頭。按 U 鍵可以水平向上移動鏡頭；N 鍵則是水平向下移動鏡頭。

使用者操作畫面至有需要顯示字幕的定格畫面後，點擊影格列表右下方的「增加字幕」即可建立字幕，有建立字幕的影格，將出現在編輯畫面左側白底處，以001、002、003⋯⋯依序編號。

步驟3–3. 編輯 — — 影格排序與內容編寫

每一個定格影格均提供「刪除」、「排序向上／向下移動一格」、「移動鏡頭至此影格」、「編輯」的基本功能。

◆點擊「排序向上／向下移動一格」即可移動影格及其所對應的字幕順序；
◆點擊「刪除」可刪除此字幕；
◆點擊「移動鏡頭至此影格」可立即移動鏡頭畫面至此定格影格所顯示之畫面；
◆點擊「編輯」可以編輯字幕內容（如下圖）。

此處編輯界面跟捲動式影片的差不多，「字幕內容」可以輸入文字、放入圖片或程式碼，並提供超連結和變換文字前景和背景顏色等功能；「字幕出現位置」提供置左、置中和置右3種選擇；「字幕寬度」提供寬版和窄版兩種選擇；「字幕間距」可以調整字幕與字幕之間捲動的畫面速度。

步驟4. 複製程式碼、放到文章中，完成！

在建立元件畫面最下方，找到這個捲動式3D元件 的embed code，點擊其下方的「Copy to Clipboard」可以複製這段程式碼，再將其貼到你想要放置的網頁位置即可，「Demo」則是預覽這個程式碼的實際效果。

這個新元件編輯器，是根據最近一次3D多媒體數位敘事報導〈用字體留住消逝的街景記憶──香港的野生造字人們〉的製作經驗開發，才剛熱騰騰產出，連《報導者》團隊都尚未利用此工具產出報導，所以，如果你使用上發現bug或有任何建議，歡迎告訴我們。

To be continued：正式版的首要待辦事項

除了「捲動式影片」先行升級到2.0，可直接在元件庫編輯外，其他4個2020年發布的新聞元件：「大圖點我」、「橫著滾吧」、「左右互搏」、「大事記」，目前仍維持原來的產生器編輯模式，尚未與元件庫完美結合，預計正式版上線時，通通可以如上述3個元件編輯模式，更親民簡單。

雖然編輯界面改版還在半路，但至少現在開始你不再需要分別記得多個新聞元件產生器網址，只要登入「報導者數位敘事元件庫」，在左側選擇要使用的元件，就會出現此元件的資料輸入畫面。操作方式與注意事項，請參考以下使用說明書：

• 「大圖點我」產生器
• 「橫著滾吧照片」產生器
• 「左右互搏網頁版型」產生器
• 「大事記」圖表產生器

邀您一起公測「報導者數位敘事元件庫」

「報導者開放實驗室 The Reporter Lab」的任務之一，是提供開源的數位敘事小工具，增加說故事的方式，並且幫助減少資訊產製過程中不必要的重複工作，讓內容生產者能專注在生產優質的內容。

過去，我們陸續推出「橫著滾吧照片」、「大事件圖表產生器」、「左右互搏網頁版型」、「捲動式影片」、「大圖點我」等新聞小工具（網頁元件），讓不會寫程式的使用者也能輕鬆使用。

2024年9月，《報導者》推出了「報導者數位敘事元件庫」，以更簡單好上手的方式推送給大家，成為每個人完成數位敘事的好幫手。目前這個元件庫還屬於「公測版」，歡迎每一個想提前嚐鮮體驗的朋友填寫表單申請使用，期待看到你們活用這些敘事元件！

若您對更多數位敘事及新聞幕後有興趣，歡迎追蹤我們的頁面 👉 報導者開放實驗室 The Reporter Lab

📣有你，才有《報導者》

《報導者》秉持深度、開放、非營利的精神，透過讀者的贊助支持來營運，不仰賴商業廣告置入。
如果您認同我們的理念，歡迎與我們一起前進，共同推動這場媒體小革命。
☛贊助我們：https://bit.ly/3ylK401

官方網站：https://bit.ly/3rTeR1V
粉絲專頁：https://bit.ly/37jjGYD
Instagram：https://bit.ly/3rWFQJV

報導者數位敘事元件庫：一站完成元件的編輯與產出 was originally published in 報導者開放實驗室 on Medium, where people are continuing the conversation by highlighting and responding to this story.

2020年《報導者開放實驗室》公開分享了5款新聞敘事元件，包含「左右互搏」、「大事記」、「橫著滾吧」、「捲動式影片」、「大圖點我」，經過了4年的使用，記者們使用率最高的當屬「捲動式影片」和「左右互搏」，其中《報導者》多個入圍、得獎的數位敘事報導，都充分應用了「捲動式影片」⋯⋯

影片和文字撐起數位敘事的一片天

「捲動式影片」將瀏覽影片從點擊播放的行為，轉為使用者更為熟悉的網頁向下滑動的閱讀操作模式，而且影片「播放」速度由閱讀者自己掌控；透過滿版影片畫面，把讀者帶入以影像為主軸的敘事場景裡，將動態影像結合字幕的敘事模式發揮到極致。

以〈【圖解】解放軍如何進逼第一島鏈：台海衝突下牽動的美日軍事布局〉這篇報導為例，沒有任何的技術炫耀，而是將力氣放在怎麼說好一個故事，團隊的重心在於影片的敘事軸線怎麼編排，輔佐的字幕怎麼拿捏，以達成循序漸進的解析出太平洋第一島鏈的軍事風景。因此其背景影片以台海地圖為基底，將國家、海域、軍事行動的關係清楚攤開，添加上時間的變化和報導內容，便形塑出獲選 2024 年 Sigma Awards 數據新聞獎 Top 10 的作品。

在〈還原一場12小時內湮滅的犯罪──數萬噸廢棄物，如何悄悄埋入台糖土地深處？〉這篇報導中，則像是一支現場直擊的影片，將讀者帶往垃圾掩埋的行動現場，隨著滑動頁面，以第一人稱視角看見這個廢棄物掩埋的犯罪如何被構成，簡要的字幕，更將整個事件的痛點揭示到讀者眼前，叫人不得不正視這個環境汙染的課題，獲得了2023年卓越新聞獎新聞敘事創新獎。

除了全篇運用「捲動式影片」的敘事外，也可以穿插在文章中，像是〈台灣卵子・中國客戶・美國配對中國父母一鍵下單，台灣卵子過海入庫：直擊年輕女性美國捐卵之旅〉報導就使用3支影片，展現了動態影像敘事的多元可能性。

穿插在文章中的第一支影片是模擬線上卵庫的介面操作，第二支影片則是示意年輕女性從捐卵廣告投放到搭上線的社群流程，最後一支則以現場影像結合插畫人物，在兼顧保護當事人與真相揭露下，帶領讀者直擊整個捐卵的旅程。這篇完整報導跨國捐卵產業的面貌，則獲得2024年SOPA亞洲出版協會新聞獎卓越女性議題報導獎優勝的肯定。

改版啟動，許願如雪片般飛來⋯⋯

過去4年，只是影片加上字幕的「捲動式影片」，便成就無數精彩的報導，如果再為其添加不同的柴火，是否能寫下數位敘事報導的更多可能性？

我們都期待這樣的擴展，於是當展開第一次「捲動式影片」優化會議時，在第一線應用並已作出許多豐富作品的多媒體專案經理 、設計和 Data小組記者便開始各種許願：

「只有文字不夠，一定要可以放圖片！」

「每個專題都有其風格性，我需要可以客製化修改設計樣式。」

「有沒有可能，也添上動態圖表？」

開完那場會議，有點腦袋嗡嗡作響，隔了幾天才將筆記下來的開發需求，消化整理成實務上有方向感的優化項目，首先純文字的字幕需要能增加客製化程式的內容，也需要改以內容編輯器來處理，移植原來《報導者》網站後台的內容樣式和功能，林林總總羅列之後，就交給使命必達的工程師，殊不知，他也有優化這個工具的想像，於是整個翻新朝向了「竟然可以做成這樣」的驚嘆號前進⋯⋯

更簡單、更直覺，捲動式影片2.0編輯界面有感改變

新的「捲動式影片」（Scrollable Videos），收進了以 Keystone 6 所打造的「報導者數位敘事元件庫」裡，其中最有感的轉變就是更人性化的編輯過程。過去製作「捲動式影片」時，需要透過 Google Sheets 建立內容，這個建立的過程需要先理解預設的 Sheets 裡每個欄位的功用和限制，然後再設定 Sheets 共享給機器人帳號，最後生成程式碼檢視成果。

新版的「捲動式影片」採用更直觀的方式進行編輯，且考慮到的使用者可能光譜，不管是沒有設計和工程師團隊，或有專業夥伴想做出更創意、客製的呈現，新版編輯器都能滿足需求。

以下整理5點前後版本的有感優化：

1. 背景影片製作的尺寸：從5個簡化成2個，只要提供16:9（網頁版）和2:3（手機版）即可。

2. 編輯報導文字方式：從憑空想像變成所見即所得。

3. 樣式調整化繁為簡：不懂設計也可以順利完成。

4. 打開設計的方便之門：懂設計也會寫 CSS 就可以揮灑自己的創意。

5. 成品預覽：從輸入 sheets ID 或網址改成一鍵生成。

除了上述明顯的轉變，新版「捲動式影片」幾乎實現不同部門的所有許願——新增的字幕編輯器內建小標、列點、排序、添加圖片、對齊、文字顏色與底色調整等基本功能，也可以支援客製化的程式，實現嵌入影片、動態圖表或其他第三方生成的互動程式碼；並在編輯界面上，設計了更直覺的操作方式，可以在影片播放中，隨時暫停並新增或編輯字幕，或直接開啟全螢幕編輯模式，以實際卷動的情況來調整或刪除字幕。

「捲動式影片」的優化開發，從許願到完成上線，歷時6個月。2024 年 3月在內部正式上線啟用後，3 個月內已經用於 3 篇報導，毫不意外的將繼承上一代「捲動式影片」，幫助《報導者》為大家帶來更多豐富精彩的數位敘事報導。而我們也期盼所有降低技術難度的用力，能在更多人身上開花結果，不只是《報導者》，而是任何地方、任何大小的團隊，都有機會利用它為自己的土地帶來更多精彩報導！

也想使用捲動式影片？「報導者數位敘事元件庫」上線，歡迎一起公測

「報導者開放實驗室 The Reporter Lab」的任務之一，是提供開源的數位敘事小工具，增加說故事的方式，並且幫助減少資訊產製過程中不必要的重複工作，讓內容生產者能專注在生產優質的內容。

過去，我們陸續推出「橫著滾吧照片」、「大事件圖表產生器」、「左右互搏網頁版型」、「捲動式影片」、「大圖點我」等新聞小工具（網頁元件），讓不會寫程式的使用者也能輕鬆使用。

2024年9月，《報導者》推出了「報導者數位敘事元件庫」，以更簡單好上手的方式推送給大家，成為每個人完成數位敘事的好幫手，本文介紹的「捲動式影片2.0」已同步公開在其中，過往我們所製作的小工具也將重新整理後，在元件庫登場。

目前這個元件庫還屬於「公測版」，歡迎每一個想提前嚐鮮體驗的朋友填寫表單申請使用，期待看到你們活用這些敘事元件！

若您對更多數位敘事及新聞幕後有興趣，歡迎追蹤我們的頁面 👉 報導者開放實驗室 The Reporter Lab

📣有你，才有《報導者》

《報導者》秉持深度、開放、非營利的精神，透過讀者的贊助支持來營運，不仰賴商業廣告置入。
如果您認同我們的理念，歡迎與我們一起前進，共同推動這場媒體小革命。

☛贊助我們：https://bit.ly/3ylK401

官方網站：https://bit.ly/3rTeR1V
粉絲專頁：https://bit.ly/37jjGYD
Instagram：https://bit.ly/3rWFQJV

捲動式影片2.0：最受歡迎的數位敘事模式再進化 was originally published in 報導者開放實驗室 on Medium, where people are continuing the conversation by highlighting and responding to this story.