• 1.描述
• 2.準備工作
• 3.布局排版
• 4.色彩
• 5.點綴
• 6.動效
• 7.小結

1.描述編輯

?

大屏看起來很炫，那么制作會不會很麻煩呢？下面給大家演示一下一張下面這張大屏模板的制作步驟。

?

2.準備工作編輯

?

確認需求、準備數據、整理素材。這里假定需求已由業務部敲定，數據IT部也整理好了，而需要的背景圖片、邊框等事先都整理完畢。

設計大屏駕駛艙遵循四個基本步驟：
布局排版 ——色彩 —— 點綴效果 ——動畫。

?

3.布局排版編輯

?

業務部門的需求，是要重點展現集團銷售總額數據以及各地區的數據，其他次要內容包括歷年銷售對比、各產品線銷售、熱門產品、實時交易、新老客戶占比等。我們從常見的幾種主次分布排版樣式里挑選了一種作為此次的版面，如下圖所示：

由于集團業務遍布全國，所以區域銷售數據我們認為用地圖展示比較直觀，而全國的總銷售額這一數字疊加在地圖上進行展示。另外，對比類的數據適合用柱形圖，占比類的數據適合用餅圖，交易明細數據適合用表格。這樣，我們就確定了布局里的幾個主要元素：地圖、數字、柱形圖、餅圖、表格。 由于這里報表塊使用了重疊的功能，因此需要使用絕對布局，如下圖：


打開?FineReport?設計器，按照布局樣式，從組件欄拖入對應的圖表元素到指定區域并綁定數據，如下圖所示：


點擊預覽按鈕，瀏覽器端的效果如下圖所示。到這里第一版效果就出來了，主次排版讓界面看上去很規范，但配色沒有經過改良所以效果一般。

4.色彩編輯

在上次帖子里，我們總結過，大屏的主體背景建議用深色系，這樣可以有效避免視覺刺激。如此，我們把第一版demo背景換成背景圖片，由于整體背景是深色的，使得我們的一些標題文字還看上去不明顯，而且圖表有種沉悶的感覺，稍微調整了下，把文字內容改成淺色、圖表則換稍微明亮一點的顏色，如下圖：

5.點綴編輯

? 接下來為各個組件、標題添加一些邊框來提升細節處的觀感。 ? 1）首先是頂部大標題，在大標題兩側各拖入一個報表塊，為報表塊添加背景圖片，左右對稱線條極大提升美感。 2）其次是改造各個組件的小標題，方直接為小標題所在的報表塊組件添加合適的背景。 3）給各個組件添加邊框元素，最后得到效果如下：

6.動效編輯

? 由于大屏本身場景特殊，純粹靜態展示讓人感覺大屏缺乏活力。為此，給demo加上一些動畫效果，提升一下demo的活力及視覺觀感。
1）首先我們來為銷售總額設置數據監控（需要安裝決策報表里報表塊刷新插件），讓其每隔1秒獲取最新數據，這樣銷售總額數字會實時動態變化，設置如下圖：


效果如下圖：
2）再給圖表添加閃爍動畫，設置如下圖：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 效果如下圖：
3）給地圖添加一個數據監控，讓各區域變化的數據在地圖上自動顯示數據點提示，設置如下圖：


效果如下圖：


4）右下角的明細數據展示，改成滾動輪播的形式，詳細操作方法點擊JS實現跑馬燈效果 效果如下圖：

直到這里就大屏制作就完成了！

7.小結編輯

按照套路做大屏駕駛艙，很容易做出漂亮的效果呢！ 其實在第四步動效步驟，還可以加入更多交互效果，比如地圖鉆取，點擊某個省份穿透到市級地圖；或者比如聯動，點擊左上角的區域排名柱形圖，則產品類別占比餅圖聯動顯示具體省份的數據。

總結

以上是生活随笔為你收集整理的大屏模板制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。