他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

數據可視化圖表設計指南:圓環圖

2022-4-7    seo達人



3種圓環圖樣式 

標準圓環圖

圖片

圖表中間空心的部分用來展示數據的總數,用圓環的弧長和顏色表示不同數據的占比,圖表旁邊有圖例用來解釋說明。

 

布爾圓環圖

圖片

布爾圓環圖就像是給圓環圖做了布爾運算,只表示正負兩個值。

比如想重點突出完成率,就使用綠色圓環來表示68%的完成率,圓環其他部分為灰色,同理想重點突出反彈率,就使用紅色圓環來表示83%的反彈率,圓環其他部分為灰色。

圓環中心部分用來顯示相關數值的百分比和標簽。此外布爾圓環圖不需要額外添加圖例。

 

標簽圓環圖

圖片

直接在對應的圓環上加入標簽比使用圖例更容易理解。在屏幕空間允許的情況下,可以直接在圓環上添加「名稱+所占比例+數量」的標簽形式。

 

圓環圖交互狀態分析 

懸停狀態

圖片

在標準圓環圖中,鼠標懸停在圓環圖上時,跳出分段名稱+百分比+數量值的彈窗。在標簽圓環圖中,懸停的圓環部分突出顯示,其余部分淡出處理。

 

點選狀態

圖片

圖表段可以是交互式的,點擊對應的分段時,右側的圖例也會同步高亮顯示。

 

焦點狀態

圖片

焦點狀態和上面提到的懸停狀態類似,唯一的區別在于,焦點狀態選中分段后有一個放大+描邊的圓環效果,突出展示數據。

 

空狀態

圖片

當沒有可用的數據時,應該在圖表上表明這一點,并給出提示引導用戶去點擊。

 

錯誤狀態

圖片

獲取數據時偶爾會出現發生錯誤的情況。發生這種情況時,向用戶提供有用的、可操作的解釋,說明發生錯誤的原因并告訴用戶可以采取哪些措施來解決問題。

 

圓環圖使用指南 

使用分類顏色

圖片

保持圓環圖每部分顏色都使用醒目的顏色且具有對比性。在圓環圖中不建議使用同色系顏色來顯示數據,同色系顏色常用在直方圖中。

 

最多使用五個分段

圖片

當圓環圖包含多個數據分段時,圖標會變得難以理解,為保證圖標的清晰,盡可能將分段控制在 2-3 段,不要超過5段。如果數據過多,可以考慮使用柱狀圖、條形圖等其他形式的圖表。

 

保證數據準確

圖片

圓環圖的所有分段加起來的數值應該始終為 100%,沒有有多段數據占比過小,可以一起匯總到“其他”分段中。

 

按順序排列數據

圖片

圓環圖的份分段應從12點位置開始按最大值排序,然后按順時針方向依次按大小排列每個數值。右側的圖例頁應該從上到下保持一致的排序。

 

不要將時間分段

圖片

時間是一個順序變量,不能用作圓環圖中的類別。例如每個季度的時間是相同的,但是每個季度訪客卻不一樣,使用圓環圖會給用戶造成一定的困擾。如果以時間作為基本單位,可以使用直方圖、條形圖等圖表。

 


原文地址:Clip設計夾(公眾號)

作者:Clippp

轉載請注明:學UI網》數據可視化圖表設計指南:圓環圖

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

藍藍設計ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



日歷

鏈接

個人資料

藍藍設計的小編 http://ssll180.com

存檔