這是《后臺(tái)產(chǎn)品設(shè)計(jì)指南》系列文章的第13篇內(nèi)容，更多精彩可以點(diǎn)擊下方鏈接查看。
把復(fù)雜、抽象的數(shù)據(jù)通過可視的方式以人們更易理解的形式展示出來(lái)的一系列手段叫做數(shù)據(jù)可視化。數(shù)據(jù)可視化在后臺(tái)產(chǎn)品中的應(yīng)用主要包括和數(shù)據(jù)圖表數(shù)據(jù)大屏和兩部分，本文會(huì)和大家介紹一下數(shù)據(jù)可視化的產(chǎn)品設(shè)計(jì)規(guī)范。
數(shù)據(jù)圖表
數(shù)據(jù)圖表一般出現(xiàn)在后臺(tái)產(chǎn)品中的首頁(yè)、統(tǒng)計(jì)模塊。后面提到的數(shù)據(jù)大屏實(shí)際上也是不同數(shù)據(jù)圖表的組合，因?yàn)楸容^特殊所以單獨(dú)進(jìn)行介紹。
后臺(tái)的首頁(yè)可以是簡(jiǎn)單的歡迎頁(yè)面，但這樣做會(huì)比較浪費(fèi)首頁(yè)這個(gè)黃金位置。更合適的做法是根據(jù)用戶的角色和身份設(shè)計(jì)不同的內(nèi)容，展示用戶當(dāng)前的待辦、平臺(tái)的關(guān)鍵數(shù)據(jù)、數(shù)據(jù)預(yù)警，用圖表的形式展示會(huì)更加直觀。用戶一進(jìn)入首頁(yè)就能看到核心內(nèi)容，可以知道當(dāng)前的宏觀情況，接下來(lái)要做哪些事情。
至于統(tǒng)計(jì)模塊則是平臺(tái)管理層決策的利器，除了展示基礎(chǔ)的數(shù)據(jù)報(bào)表、圖表，還需要結(jié)合平臺(tái)業(yè)務(wù)，相關(guān)政策等信息給到用戶決策的輔助信息。下面和大家介紹一下常用的數(shù)據(jù)圖表類型。
柱狀圖
柱狀圖一般用來(lái)表達(dá)某種分類下的數(shù)據(jù)的大小，分類可以是單個(gè)也可以是多個(gè)。比如某地2021年不同月份的最大值。
橫向的柱狀圖也叫條形圖，和柱狀圖的使用場(chǎng)景比較類似。條形圖更適用于類別名稱比較長(zhǎng)的數(shù)據(jù)展示，使用柱狀圖會(huì)出現(xiàn)數(shù)據(jù)展示不全的情況。
折線圖
折線圖一般用來(lái)反映數(shù)據(jù)一段時(shí)間內(nèi)的變化趨勢(shì)。比如最近10年的考研報(bào)名人數(shù)。
柱狀圖和折線圖有些類似，柱狀圖適合數(shù)據(jù)較少時(shí)的分析，折線圖適合連續(xù)時(shí)間內(nèi)較多數(shù)據(jù)的分析。
餅圖
餅圖一般用來(lái)表達(dá)不同類型的數(shù)據(jù)的占比情況。比如某公司不同部門的業(yè)績(jī)占比。餅圖也有一些特殊的展現(xiàn)形式，比如玫瑰圖，理解起來(lái)需要一定的成本。
散點(diǎn)圖
散點(diǎn)圖一般用來(lái)變現(xiàn)兩組數(shù)據(jù)之間的是否存在某種關(guān)聯(lián)，這個(gè)關(guān)系可能是線性相關(guān)，也可能是正相關(guān)或者其他類型。比如員工工作年限和薪資的對(duì)應(yīng)關(guān)系。
雷達(dá)圖
雷達(dá)圖一般用來(lái)對(duì)不同指標(biāo)進(jìn)行對(duì)比分析。比如騰訊公司產(chǎn)品經(jīng)理的能力雷達(dá)圖。
熱力圖
熱力地圖用高亮的形式表達(dá)數(shù)據(jù)的集中區(qū)域。比如國(guó)內(nèi)國(guó)慶假期游客的分布情況。
關(guān)系圖
關(guān)系圖一般用來(lái)表示實(shí)物之間的相互聯(lián)系。比如下圖中圍繞李白展開的關(guān)系圖。
漏斗圖
漏斗圖一般用來(lái)表達(dá)不同業(yè)務(wù)環(huán)節(jié)的價(jià)值轉(zhuǎn)化情況。比如電商行業(yè)客戶訪問、注冊(cè)、下單、付費(fèi)的轉(zhuǎn)化數(shù)據(jù)。
其他諸如K線圖、?；鶊D、盒須圖等類型使用的場(chǎng)景不多，這里就不做展開，感興趣的讀者可以自行研究。
數(shù)據(jù)大屏
數(shù)據(jù)大屏是以大屏為主要載體的數(shù)據(jù)可視化設(shè)計(jì)。數(shù)據(jù)大屏是數(shù)據(jù)的最后應(yīng)用環(huán)節(jié)，與數(shù)據(jù)怎么收集、清洗、處理，是否使用數(shù)倉(cāng)技術(shù)沒有必然的聯(lián)系。
數(shù)據(jù)大屏設(shè)計(jì)流程
1.了解業(yè)務(wù)流程
數(shù)據(jù)大屏一般是用來(lái)做信息展示、數(shù)據(jù)分析和監(jiān)控預(yù)警，無(wú)論是哪一種都需要對(duì)業(yè)務(wù)有充分的理解，否則設(shè)計(jì)出來(lái)的大屏只能是空中樓閣。
2.提煉數(shù)據(jù)指標(biāo)
每個(gè)行業(yè)的數(shù)據(jù)指標(biāo)是不同的，比如電商消費(fèi)的核心數(shù)據(jù)就是GMV；購(gòu)買人數(shù)，訂單數(shù)，最受歡迎品牌就是次要數(shù)據(jù)。大屏因?yàn)榭臻g限制可以展示的內(nèi)容有限，一定要優(yōu)先展示核心數(shù)據(jù)。
3.確定分析維度
同一個(gè)數(shù)據(jù)指標(biāo)有不同的分析維度，比如電商GMV可以統(tǒng)計(jì)平臺(tái)的累計(jì)金額，也可以按照月份統(tǒng)計(jì)新增金額，還可以按照商品類型來(lái)統(tǒng)計(jì)數(shù)據(jù)。
4.確定圖表類型
這個(gè)步驟需要使用到前面提到的圖表，根據(jù)業(yè)務(wù)數(shù)據(jù)里選擇合理的圖表類型。選擇圖表時(shí)既要考慮用戶能直觀地理解，又要考慮開發(fā)實(shí)現(xiàn)的可行性。
5.了解大屏參數(shù)
在正式輸出設(shè)計(jì)稿之前，需要提前了解現(xiàn)場(chǎng)環(huán)境中信號(hào)源電腦的分辨率以及大屏的相關(guān)參數(shù)，如果沒有提前了解做出來(lái)的效果很容易出問題，再返工會(huì)浪費(fèi)很多成本。
6.頁(yè)面設(shè)計(jì)稿
設(shè)計(jì)師按照一定的規(guī)范根據(jù)要展現(xiàn)的內(nèi)容輸出設(shè)計(jì)稿。大屏產(chǎn)品不能貪圖炫技，而忽視了本質(zhì)，即大屏是為了高效地展示信息，提供決策輔助。
7.程序開發(fā)實(shí)現(xiàn)
這個(gè)過程包括前端樣式的實(shí)現(xiàn)和數(shù)據(jù)的接入，實(shí)際上數(shù)據(jù)的接入在前期就可以先行了。有一些效果開發(fā)很難實(shí)現(xiàn)，這個(gè)時(shí)候可以設(shè)計(jì)師配合提供切圖實(shí)現(xiàn)。開發(fā)完成后需要內(nèi)部驗(yàn)收測(cè)試，除了關(guān)注樣式還需要驗(yàn)證數(shù)據(jù)的準(zhǔn)確性。
大屏適配
數(shù)據(jù)大屏的展示可以使拼接屏，也可以使一塊完整的大屏。數(shù)據(jù)大屏的本質(zhì)是把電腦屏幕通過有線信號(hào)投放到大屏上，兩者的內(nèi)容是一致的。
一般情況下我們需要了解大屏的類型和分辨率，選擇合適的設(shè)計(jì)稿尺寸。如果大屏和電腦比例一致，可以按照大屏的分辨率來(lái)做設(shè)計(jì)稿，然后再進(jìn)行開發(fā)實(shí)現(xiàn)；或者是使用等比例縮小的分辨率尺寸來(lái)做設(shè)計(jì)稿，再導(dǎo)出2倍圖和開發(fā)實(shí)現(xiàn)。如果大屏和電腦比例不一致，這個(gè)時(shí)候需要優(yōu)先保證大屏上的展示效果，電腦上和大屏上會(huì)出現(xiàn)一定的誤差。
數(shù)據(jù)大屏實(shí)現(xiàn)后，一定要到現(xiàn)場(chǎng)進(jìn)行調(diào)試，避免出現(xiàn)突發(fā)情況。數(shù)據(jù)大屏的設(shè)計(jì)稿和開發(fā)適配不需要產(chǎn)品經(jīng)理過多地關(guān)注，只需要關(guān)注最終的質(zhì)量即可。
注意事項(xiàng)
1.數(shù)據(jù)大屏上一定要有主次，不能貪多，也不需要炫技；
2.數(shù)據(jù)大屏的字體大小和PC上有區(qū)別，需要重點(diǎn)關(guān)注；
3.需要根據(jù)行業(yè)、應(yīng)用場(chǎng)景等因素選擇合適的配色方案；
4.合理地使用動(dòng)效可以增強(qiáng)大屏的品質(zhì)和空間感。
數(shù)據(jù)可視化在后臺(tái)產(chǎn)品中應(yīng)用非常廣泛，先了解數(shù)據(jù)可視化的應(yīng)用場(chǎng)景和設(shè)計(jì)規(guī)范才能設(shè)計(jì)出實(shí)用的可視化產(chǎn)品。
在寫作過程中，如果有意見或者想法，歡迎有興趣的讀者添加我的微信一起交流探索，共同進(jìn)步。
