移動端 H5 報表設計準則

​如今隨著移動端的普及,移動辦公也越來越流行,應運而生的移動端報表查看也成為迫切需求,只要涉及報表開發和設計,總要被問及能否支持移動端瀏覽報表。這個需求可能就像是手機能否連接wifi 一樣非常基礎必要的功能。

移動端報表的目標人群

  • 決策人員,移動辦公,在移動環境下中方便查看,審閱,並根據展示的數據進行決策分析。
  • 數據分析人員,需要再查看當前實時數據狀態與趨勢,及時發現一場並反饋。
  • 業務人員,業務人員需要在客戶現場或外部環境瞭解當前最新的業務數據。

移動端環境限制

  • 屏幕尺寸及分辨率在不同機型不一致
  • 移動環境,客戶所處的外在環境可能更為複雜,如明亮度不一致。
  • 活躍時間不一致,用戶查看報表的時間段可能不一致,有可能是碎片時間,有可能是整段時間進行數據預覽分析。

移動端報表特點

  1. 文字少,圖表多
移動端 H5 報表設計準則

2.數據趨勢及比率劃分

移動端 H5 報表設計準則

3.可觸摸交互

移動端 H5 報表設計準則

4.響應式報表

能夠適應移動設備的多樣性,無論是主流移動設備還是少量偏門的手機,都能夠正常展示報表數據,不需要進行縮放從而影響用戶體驗。

設計移動端報表準則

  • 基本元素設計簡單明瞭

數字和圖形是主要組成元素,佔據了報絕大多數版面;數字的表達,直觀、簡潔,且佔用空間少,是最直接展示方式。

圖形在數據內容的表達上表現的更豐富,在視覺上也能達到更好的效果。所以圖形設計一定要簡單明瞭,色彩對比明顯,避免佔具屏幕控件過大,而現實的數據不全。

移動端 H5 報表設計準則

  • 避免冗餘文字

避免出現大量文字出現,文字在移動端大量展示的話會影響閱讀並且無法讓用戶鎖定重點。

移動端 H5 報表設計準則

  • 避免滾屏查看數據

儘量在一屏內展示完整數據,或者減少橫向和豎向滾屏同時出現。

  • 彙總表格展示

表格在移動端不適用展示過多複雜的表格結構和數據,因此在移動端展示的表格一般只有幾行幾列,而且都是以彙總數據為主,所以在移動端使用表格時,一定要減少表格的行列。

移動端 H5 報表設計準則

  • 增加層級鑽取關係

移動端因為設備的限制,展示的數據是很有限的,但很多客戶在瞭解彙總數據之後,還是要想要去了解更詳細的數據,因此這個時候可以將數據分層展示,可避免在同一界面中展示大量的數據,所以在移動端報表設計中,應適當增加層級鑽取關係。


分享到:


相關文章: