手機已經成為了人們生活中必不可少的一部分，除了用來娛樂生活，打發時間之外，手機也漸漸成為企業管理的重要武器。通過制作好的移動端報表，領導随時随地就能查看企業各類的業務數據，及時發現企業生産中出現的問題并給出相應的解決辦法，提高企業決策的效率。然而，在制作移動端模闆的過程中，屏幕的限制似乎讓數據的呈現成為了難題，大家經常遇到這些困難：

• 屏幕太小，想展示的數據太多，放不下
• 領導總是嫌棄交互體驗感差
• 模闆太醜，不能給人眼前一亮

别擔心，這些問題都是小事，本期老司機帶你們上車，教你如何在十分鐘做出一張華麗豐富的移動端模闆！

先給你們放幾張效果圖，大飽眼福：

下面切入正題，大師兄将帶着大家一起，體驗一下移動端的高階玩法，十分鐘搞定DEMO模闆，給自己少一點壓力，讓領導多一點滿意

第一步，打開FineReport設計器，在模闆裡選擇移動端屬性，設置為手機端模闆，設計器會自動将畫布調整為适配4.7寸手機屏幕畫布的大小（375*560）

什麼? 你還沒有下載FineReport設計器？趕緊先把激活碼領取了

點擊免費領取FineReport激活碼

根據需要展示的數據指标整理數據，構思模闆的組件類型與個數，組件個數過多時可以采用下面兩種方式：

• 根據組件大小和個數調整畫布整體高度
• tab組件，将不同數據填至不同的tab頁

本文實例模版采用了tab組件樣式，将豐富的組件填充在不同的tab頁，交互體驗更佳

• 主數據報表塊

通過報表塊來展現兩個相對關鍵的指标，内嵌了兩個圖表（儀表盤），利用表格布局合理設計出所需要樣式，讓數據展示更加清晰

注：盡量不超過邊界線，讓報表塊中内容有更好的自适應效果

• tab塊

通過tab塊将月度、年度兩個維度的數據内容分别填充到不同的tab頁面，實現在一張模闆的内部預覽不同維度的數據。

選擇移動端tab效果：

控件設置選中tabpane>樣式模闆>設置移動端tab樣式，tab樣式有上菜單式、下菜單式、滑動式，豐富的tab樣式等你來解鎖

tab塊内的報表塊和圖表塊就不一一細說了，根據需求進行常規設置，要注意的一點是，圖表的背景、坐标軸标簽等，要跟其他組件保持樣式一緻

• 參數面闆

模闆默認參數界面是通過底部參數界面的漏鬥過濾按鈕調用的，點擊後跳轉到新的頁面編輯參數，再進行查詢

本文實例模闆采用直接在報表主體内直接查詢的方式，交互效果更贊！

• 安裝插件：插件管理>頂部參數面闆
• 設置：控件設置選中para>移動端>參數面闆>選擇頂部

注：僅在APP端适用，H5暫不可用

• 組件間隔及圓角

一般情況下，移動端的報表内容會有很多組件組成，為了能夠讓用戶閱讀起來更加舒适，我們需要對報表内容進行合理的劃分和布局

• 決策報表模式下，合理地設置邊距和組件間隔
• 給報表塊和圖表快設置一定的圓角，讓數據呈現更加美觀

邊距及組件間隔設置：控件設置>body>移動端>内邊距、組件間隔

圓角設置：控件設置>某報表塊/圖表塊>屬性>樣式>圓角

• 點綴數據，突出重點

一般我們會選用圖表組件将數據可視化，當然，我們還可以利用報表塊的強大功能，利用條件屬性等将不同的數據标注不同的顔色、背景、邊框甚至圖片等，突出重點數據

本文實例模闆采用條件屬性 背景突出指标完成率

本張移動端的模闆基本上就制作完成了，我們一起來看下效果

最後，重點來了！！！

福利大放送！本文中出現的demo模闆将全部免費送給大家，希望大家喜歡！私信我“移動端demo”即可獲得！

送了demo模闆，你以為就這樣嗎？我們還給你提供FineMobile免費體驗機會，隻要點擊FineReport報表 - 專業的企業級Web報表工具，隻需一分鐘，讓你感受全新的移動數據分析體驗！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!