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

文章撰寫者:
  • 精選文章
  • 更新:Apr 15,2019

注意:_usort_terms_by_ID是 棄用 自版本4.7.0! 請改用wp_list_sort()。 在 /home/218053.cloudwaysapps.com/wmdtwanpyt/public_html/wp-includes/functions.php 在線 4435

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

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

根據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列為最快的託管公司之一。 您可以閱讀各種網絡主機上的完整評論,看看哪一個最符合您對速度和其他功能的需求。

好處#3 - 添加權限

大多數人都是視覺學習者。 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對於初學者來說是一個簡單的工具,但是當您需要從Web服務器生成圖形和圖表時,工具(或PHP庫)確實非常有用。 JP Graph是免費的非商業用途,您需要一個支持PHP 4.3.x或更高版本的Web服務器。

4。 JS InfoVis Toolkit

JavaScript InfoVis Toolkit

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

5。 很多眼睛

IBM的許多眼睛

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

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

6。 谷歌圖表

谷歌圖

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

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

7。 軸

軸

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

簡易信息圖表工具初學者

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

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

1。 Visme

visme

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

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

2。 Easel.ly

Easel.ly

Easel.ly 有助於在線輕鬆創建和共享可視化數據。 Web應用程序帶有一些簡單的界面,包含一些預設模板和拖放功能。 儘管Easel.ly目前仍處於測試階段,但它已經擁有超過130,000用戶在其服務器上創建的視覺效果。

3。 Vizualize.me

VIsualize.me

Vizualize.me 幫助創建關於個人的美麗信息圖表(是的,因此名為Vizualize Me)。 這是一個有趣的工具,只需點擊幾下即可創建精美的簡歷或個人資料。 如果你在LinkedIn上,你應該嘗試這個 - 該工具能夠鏈接你的LinkedIn個人資料,並根據你的數據生成令人驚嘆的圖形。

4。 Hohli

Hohli

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

5。 Piktochart

Piktochart信息圖表

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

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

6。 Infogr.am

Infogram

Infogr.am 是一個用戶友好的網絡應用程序,用於製作圖表。 只需點擊幾下即可創建交互式信息圖表和圖表,將其放入文章,博客文章或與朋友分享。 隨著一些200 000信息圖表的創建和10 000一周的新註冊,它是世界上發展最快的數據可視化社區。


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

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

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

我很確定你過去曾在社交媒體網絡上看到過其中的一些內容 - 這證明了具有有意義數據的漂亮圖片!

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

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

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

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

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

被說明的咖啡飲料

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

風扇男孩的野外指南

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

美國最佳啤酒2008

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

週期表字體

字體表

救助追踪器

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

電話的演變

時間線圖表
來源:Pow Wow Now

簽入圖表

圖圖
資料來源:四方廣場

深入研究

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

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

如果您尚未在營銷活動中利用數據可視化的強大功能,那麼現在是時候開始了。

關於Jerry Low

WebHostingSecretRevealed.net(WHSR)的創始人 - 100,000用戶信任和使用的託管評論。 超過15在網絡託管,聯盟營銷和SEO方面的多年經驗。 ProBlogger.net,Business.com,SocialMediaToday.com等的貢獻者。