以環(huán)形圖為例,教你如何規(guī)范圖表的適配
發(fā)布時間:2021-12-17 10:31 [ 我要自學網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

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


一、了解環(huán)形圖


了解環(huán)圖之前,我們必須先了解圓餅圖。餅圖借用了餅干的隱喻,用圓形切角的方式呈現(xiàn)各分量在整體中的比例。而環(huán)形圖是圓餅圖的一種變形,在視覺上,由于去掉中心的部分,使得環(huán)形圖較圓餅圖更「輕」,但依然能夠很好的詮釋數(shù)據(jù)間的占比關系。所以在整頁的 Dashboard 設計中,使用環(huán)圖能夠避免造成局部視覺過「重」的問題。如下圖(圖片來自互聯(lián)網(wǎng))案例,整個頁面中視覺上最「重」的就是餅圖。

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

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

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


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


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

圖表的適配首先需要確定圖表繪圖區(qū)域,在這里我首先規(guī)定標題及卡片等為圖表容器,容器內(nèi)為一個圖表所占有的空間為圖表繪圖區(qū)域。

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

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

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

下文中我們將繪圖區(qū)的寬命名為 W,高命名為 H,這兩個值作為已知參數(shù)決定了環(huán)圖的直徑。

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

然后,我們通過枚舉的方式測試環(huán)圖在不同長寬下的展示情況。我們不難發(fā)現(xiàn),環(huán)圖的直徑可由 W 或 H 中最短的一邊決定。當最短邊不變,長邊變動時,環(huán)圖大小不需要變化,如下圖:

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

這樣,我們求解的問題更加明確:

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

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

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

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

  • 圓餅或圓環(huán)區(qū)域與圖注區(qū)域的比例關系是否協(xié)調(diào)?當圖注與環(huán)圖為左右布局時,比較適宜的寬度比為5:5左右。
  • 圓餅區(qū)域與整個容器的比例關系是否協(xié)調(diào)?環(huán)不宜過大,也不宜過小,過大的圓環(huán)會在視覺上過于「重」,影響頁面內(nèi)其他內(nèi)容的閱讀。

在測試的過程中,使用表格的方式記錄測試結(jié)果。

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

測試后發(fā)現(xiàn)整個縮放過程可被分為三個斷點區(qū)間:0< H < =200,200=300;與此同時,我們也發(fā)現(xiàn)在展示過程中還需要給餅圖劃定一個推薦展示的最大和最小值,展示區(qū)域過小會無法看清餅圖和數(shù)據(jù)內(nèi)容; 展示區(qū)域過大,則浪費了屏幕空間。因此適配的斷點更加明確:

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

(1)當 130< H = < 200,則直徑R = H * 80%;

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

(2)當 200 < H < 300,則直徑R = H * 60%;

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

(3)H = > 300,則直徑R = H * 50%;

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

2. 展示比例的適配

左右布局的平衡

當我們將環(huán)圖看做一個圓點,圖注部分可以看做是一個矩形,如下圖:

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

在我們難以確定圖注個數(shù)及圖注文案長度的情況下,右側(cè)的矩形大小難以控制。這時,可以通過增加圖注上下間距以及圖注字號的方式來動態(tài)調(diào)節(jié)左右的平衡。如下圖中,在保證圖注高度H1小于餅圖直徑H2的前提下,H3可在8px與20px間動態(tài)變化,取最大值。

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

橫向布局及縱向布局

一般環(huán)圖的展示中,左右布局的形式在圖表的閱讀和對應性上更加友好。但當圖表繪制區(qū)域的 H > W( 即寬高比< =1),左右布局的方式不如上下布局的方式在空間利用上有優(yōu)勢。

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


總結(jié)


通過環(huán)圖適配的我們可以以點蓋面的推導出圖表適配的一般方法:

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

1. 了解圖表的展示意圖,使用場景,一般用法等

明確了展示意圖能夠準確的判斷圖表以哪種方式呈現(xiàn)是合理的,哪種展示方式是不合理的。常規(guī)的展示方式要和具體場景進行結(jié)合才能產(chǎn)出最合適的展示方式。

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

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

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

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

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

4. 規(guī)范每個梯度的合理展示方式

為每個梯度規(guī)范合理的展示,能夠做到更貼近業(yè)務場景的適配。

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

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

PhotoshopCC2020視頻教程
我要自學網(wǎng)商城 ¥120 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設計 室內(nèi)設計 室外設計 機械設計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設計 會計課程 興趣成長 AIGC