越來越多的設(shè)計師通過組件的方式支持業(yè)務(wù)需求，組件是設(shè)計的沉淀但同時也需要設(shè)計師對每一個細(xì)節(jié)場景的深入思考。本文以環(huán)圖的適配問題，探索規(guī)范圖表適配的一般方法。
一、了解環(huán)形圖
了解環(huán)圖之前，我們必須先了解圓餅圖。餅圖借用了餅干的隱喻，用圓形切角的方式呈現(xiàn)各分量在整體中的比例。而環(huán)形圖是圓餅圖的一種變形，在視覺上，由于去掉中心的部分，使得環(huán)形圖較圓餅圖更「輕」，但依然能夠很好的詮釋數(shù)據(jù)間的占比關(guān)系。所以在整頁的 Dashboard 設(shè)計中，使用環(huán)圖能夠避免造成局部視覺過「重」的問題。如下圖（圖片來自互聯(lián)網(wǎng)）案例，整個頁面中視覺上最「重」的就是餅圖。
人們的閱讀順序是自上而下，順時針閱讀。所以環(huán)形圖在繪制時，需要按照這樣一個閱讀順序，將數(shù)據(jù)項根據(jù)值的大小進行排序，將最明顯的部分放在最易閱讀的位置。有人將閱讀餅圖比作閱讀表盤，人們會將12點作為閱讀起點，所以將面積最大的部分放置在12點位置的右側(cè)。由于人眼對統(tǒng)一區(qū)域的顏色識別有限，餅圖的切分應(yīng)控制在5-6份，如果數(shù)據(jù)非常多則應(yīng)將剩余數(shù)據(jù)歸為同一類，并標(biāo)注為其它。
二、環(huán)形圖的適配
1. 圓環(huán)大小的適配
圖表的適配首先需要確定圖表繪圖區(qū)域，在這里我首先規(guī)定標(biāo)題及卡片等為圖表容器，容器內(nèi)為一個圖表所占有的空間為圖表繪圖區(qū)域。
一般的環(huán)形圖包含圓環(huán)和圖注兩個部分，所謂圓環(huán)的適配，其實就是圓環(huán)在不同長寬下的繪圖區(qū)域的尺寸，也可以理解為是求繪圖區(qū)域長寬和圓環(huán)直徑之間的一個關(guān)系。
下文中我們將繪圖區(qū)的寬命名為 W，高命名為 H，這兩個值作為已知參數(shù)決定了環(huán)圖的直徑。
然后，我們通過枚舉的方式測試環(huán)圖在不同長寬下的展示情況。我們不難發(fā)現(xiàn)，環(huán)圖的直徑可由 W 或 H 中最短的一邊決定。當(dāng)最短邊不變，長邊變動時，環(huán)圖大小不需要變化，如下圖：
這樣，我們求解的問題更加明確：
接下來我們采用單一變量枚舉的方式， 以 W >= H 為例（即長寬比< =1），H 決定了圖表的半徑，在 W 一定的情況下，進行測試，如下圖借助平臺，在配置好不同半徑后通過拖拽看不同寬高下是否符合展示需求。
在枚舉過程中，視覺的判斷依據(jù)以下兩點：
- 圓餅或圓環(huán)區(qū)域與圖注區(qū)域的比例關(guān)系是否協(xié)調(diào)？當(dāng)圖注與環(huán)圖為左右布局時，比較適宜的寬度比為5:5左右。
- 圓餅區(qū)域與整個容器的比例關(guān)系是否協(xié)調(diào)？環(huán)不宜過大，也不宜過小，過大的圓環(huán)會在視覺上過于「重」，影響頁面內(nèi)其他內(nèi)容的閱讀。
在測試的過程中，使用表格的方式記錄測試結(jié)果。
測試后發(fā)現(xiàn)整個縮放過程可被分為三個斷點區(qū)間：0< H < =200，200=300；與此同時，我們也發(fā)現(xiàn)在展示過程中還需要給餅圖劃定一個推薦展示的最大和最小值，展示區(qū)域過小會無法看清餅圖和數(shù)據(jù)內(nèi)容； 展示區(qū)域過大，則浪費了屏幕空間。因此適配的斷點更加明確：
（1）當(dāng) 130< H = < 200，則直徑R = H * 80%；
（2）當(dāng) 200 < H < 300，則直徑R = H * 60%；
（3）H = > 300，則直徑R = H * 50%；
2. 展示比例的適配
左右布局的平衡
當(dāng)我們將環(huán)圖看做一個圓點，圖注部分可以看做是一個矩形，如下圖：
在我們難以確定圖注個數(shù)及圖注文案長度的情況下，右側(cè)的矩形大小難以控制。這時，可以通過增加圖注上下間距以及圖注字號的方式來動態(tài)調(diào)節(jié)左右的平衡。如下圖中，在保證圖注高度H1小于餅圖直徑H2的前提下，H3可在8px與20px間動態(tài)變化，取最大值。
橫向布局及縱向布局
一般環(huán)圖的展示中，左右布局的形式在圖表的閱讀和對應(yīng)性上更加友好。但當(dāng)圖表繪制區(qū)域的 H > W（ 即寬高比< =1），左右布局的方式不如上下布局的方式在空間利用上有優(yōu)勢。
總結(jié)
通過環(huán)圖適配的我們可以以點蓋面的推導(dǎo)出圖表適配的一般方法：
1. 了解圖表的展示意圖，使用場景，一般用法等
明確了展示意圖能夠準(zhǔn)確的判斷圖表以哪種方式呈現(xiàn)是合理的，哪種展示方式是不合理的。常規(guī)的展示方式要和具體場景進行結(jié)合才能產(chǎn)出最合適的展示方式。
2. 使用最大最小值劃定展示的極限
極限值的規(guī)范使圖表在一定范圍內(nèi)進行適配，呈現(xiàn)較好的展示方式。除了劃定極限范圍，還要描述如果超出極限應(yīng)如何處理。如下圖微軟的數(shù)據(jù)產(chǎn)品 Power BI 中，當(dāng)圖注較多超過一定極限值時，默認(rèn)隱藏，用戶通過 hover 到圖表上依然能夠看到數(shù)據(jù)詳情。
3. 通過枚舉的方式初步劃分適配梯度
當(dāng)一種方案無法覆蓋適配到所有尺寸的時候，我們將通過劃分梯度來解決適配的問題。梯度的劃分可以參考各尺寸設(shè)備的展示情況，以及圖表在各尺寸下的展示情況。
4. 規(guī)范每個梯度的合理展示方式
為每個梯度規(guī)范合理的展示，能夠做到更貼近業(yè)務(wù)場景的適配。
當(dāng)我們規(guī)范好每種圖表的適配方案后，還需要對整個 Dashboard 頁面的自適應(yīng)布局提出方案。這時我們首先列舉常用設(shè)備尺寸，規(guī)定適配斷點梯度，然后規(guī)范每個類型的卡片在不同斷點下一行最多放置幾個卡片。下圖是作者針對 Dashboard 柵格布局中，N=4、6、8、12的卡片適配方案。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。