大屏數據可視化設計

隨着大數據時代的來臨,大數據可視化大屏展示被更多的企業青睞。

什麼是大屏數據可視化?
大屏易在觀感上給人留下震撼印象,便於營造某些獨特氛圍、打造儀式感。原本看不見的數據可視化後,便能調動人的情緒、引發人的共鳴,傳遞企業文化和價值。

大屏數據可視化目前主要有信息展示、數據分析及監控預警三大類。

核心原則:設計大屏一樣要謹記要以展示數據爲核心,在任何炫酷屌炸天表現都要建立在不影響數據的有效展示上!

大屏基本知識

  1. 拼接大屏
    大屏幾乎都是拼接屏,現在企業常用的有無縫隙、1.7mm縫隙、3.5mm縫隙三種拼接大屏,縫隙越小越貴。
    UI設計時不用考慮屏幕縫隙影響內容的呈現,內容不會丟失,但有可能影響視覺的表現,例如一個很大的人物圖像被縫隙正中“劈成”兩半,或者“劈中”了眼睛,看起來很不舒服。所以設計時可以建立縫隙位置的參考線避免類似情況發生。
  2. 設計尺寸
    拼接的每塊小屏一般是16:9的高清屏,設計尺寸可以把上下高度設定爲1080px,長度按照拼接屏的數量比例得出長度的設計尺寸。



    設計的風格,背景色一般用深色調,深色調緊張感強,讓視覺更好的聚焦,大屏暗色調看上去更柔和舒服不刺眼,也會較省電。

大屏設計跟網頁不一樣,頁面不能有滾動條,大屏的長寬都是固定的。

字號跟網頁設計一樣不小於12號字,可以用於圖表的標註,數據信息建議14號字以上,大屏觀者遠距離才能看全內容,所以字號可以稍大一點。字體不一定只用一種,可以用到一些科技感強的字體,這裏要注意,記得把字體給開發一份。

設計完成先去大屏上看一下效果,大屏的品質不一樣色調也會有很大的差別,要根據自家的大屏呈現效果做調整。

  1. 大屏系統示意圖


一般情況下設計稿的分辨率就是電腦的分辨率,當有多個信號源時,有時會通過顯卡自定義電腦屏幕分辨率,從而使電腦顯示分辨率不等於其物理分辨率,此時,對應設計稿的分辨率也就變成了設置後的分辨率。
此外,當被投電腦分辨率長寬比與大屏物理長寬比不一致時(單信號源),也會對被投電腦屏幕分辨率做自定義調整,這種情況設計稿分辨率也會發生變化。所以設計開始前瞭解物理大屏長寬比很重要。

大屏顯示的一些特點:

  1. 面積巨大——用戶站遠才能看全內容(所以字也不能設計很小)
  2. 深色背景——緊張感強,讓視覺更好的聚焦,省電
  3. 不可操作——大屏主要用來給來用戶看的。用戶一般不會直接操作大屏
  4. 空間侷限——大屏不像網頁有滾動條,它的長寬都是固定的
  5. 單獨主題——每塊大屏都有具體想給用戶表達某個主題

設計時注意點

  1. 展示的正常數據是多少,歷史上極限數據是多少?
  2. 數據的實時,動效的變化
  3. 新穎的圖表,新穎的動效
  4. 數據豐富,豐富層次感,圖表類型多,強烈的空間感
  5. 常規數據表現元素:地圖,top10,餅圖,列表,數字,趨勢等

需求分析,數據挖掘

  1. 拆分維度——將需求拆分到最小維度
  2. 確定優先——選擇最佳數據來說明觀點
  3. 合併維度——對維度元素進行歸類,化繁爲簡
  4. 最佳表現——確定用哪種表現形式來體現數據

佈局排版

參考:



說明:(設計的幾個步驟)

  1. UI設計時先估算使用幾個屏幕(例如4*3)
  2. 規劃使用幾個窗口(說明:一個窗口可以在一個屏或鄰近的多屏一起展示;窗口的展示方向可手動控制位置、大小)
  3. 每個窗口獨立進行設計,最終實現組合在一起
  4. 再製作一個頁面,將圖組合在一起看效果(由於一般企業無大屏直接測試)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章