2016年8月21日

表格案例解析:為什麼有些設計細節特別關鍵?

好一陣子沒發文了,這會兒來談談表格設計的案例解析吧!
這篇文章的契機源自於多米能 與 禪風投影片10分鐘學簡報交流社團的表格改造分享,只要透過7個簡單的步驟,就可以將表格從原本的醜表格,變成是禪風的新表格,如下圖所示:


對於繁忙的一般工作者來說,這樣子簡單的設計步驟非常有幫助,因為可以避免反覆找素材的時間。然而很有趣的是,在該篇分享貼文的後續討論中,漸漸延伸出了新的議題:「這樣的設計雖然精簡,但是對照『年齡』與『表格內容』反而變得困難,是不是造成反效果了呢?」

這個議題引起了我的興趣。畢竟現在簡報設計漸漸蔚為顯學,減少雜訊、不要有過多的裝飾的概念漸漸深植人心。但話說回來,我們該麽樣判斷什麼設計才是「有用的資訊」,什麼又是「沒用的裝飾呢」?以這個表格後續討論的議題來說,如果原作設計對一般讀者而言,並未針對『年齡』與『表格內容』對照優化,淨是在文字的粗細與變色、成人與非成人紅藍顏色區別著墨,那麼是否代表這樣的設計其實是無用的呢?事實上並非如此


其實這張投影片除原作者所提及的「禪風設計」之外,還有許多作者並未提及的考量在其中。事實上因為這張表格的受眾不是大眾,而是針對EMT(緊急救護技術員)訓練的學員設計的,這意味著受眾對於裡面的資訊已經有一定程度的理解,所以對照『年齡』與『表格內容』對他們來說其實已經是背景知識,跨欄表格的設計不是重點
反之,由於這張表格的實際用途,是提供EMT訓練學員在考前唸書時快速複習用(譬如進考場前30秒匆匆一瞥,上圖顏色突出的數字是必考重點),所以奠基在這個目的,文字的粗細與變色可以讓視線非常直覺地被關鍵字抓住,在最短時間找到關鍵數據。另外成人與非成人紅藍顏色區別,也是針對EMT的訓練方式優化的。課堂上CPR 的教學方式是先記熟成人CPR後,再從這個基礎上去記憶其他(小兒、嬰兒、新生兒)的各項數據。所以在配色上也呼應了這樣的邏輯

所以從前面的討論可以看出,從一般觀眾的視角看待這張表格的設計的話,他就只是個簡潔的禪風表格,但是不容易進行跨欄對照;但是從其受眾EMT訓練學員的視角來看,這卻是量身打造的考前準備秘笈。所以這邊我們可以總結如下:「設計的手法無所謂絕對的好壞,完全取決於其受眾與目的


那麼如果今天受眾是一般大眾的話,這張表格又可以怎麼設計呢?也是一樣,第一個動作就是要釐清目的。這張表格最淺層的目的就是「清楚呈現不同年齡層CPR急救的各項不同」。但是我們仔細想想之後會發現,其實背後更深一層的目的應該是「當一般大眾遇到CPR時,人們可以依據表格找出正確的急救方式」這兩個目的看似相近,但其實還是有很大不同的。舉例來說,這讓欄的項目遠比列還要重要(亦即,大家不一定要清楚知道同一列項目不同年齡的版本,但一定要知道面對單一傷者年齡對應的處理方式)。在簡報設計之前,了解這層問題背後的問題、目的背後的目的,有助於我們掌握特別關鍵的設計細節。以下是我們再次修改之後的設計版本:
大多數人看到這個範例,感覺最明顯的變化應該是「配色」變成有點馬卡龍的色系。這或許是最顯著的變化,但並不是最重要的變化。事實上,以「當一般大眾遇到CPR時,人們可以依據表格找出正確的急救方式」為目的進行的設計中,下面要講的三個細節才是真正的關鍵所在:


【細節1:為什麼使用4種不同的彩色?】
首先,是除掉標題欄之外,我們使用了4種不同的彩色配色。這裡重要的並非我們選了「這4種」顏色,而是我們選擇了「不同的」彩色。為什麼不直接用灰階配色呢?因為不同年齡的「區別」是重點,所以彩色用在代表年齡的欄上作為區別。那為什麼不用1種彩色的4種不同彩度呢?原因在於如果是彩度的變化,容易讓人覺得這4個項目是有逐步的漸變,比方說「CPR隨著年齡增加越按越多(或少)下」之類的。但實際上表中資料的性質有些雖然有漸變,但是也有些資料彼此互為完全不同的項目、無所謂漸變,比方說頸動脈、臂動脈、股動脈之間的選擇。因此我們捨棄不同彩度的想法,而是用4種完全不同的彩色。



【細節2:為什麼使用跨欄白底、為什麼這裡(B)白底不靠邊?】
在這裡我們使用跨欄白底來解決對照年齡與表格內容變不清楚的問題。但是關鍵在於其中白底在邊界處是保有一定的空隙而不靠邊的 (如下圖B)。為什麼這個看似很小的細節是重要關鍵呢?原因在於若靠邊,則會與下圖A的情況搞混,以為該項目會再延伸到下一欄去。這樣會讓大家在盯著單一年齡的CPR方法進行對照時,有看錯的疑慮。所以用這樣的一個小小的空隙,我們可以清楚的交代單一個跨欄白底遮罩到底跨了多大、哪些欄是屬於這個內容,以達到「人們可以依據表格找出正確的急救方式」的目的。


【細節3:為什麼特別增加資料的分群?】
最後,為什麼我們還特別替資料分群呢?如果目的只是「清楚呈現不同年齡層CPR急救的各項不同」的話,那麼增加這個其實沒啥必要。但是如果我們考量「當一般大眾遇到CPR時,人們可以依據表格找出正確的急救方式」的目的的話,那我們便可以想到,萬一大家在情急之下漏看或看錯裡面的項目的話,那麼就代誌大條了。所以在這裡特別增加資料的分群的標題,讓看的人可以從更大的分類逐步的核對或理解,這樣就可以減少相關錯誤的風險。

看到這邊你是不是覺得「哇~這要注意的眉角也太多了一點!?」其實不是每一個表格都是要注意這些的。這些項目之所以關鍵是因為表格的深層目的,在其他的表格設計中,這些項目很可能只是錦上添花的加分但不是必須的,反過來要達到這些目的用一些比較陽春的方法其實也行得通。


最後幫大家總結一下這篇文章所提到的觀念:首先,針對受眾與目的的不同,設計會針對不同的地方優化,因此設計手段無所謂絕對的優劣,端看是否符合受眾與目的而定。其次回答副標的問題:「為什麼有些設計細節特別關鍵?」,原因是當這些細節直接與目的有所關聯時,便會是特別關鍵的細節。因此在進行表格設計時真正要掌握的是整份表格的目的,尤其是較核心、深層的「目的背後的目的」。這樣在設計時才可以針對真正重要的眉角進行優化,達事半功倍之效。