這篇文章給大家分享靜態信息圖的設計方法。時間倉促難免有疏漏不足，歡迎各位指正.....

信息在“設計”之前應有數據的收集、整理等步驟，在完成之后，應進行整體規劃。然后才是“設計”的步驟：先選擇各個部分的圖表基本類型，接著進行裝飾，最后再進行整合：

信息圖推薦：
《信息圖好幫手！一組矢量信息圖元素免費下載》
《經驗分享：熱門有趣的信息圖是怎樣誕生的？》

一、選擇圖表類型

任何信息圖表都是在一些基本圖表的基礎上，加以裝飾。就像先有“骨架”再往上“貼皮”。

在選擇圖表類型的時候，給大家推薦兩個小工具：

Choosing a good chart 英文版?、?Choosing a good chart 中文版

它提供了一個選擇圖表的流程圖，根據它的導引可以一步步明確需求，并最終找到合適的圖表類型。

Chart Chooser

它提供一個需求篩選器，根據選擇的需求為你篩選合適的圖表類型

 

二、進行裝飾

圖表類型確定后，需要開始對其進行裝飾。

裝飾的基本方法有二：圖形化和變形。

A.圖形化

圖形化包括四個小的步驟：

• 找出代表性概念
• 確定表現風格與收集素材
• 對圖表主體進行裝飾
• 對圖表其它部分進行裝飾

 

1. 找出代表性概念

進行圖形化則需要先聯想出代表性概念，最好是具體的、能夠直接圖形化的概念。比如有關“石油”的數據，可以選擇用“油滴”、“油桶”等代表性概念；有關“錢”的數據，可以選用“金幣”、“貨幣符號”、“錢袋”等作為代表性概念。

推薦的方法是使用思維導圖。相關教程可以見：

• 《思維導圖——思維整理術》
• 《維基百科——心智圖》

 

2. 確定表現風格與收集素材

接下來，進一步將概念圖形化，確定一種表現風格。可以有以字做形、使用矢量圖形、使用實物照片和手繪四種表現風格：

a. 以字做形

這是個偷懶的方法，直接用文字當做圖形，如：

b. 使用矢量圖形

如圖中的水滴形狀：

這里推薦一組超贊的矢量信息圖元素免費下載，幫同學們節省時間：

矢量圖形素材可以在以下網站找到：

• vectorss.com
• all-silhouettes.com
• vectorstock.com
• iconfinder.com
• flaticon.com
• glyphsearch.com

c. 實物照片

如圖中的煙葉：

實物照片推薦自行拍攝，如不具備拍攝條件，可以在以下網站尋找素材：

everystockphoto.com

flickr.com?（記得開啟“Advanced Search”里“Find content to modify, adapt, or build upon”的選項）（要自備梯子唷）

嫌太少？來?→?SDC設計師網址導航，隨你挑個夠！

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. 要有合理的閱覽導引

如：用數字和箭頭做導引

至此，靜態信息圖的制作應該已經基本完成。一嚕茶話會還會推出有關 交互式信息圖 以及其他各個方面的文章，歡迎大家繼續關注 ~_~

 

原文地址：illusate
投稿者：張圭狄

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量63萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：