作者 | Destiny

來源 | 木東居士

0x00 前言

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

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

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

那么本篇，將以生鮮電商為例，設(shè)計一個體現(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指標(biāo)：
2. 目標(biāo)銷售額、實際銷售額、銷售額完成率；
3. 流量指標(biāo)：
4. 今日瀏覽量趨勢、今日訪客數(shù)趨勢；
5. 轉(zhuǎn)化指標(biāo)：
6. 訪問-下單-支付等環(huán)節(jié)的轉(zhuǎn)化率；
7. 交易指標(biāo)：
8. 今日下單訂單數(shù)、今日下單用戶數(shù)、訂單均價；
9. 用戶數(shù)據(jù)：
10. 近30天活躍用戶數(shù)趨勢、今日新老用戶構(gòu)成；
11. 商品指標(biāo)：
12. 銷售額品類分布、銷售額城市分布、熱銷商品TOP10；
13. 數(shù)據(jù)監(jiān)控：
14. 近30天銷售額漲跌趨勢；

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

0x02 圖表選型

1.數(shù)據(jù)關(guān)系

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

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

2.圖表選擇

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

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

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

0x03 可視化設(shè)計

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

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

1. 頁面布局

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

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

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

PC端

• 頂部tab導(dǎo)航式布局

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

• 瀑布流平鋪方式布局

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

• 卡片式布局

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

移動端

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

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

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

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

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

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

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

2.圖表制作

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

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

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

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

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

3.實戰(zhàn)設(shè)計

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

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

0xFF 總結(jié)

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

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

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

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

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

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

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

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

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