移動端 H5 報表設計準則

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

移動端報表的目標人群

• 決策人員，移動辦公，在移動環境下中方便查看，審閱，并根據展示的數據進行決策分析。

• 數據分析人員，需要再查看當前實時數據狀態與趨勢，及時發現一場并反饋。

• 業務人員，業務人員需要在客戶現場或外部環境了解當前最新的業務數據。

移動端環境限制

• 屏幕尺寸及分辨率在不同機型不一致

• 移動環境，客戶所處的外在環境可能更為復雜，如明亮度不一致。

• 活躍時間不一致，用戶查看報表的時間段可能不一致，有可能是碎片時間，有可能是整段時間進行數據預覽分析。

移動端報表特點

1. 文字少，圖表多

2.數據趨勢及比率劃分

3.可觸摸交互

4.響應式報表

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

設計移動端報表準則

• 基本元素設計簡單明了

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

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

• 避免冗余文字

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

• 避免滾屏查看數據

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

• 匯總表格展示

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

• 增加層級鉆取關系

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

更多移動端報表示例，請訪問 ActiveReports 報表控件官網

關于葡萄城：

賦能開發者！葡萄城公司成立于 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。