這篇文章給大家分享靜態(tài)信息圖的設(shè)計(jì)方法。時(shí)間倉促難免有疏漏不足，歡迎各位指正.....

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

信息圖推薦：
《信息圖好幫手！一組矢量信息圖元素免費(fèi)下載》
《經(jīng)驗(yàn)分享：熱門有趣的信息圖是怎樣誕生的？》

一、選擇圖表類型

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

在選擇圖表類型的時(shí)候，給大家推薦兩個(gè)小工具：

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

它提供了一個(gè)選擇圖表的流程圖，根據(jù)它的導(dǎo)引可以一步步明確需求，并最終找到合適的圖表類型。

Chart Chooser

它提供一個(gè)需求篩選器，根據(jù)選擇的需求為你篩選合適的圖表類型

 

二、進(jìn)行裝飾

圖表類型確定后，需要開始對(duì)其進(jìn)行裝飾。

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

A.圖形化

圖形化包括四個(gè)小的步驟：

• 找出代表性概念
• 確定表現(xiàn)風(fēng)格與收集素材
• 對(duì)圖表主體進(jìn)行裝飾
• 對(duì)圖表其它部分進(jìn)行裝飾

 

1. 找出代表性概念

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

推薦的方法是使用思維導(dǎo)圖。相關(guān)教程可以見：

• 《思維導(dǎo)圖——思維整理術(shù)》
• 《維基百科——心智圖》

 

2. 確定表現(xiàn)風(fēng)格與收集素材

接下來，進(jìn)一步將概念圖形化，確定一種表現(xiàn)風(fēng)格?？梢杂幸宰肿鲂巍⑹褂檬噶繄D形、使用實(shí)物照片和手繪四種表現(xiàn)風(fēng)格：

a. 以字做形

這是個(gè)偷懶的方法，直接用文字當(dāng)做圖形，如：

b. 使用矢量圖形

如圖中的水滴形狀：

這里推薦一組超贊的矢量信息圖元素免費(fèi)下載，幫同學(xué)們節(jié)省時(shí)間：

矢量圖形素材可以在以下網(wǎng)站找到：

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

c. 實(shí)物照片

如圖中的煙葉：

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

everystockphoto.com

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

嫌太少？來?→?SDC設(shè)計(jì)師網(wǎng)址導(dǎo)航，隨你挑個(gè)夠！

d. 手繪圖案

 

3. 對(duì)圖表主體進(jìn)行裝飾

確定好表現(xiàn)風(fēng)格及收集好素材后，我們開始用已有的圖形給“骨架”進(jìn)行“貼皮”。

上一步驟的以字做形、矢量圖形、實(shí)物照片、手繪圖案都適用以下的五種方法：

a. 輔助

讓圖形作以輔助理解的作用直接標(biāo)在數(shù)據(jù)或文字旁。

如：圖中動(dòng)物和人的icon，用于輔助理解相應(yīng)文字

b. 替換

把柱條、扇形、散點(diǎn)等替換為圖形

如：用 薯?xiàng)l的實(shí)物圖片 替換 柱狀圖的柱條

如：用長短不同的 價(jià)簽的矢量圖形 替換 柱狀圖的柱條

c. 嫁接

將1、2兩種方法巧妙結(jié)合 如：圖中既有美國國旗的圖案，又將折線替換為星條旗的紅條紋

d. 作為容器

保留圖形的邊框，將基本圖表填充于其中。圖形作為“瓶子”，基本圖表作為“水” ，將“水”填進(jìn)“瓶子”。 如：用 手機(jī)、鑰匙的矢量圖形 作為 容器，將柱狀圖填于其中

如：將 人的矢量圖形 作為 容器，將柱狀圖填于其中

e. 作為單元

將圖形作為單元，通過圖形的重復(fù)來表示數(shù)量關(guān)系

如：圖中將 硬幣的矢量圖形 作為 單元，組成柱狀圖

如：圖中將 rss符號(hào)、twitter的logo以及人的icon 作為單元：

 

4. 對(duì)圖表其它部分進(jìn)行裝飾

除了圖表主體外，需要加以裝飾的往往還有：圖例、圖表背景和標(biāo)注。 圖例、圖表背景的裝飾方法與素材和以上類似。

如果是在微博使用的信息圖，建議標(biāo)注的時(shí)候，最小字號(hào)在16px以上。

而因?yàn)?圖表空間有限 及 風(fēng)格原因，標(biāo)注常使用瘦長的字體，在這里給大家推薦一些免費(fèi)且好看的：Canter、Corki、Lady Ice、Medula One、Ostrich Sans、Rex、Versa

 

B.變形

除了圖形化外，常見的圖表裝飾方法還有變形。變形大概有這幾種方法：

1. 彎曲

如：對(duì)柱狀圖的條柱進(jìn)行彎曲

對(duì)柱狀圖的x坐標(biāo)軸進(jìn)行彎曲

對(duì)堆積柱狀圖的x坐標(biāo)軸進(jìn)行彎曲（南丁格爾玫瑰圖）

對(duì)折線圖的x坐標(biāo)軸進(jìn)行彎曲（雷達(dá)圖）

對(duì)樹狀圖進(jìn)行彎曲

2. 增加空間維度

在不增加變量的情況下進(jìn)行形式上的美化。如：

一維的柱狀圖變?yōu)槎S的矩陣圖

一維的柱狀圖變?yōu)槿S的柱狀圖

一維的時(shí)間軸變?yōu)槿S具有深度的時(shí)間軸

3. 傾斜

如：

 

三、整合

到這里，信息圖的制作已經(jīng)基本完成。最后一步是將圖表的各個(gè)部分進(jìn)行整合。需要注意以下幾點(diǎn)：

A. 視覺層級(jí)

要放大、突出重要的文字與圖表、弱化次要的內(nèi)容。如：

B. 合理劃分區(qū)塊

可以使用線條、顏色或者小標(biāo)題來劃分：

如用顏色劃分區(qū)塊：

用小標(biāo)題和線條劃分區(qū)塊：

C. 要有合理的閱覽導(dǎo)引

如：用數(shù)字和箭頭做導(dǎo)引

至此，靜態(tài)信息圖的制作應(yīng)該已經(jīng)基本完成。一嚕茶話會(huì)還會(huì)推出有關(guān) 交互式信息圖 以及其他各個(gè)方面的文章，歡迎大家繼續(xù)關(guān)注 ~_~

 

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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