Loading.io - Cover
在做視覺化時,曾考慮過載入速度嗎?資料視覺化常牽涉到資料讀取,然而費時的資料傳輸很容易就讓你的讀者轉台。在資料傳輸時,讓讀者轉移注意到其它東西上面已經不是新招了,這次讓我們從最簡單的「等待圖示」出發,看看如何利用 loading.io 十秒做出一個體面的等待圖示!

loading.io 如其名,就是個製作等待動畫 GIF ( Ajax Loading Icon ) 的網站。他與其它 Loading Gif 製作的網站最大的不同點在於 - 他可以產生「動畫向量圖」!動畫向量圖 ( SVG with SMIL ) 相對於一般 GIF 的優點在於:

  • 動畫效果由標籤控制,檔案大小比 GIF 小
  • 放大展示效果仍然很好,不會造成馬賽克效果
  • 可透過文字編輯器調整顏色、速度等,相當方便

而且 Loading.io 有相當彈性的客製空間,包括多層的圖示顏色、不同的動畫型式,同時也提供部份動畫的 CSS 版本,相當方便。

Loading.io - Usage

要製作屬於我們自己的載入圖示,首先我們要挑選想使用的圖示。目前 Loading.io 提供 32 種圖示給我們選擇,其中包含常見的 Loading Icon 、也有一些大型網站使用的載入圖示 ( 如 Facebook 或 Flickr 等等 ) 。舉例來說,我們選擇「Gears」後,會在上方的編輯框顯示我們選擇的圖示:

Example: Edit Gears
所有的圖示都可以調整動畫的速度 ( speed ) 與背景顏色 ( background color ) ,而「Gears」圖示可以讓我們額外調整兩個齒輪的顏色。在上圖可以看到調整顏色時會跳出顏色選取器,方便我們快速客製化顏色。

各個圖示能設定的項目略有不同,例如「poi」這個圖示我們還可以設定動畫是要跳躍或是旋轉:

Example: Editing Poi

設定完成後,在左方的預覽窗確認結果,沒問題便點擊右方的「Make GIF」即可下載動畫。一個產生的跳躍動畫範例如下:

POI Example

結語

如果你還有印象的話,之前水庫缺水時我們製作的 視覺化水庫水位監測網頁 就是使用 loading.io 來製作 Loading Icon 的喔:

台灣水庫水位走勢

上圖的藍色花邊圖示即是我們做出的動畫載入圖示。因為我們能用來製作這個專案的時間並不多, loading.io 很方便的讓我們快速的挑選了一個適合水庫主題的圖示,設定好顏色後立刻做出專用的載入圖示。

一般來看,SVG 向量圖形可以說是未來網頁製作圖形的趨勢,所以使用 SVG 向量圖不用擔心跟不上時代,然而有些比較舊的瀏覽器 ( 如 Internet Explorer 7 ) 並不支援 SVG 的顯示,通常還是需要利用 polyfill 之類的工具協助改用 VML 來繪製。在這種情況下,我們仍然可以使用 loading.io 提供的 GIF 產生功能做出 GIF 來使用。

相當方便的工具,無論是製作視覺化或是網站時都可以使用,未來有需要時別忘了這個好用的工具喔!


Written by infographics.tw

發表迴響

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