2014年7月25日

如何設計簡報中的資訊圖表(Infographics):個案討論

簡化,就是有效嗎?
最近BILL聽到有些人認為,
有效資訊的概念說穿了就是市面上崇尚「簡化」設計的老梗、
透過不斷又不斷的簡化讓投影片變得簡單。
事實上這個看法並不正確—
簡化只代表了簡報設計中「去除雜訊」的部分,
去除雜訊還需要搭配資訊增加才能最大化有效資訊。
既然以往的工作坊與文章比較著重在去除雜訊的部分,
今天就讓我們來討論如何增加簡報中的資訊,
也就是簡報中資訊圖表(Infographic)的建構。
當然BILL在資訊圖表的領域還只是個新手,
如果各位大大有不同見解的話,歡迎一起討論!

如果用食物來比喻的話,一般的資訊圖表的概念就像是Buffet,
每個想要表達的資訊好比原始食材,
經過設計師/廚師巧手把它變成易讀/好吃、令人引起共鳴/垂涎欲滴之後,
再把它們一一放在視線流動/用餐動線被設計過的資訊圖表/自助餐吧上,
讓觀眾/食客細細的品嘗與發覺其中的驚喜。
這時往往適合的視覺/用餐動線扮演著非常重要的角色,
好的動線可以決定各種不同觀看方式對於內容有著最大的掌握度。

簡報中的資訊圖表則比較簡單,
它更像是一般的西餐,會依序的呈現/上菜(透過動畫先後順序的建構),
觀眾/客人不會移動視線/隨意走動,
演講者/餐廳老闆對於呈現的掌握度極高,
可以減少很多視覺引導/用餐動線上的煩惱,
同時基於投影片視覺聚焦的特性,
一張投影片上面的資訊並不會像一張資訊圖表上面那麼多。
因此可以說,簡報的資訊圖表設計是入門資訊圖表領域的好開始。
下面就用BILL最近替呈汝生技公司修改的簡報設計作為說明的範例:
上圖是該份簡報的部分頁面。
簡報主要介紹的是呈汝生技公司的主力產品—
由林才民醫學博士(該公司創辦人)發明並獲多國專利的MAFT Gun(精微自體脂肪移植槍)。
簡報的內容是想要呈現MAFT Gun的獨特性能,以及「精微」自體脂肪移植的重要性。
經過風格的統一之後變成如下所示:
雖然如何進行簡報風格及視覺元素的統一是個非常值得探討的議題,
但是本篇主要是要聚焦在「如何設計簡報中的資訊圖表」的議題上。
(對風格統一有興趣的讀者可參考:跟模板說拜拜,改用統一的元素建構投影片!

我們以下面這張投影片為例:
上面這張投影片要介紹的背景如下:
根據講者的經驗,自體脂肪移植的手術在進行時,
(也就是把自己身上其他地方的脂肪移到想要填充脂肪之處,如豐胸或臉部整形等)
過往的手術方式往往注入過量的脂肪。
研究顯示注入的脂肪組織只有表面往內1~2mm的厚度的部分有較高(約40%)的存活率,
因此過量注射的脂肪因為體積過大,超過1~2mm厚度的中心部分會產生組織壞死
(該份簡報中,該現象稱為「中心壞死」Central Necrosis)。

因此這張投影片想要表達的是,
如果我們把移植的脂肪體積降低到夠小、半徑小於等於1~2mm之間,
那就可以讓整顆脂肪球都有較高存活率、避免中心壞死。

上圖中原始設計的文字部分的確有表達到要傳遞的意思,
但是若圖片未搭配很詳細的解說,
恐怕難以完整表達上述複雜的概念。

有些坊間的簡報者相當迷信滿版出血圖片的威力,
認為大字配上美美的圖借可以做好投影片。
如果硬套這樣的思維,去找一張可以表達「小」的意思的圖片,
再把字洋洋灑灑的寫上去,那大概就會變成這樣:
這樣迷信滿版出血圖片搭配、大圖大字的設計策略的結果,
就是讓這個世界多了一張漂亮的圖片的同時,也多了一張意義不明的投影片。
事實上投影片設計所追求的並不是美麗或好看,
而是傳遞最多的有效資訊。
而濫用滿版出血的圖片其實就是逃避了這樣的問題。

那實際上該如何設計這個簡報中的資訊圖表呢?
回顧資訊的概念乃是符合目的+邏輯相連結
因此「釐清這張資訊圖表設計的目的(重點)乃是一開始的關鍵!」
我們可以把前面的敘述加以整理,
成為要即將設計的簡報資訊圖表中,需要加以凸顯的數項重點:

  1. 脂肪球與中心壞死(Central Necrosis)的示意圖
  2. 不同大小脂肪球與中心壞死範圍的半徑差異
  3. 脂肪球半徑縮小會使得中心壞死跟著縮小
  4. 表面往內1~2mm的厚度的部分有較高(約40%)的存活率
  5. 當脂肪球半徑縮小到1~2mm,推論中心壞死的現象就會消失(重點)、整顆脂肪球都會有較高的存活率

這些目的(重點)就是我們要呈現的資訊,
有了他們作為引導之後,
我們接下來就是逐步應用簡單的幾何圖形與視覺設計技巧,
用簡約的方法實現這些目的。

首先我們先拉出兩個圓如下圖所示,
顯重點1中脂肪球部分的示意圖,
及重點2不同大小脂肪球部分的半徑差異。
(中黑體的中文字以及橘色箭頭屬於說明用途,不包括在設計之中)
其中選擇粉紅色的原因乃是因為順應整份投影片的設計風格(參考第3張的全覽圖)
而選擇實心單色的圓形、避免邊線、陰影、倒影及立體效果,
則是為了減少雜訊(這些效果無法增進觀眾的了解,因此可以視為雜訊)
接著我們完成重點3的脂肪球部分,凸顯半徑縮小的效果。
這非常容易做到,只要讓圓球由左至右逐步變小即可,如下圖所示。
另外投影片同時應用了顏色半透明以及濃淡效果,
讓觀眾產生由左到右半徑縮小的感覺,
同時亦可平衡左右兩邊的視覺重量(訊息強度)。
這中間值得注意的是,
我們是為了重點3「由左到右變化逐步縮小的感覺」才使用這個效果的,
效果本身唯有符合目的才具有意義
若有個效果很漂亮卻不符合我們目的的任何一部分的話,
那不論它再漂亮,都只是干擾理解的雜訊而已。
前面我們已經完成了重點1,2,3之中脂肪球的部分,
接著我們把重點1,2,3的中心壞死的部分都加以完成,
並加以標注,如下圖:
到了此時,我們的示意圖已經足以完整描述重點(目的)1,2,3。
接下來先跳過重點4,聚焦在重點5「當脂肪球半徑縮小到1~2mm,推論中心壞死的現象就會消失(重點)、整顆脂肪球都會有較高的存活率」之上。
我們在這一個步驟中加入了兩條虛線,
凸顯「當脂肪球半徑縮小,推論中心壞死的現象就會消失」的特質:
加上兩條相交的虛線後,
重點5的部分便已完成一半,
還剩「...縮小到1~2mm...」的數據部分,以及「整顆脂肪球都會有較高的存活率」的特質。
這部分可以與重點4「表面往內1~2mm的厚度的部分有較高(約40%)的存活率」一起呈現。
於是我們設計了一個長方形遮罩,
利用每個人對於長方形必定等高的直覺,外加文字說明與輔助的虛線,
放在大小連續變化的脂肪球與中心壞死之間的範圍,如下圖:
第1~5的步驟都是增加資訊的過程,
我們透過幾個簡單的幾何圖形便表達了前面所整理5大重點(目的)。
最後一步就是一個去除雜訊的過程:
我們在不更動主要設計的情況下,將圖片的角度稍加調整,
便可以創造兩個水平的對齊線、降低雜訊。
同時將一邊變成水平,另外一邊下降的角度便相應的變大,
會讓由大而小的變化趨勢變得更明顯。
(下面則是選擇性加了一點陰影,讓觀眾有東西放在桌面的錯覺,合理化水平的設計。)
完成調整以後便如下圖所示,
此時一個簡報中微型的資訊圖表便大功告成啦!
最後我們把圖表搭配原先的說明文字,
放回投影片之中,便是最終完成版的設計了:
是不是比一開始的設計清楚明瞭多了呢?

最後還記得提到前面我們曾經提過
簡報中的資訊圖表像是一般的西餐會依序的上菜,
可以透過動畫先後順序的建構掌握度視線流動嗎?
現在我們就將這張投影片配上動畫以後加以呈現,
就變成下面的完成作品啦!!!



回顧整個設計過程,
雖然我們不可能單憑一個例子就掌握簡報中資訊圖表的設計概念,
但是卻可以凸顯幾個BILL想要強調的重要概念:
  1. 簡化不見得有效,簡報設計最重要的是極大化有效資訊,而非盲目地簡化。
  2. 迷信滿版出血的圖片可以解決所有的設計問題是一種逃避。
  3. 簡報中的資訊圖表資訊較少、能透過動畫控制觀眾的視線流動,是入門資訊圖表領域的好開始。
  4. 有效資訊奠基於清楚的目的,因此一開始時必須釐清自己要表達的目的與重點—沒有目的,設計便沒有意義。
  5. 簡報中資訊圖表的設計方法千變萬化,但其中的每個視覺元素必定彈無虛發(每個元素的安排都是為了傳達特定的目的/資訊)同時沒有令人分心的雜訊。
所以看過這篇的大家,
別再說盲目的簡化與滿版出血圖片就是設計的王道了;
另外下次開始打開電腦設計簡報中的資訊圖表前,
記得「沒有目的,設計便沒有意義」,
釐清自己的目的,方能讓簡報設計事半功倍!