中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

越來越多的設計師通過組件的方式支持業務需求，組件是設計的沉淀但同時也需要設計師對每一個細節場景的深入思考。本文以環圖的適配問題，探索規范圖表適配的一般方法。

一、了解環形圖

了解環圖之前，我們必須先了解圓餅圖。餅圖借用了餅干的隱喻，用圓形切角的方式呈現各分量在整體中的比例。而環形圖是圓餅圖的一種變形，在視覺上，由于去掉中心的部分，使得環形圖較圓餅圖更“輕” ，但依然能夠很好的詮釋數據間的占比關系。

所以在整頁的Dashboard設計中，使用環圖能夠避免造成局部視覺過“重”的問題。如下圖（圖片來自互聯網）案例，整個頁面中視覺上最“重”的就是餅圖。

人們的閱讀順序是自上而下，順時針閱讀。所以環形圖在繪制時，需要按照這樣一個閱讀順序，將數據項根據值的大小進行排序，將最明顯的部分放在最易閱讀的位置。

有人將閱讀餅圖比作閱讀表盤，人們會將12點作為閱讀起點，所以將面積最大的部分放置在12點位置的右側。由于人眼對統一區域的顏色識別有限，餅圖的切分應控制在5-6份，如果數據非常多則應將剩余數據歸為同一類，并標注為其它。

二、環形圖的適配

2.1 圓環大小的適配

圖表的適配首先需要確定圖表繪圖區域，在這里我首先規定標題及卡片等為圖表容器，容器內為一個圖表所占有的空間為圖表繪圖區域。

一般的環形圖包含圓環和圖注兩個部分，所謂圓環的適配，其實就是圓環在不同長寬下的繪圖區域的尺寸，也可以理解為是求繪圖區域長寬和圓環直徑之間的一個關系。

下文中我們將繪圖區的寬命名為W，高命名為H，這兩個值作為已知參數決定了環圖的直徑。

然后，我們通過枚舉的方式測試環圖在不同長寬下的展示情況。我們不難發現，環圖的直徑可由W或H中最短的一邊決定。

當最短邊不變，長邊變動時，環圖大小不需要變化，如下圖：

這樣，我們求解的問題更加明確：

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

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

1. 圓餅或圓環區域與圖注區域的比例關系是否協調？當圖注與環圖為左右布局時，比較適宜的寬度比為5:5左右。
2. 圓餅區域與整個容器的比例關系是否協調？環不宜過大，也不宜過小，過大的圓環會在視覺上過于“重”，影響頁面內其他內容的閱讀。

在測試的過程中，使用表格的方式記錄測試結果：

測試后發現整個縮放過程可被分為三個斷點區間：0< H < =200，200<H<300，H>=300；與此同時，我們也發現在展示過程中還需要給餅圖劃定一個推薦展示的最大和最小值，展示區域過小會無法看清餅圖和數據內容； 展示區域過大，則浪費了屏幕空間。

因此適配的斷點更加明確：

（1）當 130< H = < 200，則直徑R = H * 80% 。

（2）當 200 < H < 300，則直徑R = H * 60% 。

（3）H = > 300，則直徑R = H * 50% 。

2.2 展示比例的適配

（1）左右布局的平衡

當我們將環圖看做一個圓點，圖注部分可以看做是一個矩形，如下圖：

在我們難以確定圖注個數及圖注文案長度的情況下，右側的矩形大小難以控制。這時，可以通過增加圖注上下間距以及圖注字號的方式來動態調節左右的平衡。

如下圖中，在保證圖注高度H1小于餅圖直徑H2的前提下，H3可在8px與20px間動態變化，取最大值。

（2）橫向布局及縱向布局

一般環圖的展示中，左右布局的形式在圖表的閱讀和對應性上更加友好。但當圖表繪制區域的H > W（ 即寬高比< =1），左右布局的方式不如上下布局的方式在空間利用上有優勢。

三、總結

通過環圖適配的我們可以以點蓋面的推導出圖表適配的一般方法：

Step 1：了解圖表的展示意圖，使用場景，一般用法等

明確了展示意圖能夠準確的判斷圖表以哪種方式呈現是合理的，哪種展示方式是不合理的。常規的展示方式，要和具體場景進行結合才能產出最合適的展示方式。

Step 2：使用最大最小值劃定展示的極限

極限值的規范使圖表在一定范圍內進行適配，呈現較好的展示方式。除了劃定極限范圍，還要描述如果超出極限應如何處理。如下圖微軟的數據產品 Power BI中，當圖注較多超過一定極限值時，默認隱藏，用戶通過hover到圖表上依然能夠看到數據詳情。

Step 3：通過枚舉的方式初步劃分適配梯度

當一種方案無法覆蓋適配到所有尺寸的時候，我們將通過劃分梯度來解決適配的問題。梯度的劃分可以參考各尺寸設備的展示情況，以及圖表在各尺寸下的展示情況。

Step 4：規范每個梯度的合理展示方式

為每個梯度規范合理的展示，能夠做到更貼近業務場景的適配。

當我們規范好每種圖表的適配方案后，還需要對整個Dashboard頁面的自適應布局提出方案。這時我們首先列舉常用設備尺寸，規定適配斷點梯度，然后規范每個類型的卡片在不同斷點下一行最多放置幾個卡片。

下圖是作者針對Dashboard柵格布局中，N=4、6、8、12的卡片適配方案。

1. 參考書籍：《數據可視化》陳為等編著
2. 參考書籍：《最簡單的圖形與最復雜的信息》黃慧敏著

作者：阿里巴巴TXD團隊視覺設計師-高超

本文由 @阿里TXD 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議