移動應(yīng)用時代，辦公移動化已經(jīng)成為了企業(yè)經(jīng)營的一大發(fā)展趨勢，在企業(yè)數(shù)據(jù)管理領(lǐng)域，移動端報表也成為了現(xiàn)代企業(yè)運營管理的迫切需要。

通過移動數(shù)據(jù)分析，可以幫助管理者實時了解業(yè)務(wù)狀態(tài)，及時獲取企業(yè)營運狀況。

隨著移動端的發(fā)展，這種影響力得以擴大。無論是管理者還是一線業(yè)務(wù)人員，都可以同移動端報表隨時隨地地進行溝通和分析，比如FineMobile。

但是在移動端數(shù)據(jù)報表開發(fā)的過程中，開發(fā)者經(jīng)常會遇到以下幾個問題：

• 在PC上設(shè)計手機報表，總覺得差距有點大
• 如何在有限的屏幕內(nèi)把數(shù)據(jù)展現(xiàn)地更有層次？
• 厭倦了流式布局？想要讓數(shù)據(jù)擁有更多交互？
• C端的APP越做越好看，領(lǐng)導的審美需求被無限放大？

為了幫助大家解決移動端報表開發(fā)難題，我特地呈上超全的移動端駕駛艙教程。

移動駕駛艙開發(fā)流程如下：

?

一、開啟手機畫布

在PC端設(shè)計器中設(shè)計移動端模板，由于屏幕尺寸的較大差異，在組件布局、組件大小的設(shè)置上可能會存在很多的問題。

利用手機畫布的新功能，在設(shè)計報表之前時，將畫布切換為適應(yīng)手機尺寸，讓模板內(nèi)容在設(shè)計器上的樣式與手機上的最終效果更為接近，減少不必要的調(diào)整

打開FineReport設(shè)計器，在模板里選擇移動端屬性，設(shè)置為手機端模板，設(shè)計器會自動將畫布調(diào)整為適配4.7寸手機屏幕畫布的大小（375*560）

?

?

二、整體流式布局

C端主流APP的流布局設(shè)計同樣適用于B端的數(shù)據(jù)展現(xiàn)，雙指在屏幕上滑動的過程中獲取自己想關(guān)注的數(shù)據(jù)內(nèi)容，在整體布局的設(shè)計中，建議采用：先匯總再細分的原則

將不同時間粒度下的匯總數(shù)據(jù)優(yōu)先呈現(xiàn)出來，讓管理者一眼就能看到指標當前的進展與狀態(tài)，做到心中有數(shù)以后再向下拆解。

?

三、豐富組件

1、多維度展示

由于手機屏幕尺寸有限，如果一張模板只單純的使用流式布局，想要新增內(nèi)容就會讓模板的高度越來越高，管理者在閱讀這樣的模板時就需要耗費大量的下滑動作，我們可以針對整個模板或者在某一個組件上增加一下交互動作，讓數(shù)據(jù)更加立體化。

tab組件

將不同維度數(shù)據(jù)的內(nèi)容填充至不同的tab頁內(nèi)部，即可在一張模板內(nèi)部預(yù)覽不同維度的數(shù)據(jù)。除默認樣式外，移動端還提供4種tab樣式供選擇：上菜單式、下菜單式、滑動式、聯(lián)排式

上菜單式：

?

下菜單式：

?

滑動式：

?

聯(lián)排式：

?

單選按鈕組

當模板樣式統(tǒng)一，只需要按照不同維度過濾查看相應(yīng)的數(shù)據(jù)時，可以使用單選按鈕組控件來實現(xiàn)。

?

側(cè)邊導航

當流式布局頁面比較長時，可以有一個快速定位的懸浮窗，點擊后可以導航到本頁面的指定位置，提高交互體驗

?

圖表切換

當用戶需要很方便的在模板局部切換查看不同的組件時，可以利用圖表切換功能，可以很好地提高空間利用率和報表的美觀度。

按鈕切換：

?

自動輪播：

?

2、聯(lián)動鉆取

因為手機屏幕的限制，移動端一般不會直接展示“PC大寬表”，一般會用決策報表將所有的關(guān)鍵指標匯總展示，再通過鉆取的方式查看具體某一指標的明細數(shù)據(jù)。

展示多層級數(shù)據(jù)的同時，一定要考慮到交互動作，保證用戶在瀏覽數(shù)據(jù)的同時，具有極佳的體驗感。

移動端彈窗

彈窗形式-模板：

?

彈窗形式-文本：

?

普通鉆取

當我們需要鉆取的子報表內(nèi)容過多時，彈窗就不適用了，這時候我們需要在主報表里做一些下劃線、高亮的效果能夠提醒用戶，這里是可以鉆取的，就已經(jīng)達到目的了。主子報表的UI風格保持一致，實現(xiàn)方式同PC一致，這里就不贅述了。

3、參數(shù)應(yīng)用

無論是決策報表還是普通報表，參數(shù)在移動端應(yīng)用都較為頻繁，如何在移動端更好的應(yīng)用參數(shù)查詢？分享以下幾個技巧。

參數(shù)面板

?

四、細節(jié)優(yōu)化

如何在展示數(shù)據(jù)的同時，提升移動端模板效果呢？對于開發(fā)者來說，是一個較為困難的事情，這里提供了一些小技巧，希望能幫助大家。

1、橫幅

為了提升移動端模板的美觀性，橫幅的應(yīng)用比較常見。一般來說橫幅會放置在最上方，主要結(jié)構(gòu)分為幾種：

• 報表主標題+公司logo，提升整張報表較高的美觀程度
• 用戶名稱+公司logo，增強用戶體驗
• 報表主標題+核心指標，突出移動報表的核心指標

?

2、指標卡

移動端因屏幕大小限制，需要我們合理利用移動端的每一寸空間，同時移動端對于視覺和交互的要求會更高，如何合理展示數(shù)據(jù)呢？一句話總結(jié)：盡量避免‘大寬表’的直接展示，合理利用指標卡展示匯總數(shù)據(jù)

?

?

3、數(shù)據(jù)點綴

一般我們會選用圖表組件將數(shù)據(jù)可視化，當然，我們還可以利用報表塊的強大功能，將數(shù)據(jù)本身與顏色、進度條、增長趨勢組合起來，讓數(shù)據(jù)更具凸顯的效果。

?

4、配色

選取顏色的時候注意顏色的連貫性，整理了移動端模板的常用配色表分享給大家。

總結(jié)

以上是生活随笔為你收集整理的以前的报表都白做了！app上做可视化数据分析，这个方法太强了的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。