移動端 H5 報表設計準則
如今隨著移動端的普及,移動辦公也越來越流行,應運而生的移動端報表檢視也成為迫切需求,只要涉及報表開發和設計,總要被問及能否支援移動端瀏覽報表。這個需求可能就像是手機能否連線wifi 一樣非常基礎必要的功能。
移動端報表的目標人群
-
決策人員,移動辦公,在移動環境下中方便檢視,審閱,並根據展示的資料進行決策分析。
-
資料分析人員,需要再檢視當前實時資料狀態與趨勢,及時發現一場並反饋。
-
業務人員,業務人員需要在客戶現場或外部環境瞭解當前最新的業務資料。
移動端環境限制
-
螢幕尺寸及解析度在不同機型不一致
-
移動環境,客戶所處的外在環境可能更為複雜,如明亮度不一致。
-
活躍時間不一致,使用者檢視報表的時間段可能不一致,有可能是碎片時間,有可能是整段時間進行資料預覽分析。
移動端報表特點
-
文字少,圖表多
2.資料趨勢及比率劃分
3.可觸控互動
4.響應式報表
能夠適應移動裝置的多樣性,無論是主流移動裝置還是少量偏門的手機,都能夠正常展示報表資料,不需要進行縮放從而影響使用者體驗。
設計移動端報表準則
-
基本元素設計簡單明瞭
數字和圖形是主要組成元素,佔據了報絕大多數版面;數字的表達,直觀、簡潔,且佔用空間少,是最直接展示方式。
圖形在資料內容的表達上表現的更豐富,在視覺上也能達到更好的效果。所以圖形設計一定要簡單明瞭,色彩對比明顯,避免佔具螢幕控制元件過大,而現實的資料不全。
-
避免冗餘文字
避免出現大量文字出現,文字在移動端大量展示的話會影響閱讀並且無法讓使用者鎖定重點。
-
避免滾屏檢視資料
儘量在一屏內展示完整資料,或者減少橫向和豎向滾屏同時出現。
-
彙總表格展示
表格在移動端不適用展示過多複雜的表格結構和資料,因此在移動端展示的表格一般只有幾行幾列,而且都是以彙總資料為主,所以在移動端使用表格時,一定要減少表格的行列。
-
增加層級鑽取關係
移動端因為裝置的限制,展示的資料是很有限的,但很多客戶在瞭解彙總資料之後,還是要想要去了解更詳細的資料,因此這個時候可以將資料分層展示,可避免在同一介面中展示大量的資料,所以在移動端報表設計中,應適當增加層級鑽取關係。
更多移動端報表示例,請訪問 ActiveReports 報表控制元件官網
關於葡萄城:
賦能開發者!葡萄城公司成立於 1980 年,是全球領先的集開發工具、商業智慧解決方案、管理系統設計工具於一身的軟體和服務提供商。西安葡萄城是其在中國的分支機構,面向全球市場提供軟體研發服務,併為中國企業的資訊化提供國際先進的開發工具、軟體和研發諮詢服務。葡萄城的控制元件和軟體產品在國內外屢獲殊榮,在全球被數十萬家企業、學校和政府機構廣泛應用。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/28298702/viewspace-2213029/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 移動端規則
- H5移動端開發H5
- 移動端h5視訊方案H5
- 移動端『H5周曆元件』H5元件
- 移動端H5預載入方案H5
- 移動終端H5頁面meta標籤的設定H5
- H5移動端彈幕動畫實現H5動畫
- 移動端H5解惑-概念術語(一)H5
- 移動端H5拉起手機相機H5
- 移動端h5模擬長按事件H5事件
- 動態表單後端設計後端
- 移動端H5混合開發設定覆盤與總結H5
- 複雜報表設計之動態報表
- 移動端和PC端互動設計上的區別
- 移動端SDK介面設計心得體會
- H5移動端除錯神器 - vconsole.jsH5除錯JS
- 移動端H5解惑-頁面適配(二)H5
- H5實現移動端複製文字功能H5
- 前端H5移動端響應式介紹前端H5
- 認知與設計:理解UI設計準則——序UI
- 移動使用者介面的5個設計原則
- H5移動端獲獎無縫滾動動畫實現H5動畫
- 移動端手勢庫設計與實踐
- 移動端日曆元件設計與實現元件
- css-移動端h5在iphonex的適配CSSH5iPhone
- 移動端H5 實現0.5px邊框H5
- H5實現移動端語音錄製功能H5
- 超詳細講解H5移動端適配H5
- [譯] 移動介面設計的 10 項啟發式原則
- 移動端 h5 ios不能自動播放音樂的問題:H5iOS
- 移動端閃屏廣告業務設計模式設計模式
- react開發移動端H5遇到的問題(1)ReactH5
- IOS移動端(H5)alert/confirm提示資訊去除urliOSH5
- 移動端H5頁面生成圖片解決方案H5
- vue移動端h5適配解決方案(rem or vw)VueH5REM
- SAP Cloud Application Programming 程式設計模型(CAP)的設計準則CloudAPP程式設計模型
- 互動設計法則
- 移動H5端方案H5