ai2html - Cover

常常我們嘔心瀝血的圖表作品最後會轉換成圖後以圖片的方式發表,但麻煩的是圖片的內容 Google 搜尋無法分析,而每次修改又都要重新產生圖片。像這樣的困擾並不是只有我們會有,新聞編輯室也會有喔!所以紐約時報編輯室就開發了開源專案「 ai2html 」,幫我們把向量原稿轉成網頁源碼!那麼,我們就來看看 ai2html 的效果如何吧!

網路媒體興起、多媒體的報導方式,使用圖表、插畫的機會越來越多,文章曝光的管道也越來越多元,「Social Media Optimization 」與「Search Engine Optimization 」逐漸成為拓展傳播效率的重要管道。然而圖片與網路時代有個最重要的衝突在:圖片缺乏了數位化的內容資訊,無法簡單的讓程式分析使用。

當我們編輯網頁時,我們會將文章逐字的打在網頁中,內文是以數位化的方式逐字呈現,任何程式都可以讀取文章的內容;但當我們將文字寫在圖片之中,程式無法再分析數位化的文字,於是內文的資訊就藏在圖片中而失去了,相對的在社交網站、搜尋引擎中相關的關鍵字就無法對應到我們製作的圖片。

其次,當我們用圖片的方式傳播資訊時,並不知道讀者會用什麼樣的螢幕尺寸來閱讀;一但我們做了張大圖而他們拿著手機來看,圖中的文字會連同圖片一起縮小以塞進手機螢幕中,這時字就會變得太小而無法閱讀。

要解決這些問題最快的方式就是直接將圖中的文字部份抽出後另外填入網頁。但這帶來了另外一個困難:當排版分成了圖稿製作、網頁編輯兩步驟時,不僅開發門檻提高 ( 設計師也得懂 HTML ) ,開發時間也相對變長了。

ai2html 幫我們將 Adobe Illustrator 設計稿轉換成 HTML / CSS 並將文字抽離,這帶來了什麼好處呢?

  1. 混合文字的圖片有利於搜尋引擎建立網頁索引
  2. 修改設計稿時我們不再需要重新填入文字,ai2html 產生的結構化輸出讓我們能夠自動帶入文字
  3. HTML + CSS 使文字在不同的解析度保持在適合的大小,這點從 AI 檔直接產生 SVG 時做不到的。
  4. AI 產生的 SVG 檔中,所有文字都依行切分,不利於程式化操作,而 ai2html 解決了這問題。

ai2html 官方網站列出了一些使用 ai2html 製作的專案,比方說紐約時報關於伊斯蘭國的這篇報導

NYTimes - ISIS Attack Map

注意原報導中地圖上的文字 ( 包含國名 ) 是可以用滑鼠選取的,而在不同的螢幕大小時地圖會縮放,但文字不會跟著縮放,而會保持在一個適合閱讀的大小,可以說是圖表的「響應式設計 ( Responsive Design ) 」。

使用簡介

ai2html 的使用方式相當簡單,不過必須要有 Adobe Illustrator。首先我們連至 ai2html 官網 取得 ai2html 程式碼,放到 Illustrator 的指令碼目錄下 ( 例如「D:\Program Files\Adobe Illustrator CC (64 Bit)\Presets\zh_TW\指令檔」 ) :

save jsx into illustrator preset

( 在 Mac 上則可嘗試存入「 /Applications/Adobe Illustrator CC 2014/Presets/en_US/Scripts/ai2html.jsx 」,其中 Adobe Illustrator CC 2014 請對應到自己使用的版本。 )

檔案儲存好之後,開啟 Adobe Illustrator 便會在「檔案」→「指令檔」選單中看到「ai2html」,代表你有安裝成功:

ai2html in Menu

接著開啟我們要用的原始稿然後點擊 ai2html ,他便會為我們產生 HTML 。舉例來說,我們製作了「不能沒有醬汁」的設計稿:

where is the sauce - ai

使用 ai2html 產生後的檔案會與我們的原始稿檔案位於相同目錄下,名為「ai2html-output」, HTML 檔案則與原始稿檔名相同:

result with incorrect encoding

ai2html 產生的 HTML 並不包含編碼,所以我們有可能得自己手動調整成 utf-8,以下便是調整完的最終結果,可以看到就連右下角的「醬汁」兩字也是文字型態,可以選取:

Where is the sauce? HTML version

設定 ai2html

當我們製作 html 之後,會在 illustrator 中自動產生一個文字方塊;這是 ai2html 的設定,我們可以修改其內容值來改變產生 HTML 的方式。 ( 下圖右 )

Configuration

 

在我們 illustrator 原稿中的文字方塊只要開頭有「ai2html-」字樣的,都會被當成設定項來讀取;不同的首行字串有不同的意義,包含了下列四種:

  • ai2html-settings:產生檔案的設定
  • ai2html-css:在產出檔案中插入額外的 CSS
  • ai2html-js:在產出檔案中插入額外的 JS
  • ai2html-html:在產出檔案中插入額外的 HTML
  • ai2html-text:設定變數,方便在其它文字方塊中引用
    • 在 ai2html-text 中以「variable-name: value」的方式設定變數,就可以在其它文字方塊中以「<%=variable-name%>」的方式使用變數。

設定項的細節這裡就不逐項介紹,如果有需要詳細解釋可以參考 ai2html 官網。我們舉其中一項來看看修改的效果:「responsiveness」這個項目可以控制 HTML 是否自動佔滿畫面,並在不同螢幕大小下自動縮放圖片。以那個醬汁為例,我們把 responsiveness 從「fixed」改為「dynamic」後,可以看到在不同的螢幕大小時文字與圖片間的變化:

Example - Small

小螢幕時的效果

Example - Large

大螢幕時的效果,因為完整畫面過大,僅截取含字部份的螢幕

最後,要注意這些設定區塊不可以出現在工作區域中,不然 ai2html 會連帶這些設定文字一併產生到 HTML 之中喔!


結語

ai2html 的設計是針對圖文穿插型的圖表,若一般以文字為主的版面設計,使用 ai2html 可能會因為變動的文字與螢幕大小而造成文字走位,這種情況還是請大家乖乖的切版囉!即便如此, ai2html 仍然是個相當方便的工具,如果讀者們有圖表上網的需求,不妨考慮使用 ai2html ,以便得到更好的閱讀體驗以及 SEO 的效果喔!


Written by infographics.tw

發表迴響

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