Line.do cover

當我們看新聞時,報導往往一看過便忘,很多事件缺乏一個縱觀性的整理。Line.do 利用類似臉書動態牆的呈現形態,讓我們將各種資訊來源建入一條垂直的時間軸,把事件脈絡快速的建立起來,從此看事情的角度便從「點」提升至「線」,幫助讀者對事情的瞭解更深入!

看到 Line.do 這個名字與他綠色的 Logo ,一般人大概要猜他是不是 NAVER ™ 的通訊軟體「LINE」了,很抱歉不是 — Line.do 是一個線上時間軸式敘事工具。他的概念很簡單,他讓身為使用者的我們可以利用各種媒體形式 — 圖片、影片、聲音、社交網路連結 — 做為一個個積木塊,在一條線性的軸線上堆出我們想講的故事。

這樣講太抽象,趕快來看個例子,下面這個框即為用 Line.do 表現「回到未來三部曲」電影的整個時間線,每一則事件都由一個 Youtube 影片所組成:

製作自己的時間線

那我們趕快也來自己做一個試試看吧!首先,註冊並登入 Line.do 網站,然後點擊首頁右上角的「Create」按鈕,我們會來到如下圖 Line.do 用來建立時間線的的介面,我們要先輸入標題、摘要與選擇類別,才能繼續:

Create Line

我們以登山活動「皇帝殿一日遊」為例,製作一個時間線。下圖為建立之後的時間線編輯畫面,左邊是事件索引,右邊是即時預覽,中間則是當前選擇的事件細節,可以看到中間有五種可選擇的媒介:

  • 影像,接受網址或上傳方式
  • 影片,只接受 Youtube 、 Vimeo 、 Vine 等網站連結
  • 聲音,只接受 soundcloud 或 spotify 等網站連結
  • 社交網站連結,會以卡片方式呈現
  • 連結。目前支援度有限。
Line.do Editor ( 2 )

我們依序在中間填入「日期」、「標題」、準備好圖片或影片、「位置」,並撰寫簡單的描述,便可以完成一個事件項目。在底下可以選擇呈現的尺吋,在此我們選擇「自動」。

點選下方的「Update」建立完成以後,左方的索引可以讓我們快速看到目前事件的列表,也可以加以排序。建立新項目同樣的在左方的「add new moment」按鈕即可。

Moment 1

編輯到一個程度,覺得差不多了,可以點擊網頁右上角的「Preview」鈕來預覽作品成果,接著點擊「Publish」讓我們的作品公諸於世。下面為我們的皇帝殿登山小品,做出來相當的賞心悅目:

Line.do 有適當的響應式設計,所以在不同尺寸的螢幕上有不同的表現。下圖為較大尺寸時的時間線截圖,感覺非常適合用來做登山行程紀錄:

Result

建立完成的時間線都會有獨立網址,在作品左方也會有功能按鈕讓我們取得嵌入用程式碼,把時間線埋到自己的網站中。

秘技

此外,時間線除了直式的表現以外,我們還可以透過修改網址的方式將之改為橫式的時間線。比方說像下面這個網址:

  https://line.do/ww/皇帝殿/ygr/vertical

我們可以把網址最後面的「vertical」改為「horizontal」,便能得到水平的時間線了:

  https://line.do/ww/皇帝殿/ygr/horizontal

水平的時間線放在網頁下方,呈現也相當簡潔:

Horizontal Line.do

有興趣的話可以參考我們的小品連結「皇帝殿一日遊」看看成品在獨立顯示時的效果如何。

結語

時間軸工具其實並不少,像是先前介紹過的 Timemap 、 或是 Timemap 所基於的 Timeline.js ,都可以做出不錯的時間軸。不過,在 Line.do 中,時間與空間的概念並沒有太過於強調,這讓我們有機會應用 Line.do 在其它類型的序列資料;事實上,就連 Line.do 網站中的「About Us」都是使用 Line.do 建立的喔!

另外,不像 Timeline.js 過於強調時間軸, Line.do 輕描淡寫的利用一條灰色細線與綠色圓圈引導讀者的閱讀線,讓原本看起來只會是一篇普通文章的作品透過這樣的視覺線索建立而出的脈絡,也可以說是一種巧妙的視覺化手法,足夠的頁面空間以及較貼近一般網頁向下捲動的互動方式也讓整體的閱讀體驗大大加分;比起 timeline.js ,我其實是比較喜歡 Line.do 的。

想試試看嗎? Line.do 的時間線只是一個引導閱讀的例子,在使用 Line.do 敘說自己故事的同時,也想想看有沒有更有趣的視覺輔助閱讀的範例吧,說不定你可以做出更有趣的敘事手法喔!


Written by infographics.tw

發表迴響

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