基礎(chǔ)餅圖在產(chǎn)品設(shè)計(jì)中的應(yīng)用價(jià)值
編輯導(dǎo)讀:餅圖可以直觀的顯示出各數(shù)據(jù)所占的比例關(guān)系,經(jīng)常用于展示產(chǎn)品市場(chǎng)份額、客戶組成、滿意度比例等數(shù)據(jù)。但是在產(chǎn)品設(shè)計(jì)中,餅圖也具有很高的應(yīng)用價(jià)值,本文作者結(jié)合案例對(duì)此展開了說明,一起來看看。
已知淘寶店A在7-23日的店鋪銷售額241723元,其中客服銷售額71077元,靜默銷售額170646元。店鋪負(fù)責(zé)人想要了解店鋪銷售的構(gòu)成情況,分析消費(fèi)者成交是否都需要通過客服接待,來考察客服團(tuán)隊(duì)對(duì)于店鋪的貢獻(xiàn)程度
針對(duì)這一場(chǎng)景,分析客服團(tuán)隊(duì)在消費(fèi)者成交過程的參與程度,實(shí)際上是分析了銷售額中有多少是客服銷售額,即消費(fèi)者通過客服接待后下單成交的部分;
通過計(jì)算得到客服銷售額占比29.4%,靜默銷售額占比70.6%,用基礎(chǔ)餅圖圖形化表達(dá)后,觀察客服銷售額的扇面部分,能非常直觀讀出客服銷售額占比低,絕大部分的下單成交都是消費(fèi)者靜默下單完成的。
這就是基礎(chǔ)餅圖在產(chǎn)品設(shè)計(jì)中最常見的應(yīng)用方式之一,用餅圖來表達(dá)占比,得出的結(jié)論可以幫助分析場(chǎng)景,輔助決策。但是餅圖不單單只有這一種應(yīng)用方式,可應(yīng)用的場(chǎng)景很多,本文就想和大家一起討論基礎(chǔ)餅圖在產(chǎn)品設(shè)計(jì)中的應(yīng)用價(jià)值。
一、什么是餅圖?
基礎(chǔ)餅圖的定義,通過不同的扇面大小,圖形化表達(dá)了不同類別的比例,即一個(gè)數(shù)據(jù)組中不同數(shù)據(jù)項(xiàng)的數(shù)據(jù)大小占所有數(shù)據(jù)和的比例;并通過帶顏色的圖例將扇面和數(shù)據(jù)項(xiàng)一一對(duì)應(yīng)起來
從上面的定義中,我們可以發(fā)現(xiàn)構(gòu)成餅圖的基礎(chǔ)是數(shù)據(jù)組,數(shù)據(jù)組內(nèi)的數(shù)據(jù)項(xiàng)個(gè)數(shù)控制了扇面的個(gè)數(shù);單個(gè)數(shù)據(jù)項(xiàng)占數(shù)據(jù)組的比例決定了扇面的大小。只有當(dāng)數(shù)據(jù)組滿足特定的條件時(shí),圖形化表達(dá)出來的餅圖才有意義,我們也可以利用數(shù)據(jù)組的一些特點(diǎn)來發(fā)揮餅圖在產(chǎn)品中的應(yīng)用價(jià)值,下面就想通過不同的場(chǎng)景來說明
二、什么樣的數(shù)據(jù)組能用餅圖表達(dá)?
我們?cè)趯?shí)際場(chǎng)景中需要表達(dá)占比時(shí),常常會(huì)想到用餅圖來表達(dá),但并不是所有情況下都可以用基礎(chǔ)餅圖來表達(dá)的,這里可以通過“數(shù)據(jù)組”被餅圖表達(dá)所需要滿足的條件,來區(qū)分?jǐn)?shù)據(jù)組能不能被餅圖表達(dá)
數(shù)據(jù)組是什么?有2個(gè)或2個(gè)以上的數(shù)據(jù)項(xiàng)組成的一組數(shù)據(jù),被我們定義為“數(shù)據(jù)組”,數(shù)據(jù)項(xiàng)和數(shù)據(jù)組存在包含關(guān)系,數(shù)據(jù)項(xiàng)是子集,數(shù)據(jù)組是母集。 假設(shè)數(shù)據(jù)項(xiàng)1是A,數(shù)據(jù)項(xiàng)2是B,數(shù)據(jù)組的匯總數(shù)據(jù)是C,三者存在的關(guān)系:
- A包含于C,A:C就是數(shù)據(jù)項(xiàng)1在整個(gè)數(shù)據(jù)組中的占比
- B包含于C,B:C就是數(shù)據(jù)項(xiàng)2在整個(gè)數(shù)據(jù)組中的占比
- 像店鋪A中,店鋪銷售額就是數(shù)據(jù)組的匯總數(shù)據(jù),客服銷售額和靜默銷售額就是子數(shù)據(jù),而店鋪銷售額是母數(shù)據(jù),子數(shù)據(jù)被包含于母數(shù)據(jù)。因此客服銷售額和靜默銷售額就是一組數(shù)據(jù)組
餅圖是把數(shù)據(jù)組中的關(guān)系通過圖形表達(dá)出來,數(shù)據(jù)組就是餅圖的基礎(chǔ),了解了數(shù)據(jù)組的定義后,可以推論出數(shù)據(jù)組要能被餅圖圖形化表達(dá)有1個(gè)前提條件,數(shù)據(jù)組中的各個(gè)子集是相互獨(dú)立,沒有交集的,且歸屬于同一個(gè)母集(數(shù)據(jù)組)
如果不滿足這一前提,餅圖就無法用來反映真實(shí)的場(chǎng)景了,也不具有業(yè)務(wù)價(jià)值了,所以我們?cè)诋a(chǎn)品設(shè)計(jì)中可以通過分析數(shù)據(jù)組中的包含關(guān)系來判斷能否被餅圖表達(dá)
案例:
淘寶店鋪A中的客服銷售額由客服A組、客服B組和客服C組構(gòu)成,現(xiàn)在已知客服A組整組數(shù)據(jù)、客服B組整組的數(shù)據(jù)、客服C組其中2個(gè)客服的數(shù)據(jù)。業(yè)務(wù)方想了解不同數(shù)據(jù)項(xiàng)的占比,我們一起來看下這些數(shù)據(jù)項(xiàng)的關(guān)系。
假設(shè)客服團(tuán)隊(duì)數(shù)據(jù)項(xiàng)為D,客服A組,客服B組、客服C組這3個(gè)數(shù)據(jù)項(xiàng)為A、B、C,客服C組兩個(gè)客服分別為C1,C2,他們的數(shù)據(jù)關(guān)系就是:
- A、B、C是母集D的子集,A包含于D,B包含于D,C包含于D
- C1和C2是母集C的子集,C1包含于C,C2包含于C
通過對(duì)數(shù)據(jù)項(xiàng)的觀察,很容易就做出判斷了,如果將客服A組、客服B組、客服C1、客服C2這4個(gè)數(shù)據(jù)作為一個(gè)數(shù)據(jù)組,是混淆子數(shù)據(jù)和母數(shù)據(jù)的關(guān)系,同一個(gè)數(shù)據(jù)組不是互相獨(dú)立且歸屬于同一個(gè)母集的數(shù)據(jù),表達(dá)出來的餅圖無法反映出來真實(shí)的占比情況不具有業(yè)務(wù)價(jià)值。
這里我們發(fā)現(xiàn)了,數(shù)據(jù)組可以用來判斷數(shù)據(jù)組能否被餅圖圖形化,避免了產(chǎn)品設(shè)計(jì)中出現(xiàn)不能反映實(shí)際場(chǎng)景的餅圖
三、數(shù)據(jù)組內(nèi)數(shù)據(jù)個(gè)數(shù)影響餅圖可讀性
當(dāng)數(shù)據(jù)組可以被餅圖表達(dá)后,數(shù)據(jù)組內(nèi)的數(shù)據(jù)個(gè)數(shù)就等于了餅圖中扇面的個(gè)數(shù)。數(shù)據(jù)組內(nèi)的數(shù)據(jù)個(gè)數(shù)就會(huì)影響到我們對(duì)于餅圖信息的獲取
人的視覺決定了,我們?cè)诙鄠€(gè)個(gè)體中尋找具體某一個(gè)個(gè)體時(shí)會(huì)比較費(fèi)力,試著觀察下面兩個(gè)餅圖,能發(fā)現(xiàn)同樣尋找“事例二”,右圖會(huì)比左圖輕松許多
當(dāng)數(shù)據(jù)組內(nèi)的個(gè)數(shù)多時(shí),扇面?zhèn)€數(shù)就變多了,就會(huì)導(dǎo)致餅圖顯得非常擁擠,透出的信息擠在一張圖中,降低了從餅圖獲取信息的速度;當(dāng)數(shù)據(jù)組內(nèi)的個(gè)數(shù)少時(shí),餅圖顯示的信息就變的很直觀很清晰
在實(shí)際業(yè)務(wù)中,我們常常會(huì)碰到這樣的場(chǎng)景,數(shù)據(jù)組內(nèi)個(gè)數(shù)非常多,但是我們只關(guān)心極個(gè)別的數(shù)據(jù),這時(shí)候就可以通過合并多余數(shù)據(jù)項(xiàng)的方式減少數(shù)據(jù)組中的數(shù)據(jù)個(gè)數(shù),減少了扇面?zhèn)€數(shù),從而突出了用戶最關(guān)心的數(shù)據(jù),強(qiáng)化了對(duì)特定幾個(gè)數(shù)據(jù)的表達(dá)
案例:
店鋪A統(tǒng)計(jì)了客服團(tuán)隊(duì)10個(gè)客服的銷售額占比,作為客服主管想針對(duì)性的觀察客服1的Q1每個(gè)月份的業(yè)績(jī)變化,如果我們將10個(gè)客服占比數(shù)值都圖形化表達(dá)到餅圖上,因?yàn)榭头F(tuán)隊(duì)這組數(shù)據(jù)組中存在10個(gè)數(shù)據(jù),對(duì)應(yīng)在餅圖上就是10個(gè)扇面,導(dǎo)致了很難尋找到客服1
這個(gè)時(shí)候我們可以通過合并其他9個(gè)客服數(shù)據(jù)的方式,合并為“其他客服”,該數(shù)據(jù)組的數(shù)據(jù)個(gè)數(shù)變成了2個(gè),而且滿足了數(shù)據(jù)組中各個(gè)數(shù)據(jù)相互獨(dú)立,沒有交集的前提。
在減少了數(shù)據(jù)組中數(shù)據(jù)個(gè)數(shù)的同時(shí),強(qiáng)化表達(dá)了客服1這個(gè)數(shù)據(jù)。這就是應(yīng)用了數(shù)據(jù)組內(nèi)數(shù)據(jù)個(gè)數(shù)多少對(duì)餅圖的影響,這一特點(diǎn)還經(jīng)常運(yùn)用于強(qiáng)化表達(dá)異常數(shù)據(jù),例如觀察突出表達(dá)流失人數(shù)等。
四、單數(shù)據(jù)占比影響餅圖可讀性
當(dāng)數(shù)據(jù)組被餅圖表達(dá)后,單個(gè)數(shù)據(jù)與數(shù)據(jù)組匯總數(shù)據(jù)的占比大小,就是扇面的大小,我們通過扇面大小可以直觀感受到不同數(shù)據(jù)的比例,而扇面的大小會(huì)影響到我們對(duì)餅圖的可讀性,當(dāng)其中個(gè)別扇面特別大或者特別小的時(shí)候,都會(huì)導(dǎo)致扇面之間的扇面大小差距懸殊,從而導(dǎo)致部分扇面不容易被識(shí)別,影響了對(duì)餅圖數(shù)據(jù)的可讀性。
出現(xiàn)這種情況的時(shí)候,我們可以很容易判斷出扇面大的部分對(duì)應(yīng)數(shù)據(jù)占數(shù)據(jù)組匯總的比例大,但是比較難讀出扇面非常小的那一部分圖形,這個(gè)時(shí)候我們可以“局部放大”的手段來放大這些比較難被讀出來的扇面
“局部放大”是放大了餅圖中占比小的那一部分扇面,所以首先要判斷當(dāng)前餅圖中占比小的部分是否被影響了可讀性,一般當(dāng)出現(xiàn)3個(gè)及3個(gè)以上的扇面比例小于1%的情況,可以認(rèn)為餅圖的可讀性收到了影響。通過利用人視覺對(duì)面積大的圖形感知力更強(qiáng)這一特點(diǎn),等比例放大餅圖中占比小的部分,方便了這部分?jǐn)?shù)據(jù)的讀取
案例:
店鋪A對(duì)本店銷售額做了商品維度的分析,希望通過餅圖來表達(dá)不同商品銷售額的占比大小,得到商品銷售額數(shù)據(jù)組時(shí),發(fā)現(xiàn)商品A是爆款,店鋪銷售額大部分都是通過商品A成交產(chǎn)生的,所以商品A銷售額數(shù)據(jù)占整個(gè)數(shù)據(jù)組的比例非常大,代表商品A的扇面也非常大
商品A的扇面非常大,導(dǎo)致了不容易讀出其余商品的占比大小,也就沒有辦法對(duì)這些商品占比進(jìn)行直觀的比較,這個(gè)時(shí)候就運(yùn)用局部放大的方式,局部放大那些占比小的扇面,就可以直觀觀察出餅圖種占比小的部分類別的占比差異,同時(shí)通過餅圖又能非常直觀讀出商品A的占比遠(yuǎn)大于其他,結(jié)合2者就可以對(duì)不同商品占比大小有個(gè)了解。
這里我們發(fā)現(xiàn),數(shù)據(jù)組中單個(gè)數(shù)據(jù)占比的大小會(huì)影響我們對(duì)餅圖信息的讀取,當(dāng)遇到部分扇面特別大的情況,可以通過局部放大的手段解決,從而比較占比小的那一部分扇面的差異。
總結(jié)
在產(chǎn)品設(shè)計(jì)中,餅圖被運(yùn)用最多的應(yīng)用價(jià)值是表達(dá)占比,實(shí)際上餅圖除了表達(dá)占比之外,還有強(qiáng)化表達(dá)的作用。我們可以通過對(duì)數(shù)據(jù)組中數(shù)據(jù)個(gè)數(shù)來強(qiáng)化表達(dá)我們想展示給用戶看的內(nèi)容,也需要注意當(dāng)單個(gè)數(shù)據(jù)比例過大時(shí),通過局部放大來解決餅圖的顯示問題。
作者:晌午,微信公眾號(hào):晌午自習(xí)室
本文由 @晌午 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于CC0協(xié)議
【產(chǎn)品入門1元福利好課:產(chǎn)品萌新最重要的能力項(xiàng)是什么?】
? 騰訊文檔產(chǎn)品負(fù)責(zé)人@王崇生老師
? 1小時(shí)帶你從微信拆解產(chǎn)品萌新最應(yīng)該掌握的核心能力項(xiàng)
? 原價(jià)99元,特惠1元!
立即點(diǎn)擊預(yù)約聽課>>>http://996.pm/MEPol