可視化大屏動態特效

0 評論 2595 瀏覽 11 收藏 14 分鐘

科技的發展,各種設計的案例層出不窮,將科技與生活融合,將不一樣的美呈現。下面這篇文章中筆者整理分享了一篇關于可視化大屏動態特效的相關內容的文章,大家一起去感受感受其中的美吧!

涵蓋多種資源需求 讓你的可視化更出彩https://asset.raykite.com/resource/all

數據可視化需要利用大屏這一工具實現,若想讓數據展示變得更加生動,可視化大屏的藝術性設計便不可缺少,而這需要結合許多設計技巧。

首先,想要設計出一個好看的可視化大屏,藝術性是必不可少的。所以第一步我們來走進數據藝術的世界中,從理性走入感性,體會相斥相吸所碰撞出的藝術火花給人帶來的視覺盛宴。再通過 2D 與 3D 的結合應用使可視化更加生動形象說明。

一、結合情感打造二維設計美感

1. 走進數據藝術

在數據藝術的世界中,要打開想象力,關注數據和情感中的聯系。

準確地說,數據藝術更多是為了讓人們去體驗那些讓人感覺冰冷而陌生的數據,使它們從無形變為可見的、可動的、可互動的甚至可觸摸的有形物像。就像是把冰冷的 10110010 的代碼賦予生命,穿上衣服形成樣貌,讓人一看就能記住這個生命體的樣子,知曉它的信息,更加人性化地與它互動。

2. 建立視覺層次

感性的感受到數據可視化帶來的藝術感和生命力后,我們來通過理性的方法為我們的可視化增加美感。

當我們在拿到一張可視化大屏的時候,會快速掃一眼尋找有沒有有趣的東西。而且人眼在看東西時總是趨向于識別引人注目的東西,比如明亮的顏色,較大的物體等突出的有特點的事物。

利用這點,我們可以用醒目的顏色突出顯示數據,而淡化周圍的輔助元素,拉開背景和數據的層次。也可以用線條或者線性元素構建一個視覺路徑,把人的視線逐漸引向一個興趣點。這樣就可以建立一個視覺層次,幫助讀者快速關注到主數據。反之,讀者就會盲目搜索而找不到重點了。

如上圖我們做的一個簡單的案例,左側的圖弱化了背景元素,明顯比右側的數據可讀性更強,視覺感受更加舒適。

3. 適宜的色彩情感

在數據可視化設計中,色彩是最重要的元素之一。合理利用色彩的情感可以增強可視化設計的感知效果,調動觀賞者的情緒。

不同的色彩給人不同心理感受,如:紅色代表著喜慶、熱情、歡樂、愛情、活力等。但是,很多時候紅色也與災難、戰爭、憤怒等消極情緒聯系在一起;藍色會給人帶來友好、和諧、信任、寧靜、希望等積極的情感體驗,也會給人以冷酷、無情的心理感受。

不同的色彩搭配可以表現不同的情感,用來表達與之匹配的可視化設計主題風格,調動觀賞者的情感。

  • 科技/科幻感、未來感、前衛感:紫外光色、藍色等。
  • 青春、活力:紅、黃、綠等。
  • 高端感、質感:黑色、灰色+漸變/光照等;在色彩搭配上可以選擇同色系配色,畫面顯得更豐富;也可以選擇非同色系配色,畫面會更加多彩。

色彩搭配不僅是整體風格色調把控,還有與場景融合的面板顏色搭配,如何讓整個畫面和諧,比較考驗設計師的藝術基礎功底,色彩設計在可視化應用中最重要的是要做到整體思考,不能只顧局部的顏色搭配。

在搭配的時候也要注意不要使用純色互補色進行搭配,在遇到補色,對比色時可以嘗試降低其中一種顏色的純度。

畫面要注意不灰、不粉、不色頻,與行業相符,不會讓人覺得奇怪。

色彩面積的應用也十分重要,在搭配顏色時要注意主色和輔色的色彩面積比例,是決定色調的重要因素。

上圖是尼古拉斯·加西亞·貝爾蒙特的“美國風場圖”,同樣是描述風場,可以感受下同色系色彩面積不同,與不同色系帶來的視覺體驗與心理體驗的不同。

雖然顏色可以從研究物理層面上對視覺的沖擊給人帶來的不同感受,但更多對于設計師而言,能做到共情很重要,需要設計師自身能體驗到這種色系的差別,有敏感的判斷性,這種需要設計師多看案例,多觀察生活而不斷訓練。

上圖是我們做的圖表配色案例,挑選了6中基礎色規定了色調,作出明暗兩套方案。

4. 背景信息視覺暗示

這是可視化大屏設計中一個小的比較討巧的方式,背景信息雖然在上面講到的視覺層次上來說屬于弱化的低層級,但是背景信息能夠幫助讀者更好地理解可視化數據。它能提供一種直觀的印象,并且增強抽象的幾何圖形及顏色與現實世界的聯系。

設計時可以通過圖表周圍的文字引入背景信息,例如最近我們做的新型冠狀病毒的疫情地圖與病毒實驗室demo,就適當地在背景圖片和UI元素中引入了和病毒相關的元素與顏色搭配,可以更容易渲染氣氛,使讀者快速理解到可視化的內容主題。如下圖:

5. 巧用留白

留白這個說法在設計中很常見,但是這個說法并不專業。留白的設計方式屬于構圖中的一種,也是很考驗設計師構成能力的一個點。如果做設計時間長的人會發現,在構圖排版的時候,內容越多元素越多越好排,內容越少越不好做設計。

現在很多的看起來“高大上”的網頁設計或者 APP 界面設計大多都采用了大面積留白,仿佛這是一個設計趨勢,許多人將這解釋成:現在的信息太多太雜,人們需要整理簡化,設計也越來越簡化,所以留白盛行。

事實上確實有這種社會趨勢,但是更重要的是對于設計本身而言,簡潔的設計是最難的,構成設計是最考驗設計能力的。優秀的留白設計之所以高大上,并不是因為運用了留白的手段,而是設計師的構成能力十分優秀才可以做出如此優秀的作品。

6. 動畫的交互運用

動畫與過渡效果可以增加可視化結果視圖的豐富性與可理解性,增加用戶交互的反饋效果,操作自然、連貫;還可以增強重點信息或者整體畫面的表現力,吸引用戶的關注力,增加印象。

但是,動畫與過渡使用不當會帶來適得其反的效果。如何巧用動畫與過渡,需要做到以下幾點:

  • 適量原則:動畫不宜使用過多,避免陷入過渡設計的危機中。
  • 統一原則:相同動畫語義統一、相同行為與動畫保持一致,保持一致的用戶體驗。
  • 易理解原則:簡單的形變、適量的時長、易判斷、易捕捉,避免增加觀賞者的認知負擔。

二、構建空間感;二維與三維的融合

傳統的數據可視化以各種通用圖表組件為主,不能達到炫酷、震撼人心的視覺效果。優秀的數據可視化設計需要有炫酷的視覺效果,讓可視化設計隨時隨地脫穎而出。

這時用三維元素的添加制造出空間感可以大大的加大畫面層次感,且可以多維度觀察,每個角度可能會產生震撼的視覺體驗。下圖是我們做過的一些三維設計案例:

然而,三維的 web 端場景設計有一定的局限性,因為 web 端受性能影響,模型只有輕量的模型才可以顯示流暢不卡頓。所以設計師在設計時需要嚴格控制面數與貼圖量,以保證流暢。

另外,web 端的性能也無法帶動龐大的渲染器,所以我們采用了使用 color 貼圖來表現模型的光影和質感。通過三維的項目經驗我們也總結了一套三維設計流程:

  • 準備階段理解需求,搜集相關資料,建模統計列表。
  • 開始建模初步輪廓,模型細化,拓撲低模。
  • 展UV。
  • 貼圖繪制烘培AO光影信息,材質信息。PS貼圖繪制。
  • 搭建場景:導入 Hightopo 引擎,搭建出場景,擺放二維圖標。
  • 氛圍調整:添加陰影,環境光等效果。模型層級關系,命名與標簽繪制。

有許多的大屏設計案例都會涉及二維和三維相融合,需要整體的考慮風格一致。風格一致可以從色調與元素使用樣式來做到統一,沒有違和感。我們直接展示案例來說明:

這是我們做的一個風機的案例,以線框的風格為主,UI 也配合了線框狀態的風機模型樣式,加上整體顏色的統一,就可以達到一個不違和的效果。

三、小結

隨著科技的發展,也許你聽說過有人提出過全自動化便當販賣機的概念:所有的烹飪都由機器來進行,然后自動打包放在像自動販賣機的柜子里掃碼售賣。

但是與此相比,我們可能反而更愛早上公司外大爺蒸的腸粉和下班后路邊大媽做的煎餅果子。想必原因每個人心里也都有答案。

設計也是如此,如今科技已經使人提出了各種各樣的人工智能做設計的案例。但是和烹飪的道理一樣,設計是不能被機器所取代的——因為靈魂不能被取代,每個人都有每個人獨特的思想,我想這也許是設計珍貴的原因。

本文由 @木子李 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!