資料視覺化設計的小白高階進階攻略
什麼是資料視覺化
資料視覺化是利用各類圖表及圖形化的設計手段將複雜不直觀的資料有邏輯的呈現出來,而資料視覺化工具就是生成這種呈現的軟體。資料視覺化為使用者提供了互動式探索和分析資料的直觀手段,使他們能夠有效地識別有趣的模式、推斷相關性和因果關係,從而指導經營決策,挖掘資料背後的商業價值。
資料視覺化的使用場景
視覺化應用非常廣泛,比如ToC、ToB、ToG等業務都會有,之前所看到的各種圖表僅以為是單純的資料統計,其不然它也是一種視覺化的展示方式。現階段更多的理解資料視覺化是大屏展示。多螢幕拼接,展示諸多資料和圖表,效果一定是酷炫各種特效視覺於一身的才稱之為資料視覺化,其實這只是其中一種視覺化的表現方式。下面基於應用場景的不同,對視覺化區分介紹。
PC端視覺化
此類以使用為主,主要在電腦上操作的pc端視覺化,使用者對它需長時間使用,例如企業資料包表分析,各類BI等。在此類場景下,簡潔高效的傳達資料內容是非常必要的,更多的是資料分析師及業務部門在使用,他們需要長時間停留在螢幕及資料上做分析統計比對等工作,精準傳達資料的同時也減少眼睛的過度疲勞,利於使用者長時間舒適閱讀,所以這類場景下以簡潔為主。
視覺化大屏
這類是以觀看為主,並以快速傳達核心資料資訊的應用場景。此類場景多應用於指揮大廳、科技展館、數字展廳等,他的特點是多螢幕拼接,展示面積大、資料型別多,展現形式多元化,業內也稱之為資料視覺化大屏。總之其主要就是核心資料透過視覺及動畫的表現手法直觀的輸出給使用者,同時這對於資料資訊的視覺傳達要求比較高。此類應用場景也是問題比較多的,會關係到效果定位、資料資訊傳達、表現方式、軟硬體結合等諸多情況。
大屏視覺化設計方法
準確把握業務需求
設計終歸是助力業務的,準確的理解業務需求是至關重要的,它將貫穿整個設計的始終,也是視覺化設計開始的必要前提。如何解決使用者的問題,完成既定目標,都需要設計師對需求有一個比較準確的理解。直接有效的方法就是“溝通協作”。
圖形化的方法選擇
需求及資料確定後,接下來是資料圖形化的選擇,不同的目標不同的資料對於圖表展示的選擇也是有講究的,如:部分佔總體的比例(佔比)更適合選用餅圖、用來反映時間變化趨勢的圖形化更適合曲線圖等等,總之不同的資料展示維度,選擇的圖表是有差異的。同樣一組資料,存在多個圖表同可展示,怎樣選擇最恰當的圖表是至關重要的,合適有效的圖表有助於資訊有效的傳達。遇到具體的資料要根據資料的維度,和要表達的業務目標,選擇一種最佳的圖表呈現。
這是視覺化圖表選擇比較確切的一個方法,可以作為資料視覺化圖表的選擇依據,有助於準確快速的把資料圖形化。
首先根據業務目標結合資料維度確定大的關係(比較、分部、構成、聯絡),隨後選擇合適的圖表,填充資料設計排版即可。到這一步圖表基本成型,但是比較基礎,為了視覺效果和資料的傳達,也會在此基礎上進行最佳化設計。
設計尺寸的確定
視覺化大屏一般都是多屏拼接或者LED\LCD等材質螢幕。不同的螢幕顯示畫素、物理畫素都不同,例如同樣是3*2的拼接屏,輸出畫素可以是X1*Y1也可以是X2*Y2。這就造成了很多潛在問題,設計之初螢幕硬體及拼接方式需要提前確定。基本有兩個方法,簡單的說,方法一、拼接屏可以按照拼接後的橫縱畫素總和設計(拼接屏畫素超大可等比例縮放)。LED/LCD螢幕設計也是同樣的原理。方法二、按照硬體輸出畫素設計,硬體裝置的輸出畫素一定是和整個拼接屏成比例或者是吻合的。所以按照輸出畫素設計是可以的。
頁面設計及佈局
螢幕的拼接方式及螢幕材質確定後,就可以進行頁面的設計及佈局,頁面的佈局主要是根據業務及資料的重要程度來設計,通常會把核心的資料要點放在中間,一方面中間是視覺中心,二來也是最容易傳達給觀眾的核心位置。其他的資料放兩側,排列資料一定要考慮資料的關聯性及聯動性,應該有意識的把相關資料放在一起,當一組資料變化時聯動效果更凸顯,容易傳達資料的價值。如果是拼接屏,切記在設計時讓資料避開拼接縫,頁面佈局時就要考慮螢幕拼接方式,儘量把資料有序的展示在螢幕內,合理避開拼接縫減少對使用者觀感的影響。
設計風格的確定
風格的確定也是至關重要的,首先應該確定應用場景,要充分考慮室內、室外、光照、燈光、硬體等因素。設計是相通的,可用UI的方式來定義視覺化設計風格,AB測試、情緒版等等。差異比較大的一點是應用場景的環境。
硬體裝置的校對
當風格頁確定後先別急於後面的頁面設計,如果有可能的話,此時最好拿設計圖去現場實地測試。確定現場硬體是否存在偏色問題、文字大小在合適的觀看距離是否清晰可見、現場燈光光照等是否對設計有影響、拼接縫和資料是否有穿插、硬體裝置輸出是否和設計匹配等等。確認無誤後在開展後面的頁面設計工作。
是一個免費的線上資料視覺化平臺工具,基於Echarts開源API研發的資料圖表視覺化介面開發工具,內建了各行業豐富的元件模板,無需編碼只需透過滑鼠拖拽控制元件就能設計出精美的圖表視覺化web頁面,同時可以方便的與後端資料進行繫結,實現資料驅動頁面的變化,實現炫酷的圖表展示。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70014953/viewspace-2905587/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 資料視覺化高階技巧——以哈伯曼癌症生存資料為例視覺化
- Rust 程式設計視訊教程(進階)——027_1 高階特性Rust程式設計
- 視覺化資料的目的化設計視覺化
- Rust 程式設計視訊教程(進階)——027_2 高階特性 2Rust程式設計
- Rust 程式設計視訊教程(進階)——027_3 高階特性 3Rust程式設計
- shell程式設計,實戰高階進階教學程式設計
- 【譯】Effective TensorFlow Chapter9——使用Python ops進行核心設計和高階視覺化APTPython視覺化
- CSS高階進階CSS
- Core Animation 高階技巧(四)視覺效果視覺
- 如何設定Unity高清渲染管線製作高階視覺化內容Unity視覺化
- Rust 程式設計視訊教程(進階)——026_1 高階 trait1Rust程式設計AI
- Rust 程式設計視訊教程(進階)——026_2 高階 trait2Rust程式設計AI
- Rust 程式設計視訊教程(進階)——026_3 高階 trait3Rust程式設計AI
- Rust 程式設計視訊教程(進階)——026_4 高階 trait4Rust程式設計AI
- 高階前端進階(五)前端
- 高階前端進階(七)前端
- 高階前端進階(三)前端
- 程式設計師進階攻略-胡峰-極客時間程式設計師
- Rust 程式設計影片教程(進階)——027_1 高階特性Rust程式設計
- 資料視覺化--實驗五:高維非空間資料視覺化視覺化
- 領取JAVA高階架構進階技術視訊,書籍,自媒體運營攻略技術......Java架構
- Java小白進階筆記(5)-進階物件導向Java筆記物件
- Typescript 高階語法進階TypeScript
- React 進階(三) 高階元件React元件
- 高階前端進階系列 - webview前端WebView
- 小白的資料進階之路(上)——從Shell指令碼到MapReduce指令碼
- 高階前端的進階——CSS之flex前端CSSFlex
- 《MySQL 進階篇》十六:資料庫的設計規範MySql資料庫
- 資料視覺化設計的25個小技巧視覺化
- Rust 程式設計影片教程(進階)——027_2 高階特性 2Rust程式設計
- Rust 程式設計影片教程(進階)——027_3 高階特性 3Rust程式設計
- (在模仿中精進資料視覺化03)OD資料的特殊視覺化方式視覺化
- 資訊圖系列文章(四):資料視覺化及資訊視覺化的設計資源視覺化
- 大資料視覺化的新進展大資料視覺化
- Git小白到老鳥的進階之路Git
- 低階程式設計師和高階程式設計師的區別程式設計師
- Python Django進階教程(一)(高階檢視和URL配置)PythonDjango
- Pytest高階進階之Fixture