編輯導(dǎo)讀：餅圖可以直觀的顯示出各數(shù)據(jù)所占的比例關(guān)系，經(jīng)常用于展示產(chǎn)品市場(chǎng)份額、客戶組成、滿意度比例等數(shù)據(jù)。但是在產(chǎn)品設(shè)計(jì)中，餅圖也具有很高的應(yīng)用價(jià)值，本文作者結(jié)合案例對(duì)此展開了說(shuō)明，一起來(lái)看看。

已知淘寶店A在7-23日的店鋪銷售額241723元，其中客服銷售額71077元，靜默銷售額170646元。店鋪負(fù)責(zé)人想要了解店鋪銷售的構(gòu)成情況，分析消費(fèi)者成交是否都需要通過(guò)客服接待，來(lái)考察客服團(tuán)隊(duì)對(duì)于店鋪的貢獻(xiàn)程度

針對(duì)這一場(chǎng)景，分析客服團(tuán)隊(duì)在消費(fèi)者成交過(guò)程的參與程度，實(shí)際上是分析了銷售額中有多少是客服銷售額，即消費(fèi)者通過(guò)客服接待后下單成交的部分；

通過(guò)計(jì)算得到客服銷售額占比29.4%，靜默銷售額占比70.6%，用基礎(chǔ)餅圖圖形化表達(dá)后，觀察客服銷售額的扇面部分，能非常直觀讀出客服銷售額占比低，絕大部分的下單成交都是消費(fèi)者靜默下單完成的。

這就是基礎(chǔ)餅圖在產(chǎn)品設(shè)計(jì)中最常見的應(yīng)用方式之一，用餅圖來(lái)表達(dá)占比，得出的結(jié)論可以幫助分析場(chǎng)景，輔助決策。但是餅圖不單單只有這一種應(yīng)用方式，可應(yīng)用的場(chǎng)景很多，本文就想和大家一起討論基礎(chǔ)餅圖在產(chǎn)品設(shè)計(jì)中的應(yīng)用價(jià)值。

一、什么是餅圖？

基礎(chǔ)餅圖的定義，通過(guò)不同的扇面大小，圖形化表達(dá)了不同類別的比例，即一個(gè)數(shù)據(jù)組中不同數(shù)據(jù)項(xiàng)的數(shù)據(jù)大小占所有數(shù)據(jù)和的比例；并通過(guò)帶顏色的圖例將扇面和數(shù)據(jù)項(xiàng)一一對(duì)應(yīng)起來(lái)

從上面的定義中，我們可以發(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á)出來(lái)的餅圖才有意義，我們也可以利用數(shù)據(jù)組的一些特點(diǎn)來(lái)發(fā)揮餅圖在產(chǎn)品中的應(yīng)用價(jià)值，下面就想通過(guò)不同的場(chǎng)景來(lái)說(shuō)明

二、什么樣的數(shù)據(jù)組能用餅圖表達(dá)？

我們?cè)趯?shí)際場(chǎng)景中需要表達(dá)占比時(shí)，常常會(huì)想到用餅圖來(lái)表達(dá)，但并不是所有情況下都可以用基礎(chǔ)餅圖來(lái)表達(dá)的，這里可以通過(guò)“數(shù)據(jù)組”被餅圖表達(dá)所需要滿足的條件，來(lái)區(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)系通過(guò)圖形表達(dá)出來(lái)，數(shù)據(jù)組就是餅圖的基礎(chǔ)，了解了數(shù)據(jù)組的定義后，可以推論出數(shù)據(jù)組要能被餅圖圖形化表達(dá)有1個(gè)前提條件，數(shù)據(jù)組中的各個(gè)子集是相互獨(dú)立，沒有交集的，且歸屬于同一個(gè)母集（數(shù)據(jù)組）

如果不滿足這一前提，餅圖就無(wú)法用來(lái)反映真實(shí)的場(chǎng)景了，也不具有業(yè)務(wù)價(jià)值了，所以我們?cè)诋a(chǎn)品設(shè)計(jì)中可以通過(guò)分析數(shù)據(jù)組中的包含關(guān)系來(lái)判斷能否被餅圖表達(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)的占比，我們一起來(lái)看下這些數(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

通過(guò)對(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á)出來(lái)的餅圖無(wú)法反映出來(lái)真實(shí)的占比情況不具有業(yè)務(wù)價(jià)值。

這里我們發(fā)現(xiàn)了，數(shù)據(jù)組可以用來(lái)判斷數(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í)候就可以通過(guò)合并多余數(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í)候我們可以通過(guò)合并其他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ù)的占比大小，就是扇面的大小，我們通過(guò)扇面大小可以直觀感受到不同數(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í)候我們可以“局部放大”的手段來(lái)放大這些比較難被讀出來(lái)的扇面

“局部放大”是放大了餅圖中占比小的那一部分扇面，所以首先要判斷當(dāng)前餅圖中占比小的部分是否被影響了可讀性，一般當(dāng)出現(xiàn)3個(gè)及3個(gè)以上的扇面比例小于1%的情況，可以認(rèn)為餅圖的可讀性收到了影響。通過(guò)利用人視覺對(duì)面積大的圖形感知力更強(qiáng)這一特點(diǎn)，等比例放大餅圖中占比小的部分，方便了這部分?jǐn)?shù)據(jù)的讀取

案例：

店鋪A對(duì)本店銷售額做了商品維度的分析，希望通過(guò)餅圖來(lái)表達(dá)不同商品銷售額的占比大小，得到商品銷售額數(shù)據(jù)組時(shí)，發(fā)現(xiàn)商品A是爆款，店鋪銷售額大部分都是通過(guò)商品A成交產(chǎn)生的，所以商品A銷售額數(shù)據(jù)占整個(gè)數(shù)據(jù)組的比例非常大，代表商品A的扇面也非常大

商品A的扇面非常大，導(dǎo)致了不容易讀出其余商品的占比大小，也就沒有辦法對(duì)這些商品占比進(jìn)行直觀的比較，這個(gè)時(shí)候就運(yùn)用局部放大的方式，局部放大那些占比小的扇面，就可以直觀觀察出餅圖種占比小的部分類別的占比差異，同時(shí)通過(guò)餅圖又能非常直觀讀出商品A的占比遠(yuǎn)大于其他，結(jié)合2者就可以對(duì)不同商品占比大小有個(gè)了解。

這里我們發(fā)現(xiàn)，數(shù)據(jù)組中單個(gè)數(shù)據(jù)占比的大小會(huì)影響我們對(duì)餅圖信息的讀取，當(dāng)遇到部分扇面特別大的情況，可以通過(guò)局部放大的手段解決，從而比較占比小的那一部分扇面的差異。

總結(jié)

在產(chǎn)品設(shè)計(jì)中，餅圖被運(yùn)用最多的應(yīng)用價(jià)值是表達(dá)占比，實(shí)際上餅圖除了表達(dá)占比之外，還有強(qiáng)化表達(dá)的作用。我們可以通過(guò)對(duì)數(shù)據(jù)組中數(shù)據(jù)個(gè)數(shù)來(lái)強(qiáng)化表達(dá)我們想展示給用戶看的內(nèi)容，也需要注意當(dāng)單個(gè)數(shù)據(jù)比例過(guò)大時(shí)，通過(guò)局部放大來(lái)解決餅圖的顯示問(wèn)題。

作者：晌午，微信公眾號(hào)：晌午自習(xí)室

本文由 @晌午 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議