視覺化大屏設計

2021-09-29 13:44:49 字數 3000 閱讀 3156

參考工具

視覺化工具

圖表外掛程式

資料視覺化的本質

大屏資料視覺化是以大屏為主要展示載體的資料視覺化設計,大屏易於在觀感上給人留下震撼印象,便於營造某些獨特氛圍,打造儀式感。原本看不見的資料視覺化後,便能調動人的情緒,引發人的共鳴,傳遞企業檔案和價值。

利用面積大可展示資訊多的特點,通過關鍵資訊大屏共享的方式可方便團隊討論和決策,所以大屏也常用來做資料分析檢測使用。大屏資料視覺化目前主要有資訊展示、資料分析、監控預警三類。

常見大屏型別包括16:9屏、超寬屏、摺疊屏、三面屏、t字屏...

拼接大屏

大屏幾乎都是拼接屏,ui設計時不用考慮螢幕縫隙影響內容的呈現,內容不會丟失,但有可能影響視覺的表現。所以設計時可建立縫隙位置的參考線避免類似情況發生。現在企業常用的無縫隙、1.7mm縫隙、3.5mm縫隙三種拼接大屏,縫隙越小**越貴。

顯示特點

螢幕尺寸

例如:尺寸 (10500mm + 24000mm + 10500mm) x 6000mm,畫素點6144x1024,ppi為45。

螢幕尺寸

例如:3x5大屏

3x5大屏

螢幕解析度

大屏系統內在原理

一般情況下設計稿的解析度多為1920 x 1080,同時需要要理解四個概念:

最佳展示效果

資料墨水比例原則

定義表現資料的墨水在列印圖表的總墨水的佔比,在合理的基礎上,使資料墨水比例最大化並去除非資料墨水和多餘的資料墨水。 --- 設計師愛德華 r 塔夫特 《量化資訊的視覺表現》

資料墨水比例原則表達的核心思想使簡潔,圖表要簡潔,資料要簡潔。大屏視覺化是針對客戶場景,理解資料複雜性的基礎上,通過視覺化手段,形成高度提煉的故事。

資料視覺化通俗說就是用圖表講故事,人們關心的從來不是資料,資料不是重點,它只是達到目的的手段,人們關心的資料背後的意義。

在一部完成作品所體現的全部創作努力中,作家75%以上的勞動都用在了故事設計上。 ---《故事》

調研

設計流程

關鍵指標是一些概括性詞語,是對一組或一系列資料的統稱。一般而言乙個指標在大屏上獨佔一塊區域,通過關鍵指標定義,就直到大屏上大概會顯示哪些以及大屏會被分為幾塊。確定關鍵指標後,根據業務需求擬定出各個指標展示的優先順序(主、次、輔)。

指標布局

大屏一定是以展示資料為核心,任何炫酷表現都要建立在不影響資料的有效展示上。乙個大屏一定會有明確的主題,推薦實用多維度拆解北極星指標法。

首先確定乙個北極星指標,即主題。

多維度拆解北極星指標,從時間 、地理、計畫、佔比等維度拆解主題。

視覺表現

資料設計

功能性結構層次

確定設計稿尺寸後需要對頁面布局和劃分,對於資料的排布劃分原則:主次分明、條理清晰、注意留白。根據業務需求抽取關鍵性的指標,按照重要程度可分為主、次、輔。

主次輔

布局的目的是為了讓業務指標和資料合理地展現,展現全域性業務一般分為主要指標和次要指標兩個層次,主要指標反映核心業務,次要指標用於進一步闡述分析。推薦主次分布版式,讓資訊一目了然,也可以實用平均分布,或二者結合。

例如:監控大屏由於監控數量龐大,常常被劃分為總屏和分屏,總屏多用於展示事件狀態趨勢、風險預警、風險處理進度。分屏則多用於展示詳細的資料分析和風險事件的處理。如何排布資料需要緊密結合業務需求和使用者體驗。

布局排版

大屏排版布局上需要遵循四大原則(crap)

四大原則

視覺化大屏的配色是視覺呈現的重要組成要素,配色常與行業型別、業務形態、應用場景、設計理念、營造氛圍等密切相關。

色彩搭配的原則

配色

例如:背景:#0febff

點綴:#53efc0

點綴:#fd6760

點綴:適當給元素標題、數字新增諸如邊框、圖畫等在內得點綴效果,能幫助提公升整體的美觀度。

視覺化資料的字型有哪些考慮呢?

規範設計:字型規範、色彩使用、介面元素、圖形圖示、介面全覽

字型不小於12號,可用於圖表標註,資料資訊建議14號以上。字型不一定只用一種,可實用科技感強的字型。

資料視覺化處理的流程是:資料採集 - 資料清理 - 資料分析 - 視覺化資料

資訊展示

資訊圖

折線圖用於表示資料的變化和趨勢,座標軸的不同對折線的變化幅度有很大影響。折線上下大概佔2/3的位置資料表現清晰合理。

折線圖線條粗細合理,過細的折線會降低資料表現,過粗的折線會損失折線中的資料波動細節,視覺上較難精確找到折現點的相應數值。推薦使用兩個畫素的線,看起來會比較合適。

視覺化大屏製作過程 資料視覺化大屏製作的注意事項?

大資料視覺化是以大屏為主要載體的資料視覺化展現。大屏資料視覺化最大的特點就在於讓使用者最直觀地感受複雜的資料,並且通過各種影象 圖形來有效地表達出想要的效果。大屏資料視覺化是以大資料的發展為前提的,而資料視覺化技術又反過來作用於大資料的發展。在一些大型企業中,大多數企業都會選擇大螢幕資料視覺化作為宣...

優秀商業視覺化大屏(BI)設計演示

關於bi商業智慧型 商業智慧型 business intelligence 是指利用現代資料倉儲技術 線上分析處理技術 資料探勘和資料展現技術進行資料分析以實現商業價值。提到商業智慧型 這一概念,人們普遍認為是迦納特機構 gartner group 在1996年第一次提出來的,但事實上ibm的研究員...

大屏資料視覺化的設計流程是什麼(二)

大屏資料視覺化的第乙個步驟和第二個步驟我們給大家介紹過了。不過關於大屏資料視覺化中的內容還不止這些。今天在這篇文章中我們會繼續為大家介紹大屏資料視覺化的相關知識,希望這篇文章能夠幫助大家理解資料視覺化的知識以及學會做大屏資料視覺化。大屏資料視覺化的第三個步驟就是選定視覺化圖表型別。通常來說,當確定好...