【轉貼】視覺化資訊圖表設計
文章出處： http://www.inside.com.tw/2012/08/14/infographics-for-dummies-typography
（By Infographic.jp : 智慧型手機大戰 Android v.s iPhone）
昨天我們刊了一篇 〈 關於家庭辦公（遠距離辦公）的一些數據 〉 ，以視覺化資訊圖表展示各種數據。今天我們來看看如何製作出美觀、易懂的視覺化資訊圖表。（過去 Inside 曾寫過 〈 做圖表也是一門學問：淺談超吸睛的資訊圖表（infographics）〉、〈 製作視覺資訊圖表（infographics）的三大要素及相關工具 〉、〈 日本 infographics起步 亞洲資訊圖像風潮要開始了嗎？ 〉 等文章談論視覺化資訊圖表。）
廣告小妹，來自中國上海，目前旅居紐約，深深著迷於廣告、設計、logo 和字型，專業是廣告設計（Advertising Design），退休後希望能夠幫助殘障人士。本文出自她所經營的同名部落格「廣告小妹」，原文是 〈「設計教學」Infographics for Dummies (第三課：字型篇)〉。
一幅視覺化資訊圖表（Infographics）作品最重要的兩大元素是：圖 & 文。我今天要討論的是文字部分。對於華人設計師們來說，排版設計（Typography）是個極具挑戰力的難題。
視覺化資訊圖表的排版設計講究的不是設計師使用了多少特效，編排地有多完美，而是需要具備以下三大元素：
- 與圖形做完美搭配：
設計風格是否相呼應？有沒有考慮到配色的問題？有沒有注重層次？ - 挑選合適的字型：
請勿使用 Comic Sans，也請別在中文作品中使用華康少女體。請選擇適合該主題的字型，並且要考慮到作品需要呈現的專業度。 - 方便讀者閱讀：
請勿選擇難以閱讀的字型作為內文字型。易讀性（Readability）是用來衡量視覺化資訊圖表排版設計的一大指標。
這是我觀察到新手視覺化資訊圖表設計師們最容易犯的幾個錯誤：
錯誤一：使用過多不同字型
在同一個視覺化資訊圖表作品中請勿使用超過三個不同字型，可考慮使用不同字重（weight）代替。
以此作品為例，主要文字部分使用了兩個字型（Headline & Body Text）。但作品的名稱「7 Things You Didn’t Know about the Golden Gate Bridge」卻使用了四個不同字型，這並沒有為作品帶來加分作用，反而使得左上角看似零亂並且增加了閱讀困難度。
錯誤二：只使用了一個字型
不同字型用太多，是個錯；用太少，也是個錯。請不要重複使用同一個字型，尤其是在連字重都不換的情況下（更換不同顏色也解決不了問題）。
國外視覺化資訊圖表設計師們較懂得避免犯這個錯誤，導致我目前只有找到這張中文作品當範例圖。請盡量避免標題與主要文字使用同一個字型。微軟雅黑這款字型不適合當「大標題字型」，請尋找其它字型代替。
錯誤三：文字成了唯一的主角
許多視覺化資訊圖表的愛好者們都有個共同的迷思，那就是：如果拿掉所有文字，作品的visual圖本身就應該能清楚表達中心思想。但事實上，文字是極其重要的，不是每個主題都能僅靠圖形就能完整表達作者的訊息。如何將文字與圖形完美結合在一起，互相輔佐才是設計師們需要去解決的難題。
以上兩個不同語言的作品犯了同一個錯誤：文字成為了唯一的主角。左邊的英文作品，雖然加了不少圓形圖案，但這些都是沒有太大意義的圖形。此作品還是主要靠文字來表達思想，這違背了視覺化資訊圖表本身的意義。至於右邊的中文作品… 我不認為這應該被歸類為視覺化資訊圖表作品。圖形與主題並沒有直接關聯，並且幾乎所以資訊都需要靠文字來表達，設計師應該打屁股 =“=
錯誤四：太過於注重文字設計
我個人很喜歡美麗的排版設計設計，但當視覺化資訊圖表作品使用過多的 Type Treatment，容易導致讀者將所有注意力都放在文字上，而非其表達的資訊。
我很喜歡這個作品的排版設計，但請牢記，我們要設計的是視覺化資訊圖表，不是海報。
Q&A 時間
Q: 請問我在選擇英文字型時，該使用襯線（Serif）還是無襯線（Sans-serif）字型？
大多數視覺化資訊圖表設計師習慣使用無襯線字型，因為大家普遍認為無襯線更能體現出作品的現代美。襯線字型給與人優雅的感覺，但無襯線更有利落感。我建議內文使用無襯線字型，「標題用」字型可以隨意和襯線或者無襯線字型做搭配。以下是我推薦的無襯線字型：
大多數視覺化資訊圖表設計師習慣使用無襯線字型，因為大家普遍認為無襯線更能體現出作品的現代美。襯線字型給與人優雅的感覺，但無襯線更有利落感。我建議內文使用無襯線字型，「標題用」字型可以隨意和襯線或者無襯線字型做搭配。以下是我推薦的無襯線字型：
Q: 請問選擇中文字型時，該注意些什麼呢？
在選擇視覺化資訊圖表作品的字型時，很重要的指標是該字型是否「可讀性」（readable）。草體字的可讀性通常都不高，請選擇方便讀者閱讀的字型。以下是我推薦的幾個中文字型：
在選擇視覺化資訊圖表作品的字型時，很重要的指標是該字型是否「可讀性」（readable）。草體字的可讀性通常都不高，請選擇方便讀者閱讀的字型。以下是我推薦的幾個中文字型：
▼ 小妹推薦「標題用」中文字型
▼ 小妹推薦「內文用」中文字型
參考作品
以下是我挑選的幾個較為特別的視覺化資訊圖表 排版設計設計：
▲ 這個作品使用了許多免費英文字型，部分免費字型我有在「本月字型」文章中介紹過。
▲ 這是 Text on Curve 的範例，我之後會在其它教學中做示範。
▲ 標題使用了無襯線字型，既明顯又很現代化。請看它的內文，都有經過巧妙的編排。
▲ 這是較有漫畫色彩的排版設計風格，有時可以利用文字的邊框做效果。
▲ 大標題與圖形使用了同樣的特效，加分與否就要看使用的方式。
▲ 為字型加個角度可以有不一樣的感覺。
▲ 此類風格只適合用於大標題。
▲ 我喜歡這個作品的整體風格，設計師選擇的字型與作品本身的「looseleaf paper」風格相呼應。
▲ 這是另一種較為簡單的標題設計法，使用不同橫幅（Banner）素材與字型做搭配。
視覺化資訊圖表的字型設計要等到真正進入製作過程中才能得到完整的發揮，許多設計技巧需要透過 Illustrator 來完成。我會在未來的教學中為大家做示範，大家下一課見 ^__^
讀者如果對視覺化資訊圖表設計感興趣的話，可以參考廣告小妹寫的系列文章：
沒有留言:
張貼留言