作者 | Destiny

來源 | 木東居士

0x00 前言

可視化系列七天之旅完結篇，將通過一個Dashboard的實戰設計，來解構數據可視化過程中的關鍵步驟，從而呈現可視化設計的基本思路和完整鏈路。

在可視化系列開篇文章中，對數據可視化過程有做詳細的介紹，其關鍵步驟總結為如下4點：

• 確定數據可視化的主題；
• 提煉可視化主題的數據；
• 根據數據關系確定圖表；
• 進行可視化布局及設計；

那么本篇，將以生鮮電商為例，設計一個體現生鮮電商APP實時銷售情況的數據看板。

0x01 數據分析

1.確定數據主題

如前言所述，本篇數據可視化的實戰，是對【生鮮電商的實時銷售數據】，進行可視化呈現。

那么，本次可視化數據的組織，將圍繞著銷售額來進行組織。

2.數據提煉

1. KPI指標：
2. 目標銷售額、實際銷售額、銷售額完成率；
3. 流量指標：
4. 今日瀏覽量趨勢、今日訪客數趨勢；
5. 轉化指標：
6. 訪問-下單-支付等環節的轉化率；
7. 交易指標：
8. 今日下單訂單數、今日下單用戶數、訂單均價；
9. 用戶數據：
10. 近30天活躍用戶數趨勢、今日新老用戶構成；
11. 商品指標：
12. 銷售額品類分布、銷售額城市分布、熱銷商品TOP10；
13. 數據監控：
14. 近30天銷售額漲跌趨勢；

注：對于電商分析中的核心指標，沒有統一的標準答案。相同的數據主題，對于不同的企業、企業的不同發展階段、查看數據人群職位的差異，大家關注的具體指標不同，因此，此處的數據提煉，不作為公共的參考標準。在實際工作中，大家可根據企業的經營發展現狀、數據分析結果的受眾，來組織需要進行可視化的數據指標及維度。

0x02 圖表選型

1.數據關系

根據數據間的關系選擇合適的圖表，是保證數據可視化效果的關鍵。

數據間的關系，大體可以分為如下7種：

2.圖表選擇

根據上文中對數據主題的數據提煉，在表格中模擬了部分數據的樣本格式，具體如下：

根據以上提煉的數據集的格式，以及數據之間的關系，確定了如下的可供選擇的圖表類型：

在以上的數據中，我最關注的指標是：今日目標銷售額、實際銷售額、銷售額完成率這3項指標。

0x03 可視化設計

在確定了數據產品某個具體頁面的數據指標，業務指標的重要性和關注度，以及數據展現的邏輯思路和層次結構之后，此時就需要通過可視化設計，來傳達數據信息的重點，進行數據的可視化表達。

可視化設計包括兩個方面：一是「頁面布局」，二是「圖表制作」。

1. 頁面布局

頁面布局，要遵循三個原則：聚焦、平衡、簡潔。

簡單來說，在進行可視化排版布局的時候，要重點突出；合理利用可視化的設計空間，保證頁面元素的對稱和平衡；此外，還需要刪減或弱化影響數據呈現效果的冗余元素。

以下分別來介紹下PC和移動端可視化設計的常見布局方式：

PC端

• 頂部tab導航式布局

這種「頂部tab導航式」的頁面布局，適用于按主題組織的數據可視化展示。例如，電商業務的數據分析指標，可以分為【流量】、【交易】、【商品】、【商戶】、【會員】、【財務】、【行業】等不同主題，就可以采用此種頁面布局方式。

• 瀑布流平鋪方式布局

「瀑布流式布局」，是一種最簡單的方式，直接將想要展示的所有內容以平鋪的方式展示在一個大的頁面中，隨著屏幕的下滑，可以依次瀏覽數據的情況。因此，圖形的展示區域相對較大、擴展性較好，當需要加新的數據可視化內容時，只需再新增一個小的橫向數據panel即可。而且，對于瀑布流式布局而言，通常也會和頂部導航配合使用，方便用戶更快的定位到對應主題或指標。

• 卡片式布局

「卡片式布局」在PC端是一種被高頻使用的布局，通過將頁面切分為多個小的功能卡片，保證數據可以在一屏內展示，同時在視覺上，也會給人一種對稱、平衡的美感。

移動端

移動端常見的頁面布局方式有如下4種：「瀑布流平鋪」布局、「名片+導航」布局、「輪播+Tab」布局、「九宮格」布局，具體示例如下。

以上移動端四種布局方式的適用場景如下：

布局方式適用場景瀑布流平鋪由于是通過不斷下滑屏幕來展示數據，因此，此種布局適合于數據指標較少，且數據未做分層的情況下使用。

隨著數據指標的增多，迅速定位到某一指標的難度加大，此時可變更布局或者增加搜索功能來幫助用戶快速查找到自己關注的指標。名片+導航這種布局方式，通常一級頁面是按照業務線或者業務主題來劃分，每個名片代表一個獨立的業務或主題，在一級菜單來總覽各項業務的整體情況。

若想繼續探索具體業務的數據細節，則通過繼續按鈕，進入下一頁的單一業務或主題的數據展示頁。輪播+tab數據內容的分層是二元的，即整體概覽和各項具體業務的數據指標。

比如，公司的業務經營多元化，一方面需要查看集團的整體經營情況，又需要查看各條業務線的經營狀況，可以采用此種布局方式。九宮格九宮格式的布局，適用于平臺型數據產品或者作為集成各種專項分析的入口。

每一個入口，對應不同的數據主題，這種布局方式下的不同主題可以獨立并行開發，且專項分析頁面的數據可視化布局，靈活性較大，可根據實際需要進行選擇。

2.圖表制作

圖表制作過程，主要考慮兩個方面的影響因素：一個是數據層面的，一個是非數據層面的。

（1）數據層面

數據中存在極端值或過多分類項等，會極大影響可視化的效果呈現，如柱形圖中柱形條的高度、氣泡圖中氣泡的大小、餅圖中的分類項太多等。

（2）非數據層面

如圖表的配色、頁面或圖表的背景顏色、網格線的深淺有無、外邊框等等，這類元素是輔助用戶理解圖表的次要元素，但如果處理不當，視覺上就不夠聚焦，重點不突出。

3.實戰設計

此次的【生鮮電商的實時銷售看板】，我選擇用卡片式布局來設計，具體呈現如下：

注：實戰設計中的圖表，部分由excel繪制完成，部分由sketch完成，地圖部分采用的是echart組件。

0xFF 總結

在對實際業務場景中的數據進行可視化時，要嚴格遵循可視化過程的四個步驟：

• 確定數據可視化的主題；
• 提煉可視化主題的數據；
• 根據數據關系確定圖表；
• 進行可視化布局及設計；

前兩個步驟的，是進行數據需求的分析和提煉，后兩個步驟，是進行數據可視化的具體呈現，二者是相輔相成的關系。好的數據分析思路和邏輯，決定了數據可視化價值的大小，恰當的圖表選擇和可視化設計，能夠讓圖形更好的傳達數據蘊含的最準確的信息。

于此同時，在數據可視化的過程中，也需記住以下原則：

1. 數據至上。
2. 數據圖表的主要作用是為了更加準確、直觀的傳達信息，不要用圖表來炫技，圖表的選擇要根據數據關系和數據集特征來決定，不要片面的追求圖表的美觀，舍本逐末。
3. 突出重點。
4. 不要試圖在一張圖或一個頁面中表達所有的數據信息，過于繁雜的數據會讓圖表失去重點，過于沉重。
5. 邏輯嚴密。
6. 數據可視化是以業務邏輯為主線串起來的，數據的提煉和圖表的選擇都要貼合業務、準確的反映業務，而不應該隨意的堆砌圖表。
7. 圖表嚴謹。
8. 圖表的作用是為了真實、準確的反映數據背后蘊藏的現象或規律，在進行可視化的過程中，圖表應實事求是的反映真實數據，切忌不嚴謹的做法給用戶誤導。

數據可視化，就我看來，除了數據分析的能力、圖表選型的套路外，更多的是實踐以及實踐中的經驗總結。

之前在評論區也看到一些朋友，提到想了解一下可視化的實現工具和技術。之前也和居士討論過這個問題，當數據提煉、分析、圖表選型確定了之后，用什么來畫圖和實現，可供選擇的工具還是挺多的。

比如使用頻率較高的可視化工具Excel、tableau，第三方的開源圖表echart、Highchart、D3、AntV，抑或是用Python、R中的繪圖庫來進行數據可視化，你只要按照數據格式來組織數據就可以制作出對應的圖表。工具型的東西，還是需要自己去實操，才會真正掌握。

”無他，但手熟爾 “與大家共勉，希望大家一起在可視化的路上，多多實踐，分享彼此的經驗心得。