移動端專屬的布局與配色解決方案來啦！！！

我們的方案收集了實際客戶各個業務場景下的報表，專門由Finereport動態報表與BI商業智慧軟體UE進行美化。
並且提供多套配色風格及排版樣式以及對應的實際模板，並且對移動報表如何突出資料視覺化的功能、如何考慮布局排版、如何提高使用體驗以及一些常用的設置進行了說明。
需要者可以根據實際業務需要，借鑒該方案中樣式及布局，或從中啟發思路，來實現自己好看的報表。
想想是不是有點小激動呢？下面趕緊來看內容吧！

方案效果图及介绍：
方案采用同一套Demo，由UE设计了经典、清新、商务3种配色风格，效果如下。ps.论坛展示有限哦，大家可以戳底部下载高清截图以及相应的工程包

经典系列为典型的商务蓝色风格，庄重但不失美观，沉稳精致。

清新系列活潑明亮，偏向於扁平化，充滿熱情。

金屬商務系列高端大氣，精緻美觀。

方案說明：

1、調色表
1.1 沒有難看的顏色，只有不協調的配色，利用進階色表，來進行色彩搭配吧，我們每個人都可以成為視覺設計師

在進階色表中，按照固定規則提取顏色，來應用到自己的Finereport動態報表與BI
商業智慧工具中或者圖表中，就能生成色彩協調的視覺效果
例如可以橫向依次選取同一色系的顏色：

也可以縱向依次選取顏色：

或者對角線選取顏色，或者跳格取色，按照特定規律提取顏色然後組合，就可以得到良好的顏色效果，選取顏色的時候注意顏色的連貫性

1.2 也可以取下方常用顏色表中的顏色進行組合

2、怎樣才能做出調理清晰的報表？

一般情況下，我們製作的報表不會簡單的只有一個表格或者一個圖表，而是包含了很豐富的內容，很多的組件組合而來，這個時候怎樣才能讓我們做出來的報表更加具有條理性呢？
關鍵是需要對我們報表裡面的內容按照類別或者模塊來進行劃分，合理的布局，每個模塊通過明顯的標題或者分割來進行區分
就像下圖偏深色短／長條標題劃分，是最常用的一種形式：

採用深色短線或者其他圖標來分割內容也是不錯的選擇：

側邊欄的顏色塊也可以起到很好的分塊作用，或者是通過顏色的漸變來區分：

淺色分割條，會讓你的報表看起來很清爽：

相同模塊的小類別之間也可以用一個淺色的橫線來分割，來加強報表的可閱讀性：

3、明細資料轉為卡片顯示

明細表如果列數比較多，條數不是很多的時候，可以轉換成相同格式的卡片顯示，在手機上面的效果更好，可讀性更強

4、避免多層次鑽取與返回，試著盡量放在一個報表內部進行切換

鑽取層數如果過多的話，看報表的人的操作體驗就會下降很多，因為不知道現在自己已經下鑽到哪一層，以及如何返回到第一層
因此在報表製作的時候，可以多用tab的形式來將多個報表放在一個頁面裡面來實現，這樣實用性更強
現在移動端還不支持tab組件，可以採用表格的超級鏈接>動態參數來實現，等移動端實現了tab組件，就會更加方便了

5、學會弱化顯示

一張報表中的資料有很多，製作的報表需要有主次概念，視覺上有一定的層次感，先看什麼、後看什麼，根據先後順序，我們需要對顯示的內容進行加粗、加深或者是淡化
不要所有的文字都用相同的格式，要敢於將資料進行弱化顯示
例如下面的模板，不通的字體顏色給我們帶來的視覺層次感

6、適當的視覺衝擊會突出的異常的資料

分析類的報表最重的目的就是要找出資料所呈現出來的異常從而讓我們去找出問題與結論，例如同期比下降了，銷售額沒有達到目標，針對這些資料結果，我們需要重點突出出來，以便之後的數據分析。
這個時候採用整體顏色背景，給我們帶來的視覺衝擊會更強烈

方案資源下載：

手機報表配色與布局解決方案完整資源（包含案例工程，比較大，請到雲盤下載：https://pan.baidu.com/s/1c2pAca0 提取碼為 avkq）

我們後續還會陸續推送其他的移動端專屬解決方案，偷偷透露一下，有行程管理啦，掃碼查詢啦，物流配送啦，之類之類的
我們的靈感來自所有客戶們的偉大創意，所以呢，還希望各位番薯給我們多提建議，共同優化，互利共贏！！

喜歡這篇文章嗎？歡迎分享按讚，給予我們支持和鼓勵！