WordPress圖形圖表小工具:如何增強儀表盤和網站視覺效果

如何增強儀表盤和網站視覺效果

在許多情況下,以易於消化的引人入勝的格式展示資料可以帶來很多好處。WordPress 的圖形小工具可以讓您將原始資料和統計資訊轉化為具有吸引力的視覺化資訊顯示。大多數情況下,這將以外掛的形式出現,讓您可以在 WordPress 中處理這些資料。

在本篇文章中,我們將探討 WordPress 的圖形小工具,包括可以使用的不同型別、使用它們的場合等。在文章的後半部分,我們將介紹一些可以幫助你實現圖形小工具的外掛,然後向你展示如何根據自己的需要使用其中的一個。

瞭解 WordPress 中的圖形小工具

網站(包括使用 WordPress 的網站)使用兩種型別的小工具:圖形小工具和基於文字的小工具。典型的文字小工具可以吸引人,但圖形小工具會以更吸引人的格式顯示資訊。

網站前端的折線圖圖形小工具

網站前端的折線圖圖形小工具。

這些小工具具有動態元件,可使用不同的視覺表現形式,如圖表、圖形、地圖和進度條等,一目瞭然地傳達複雜的資訊。這可以幫助您更好地與讀者溝通,進而幫助他們快速理解和解釋您的資料。它還可以提高使用者參與度和留存率。

雖然展示資料的方式多種多樣,但圖形小工具有幾個共同點:

  • 它們將以動態的方式顯示資料。
  • 您可以提供互動元素,幫助使用者深入瞭解您的資料。
  • 無論您的網站設計如何,您都可以定製與之相匹配的小工具。
  • 在很多情況下,您都可以提供實時更新的資料。

然而,圖形小工具並不是為網站增添視覺效果的全部。它們是原始資料視覺化和互動的重要組成部分。

為什麼圖形小工具可以幫助您進行現場資料展示

使用圖形傳達資訊有很多好處。總體而言,視覺化內容是一門大生意,對網路營銷來說超級重要

對於您和您的資料來說,還有很多其他積極因素值得注意:

  • 增強資料視覺化。複雜的資料集可以更容易訪問,讓使用者快速掌握趨勢和模式。它們還可以通過使用多功能、適應性強、易消化的視覺化格式來簡化您提供資訊的方式。
  • 提高使用者參與度。互動元素讓使用者有機會延長現場時間,提高整體參與度
  • 專業美學。如果設計得當,小工具可以提升網站的視覺吸引力。這種精緻而專業的外觀可以為您的資料展示帶來優勢。

在任何領域,視覺資訊往往比文字資訊更有優勢,這意味著您可以用一種讓關鍵資料點深入人心的方式來展示它們。因此,在網站上以正確的方式使用它們是重中之重。

何時在 WordPress 網站上使用圖形小工具

過多的好東西會變得重複和飽和。這意味著您需要小心謹慎地使用圖形小工具。

好訊息是,您可以在很多情況下使用圖形小工具。當您需要為讀者簡化複雜的概念時,就是使用圖表的最佳時機。不過,還有其他一些特殊情況:

  • 呈現複雜的資料集,需要展示大量資料或資料點之間錯綜複雜的關係。
  • 突出隨時間變化的趨勢,顯示不同時間段資料的變化或模式。您甚至可以展示目標、里程碑或增長指標
  • 比較多個變數,說明不同資料類別之間的關係或差異。
  • 展示特定地點的地理資料,或資料需要空間背景的地方。

在需要使用者互動的地方,如動態報告或其他儀表盤,甚至可以使用圖形小工具。關鍵是要確定,與其他方法相比,以視覺化方式顯示資料是否能增強對資料的理解和參與。

簡而言之,如果視覺化格式能為您的資料提供價值和清晰度,那麼它就很可能適合圖形小工具。

WordPress 圖形小工具的不同型別

資料視覺化本身有多種形式,每種顯示型別都適合不同的資料和展示需求。在此,我們不會詳細介紹每種資料展示方式,但有幾個典型的突出選項值得注意。

條形圖、餅圖、折線圖和麵積圖等典型圖表和圖形始終是資料視覺化的首選。這些都是主要的方法:

維基百科網站顯示的頁面總瀏覽量指標條形圖

維基百科網站顯示的頁面總瀏覽量指標條形圖。

散點圖比較複雜,但可以顯示兩個變數之間的關係:

英國電影學院(BFI)提供的票房指標散點圖

英國電影學院(BFI)提供的票房指標散點圖。

地圖的形式多種多樣。熱圖有一些特殊的用例,但會使用顏色梯度來顯示資料集的強度。互動式世界地圖可以很好地滿足基於地點的互動需求:

全球各地的所有活動

WordCamp 主網站在嵌入式互動地圖上標註了全球各地的所有活動。

計數器和進度條更適合里程碑式的成就。在這裡,您可以使用數字計數器,通過動態計數得出最終值。圓形進度條可以幫助展示完成百分比。您也可以使用線性水平或垂直進度條:

與下方任務列表相關的公共進度條

WordPress GitHub 官方頁面上的社羣標準洞察顯示了一個與下方任務列表相關的公共進度條。

即使是圖片庫、燈箱和滑塊也能幫助你通過多個幻燈片、疊加或幾乎是故事驅動的事件來展示資料。這也是時間線視覺化和流程視覺化發揮作用的地方。在攝影教學網站上經常能看到的一種資料視覺化型別是前後對比。

展示兩張相似圖片之間的差異

使用動態互動的前後滑塊可以幫助你展示兩張相似圖片之間的差異。

您可以使用一個動態滑塊來比較兩張圖片的不同版本,該滑塊可以拖動圖片,顯示另一張圖片。在你的使用案例中,它的作用可能不大,但請記住,每一種視覺化型別都有其理想的應用。

圖形小工具的使用場合(包括示例)

使用哪種視覺化型別很重要,但如何使用(以及在哪裡使用)也很重要。也就是說,在不同的應用中,使用圖形小工具會有很大的好處。

你會發現,除了典型的使用案例外,還有一些你經常看到卻不會與資料視覺化聯絡在一起的應用。在接下來的幾節中,我們將介紹其中的幾種用途。

商業應用

圖形小工具的常用實現方式之一就是展示關鍵指標。對於企業來說,這顯然是一種以吸引人的方式展示資料的好方法。條形圖通過正確的座標軸值便於閱讀,有助於直觀顯示一段時間內的銷售趨勢或比較不同的產品或服務。

數以百萬計的公司都使用條形圖來展示年度收入增長情況,塔吉特公司就是其中之一:

Target 使用條形圖來比較多個資料點的同比業績

Target 使用條形圖來比較多個資料點的同比業績。

這也展示了這些簡單的演示如何說明不同指標之間的關係,如客戶獲取成本或終身價值。堆疊條形圖也可以顯示這種型別的比較。WordPress 在外掛目錄中使用這種方法來顯示使用者安裝的外掛版本:

使用堆疊條形圖來顯示使用者下載的版本

WordPress 外掛目錄使用堆疊條形圖來顯示使用者下載的版本。

如果企業想顯示其客戶群的資料,餅圖和甜甜圈圖是很好的選擇。通常,這些資料會按年齡、地點或其他相關因素進行細分。Elementor 使用炫酷獨特的粒子視覺化來突出其最大的使用者群:

粒子效果

粒子效果也可用於資料視覺化。Elementor 用它來顯示與使用者群相關的資訊。

在其他情況下,你可以選擇展示公司的里程碑或專案進展。Flourish 使用時間軸來展示其歷史,這可能會對品牌忠誠度產生影響:

使用極具吸引力的時間軸來展示其歷史

Flourish 網站使用極具吸引力的時間軸來展示其歷史。

事實上,電子商務與一般商業應用並行不悖,因此這裡的一切也適用於商店。即便如此,該行業也有一些具體的資料視覺化方法。

電子商務指標

購買決策往往需要幾秒鐘的深思熟慮,因此快速向客戶提供正確的資訊至關重要。使用條形圖或雷達圖進行產品比較有助於比較不同產品的功能或規格,但這僅僅是個開始。

例如,SRFACE 使用互動式風格指南來解釋其潛水衣的規格,並直觀展示每種款式的外觀:

解釋其潛水衣的規格

互動式風格指南能給潛在客戶帶來更身臨其境的體驗,因此對電子商務商店大有裨益。

這與商業應用很接近,但你也可以使用圖表和圖形來幫助訪客瞭解產品採用的趨勢。WordPress Theme Directory 就使用了條形圖:

顯示每個主題在一段時間內的下載資料

WordPress 主題目錄包括一個柱形圖,顯示每個主題在一段時間內的下載資料。

您可以在任何需要使用文字的地方安裝圖形小工具。例如,許多電子商務商店使用簡單的對比文字來計算庫存。不過,進度條可能更適合這裡,因為它還可以增加銷售的緊迫性。

實時指標跟蹤

實時視覺化給人一種激動人心的感覺,因為你可以看到跟蹤指標的實時進展。慈善機構和非營利組織經常使用這類圖形小工具。

GoFundMe 是全球最大的眾籌平臺,每個籌款人都會得到一個溫度計或進度跟蹤條,當目標接近時,它就會填滿:

顯示籌款工作離完成的距離

流行的眾籌平臺 GoFundMe 使用進度條和溫度計視覺化來顯示籌款工作離完成的距離。

動畫計數器或資訊圖表有助於展示產品和服務的實時影響。例如,WordPress.org 主網站有一個專門的頁面來顯示核心平臺的下載量,該頁面每分鐘更新一次:

下載計數器

WordPress.org 的下載計數器每分鐘都會更新當前的總下載量。

比如伺服器提供商使用統計圖表來幫助您監控網站在不同服務中的正常執行時間:

顯示任何長時間的停機情況

狀態頁面提供了一個統計圖表,顯示任何長時間的停機情況。

這種實時更新策略除了炫耀和炫耀之外,還有其他實際用途。在某些情況下,您需要了解某些指標的最新情況。

內部分析

績效監控的範圍很廣。它可以是一線的 KPI 衡量策略,也可以是對特定指標的個性化概述。Google Analytics 就是一個很好的例子,它以引人入勝的方式展示了豐富的利基網站資料:

資料視覺化

谷歌分析將許多不同的資料視覺化型別壓縮到一個頁面上。

Google Lighthouse 審計應用程式 DeploymentHawk 使用大量不同的圖表、圖形、計數器等來計算數字並將報告結果視覺化:

Google Lighthouse 資料

DeploymentHawk 應用程式採用 Google Lighthouse 資料,並使用自定義圖表、圖形和計數器進行展示。

應用程式效能監控 (APM) 工具也能做到這一點,可根據您需要檢視的指標使用多種不同的資料視覺化型別:

根據網站資料顯示各種圖表

根據網站資料顯示各種圖表。

如果您有需要完成的目標,遊戲化總是能幫上忙。Todoist 使用基本的條形圖和折線圖以及因果關係積分系統來實現這一點:

Todoist 應用程式

Todoist 應用程式利用遊戲化技術確保您以最高效率完成任務。

最後,一些非營利組織會公佈內部調查結果。這在面向公眾的展示和將資料作為內部晴雨表之間形成了一種獨特的對立。例如,蓋茨基金會將其內部理念和願景應用於未來,進而創造了預測性統計的絕佳範例:

蓋茨基金會

蓋茨基金會使用獨特的條形圖來幫助推動其理念和行動。

有了視覺化型別和應用的這種靈活性,你還可以利用圖形工具的適應性。本篇文章的其餘部分將向您展示如何在 WordPress 中實現這一點。

幫助您顯示 WordPress 圖形小工具的外掛

當然,要為 WordPress 實現圖形小工具,您需要使用外掛。在接下來的幾節中,我們將介紹一些最佳選擇,排名不分先後。

1. Visualizer:圖表圖形

ThemeIsle 的 Visualizer 是免費圖形小工具外掛的可靠選擇。它與其他主題和外掛一樣,支援多種圖表型別,而且使用簡單。

Visualizer

來自 WordPress.org 的 Visualizer 外掛頭圖。

它提供四種不同的圖表型別、一個類似電子表格介面的資料編輯器和大量自定義選項。該外掛還整合了谷歌圖表(以及其他谷歌 API)。不過,雖然該外掛功能齊全,但要訪問更多圖表和編輯型別,您需要付費購買高階版本(每年 199 美元)。

不過,免費版可以滿足大多數使用者的需求,尤其是基本但華麗的資料視覺化。

2. Data Tables Generator by Supsystic

乍一看,Data Tables Generator 似乎並不適合這份 WordPress 圖形小工具外掛列表。畢竟,顧名思義,它只能建立文字資料表。免費版確實如此,但高階版包含更多功能,包括圖表和圖形。

Data Tables Generator

Data Tables Generator 外掛頭圖 via WordPress.org

好訊息是,你的作品開箱即用,看起來非常棒。您可以使用各種視覺化選項,如柱狀圖、折線圖、甜甜圈圖、氣泡圖等。我們還認為排序和過濾選項在該領域處於領先地位。

這意味著該外掛非常適合需要高度互動性的網站,尤其是還需要資料表和更多視覺化資料表示的網站。

儘管如此,免費版中並沒有圖表或圖形。不過,Data Tables Generator 的終身許可證價格為 89 美元,就其功能而言,還是非常划算的。

3. amCharts:圖表和地圖

amCharts 外掛的獨特之處在於,它連線到外部內容交付網路(CDN)來交付其庫。因此,該外掛只幫助您將 JavaScript 庫連線到 WordPress,而不是直接建立圖表。

amCharts

來自 WordPress.org 的 amCharts 頭圖。

amCharts 的功能非常廣泛,而且可以進行高度定製。不過,您需要使用 amCharts 介面來建立圖形工具,這意味著需要在兩個平臺之間切換。

如果您需要多種圖表型別,並且樂於使用第三方介面,amCharts 可能會適合您。不過,amCharts 沒有訪問圖表或圖形的免費層級,因此您需要每年 80 美元起的高階許可證。

4. Graphina – Elementor 圖表和圖形

如果你使用 Elementor,那麼你已經在頁面生成器中擁有了一些圖形工具選項。不過,Graphina 提供了大量高質量的圖表、圖形和其他視覺化型別。

Graphina

來自 WordPress.org 的 Graphina 頭圖。

在免費圖形小工具外掛中,該外掛擁有最多的圖表型別和設計,並與 Elementor 和 Divi 深度整合。您還可以在任何外掛中獲得一些最全面的自定義選項,更不用說免費外掛了。

看似不可思議,但高階版的功能卻進一步增強,使 Graphina 成為 WordPress 上最深入的圖形小工具外掛。當然,你需要使用 Elementor(或 Divi)來利用這些功能,這可能是一個障礙。不過,49 美元的價格可能值得你轉用這些流行的頁面構建工具之一。

5. wpDataTables

與 Data Tables Generator 相似,wpDataTables並不以圖表和圖形為主。不過,你可以使用該外掛來製作圖表和圖形,而且效果很好。需要處理大型複雜資料集的網站不妨試試這款外掛。

wpDataTables

來自 WordPress.org 的 wpDataTables 頭圖。

正如你所期望的,這裡有更多建立表格的選項,而且還整合了 Google Charts 和 Charts.js,為你提供 15 種不同的視覺化型別。它擅長處理大型資料集,源匯入選項也非常出色。如果你有開發經驗,你可以從 Excel、XML、CSV 檔案、JSON 甚至 PHP 陣列中匯入資料。

不過,由於 wpDataTables 主要側重於圖表,因此使用它製作圖表並不那麼簡單。這種學習曲線,再加上隱藏在高階版(每年 39 美元起)背後的大量功能,可能會讓你另尋他處。

6. Ninja Charts

我們列表中的最後一個外掛是完全免費的,沒有高階定價層。如果你是資料視覺化方面的新手,Ninja Charts 可能是合適的解決方案,但它提供的功能可以與最好的外掛相媲美。

Ninja Charts

來自 WordPress.org 的 Ninja Charts 頭圖。

它提供了多種圖表型別供您選擇,並能根據您的需要進行自定義。它的介面簡單明瞭,並與同一開發商的另一款外掛 Ninja Tables 深度整合。

即便如此,它也有侷限性。其他使用者抱怨缺乏資料聚合等基本功能。儘管如此,它的價格還是無可挑剔的,而且我們仍然相信它能滿足許多不同網站的需求。

如何使用 Visualizer 外掛為 WordPress 新增圖形小工具

讓我們快速瀏覽一下在 WordPress 網站上新增圖形小工具的過程。我們將使用 Visualizer,因為我們非常喜歡它,將其作為我們的最愛。

不過,這並不是 Visualizer 教學。因此,我們在這裡採取的步驟可能與你選擇的解決方案不同。有鑑於此,請安裝並啟用您選擇的外掛,然後建立一個新的圖表或圖形。

在 Visualizer 中,我們在安裝時就能獲得該選項:

Visualizer 外掛的啟動向導

Visualizer 外掛的啟動向導。

最有可能的是,在外掛管理面板的某處會有一個 Add New Chart 按鈕:

使用 Visualizer 外掛新增新圖表

在 WordPress 中使用 Visualizer 外掛新增新圖表。

點選按鈕並選擇圖表型別後,就需要輸入資料了。免費版的 Visualizer 只支援手動編輯,但你的外掛可以提供各種工具的整合和匯入選項:

在 Visualizer 外掛中編輯圖表的資料集

在 Visualizer 外掛中編輯圖表的資料集。

接下來,檢視可供您使用的自定義選項。Visualizer 在圖表建立介面中提供了這些選項。你可以對各種方面進行設定,如標題位置、座標軸標籤、網格線、圖表大小和位置等等:

在 Visualizer 中進行自定義設計

在 Visualizer 中進行自定義設計

最後一步是在網站上嵌入圖表。許多外掛都使用簡碼來實現這一點,這意味著你只需簡單複製並貼上到所需的帖子或頁面即可:

Visualizer 圖表的簡碼

Visualizer 圖表的簡碼。

Visualizer 還為此提供了一個區塊,既方便又符合現代 WordPress 的設計。

顯示圖形小工具的典型做法

在展示圖表和圖形時,必須考慮幾個方面。一言以蔽之,要把它們當作重要而有影響力的內容來對待,並限制顯示 widget 的數量。要想更深入地瞭解,請考慮以下幾點:

  • 位置。您的小工具應該與內容流自然契合,就像您的圖片和視訊一樣。圖形 widget 通常介於媒體和內容之間。
  • 載入速度。新增小工具後,請務必監控網站效能。有些工具會影響網站效能。
  • 可訪問性。雖然您提供的是視覺化資料,但應確保包含適當的alt文字,並可通過鍵盤導航。這可以幫助所有使用者訪問您的小工具,無論其視力如何。

說到效能,這是需要注意的問題。有很多方面會影響網站的速度,考慮到附加圖形的負載,這也是合情合理的。我們的建議是儘可能使用 SVG。對於簡單的圖表和圖示來說,它們比光柵影象效能更高,可擴充套件性更好。

懶載入快取在這方面也有幫助,因為兩者都以不同的方式限制圖表的載入。如果選擇從外部來源獲取資料,請確保選擇高效的連線,以儘量減少HTTP 請求的數量。最好、最理想的方法是將資料託管在網站伺服器上,不過這可能不是你能控制的。

小結

WordPress 的圖形視窗小工具允許您將網站上的典型文字資料視覺化。這種資料展示和視覺化方法可以將複雜的資訊轉化為更易於理解的格式。您可以使用圖表、圖形、互動式地圖等來顯示這些資料。

合適的外掛至關重要,我們將在本篇文章中詳細介紹。Visualizer 和 Graphina 都是不錯的選擇。不過,正確的工具取決於你自己的需求。毫無疑問,它能對你的網站及其參與度產生巨大的積極影響。

WordPress 圖形小工具對您來說足夠重要嗎?我們很樂意在下面的評論區聽聽您的想法!

評論留言