Pageflow - Cover

大家可能都看過這樣的數位專輯:滿版的影象、背景動畫等極具震憾效果的敘事方式,但你是否想過這要如何做到呢? Pageflow 讓你輕鬆做出這樣的效果,包括影像、動畫甚至圖表都難不倒他,現在就讓我們一起來看看 Pageflow 有什麼功能吧!

數位專輯 / Long form Journalism 在網路上其實已經流行好一陣子了,其震撼且細緻的影音效果搭配巧妙編排的文字,若使用得當可說是極佳的閱讀體驗,一些較有名的例子如紐約時報製作的「Snow Fall 」、「A Game of Shark and Minnow 」 、Rue89 的「Rebuiling Haiti」、 或是來自台灣的優異作品「遙遠人聲」、「繫上歷史的黃絲帶」等。問題是,這類型文章的製作往網牽扯到複雜的網頁程式開發,對於撰寫文章或做圖表的我們往往是個極大的門檻。

為了讓我們更專注於內容, Pageflow ( http://pageflow.io ) 提供了一個微型的內容管理系統 ( CMS ) ,以提供全幅式影音與流暢的瀏覽體驗為目標,將細節為我們包裝起來,使我們只需要思考如何利用這些元素即可。

登入 pageflow.io 網站後, 點擊「+CREATE STORY」即可開始建立我們的故事。建立故事只需填入標題,接著會帶入故事的資訊頁面:

Story Information

在這裡我們可以看到這則故事的一些資訊,包含其連結、發表狀態與嵌入用代碼等等。若要開始編輯,點選上圖左下的「EDITOR」進入編輯畫面:

Pageflow Editor

畫面簡單的分為左右兩半,左方為故事預覽,右方則為設定與編輯面板。整個故事由「章節 ( Chapter ) 」與「頁 ( Page ) 」組成,我們可以點擊右方的「New chapter」或「New page」按鈕來建立新的頁面;下圖為建立了兩個章節與四個頁面的樣子:

New Chapter

上圖右方顯示的是文章綱要 ( Outline ) ,我們還可以點擊至個別的章節、頁面做深入的編輯。比方說,我打算撰寫個台灣高山行腳的文章,點選第一頁之後設定標題、副標、敘述與背景可以看到如下圖的結果:

Edit Page Detail

除了在左方的預覽,中間我們也可以看到小圖預覽與一系列的按鈕,這些是實際上會出現在成品的物件;小圖預覽可以讓讀者快速切換畫面,其它的按扭則包含了「回到頂端 ( 向上箭頭圖示 )」、 「列出所有縮圖 ( 九宮格圖示 )」、「全螢目播放 ( 左右箭頭圖示 ) 、「引藏文字 ( 圖片圖示 ) 」等等。

若你有注意到,在縮圖上有個類似相機的符號,那代表著這一頁所屬了類型。每一頁都有一個自己專屬的頁面類型,包括了「影像」、「影片」、「連結」、「圖表」等等類型,下圖列舉出了可能的類型:

Type of Page

每種類型都需要些微不同的設定,比方說「Interactive」中的「Before / After」就需要我們提供兩張圖,讓  Pageflow 將之拼成一張,再由使用者拖動中間的分隔線來比較兩張圖的差異;而 「Backgroun-Video」則需要我們上傳背景用的影片網址 ;這些類型都可以在編輯框右上方的下拉式選單中找到。

在頁面切換部份, 我們也可以在編輯框中的 Option 頁籤選擇換頁效果;目前 Pageflow 只提供了「淡出/淡入 ( Fade)」與「捲動 ( Scroll 」的效果,可以依個人喜好或考量閱讀效果做挑選。

搭配圖表呈現

畢竟這裡討論的是資料視覺化,讓我們特別來聊一下「圖表 ( Chart ) 」這類的頁面吧!將頁面類型設定為圖表之後,我們仍然可以提供標題與設定背景,不過這時我們還可以提供視覺圖表的網址供使用。

Pageflow 的圖表嵌入目前只支援來自 Datawrapper 的圖表,我覺得這是個蠻遺憾的地方;就技術上來說,Pageflow 利用 iframe 嵌入 Datawrapper 的圖表,理論上應該也能嵌入其它網站的圖表。即便如此,我們可以在必要的地方嵌入利用 Datawrapper 製作的圖表,比起 Storify 無法插入圖表來說,也算是方便吧。下圖即為嵌入圖表之後的結果:

Pageflow with Chart

Datawrapper 為一開源的圖表製作工具,他同時也提供線上圖表製作,如果對 Datawrapper 有興趣,可以參考我們先前的介紹專文「四個步驟製作統計圖表 — 開源圖表工具 Datawrapper」。

大致了解 Pageflow 的設計與使用方式之後,可以接著參考 Pageflow 於其首頁所提供的範例故事,比方說「Big Data and Digital Disobedience」這篇即用到了「連結 ( Links ) 」、「影片 ( Video ) 」、「文字 ( Text Page ) 」與滿版影像的頁面,可以參考看看做出來的大概效果。

發布作品

完成作品之後,點選「Publish」即可發表作品;不過 Pageflow.io 的作品發表需要我們成為進階會員才能使用。沒關係,如同 Datawrapper ,Pageflow 恰好也是個開源專案,若你需要的是個人使用,也可以考慮取得 Pageflow 的原始碼後自行設定使用,如果是公司使用那就很適合自行架設服務主機;當然若考量到人力與維護成本,購買 Pageflow.io 的進階服務也許是更划算的選項,Starter Plan 是每個月 8.5 歐元,即使學生也能負擔的價格,就讓讀者們自行斟酌囉!

結語

Pageflow 提供我們一個很方便的工具來製作極具視覺效果的數位文章,同時也包含了聲音、圖表等各種不同類型的媒介,可以說是讓我們不再需要寫程式也能做出很不錯的數位專輯。

同時,開放原始碼讓這個工具有了更多的可能:想要支援更特殊的頁面類型嗎?沒問題!即時資料讀入與 D3.js 互動式圖表?辦得到!嵌入任何網站的圖表?改一下就有囉!基於 Pageflow 現有的架構,我們其實可以做出更多適合團隊屬性的客製化版本,這也是 Pageflow 一個很棒的優點。

那麼大約就介紹到這了。你是否有故事要敘說呢?不妨找機會試試看 Pageflow.io 吧!


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *