如何為您的網站製作精美的圖表和圖表?

如果互聯網是一回事,那就是視覺。

人們喜歡快速,易於訪問的信息,信息圖表只提供這種類型的數據可視化。 當與餅圖,圖表或照片結合使用時,即使是複雜的數據也更容易理解。

根據Top Marketing Schools的信息圖表,信息圖表有可能達到約100萬人的15。

為什麼選擇圖表?

營銷公司Bell Pottinger認為,信息圖形等數字商品的業務預算增長了55%。

在關於圖表的信息圖表中, Unbounce 表示搜索圖表的人數在過去兩年中增加了800%。 有了這樣的統計數據,很難否認信息圖表形式的數據可視化是一個 良好的網站和博客內容/營銷.

好處#1-新訪客

添加信息圖表可以通過幾種方式吸引新的網站訪問者。

  • 網絡搜索:互聯網用戶可能正在研究您的信息圖所在的主題。 如果您是唯一擁有藍莓為何讓您更聰明的信息圖表的網站,那麼您將從任何搜索該主題信息圖表的人那裡獲得流量。 那些專門搜索圖像的人也可能會遇到你的信息圖。
  • 社交網絡:Top Marketing Schools的信息圖表顯示傳統帖子獲取75推文,而信息圖表幾乎獲得600。 由於人們更傾向於在Twitter上分享您的信息圖而不是簡單的帖子,因此您通過社交媒體吸引新訪問者的潛力是巨大的。

尼爾森/諾曼集團 估計平均頁面訪問持續不到一分鐘。 除非你抓住讀者的興趣,否則她會瀏覽你的頁面並轉到下一個網站。

網站訪問者習慣於滾動信息和新聞。 這是信息圖表如此有效地吸引讀者興趣的另一個原因。 有趣事實的直觀表示是比文本段落更快地呈現信息的方式。 讀者可以快速瀏覽您的信息圖表,吸收所需的信息,並留出更長的時間來查看您提供的其他信息,或者可以為您的網站添加書籤以供日後使用。

服務信息豐富的信息圖表的技術挑戰

但是,要記住的另一件事是,雖然信息圖表增加了價值,但是需要很長時間才能加載的重型圖像可能會吸引訪問者。 Pew Internet的研究估計,普通網站訪問者希望頁面加載時間不到3秒。 您的網站加載速度越快,轉化率就越高。

這是一個非常平衡的行為,以確保您的網站提供視覺豐富的體驗,同時仍然快速加載閃電。 實現此目標的最佳方法是使用快速服務器和優化圖像。 你會注意到我們的 網絡託管評論,我們在評估網絡主機時對速度進行了很多強調並進行了大量的速度測試。

好處#2-保留訪客

尼爾森/諾曼集團 估計平均頁面訪問持續不到一分鐘。 除非你抓住讀者的興趣,否則她會瀏覽你的頁面並轉到下一個網站。

網站訪問者習慣於滾動信息和新聞。 這是信息圖表如此有效地吸引讀者興趣的另一個原因。 有趣事實的直觀表示是比文本段落更快地呈現信息的方式。 讀者可以快速瀏覽您的信息圖表,吸收所需的信息,並留出更長的時間來查看您提供的其他信息,或者可以為您的網站添加書籤以供日後使用。

但是,要記住的另一件事是,雖然信息圖表增加了價值,但是需要很長時間才能加載的重型圖像可能會吸引訪問者。 Pew Internet的研究估計,普通網站訪問者希望頁面加載時間不到3秒。 您的網站加載速度越快,轉化率就越高。

確保您的網站提供豐富的視覺體驗,同時仍能快速加載,這是一種平衡的做法。 實現此目的的最佳方法是使用快速的網絡託管服務器和優化的圖像。 你會注意到我們非常強調速度 我們的託管評論 –看 A2 Hosting 評論 例如或 查看我們的其他評論 看看哪個虛擬主機最能滿足您對速度的需求。

好處3 –添加權限

我們的50%的大腦參與了視覺處理(來源).

大多數人都是視覺學習者。 NeoMam 來自Google Trends,Nielson和Pearson等來源的研究表明70百分比的感覺受體位於眼睛中,人們可以在1 / 10th的瞬間接收和理解視覺場景。

人們傾向於相信他們看到的東西,因為他們更好地理解它。 在您的信息圖中進行研究並對其進行備份可以為您的品牌增添權威。 務必:

  • 提供可靠的統計
  • 在信息圖的底部添加備受推崇的資源
  • 添加以可視方式顯示這些統計信息的圖形和圖表

當您將視覺感官與交互式功能相結合時,例如NeoMam信息圖來自這些統計數據,您不僅可以捕捉讀者的興趣,還可以吸引讀者的興趣。

你還注意到什麼? 您是否注意到頁面上的普通圖形或者移動,閃爍或可能啟動視頻的圖形?

 


 

是什麼讓一個好的信息圖表?

展望未來,我們將研究當今數據可視化的一些最佳資源和工具。 無論你是一個休閒的博主,只是想為品牌創建一些漂亮的信息圖表,或者是一個需要深入挖掘這個領域的職業平面設計師; 我相信你會發現這篇文章很有用。

信息架構

通常,一個好的數據可視化包含三個主要元素:

  1. 有意義的數據,
  2. 適當的信息設計,和
  3. 美麗的圖形。

請記住,儘管信息圖表往往吸引博客圈和社交媒體用戶的關注; 他們不僅應該做品牌推廣,還應該做更多的事情–信息圖表和圖表首先是要以用戶友好的方式傳遞無聊且混亂的數據。

因此,之前 創建圖表或信息圖表,您需要1)組織,過濾和優化您的數據; 2)決定如何呈現您的數據(又名數據可視化設計)。

數據挖掘

輸入OpenRefine –一個強大的數據挖掘工具,可避免我們在Excel工作表上逐行組織數據。 該工具以前稱為Google Refine(和Freebase Gridworks),可幫助用戶瀏覽和清理數據,將數據從一種格式轉換為另一種格式,並通過各種Web服務進行擴展。

如果您正在處理大量無序數據,OpenRefine絕對是您工具箱中必備的。 該工具目前託管在GitHub上,你可以 訪問此頁 獲取所有必要的信息和幫助。 如需進一步的跟進和最新消息,您還應該查看其新推出的網站 http://openrefine.org/

數據展示

一旦準備好了數據,就該決定如何將它呈現給觀眾了。

完成此操作有無數種方法:餅圖,圖表,折線圖,直方圖,熱圖,流程圖,元素週期表等。 這些方法中的每一種都非常適合某些類型的數據(如果使用不當,則會很臭)。

您應該如何展示您的數據,以便您的統計數據美觀,引人注目且易於理解?

在這個問題上, 視覺素養 為您可用於顯示數據的所有選項構建了一個非常方便的周期表(見下圖)。

請注意,當您翻轉鼠標時,週期表會顯示許多有趣的示例,因此請確保您在網站上查看實際的表格。

數據可視化週期表

如果您正在尋找非傳統方法,那麼您應該檢查 這篇很棒的文章 在Smashing Magazine上。 這篇文章是在不久前發表的,但我發現它非常有幫助。

 


 

信息圖表和充電工具使用

一旦完成了信息架構,就需要進行一些真正的生產。 從原始數據製作好看的圖表絕非易事,幸運的是有無數工具可以完成工作。

是的,有無數種用於數據可視化的工具。 有很多綜合工具可以根據複雜數據生成交互式圖形。 還有一些簡單的Web應用程序,除了生成簡單的2軸折線圖外什麼也不做。

出於實際原因,我們將調查雙方並為高級和臨時用戶列出多個圖形工具。

高級製圖工具

首先,讓我們看看一些先進的東西。

1。 ggPlot2和R.

R 和 ggplot2

R 是一種計算機語言和數據操作,計算和圖形顯示的環境。 ggplot2另一方面,是R的繪圖系統,有助於生成複雜的多層圖形。 例如,上面的HeatMap是使用ggplot2和R構建的。

如果你熱衷於學習R和ggplot2, LearnR 是一個很好的博客供進一步閱讀(雖然博客已有一段時間沒有更新)。

2。 jqPlot

jqPlot

jqPlot 是jQuery Javascript框架的繪圖和製圖插件。 jqPlot生成漂亮的折線圖,條形圖和餅圖。 該工具具有一些不錯的功能,例如生成可以由用戶在Web瀏覽器上調整的交互式點。 但是,值得注意的是,該工具尚未經過全面測試,並且某些Web瀏覽器可能不支持該工具,即低於7的Chrome和IE。

3。 JP Graph

JP Graph

JP Graph PHP- 支持各種繪圖類型的驅動圖表工具。 如果你正在寫一個 PHP 需要圖形創建庫的程序,這是您應該研究的東西。 我不會說 JP Graph 對於初學者來說是一個簡單的工具,但是這個工具(或者, PHP 庫)在您需要從您的文件生成圖形和圖表時確實很有幫助 Web服務器. JP Graph 可免費用於非商業用途,您需要一個支持的 Web 服務器 PHP 4.3.x 或更高版本。

4。 JS InfoVis Toolkit

JavaScript InfoVis Toolkit

JavaScript InfoVis Toolkit 是由Nicolas Garcia Belmont開發的圖書館。 該庫提供了廣泛的可視化選擇,並且完全免費使用。

 5。 IBM Analytics(先前稱為Many Eyes)

IBM Analytics 是一個免費工具,使用戶可以從幾乎任何類型的數據集創建可視化。

託管在IBM服務器上的Many Eyes不僅可以進行數據可視化-它還允許用戶上載自己的數據集並根據服務器中存儲的任何數據生成新的可視化模型。

6。 谷歌圖表

谷歌圖

谷歌圖 是免費的,強大的,靈活的,並且得到許多其他開發人員工具的支持。

Google Chart上的圖表純粹基於HTML5 / SVG技術; 該工具可幫助創建各種格式的圖表,並具有漂亮的動畫和交互式控件

7. 軸心

軸

Axiis 是由Tom Gonzalez和Michael VanDaniker開發的開源數據可視化框架。 該工具專為初學者和專業開發人員而設計。 Axiis提供預構建的可視化組件以及抽象佈局模式和渲染類,允許您創建自己獨特的可視化。

簡易信息圖表工具初學者

不可否認,大多數博主(包括我自己)不需要上面的綜合圖表工具來進行常規博客操作。 更常見的是,我們所需要的只是一個簡單的Web應用程序或一個簡單的工具來快速完成工作。

話雖如此,這裡是創建工具列表,需要很少的學習努力和用戶友好。

1。 Visme

visme

Visme 是一個DIY平台,允許用戶創建專業的演示文稿和圖表。

超過350,000個個人和組織(包括來自IBM和Disney等大公司的用戶)使用該工具通過交互式圖形和演示更好地進行通信。

2.通風

Venngage 是2011以來的一種用戶友好的可視化工具。 該工具提供了一種簡單的方法,可以使用拖放編輯器,自由格式的畫布以及示例和預構建的模板的1,000 +創建信息圖表。

3。 Easel.ly

Easel.ly

Easel.ly 幫助輕鬆地在線創建和共享視覺數據。 該Web應用程序具有一個簡單的界面,其中包含一些預設模板和拖放功能。 儘管Easel.ly目前仍處於beta模式,但它已經在其服務器上擁有130,000多個用戶創建的視覺效果。

4。 Vizualize.me

可視化

Vizualize.me 幫助創建有關個人的精美信息圖表(是的,因此名為Vizualize Me)。 這是一個有趣的工具,只需單擊幾下即可創建漂亮的簡歷或個人資料。 如果您使用的是LinkedIn,則應該真正嘗試一下-該工具能夠鏈接到您的LinkedIn個人資料並根據您的數據生成精美的圖形。

5。 Hohli

Hohli

需要一個簡單的圖表生成器 然後 Hohli 是參觀的地方。 該Web應用程序支持十二種不同大小的各種類型的圖表-所有用戶需要輸入數據和設計細節。

6。 Piktochart

Piktochart 是一個基於模板的信息圖表工具,可以幫助非設計師創建漂亮的圖形和圖表。

該工具支持拖放功能,可在預設模板,圖標,矢量和圖像中提供廣泛的選擇。 如果您正在尋找一個簡單的圖形工具,並且不介意為服務支付少量費用,Piktochart絕對是您最好的選擇之一。

 


 

在您開始之前:信息圖表靈感

那麼你準備好創建一些自己的信息圖表嗎? 等待。 我們還有一點要去這裡。

以下是從互聯網上捕獲的一些最流行的信息圖表和圖表。

我敢肯定,您過去在社交媒體網絡上看到過其中的一些內容-這證明了帶有有意義數據棒的漂亮圖形!

此外,還有一些理由說明為什麼信息圖庫如今被販賣得如此繁重。

通過參考其他人的作品,我們可以了解哪些內容適合觀眾。

  • 流行信息圖的平均大小是多少?
  • 觀眾最喜歡哪種主題?
  • 您是否應該在圖表中包含盡可能多的數據?
  • 你應該在信息圖中覆蓋多少個要點?
  • 是什麼讓這個信息圖流行?

現實生活中的例子:信息圖的類型

當您瀏覽樣本時,這些是要問的問題。

被說明的咖啡飲料

被說明的咖啡飲料
資源: lokeshdhakar.com

風扇男孩的野外指南 

PC World Fan Boys Field Guide
資源: 計算機世界

美國最佳啤酒2008

美國最好的啤酒
資源: Mikewithart.com

週期表字體

字體表

救助追踪器

救助追踪器
資源: “紐約時報”

電話的演變

時間線圖表
來源:Pow Wow Now

 

簽入圖表

圖圖
資料來源:四方廣場

深入研究

在研究這篇文章時,我碰到了許多有趣的博客和與我們的主題相關的網站。 認真地說,有很多東西可供閱讀,學習和玩耍! 我從來不知道有太多可用的數據 Gap Minder 及 更好的世界流量; 我在信息網站/博客上看了很多 UX Booth (與數據可視化並不完全相關,但有很多關於可視化如何改善Web用戶體驗的有用文章), 動態圖流動數據; 我深深欣賞所有展示的驚人作品 蘭迪的Pinterest董事會 及  圖表色情.

如果您只是開始數據可視化,我強烈建議您訪問上面列出的網站和博客。

如果您沒有在營銷活動中利用數據可視化的功能,那麼現在就該開始了。

作者照片

文章 Jerry 低