靜態信息圖設計指南【設計資源】
信息在“設計”之前應有數據的收集、整理等步驟,在完成之后,應進行整體規劃。然后才是“設計”的步驟:先選擇各個部分的圖表基本類型,接著進行裝飾,最后再進行整合:
來源: illusate
一、選擇圖表類型
任何信息圖表都是在一些基本圖表的基礎上,加以裝飾。就像先有“骨架”再往上“貼皮”。
在選擇圖表類型的時候,給大家推薦兩個小工具:
它提供了一個選擇圖表的流程圖,根據它的導引可以一步步明確需求,并最終找到合適的圖表類型。
它提供一個需求篩選器,根據選擇的需求為你篩選合適的圖表類型
二、進行裝飾
圖表類型確定后,需要開始對其進行裝飾。
裝飾的基本方法有二:圖形化和變形。
A. 圖形化
圖形化包括四個小的步驟:
找出代表性概念
確定表現風格與收集素材
對圖表主體進行裝飾
對圖表其它部分進行裝飾
1. 找出代表性概念
進行圖形化則需要先聯想出代表性概念,最好是具體的、能夠直接圖形化的概念。比如有關“石油”的數據,可以選擇用“油滴”、“油桶”等代表性概念;有關“錢”的數據,可以選用“金幣”、“貨幣符號”、“錢袋”等作為代表性概念。
推薦的方法是使用思維導圖。相關教程可以見:
《思維導圖——思維整理術》
《維基百科——心智圖》
2. 確定表現風格與收集素材
接下來,進一步將概念圖形化,確定一種表現風格。可以有以字做形、使用矢量圖形、使用實物照片和手繪四種表現風格:
a. 以字做形
這是個偷懶的方法,直接用文字當做圖形,如:
b. 使用矢量圖形
如圖中的水滴形狀:
這里推薦一組超贊的矢量信息圖元素免費下載,幫同學們節省時間:
矢量圖形素材可以在以下網站找到:
c. 實物照片
如圖中的煙葉:
實物照片推薦自行拍攝,如不具備拍攝條件,可以在以下網站尋找素材:
everystockphoto.com
flickr.com (記得開啟“Advanced Search”里“Find content to modify, adapt, or build upon”的選項)(要自備梯子唷)
d. 手繪圖案
3. 對圖表主體進行裝飾
確定好表現風格及收集好素材后,我們開始用已有的圖形給“骨架”進行“貼皮”。
上一步驟的以字做形、矢量圖形、實物照片、手繪圖案都適用以下的五種方法:
a. 輔助
讓圖形作以輔助理解的作用直接標在數據或文字旁。
如:圖中動物和人的icon,用于輔助理解相應文字
b. 替換
把柱條、扇形、散點等替換為圖形
如:用 薯條的實物圖片 替換 柱狀圖的柱條
如:用長短不同的 價簽的矢量圖形 替換 柱狀圖的柱條
c. 嫁接
將1、2兩種方法巧妙結合 如:圖中既有美國國旗的圖案,又將折線替換為星條旗的紅條紋
d. 作為容器
保留圖形的邊框,將基本圖表填充于其中。圖形作為“瓶子”,基本圖表作為“水” ,將“水”填進“瓶子”。 如:用 手機、鑰匙的矢量圖形 作為 容器,將柱狀圖填于其中
如:將人的矢量圖形 作為 容器,將柱狀圖填于其中
e. 作為單元
將圖形作為單元,通過圖形的重復來表示數量關系
如:圖中將 硬幣的矢量圖形作為單元,組成柱狀圖
如:圖中將 rss符號、twitter的logo以及人的icon 作為單元:
4. 對圖表其它部分進行裝飾
除了圖表主體外,需要加以裝飾的往往還有:圖例、圖表背景和標注。 圖例、圖表背景的裝飾方法與素材和以上類似。
如果是在微博使用的信息圖,建議標注的時候,最小字號在16px以上。
而因為 圖表空間有限 及 風格原因,標注常使用瘦長的字體,在這里給大家推薦一些免費且好看的:Canter、Corki、Lady Ice、Medula One、Ostrich Sans、Rex、Versa
B. 變形
除了圖形化外,常見的圖表裝飾方法還有變形。變形大概有這幾種方法:
1. 彎曲
如:對柱狀圖的條柱進行彎曲
對柱狀圖的x坐標軸進行彎曲
對堆積柱狀圖的x坐標軸進行彎曲(南丁格爾玫瑰圖)
對折線圖的x坐標軸進行彎曲(雷達圖)
對樹狀圖進行彎曲
2. 增加空間維度
在不增加變量的情況下進行形式上的美化。如:
一維的柱狀圖變為二維的矩陣圖
一維的柱狀圖變為三維的柱狀圖
一維的時間軸變為三維具有深度的時間軸
3. 傾斜
如:
三、整合
到這里,信息圖的制作已經基本完成。最后一步是將圖表的各個部分進行整合。需要注意以下幾點:
A. 視覺層級
要放大、突出重要的文字與圖表、弱化次要的內容。如:
B. 合理劃分區塊
可以使用線條、顏色或者小標題來劃分:
如用顏色劃分區塊:
用小標題和線條劃分區塊:
C. 要有合理的閱覽導引
如:用數字和箭頭做導引
至此,靜態信息圖的制作應該已經基本完成。
轉載請在文章開頭和結尾顯眼處標注:作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載,授權事宜請聯系作者本人,侵權必究。
本文禁止轉載,侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權,侵權必究。
評論
評論
推薦評論
暫無評論哦,快來評論一下吧!
全部評論(0條)