一種數據展示方式,UI設計新穎,供大家參考

這款設計主要是用於進行數據分析和對比,譬如,不同省份的一些不同月份的數據對比(圖爲China Telecom的一些假數據)。 設計取名爲LatticeControl。

頁面開始,每一個藍色格子代表一個月份:


右側的數據顯示的是對應省份的營業額以及該省份在總體上的比例。

當鼠標經過某一項時,顯示當前月份的信息:


點擊某一個格子,當前節的對應項進行高亮顯示,同時右側顯示所有項May(五月)的相關信息:


繼續點擊當前的選中項,所有省份的May項會移動到第一位進行形象比較,右側數據仍顯示當前比較的項:


當用戶繼續點擊移動項時,選中的移動項會返回到原本位置,如開始所示:



在此期間,若用戶選中其他項,則已經移動的項會返回,同時選中的項會移動到首位進行比較。

上述版本是以每個省份的數據都是100%爲限定的,也就是說每個省份的所有月份數據(藍色格子的長度)加起來都是相同的, 這是代碼給定了‘percentage’ 參數,這樣有有點也有缺點,有點就是整體更加充實,但缺點卻不會更加形象,如果給定‘value’ 參數,則會按照固定的數值進行顯示,這樣會更加形象地看清整體的對比, 如下:


由此就可以更加形象地做出對比和分析:



時間原因,代碼部分會在後面的文章中貼出。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章