作者 | Destiny

來源 | 木東居士

0x00 前言

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

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

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

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

0x01 數(shù)據(jù)分析

1.確定數(shù)據(jù)主題

如前言所述，本篇數(shù)據(jù)可視化的實戰(zhàn)，是對【生鮮電商的實時銷售數(shù)據(jù)】，進行可視化呈現(xiàn)。

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

2.數(shù)據(jù)提煉

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

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

0x02 圖表選型

1.數(shù)據(jù)關系

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

數(shù)據(jù)間的關系，大體可以分為如下7種：

2.圖表選擇

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

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

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

0x03 可視化設計

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

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

1. 頁面布局

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

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

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

PC端

• 頂部tab導航式布局

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

• 瀑布流平鋪方式布局

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

• 卡片式布局

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

移動端

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

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

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

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

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

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

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

2.圖表制作

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

（1）數(shù)據(jù)層面

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

（2）非數(shù)據(jù)層面

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

3.實戰(zhàn)設計

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

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

0xFF 總結

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

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

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

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

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

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

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

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

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