圖撲這樣設計高質量可視化大屏

5 大指南塑造高階可視化

5 Guidelines to Shape Advanced Visualization

·可視化是個友好的媒介·

·理解數據是成爲優秀媒介的關鍵·

·業務驅動下的設計策略·

·圖撲設計的無限可能·

·創新思維讓可視化更具價值·

 

可視化是個友好的媒介

我們正處於一個數據氾濫的時代,隨處可見數據的身影,更知其不可忽視的重要性。企業運營產生的海量數據,若僅停留在零散、枯燥難以整合的表面數據上,極易忽略其關鍵洞察。既難激起查閱興趣,又不易高效利用,造成數據流失。

生物學提到大腦處理的信息中有 90% 是圖像形式的,而 65% 的人主要通過視覺學習,人們對圖像的記憶遠超文字,高出 6 倍。

優秀的數據可視化不僅是表達數據的有效手段,還能揭示不易察覺的盲點。通過趨勢、模式和離羣值來了解自己以及身處的世界,直觀展現所需信息。

在圖撲軟件自研 HT for Web 產品技術應用相當純熟的今天,所搭建的可視化大屏上生動的動畫效果、豐富的色彩運用以及數字孿生與物聯網的融合應用,俘獲了各行各業用戶的眼球。不僅爲其帶來視覺上的震撼,更通過其“可視、可交流、可互動”的特性,爲企業生產運營中及時監測數據分析預警保駕護航。同時,還有效傳遞了企業的獨特文化和價值觀,深化了品牌形象。

作爲圖撲人,我們專注核⼼產品,精心打磨自研 HT 可視化設計工具。所擁有的產品是基於 Web 的平臺,更適合 C/S 向 B/S 轉型的大趨勢,多元素豐富的可視化組件和支持快捷的數據綁定方式,可以用於快速創建和部署。爲各類工業場景提供2D&3D 可視化、工業組態多種清晰美觀的可視化數據藝術佳作。

 

理解數據是成爲優秀媒介的關鍵

“橫看成嶺側成峯”,同一個指標的數據,從不同的維度分析就會有不同的結果。而且我們接觸形形色色的數字孿生領域:電力能源、軌道交通、園區樓宇、電信機房、智慧礦山、智慧水務、航空航天等工業自動化 ( HMI / SCADA / MMI 組態) 領域。其數據本身遠比看到的要複雜的多。所以,我們收到數據之後如何處理好數據,成爲了至關重要的第一步。

越理解數據,越能更好地傳達我們的研究成果。首先,我們的項目經理會和客戶對接項目需求,深入理解數據的含義,在處理每條數據時考慮四個問題:

-“我們擁有了什麼數據?”

-“關於數據我想從中瞭解什麼?”

-“應該使用哪種可視化方式?”

-“這種可視化當中看到了什麼?有意義嗎?”

設備運行動畫

每個問題的答案依賴於前一個問題的解答,繼而形成一個迭代過程。在多次迭代中,我們分析原始數據,篩選加工數據,將指標數據轉化爲幾何數據,最終將其繪製爲圖像數據。

圖像數據可分爲:分類數據可視化(分類帶來的結構化數據指標統計)、時序數據可視化(隨時間推移數據的變化統計)、空間數據可視化(具有層次結構的空間數據,以不同粒度進行研究統計)、仿真數字孿生(三維仿真工業物聯網)。

把數據大致分類後,腦海中就有了大致展示形式雛形:哪些數據作爲三維展示;哪些數據做成二維圖表;哪部分數據做成組態圖展示;哪些需要搭建數字孿生場景。接下來,我們便會根據業務場景抽取關鍵指標。

一般對業務指標會進行“主次輔”定義分類。由於大屏承載數據多,爲避免觀者迷失,大屏信息呈現應有焦點與主次之分。可通過對比,先把核心數據拋給用戶,待用戶理解大屏主要內容與展示邏輯後,再逐級瀏覽二級,三級內容。收集整理業務指標數據,對數據收集困難或質量不合格的業務指標進行替換或增加備選指標。整理歸納之後,我們的界面佈局也隨之清晰明瞭。

大屏佈局之後,我們將精確三維模型的建模內容,以及二維圖表的圖表類型。可視化不是工具,我們圖撲卻有自研工具去成就它的美——在圖表類型上,圖撲 HT 產品擁有完善的自研圖表組件庫、UI 庫,可以低代碼快速、選擇、對比、搭建出有動效可接數據的圖表。

截至當前,大屏的原型圖已經出爐。根據整理好的業務指標來佈局展示圖表,體現主次之分-關聯關係-提高傳遞效率-然後進行彙報交流和客戶確認。與客戶彙報主要確認業務指標是否合理,數據是否可收集可使用,記錄客戶對業務指標的修改意見,並深層次理解客戶想要的風格樣式,爲下一步設計工作奠定基礎。

 

業務驅動下的設計策略

原型圖確認之後,將開始設計層的工作。在設計方面,最初應站在觀衆的視角審視整個大屏。

獲取大屏尺寸分辨率後,根據人眼可視區域:水平角 60-120 度,垂直角 45-60 度,規劃設計元素視覺中心的主次,規劃大屏圖形的分佈構成,和色彩主次的分佈。

接下來將與客戶確認大屏幕的可視化設計風格,主要以滿足觀衆需求爲核心。由於各行業面對對象各不相同,其審美觀念以及個性化情感偏好大相徑庭,對風格有着不同的期待。因此,在設計過程中,我們遵循三個基本原則:

  1. 若客戶有明確風格偏好,我們將以客戶喜好爲中心。
  2. 若客戶有獨特品牌標識(VI)的客戶,我們將基於品牌 VI 進行設計。畢竟,大屏可視化不僅是單純的監測分析數據,也是展現企業產品、品牌和文化的窗口。若無品牌 VI,我們以品牌文化進行靈活定製,有效傳遞公司的品牌形象和價值觀,全面展示其發展理念、運營和管理能力。
  3. 若客戶沒有明確風格和獨特品牌文化需要展示,可採用圖撲 HT 定義 Web 頁面設計風格常用的方法,對業務指標進行情緒化設計。這種方法也是目前比較科學高效的風格定義手段,更具有說服力。

在檢索多樣化風格圖片時,圖撲 HT 產品內也提供着豐富的 Demo 庫,作爲風格參考。或引入人工智能 HT AIGC,以提供無限的風格圖片源,確保找到適配的需求款式。

在風格選定期間,圖撲軟件的專業設計師也會基於行業經驗對客戶進行風格引導,推薦合適的大屏風格,圖撲軟件可實現多樣化可視化大屏風格,如科幻感、賽博朋克、極簡主義、寫實主義、中國風、工業風、Low Poly 風格等。在顏色搭配上,傾向使用對比鮮明的配色方案,讓大屏總體明亮乾淨、得體大方。在避免視覺疲勞的同時,還能以突出內容,確保易於辨識。

智慧工廠 - 科技風
飛機引擎 - 寫實風
LNG 天然氣 - 工業風
智慧儲能 - 科幻風
飛機駕駛艙 - 賽博朋克風
智慧農墾 - Low Poly 風

 

圖撲設計的無限可能

大屏的業務、原型圖、佈局、圖表類型、風格等都確定後,就是設計師操刀的時刻。作家用詞彙描述其筆下的世界以及人物間的互動,使讀者從詞彙中建立起點與點之間的聯繫並理解作者想要描述的東西,這就是詞彙的意義所在。對於設計師來說,我們使用的是視覺線索編碼數據,我們通過繪製形狀填充顏色繪畫來描述清楚數據,畫出可讀性強的數據圖。接下來,來透漏一些關於圖撲設計師的設計小技巧。

視覺暗示手法,潛意識層面引導觀衆

圖形本身可以通過構成來建立一些視覺語言。如波點的傾斜上升會讓人想到增長,曲線的波動會讓人想到頻率,方塊的排列會讓人想到面積空間... 這些都屬於模式和視覺暗示。

數據橋接圖形與現實,圖形的易讀性至關重要。我們通過比較數據、思考其背景和含義,並精心構築形狀、色彩與空間佈局,以增強圖表的清晰度。

建立視覺層次

人眼在捕捉圖像時,會下意識趨向於識別引人注目的東西,比如鮮豔色彩、較大物體、高光註釋……進而形成視覺層次。它包含多個維度:空間感、虛實對比、色彩差異、排版密度等。設計師巧妙構建視覺層次,能夠爲觀衆創造一條視覺路徑,引導他們更精確、細緻地賞析作品。

在二維與三維設計中,構建視覺層次是關鍵環節,也是檢驗設計師能力的重要標準。從構築觀衆的視覺路徑,到管理二三維設計與裝飾圖形的層次,再到調整圖表線條粗細、處理標題層次,每個細節的層次感都需精心打磨。

在視覺語言中,高亮顯示重點內容是常見手法之一。也是通過鮮明對比拉開視覺層次,引導觀衆在海量數據中迅速捕捉關鍵信息。不僅加強對已見內容的記憶,也突出那些需關注的要點。

然而,並非所有觀衆都理解數據的含義。當觀衆對數據不熟悉時,加入註釋是關鍵。註解有助於清晰地解釋可視化表達了什麼,包括標題、子標題、二級子標題和說明性文字。通過顏色、大小和位置的差異,不僅區分層次,也影響註釋吸引的注意力。

點線面的構成感

如果把可視化界面比作樂譜,那點線面就是樂譜中的音符了。不同的點、線、面,以彎曲或平直,以規則或不規則的變化,創造節奏感。甚至通過點的分佈,可以模擬出不同的紋理;通過線的走向,可以模擬出運動的軌跡;通過面的空間疊加,模擬出幻境。

在可視化這個以科技感衝擊感爲主風格的領域中,點線面的構成手法是我們不論在二維還是三維設計中都大量運用的。

光效氛圍

光效在科技風格中是非常常見的裝飾手法。有了光,界面就擁有了它的舞臺。光的不同形狀、不同層次、輻射的範圍、光的顏色、環境光... 光的視覺效果可以玩的花樣百出。

當然,光效的設計也要遵循一定的物理性質。物體發光性質分爲自體發光與反射發光。對於自體發光的光效在製作光效時除了要製作輻射光效,更要注重光自身的形狀。光的個體形狀與發射角度也決定了光的種類,如點性光、線性光、爆破光、柔光、反射光、煙霧光等。同時要設定光線的強度,強光的層次與輻射範圍更大,熒光輻射範圍小,對周圍環境色影響較小。反射光通過反射光源光線達到發光效果,需要設定反射光材質,光的強弱由材質決定,反射光的顏色由源光源色與物體固有色決定。

質感設計

材質的突出渲染是科技感特效製作很普遍的一種應用元素,其中金屬材質在科技感製作中應用的尤爲普遍。材質的製作可以貼圖處理,也可通過應用圖層樣式的更改,濾鏡雜色來實現。在製作材質時,要設定好材質的表面顆粒排布方式,光滑度、折射率、高光、顏色。材質的渲染在同一張畫面中不能應用過多,重點突出一種材質渲染,以免畫面很雜亂。材質可以選擇與光效結合,更能表現出科技感設計風格。

在圖撲軟件自研的 HT for Web 產品中,除了貼圖來展示質感外,也添加了材質球、物理燈光,以及建模紋理,用最小的資源做最好的效果。

除此之外,質感設計也可以應用於更多特殊的領域,比如纖維、晶體、生物等,將創造出更加柔順智能的視覺感官。

動態藝術效果

隨着時代進步和動態藝術的風靡,影視特效、動畫 CG、視頻廣告、UI 動畫等越來越萌發更多的動態創造力。在大屏內容圖像圖表上做合理的動效設計,讓單調無味的靜態圖變爲傳播能力較強的動態圖表;在三維場景中,模擬粒子、模擬火焰、模擬天氣、模擬水波紋、鏡頭動態、關鍵幀動畫等效果,讓整個大屏效果煥然一新極具科技感。

如今,靜態圖文內容已經不再是絕對的主流,相反動態設計的先天優勢更能契合發展時代下人們的感官訴求。

 

創新思維讓可視化更具價值

設計完成之後,隨即進入開發過程。然而隨着圖撲軟件低代碼數字孿生產品的上線,開發工作也變得越發簡單快捷。甚至設計師自己就可以搭建配置界面、鏈接數據。自己就可以給我們設計的界面賦予真正的數字孿生的意義,而不僅僅是繪製出一個美麗的軀殼。

在圖撲低代碼數字孿生產品中,擁有着海量豐富的圖表庫、面板庫、組件庫、模型庫——幫助用戶更快速、多維度的上手搭建二維界面,三維界面,甚至 2.5D 可視化界面,展示上擁有獨特的主題風格設計。各種比例下均不失真,加上佈局機制,解決了不同屏幕比例下的展示問題。

圖撲參與設計大屏完成階段,也會有成熟的評審體系:設計師對內溝通、設計師對外溝通、設計師與大屏“溝通”,並確定 5 個方面內容:

  1. 確定佈局後放入設計內容是否合適。
  2. 確定圖表帶入的數據是否客觀準確。
  3. 根據關鍵元素、色彩、結構、質感打造的頁面風格,是否呈現出預期的效果。
  4. 已有樣式、數據內容、動效等在開發實現方面是否存在問題。
  5. 大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象。

說一張圖好看但沒什麼內容很容易。“這只是一張好看的圖。”這種說法經常假設漂亮的東西沒有什麼價值,設計數據圖表時唯一有意義的是功能。這就假設了可視化數據的唯一目的是進行分析。但作爲一種媒介,可視化圖表也可以引起關於某個主題的感情,並促使讀者進行思考,或僅僅是欣賞數據的背景信息,能讓人們記住或者回溯過去就是其目標。

美麗不只是最後一分鐘貼上去的閃亮外表。美麗的背後,也承載着圖撲努力爲 HT 自研圖形引擎性能、功能及工具鏈工作流的不斷優化和提升,秉持着匠人精神一步一個腳印精心打造出來的藝術品。

 

總結

數字經濟推動新質生產力發展,數字孿生技術正當時。作爲可視化領域排頭兵,圖撲軟件構建的數字孿生解決方案,竭力成爲掘金數據資源寶庫的鑰匙,代表現代化新質生產力的人機界面,助力企業打開數據要素“乘數效應”的大門。

圖撲軟件(Hightopo)專注於 Web 的 2D&3D 可視化,自主研發 2D&3D 圖形渲染引擎、數據孿生應用開發平臺和開發工具,廣泛應用於 2D&3D 可視化、工業組態與數字孿生領域,圖撲軟件爲工業物聯網、樓宇、場館、園區、數據中心、工廠、電站、醫院、農業、學校、倉儲等行業客戶提供可靠的數字孿生解決方案。

您可以至圖撲軟件官網查看更多案例及效果:

https://www.hightopo.com/demos/index.html

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章