大屏介紹

目錄:

• 1. 描述
• 2. 布局排版
• 3. 配色
• 4. 點綴
• 5. 動效

1. 描述編輯

 

帆軟為企業提供數字大屏解決方案，通過帆軟的數據分析產品，用戶可以構建強大、全面的“管理駕駛艙”，無需專門設計，就可以將企業的數據管理信息完美地投放在任何屏幕，比如交易大廳、管控中心、生產車間、展覽中心等地的LED大屏上。

可以實現完美的自適應效果，對於大屏實時監控的信息，比如股價，雙11類活動實時交易狀況，都可以通過圖表屬性的自動刷新功能實時同步數據庫數據。

也支持用戶對於大屏的展現內容進行DIY的設計，持接近20種圖表類型和延伸的多種圖表樣式，支持添加文本、圖片、Web信息實現各種DIY的布局樣式。

那么該如何制作一個好看又能體現功能的大屏呢？

 

2. 布局排版編輯

 

首先要遵循一個基准：不要為了做大屏而做大屏，不要為了展現而展現。就是說要明確大屏展現的目的，首要是服務於業務的。要讓業務內容、數據合理的展現，就要避免誤入瘋狂堆砌指標，要分清主次。

主要指標：反應核心業務內容的。

次要指標：用於進一步闡述主要指標的。

下面推薦幾種常用的布局：

上面幾個布局，只是通常推薦的主次分布布局，能讓信息一目了然。實際項目中，不一定使用主次分布，也可以使用平均分布，或者可以二者結合進行適當調整。

比如下圖所示，指標很多很多，存在多個層級的，就根據上面所說的基本原則進行一些微調：

附上幾個典型的主次分布布局的大屏效果圖：

3. 配色編輯

 

合理的布局能讓業務內容更富有層次，合理的配色能讓觀看者更舒適。

這里講解一下背景色，背景色又分為整體背景以及單個元素的背景，無論是哪一個，都遵從兩點基本原則：深色調&一致性。

一般大屏會選擇深色系，主要是為了避免視覺刺激。淺色系的，投放到大屏上后會比較刺眼。

下圖以兩個駕駛艙頁面深淺色對比來做說明：

整體背景深色系，一般還是以深藍色系為主，如下所示是幾個推薦的配色方案。

背景不一定要用顏色的，也可以用圖片。圖片的使用依舊遵從整體深色的原則，同時搭配其他一些現實特性可以讓整體看着更有科技感。推薦使用一些帶有星空、條紋、漸變線、點綴效果之類的圖片。

單個元素的背景，首先是要和整體背景色系保持一致性，避免突兀。另外一個小技巧，就是透明度的使用。推薦為單個的組件元素搭配一些透明色，透明度設置在10%上下為宜，具體以實際效果微調。如下模板，組件增加透明效果后，整體效果有質的提升。

 

4. 點綴編輯

 

在大屏展現上，細節也會極大的影響整體效果，通過適當給元素、標題、數字等添加一些諸如邊框、圖畫等在內的點綴效果，能幫助提升整體美觀度。

如下圖所示銷售駕駛艙大屏，頂部的標題通過左右兩個對稱線條進行點綴，各個組件的細分標題通過不規則漸變色圖片進行點綴，另外每個組件都搭配使用了簡潔的邊框以提升層次感。

比如下面圖所示大屏，給組件及其標題增加一些不規則的漸變色邊框，讓整體看上去更富有科技感。

如下圖所示的航空大屏，給元素增加一些飛機圖標、圖畫之類的擬物效果，讓大屏更真實生動。

5. 動效編輯

動效的范圍很廣，可以從很多角度解讀，比如背景動畫，比如刷新的加載動畫，比如輪播動畫，比如圖表的閃爍動畫，地圖的流向動畫等等，都屬於動態效果的范疇。

動效的增加能讓大屏看上去是活的，增加觀感體驗。但過分的動效極其容易喧賓奪主，讓觀看者的眼球不知道往哪里聚焦，反而喪失了業務展現價值。這個度很難把握，既要平衡酷炫效果，又要突出內容。

如下圖所示銷售大屏，核心指標車輛總價值以數字顯示，通過FineReport 的數據監控功能，動態刷新數值。

再如下圖所示IT運維大屏，中間地圖上模擬的呼吸動畫，底部的滾動消息等。

 

 

如下圖所示金融大屏的輪播動畫，借助輪播效果，來實現同一個位置滾動播放不同的指標內容，避免平鋪展開所有指標把大屏界面擠滿。

再比如這個銷售駕駛艙，通過邊框動畫、地圖流向動畫，來增加大屏展示的整體活力。