以環(huán)形圖為例，阿里設(shè)計師教你如何規(guī)范圖表的適配

2019/4/22 16:02:25來源：互聯(lián)網(wǎng)

越來越多的設(shè)計師通過組件的體例支持營業(yè)需求，組件是設(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)）案例，整個網(wǎng)頁中視覺上最「重」的就是餅圖。

人們的閱讀順序是自上而下，順時針閱讀。所以環(huán)形圖在繪制時，必要按照如許一個閱讀順序，將數(shù)據(jù)項根據(jù)值的大小進行排序，將最顯明的部分放在最易閱讀的位置。有人將閱讀餅圖比作閱讀表盤，人們會將12點作為閱讀起點，所以將面積最大的部分放置在12點位置的右側(cè)。因為人眼對同一區(qū)域的顏色識別有限，餅圖的切分應(yīng)控制在5-6份，假如數(shù)據(jù)特別很是多則應(yīng)將剩余數(shù)據(jù)歸為統(tǒng)一類，并標(biāo)注為其它。

二、環(huán)形圖的適配

1. 圓環(huán)大小的適配

圖表的適配首先必要確定圖表繪圖區(qū)域，在這里我首先規(guī)定題目及卡片等為圖表容器，容器內(nèi)為一個圖表所占據(jù)的空間為圖表繪圖區(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)圖大小不必要轉(zhuǎn)變，如下圖：

如許，我們求解的題目更加明確：

接下來我們采用單一變量枚舉的體例，以 W >= H 為例（即長寬比< =1），H 決定了圖表的半徑，在 W 肯定的情況下，進行測試，如下圖借助平臺，在配置好不同半徑后通過拖拽看不同寬高下是否吻合展示需求。

在枚舉過程中，視覺的判斷依據(jù)以下兩點：

圓餅或圓環(huán)區(qū)域與圖注區(qū)域的比例關(guān)系是否和諧？當(dāng)圖注與環(huán)圖為左右布局時，比較適宜的寬度比為5:5左右。
圓餅區(qū)域與整個容器的比例關(guān)系是否和諧？環(huán)不宜過大，也不宜過小，過大的圓環(huán)會在視覺上過于「重」，影響網(wǎng)頁內(nèi)其他內(nèi)容的閱讀。

在測試的過程中，使用表格的體例記錄測試效果。

測試后發(fā)現(xiàn)整個縮放過程可被分為三個斷點區(qū)間：0< H < =200，200=300；與此同時，我們也發(fā)如今展示過程中還必要給餅圖劃定一個保舉展示的最大和最小值，展示區(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)轉(zhuǎn)變，取最大值。

橫向布局及縱向布局

一樣平常環(huán)圖的展示中，左右布局的情勢在圖表的閱讀和對應(yīng)性上更加友愛。但當(dāng)圖表繪制區(qū)域的 H > W（即寬高比< =1），左右布局的體例不如上下布局的體例在空間行使上有上風(fēng)。

總結(jié)

通過環(huán)圖適配的我們可以以點蓋面的推導(dǎo)出圖表適配的一樣平常方法：

1. 了解圖表的展示意圖，使用場景，一樣平常用法等

明確了展示意圖能夠正確的判斷圖表以哪種體例呈現(xiàn)是合理的，哪種展示體例是不合理的。常規(guī)的展示體例要和詳細(xì)場景進行結(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è)場景的適配。

當(dāng)我們規(guī)范好每種圖表的適配方案后，還必要對整個 Dashboard 網(wǎng)頁的自適應(yīng)布局提出方案。這時我們首先列舉常用設(shè)備尺寸，規(guī)定適配斷點梯度，然后規(guī)范每個類型的卡片在不同斷點下一行最多放置幾個卡片。下圖是作者針對 Dashboard 柵格布局中，N=4、6、8、12的卡片適配方案。