袋鼠雲可視化二三事 | 數據大屏設計師,我不信你沒有這些困惑!

 

嗨,我是袋鼠雲的一個數據可視化設計師,在公司主要負責畫大屏。在去年畫了60多張大屏頁面之後,我失去了青春和頭髮,化解了一些對於數據可視化工作的迷茫,我整理了其中的一些,希望能帶給大家一點啓發。我將主要圍繞這幾個方面來寫:

 

Let's go!

 

數據大屏究竟是什麼東西

——“沒有愧疚,真的太難定義了。”

身爲一個數據可視化產品的從業者,時常感到焦慮,因爲這個行業一直都在發生着很快速的進化。

前一兩年,人們更多地使用“數據大屏”這個詞,可是近些時候,你再去觀察這個行業裏的優秀企業和入局者,他們都不約而同地弱化了“大屏”這個概念,取而代之是“數字孿生”、“大數據可視化交互系統”之類的詞彙。相應地,產品形態也在發生着變化,從最開始“偏靜態的展示”,到現在的“強交互性”、“3D”、“影視級效果”、“遊戲化”...也許人類的終極目標就是像科幻電影裏一樣自如地操控信息和數據吧。

 

關於大屏,希望我們“數據可視化設計師”,要有這樣的意識 —— 大屏只是一個硬件載體,我們可以往大屏上投放任何內容。我們真正在設計的,是一個“數據可視化交互系統”,大屏、電腦、移動設備、投影、VR...都可以成爲這個“系統”的展示載體,而大屏,應該是目前大多數使用情景(監控、接待彙報)下最實用的。

 

不同大小的屏幕情景感受

 

當然,我們現在交流時還是習慣說“數據大屏”,但在2020年,“數據大屏”這個詞面背後所代表的產品設計形態,一定和以前有了很大的差別,其背後所包含的東西越來越豐富,早已不是“信息圖表”這麼簡單了,我們要時常提醒自己,保持對數據可視化產品的想象力。

最開始做數據大屏設計時,我經常在內心深處疑惑,爲什麼企業會對“一羣人圍着一塊巨大屏幕觀看炫酷PPT”的事情如此熱衷,現在的我“參悟”到,這件事情的本質是,如何更好地進行數字化建設成果的應用和展示,也就是如何跑好網上流傳的“大數據的最後一公里”。

關於“爲什麼強烈地追求炫酷、科技感”,隨着業內一些宏大的、領先的概念產生,我漸漸理解,數字時代下的產品設計,本身就有無限可能,追求感官和交互體驗的升級沒有所謂的對錯。關於未來的數字產品,也許影視作品裏早就爲我們勾勒了輪廓,從某種意義上來說,我們設計師掉光頭髮在畫的科技感界面,不過是在模仿“已有的想象”罷了。

 

2017年的電影《太空旅客》:大廳正在給男主全息演示星際路線

 

回到數據大屏的內容,當下流行的設計範式是:一般以炫酷的地理空間數據可視化爲主體,周圍輔助以常規的圖表圖文。常規圖表的設計已經有了較爲成熟的設計方法論和解決方案,目前各大廠商比拼得更多的是地理空間數據的可視化效果,追求對真實世界的3D數字化重建,也成了可視化大屏領域裏的一個趨勢。

 

圖片來源:袋鼠雲官網數據可視化案例集合

 

我總問自己,中間爲什麼總是地圖?也許正如可視化領域流傳的那句話所說,“人類生活中所產生的數據,80%都和空間位置有關”,有了數字地圖,你就有了展示80%數據的載體。另外,感性點地說,只要有數據,在一塊屏幕裏,你可以從太空一直往下看地球,直到發現你小時候換下的扔在隔壁家房頂上的牙齒。這種一覽衆山小、世界盡在股掌之間的感覺,是不是很棒?這是用常規圖表做視覺主體不能達到的空間感的體驗。

 

 

之前用Easy[V]給一個客戶做的地圖下鑽效果的簡易demo

 

以上,便是我窺見的當下數據大屏設計的一面。

 

 

數據大屏設計效果如何落地

大家看到炫酷的設計效果,都會好奇發問“這怎麼開發落地啊”,我想說,其實天下設計師都是一樣的難,誰不是追着開發一起脫髮,但總有(暫時)實現不了的效果。

 

 

有一些觀點想和大家分享,首先,這是一個可視化大屏項目的簡要流程:

 

 

其實,這就是普遍的互聯網產品的項目實施流程,簡單來說,就是產品經理出原型、設計師做好界面效果,逼着讓開發同事技術還原。對於普通的網頁應用、APP,這個流程並沒有太大的問題,一般設計師的設計效果都有了相對成熟的技術落地方案。但在數據大屏追求3D、高視效的設計趨勢下,傳統的互聯網產品項目流程就會存在類似這樣的問題:

 

 

你知道什麼叫做“黯然失色”嗎?這就是

 

設計師和開發之前會針對一些細節效果,反反覆覆地...撕扯,要承認,每一個細緻的效果,都需要時間去打磨,受限於技術手段、項目時間,我們往往對上線效果也有不少的無奈。有時候,也會用一些取巧的方式,例如,地圖部分不需要旋轉、縮放等交互時,對於一些流光、粒子的效果,會直接疊加圖片、視頻上去,但在今天強調交互、動態地圖的行情下,這一招的弊端越來越大。

我想任何一個產品,從來都不只是設計的產物,而是市場、設計、技術、硬件等等因素綜合作用下的妥協產物。造成設計效果難以百分百落地的原因,我想根本源自設計和開發的隔閡,設計效果和技術方案無法完全重合,不帶技術邊界意識的設計,自然會有落地難的困境,技術當然可以探索突破,但項目是有時限的。

 

 

設計和開發合體全棧設計師,效果落地可能就事半功倍

 

面對這樣的困境,業內廠商的一個趨勢就是轉向遊戲開發的模式,設計師把控模型,與開發共同調試把控渲染效果,在這種趨勢之下,廠商們開始研發自己的 3D 引擎或者啓用諸如Unity、Unreal等遊戲引擎,這樣往往能獲得更高效、更優質、更流暢的 3D 輸出。

對大多數大屏設計師而言,這樣的落地困境並不會很快被解決,但也不必懊惱,我想我們能做的有三點:

1、不斷精進自己的 3D 和動效設計技能來滿足行業要求。任何炫酷的效果,只有先設計出來,纔有被開發還原的可能。可以多關注一些基於 Web 的 3D 工具網站和技術,諸如 sketchfab、Vectary,瞭解當下 Web 端 3D 落地效果的行情,以此對設計軟件做出的效果和開發落地的效果有個差距感知。

2、保持對業內技術動態、工具的關注和了解。例如webGL、three.js、3D 遊戲引擎、Ventuz等等,緊跟時代獲取靈感,如此一來你還可以鞭策推動開發同事 —— 我設計的這個效果,已經有公司/人實現了哦🙊。

3、爲什麼不借助第三方的數據可視化大屏製作工具呢?如果你在公司只是負責後臺UI設計、平面設計,甚至你都不是設計師,然後突然有一天公司來了個大屏需求,讓你一週搞出來上線,於是你加班補習數據大屏設計,但結果可能是效果勉強及格,開發實現也勉強及格。這樣偶爾一次的支持還好,但是你看見公司越來越多的地方出現了大屏、越來越多的部門說要要大屏,你感覺到了頭皮有點涼。

行業對可視化設計師的要求越來越高,你難我難大家都難,與其硬剛白手起家,不如站在別人設計開發好的基礎上去設計吧!

 

 

突然插播的“安利”,但是相信我這不是一篇軟文!

咳,首先,這是袋鼠雲對外演示的最新案例集:

 

 

重點來了!

這些大屏都是依託我們家的可視化大屏製作平臺Easy[V] 交付的:

 

也就是,所有的地圖、圖表、交互都是通過這個平臺設計開發完成的,平臺提供了一套已經設計開發好的組件,直接供使用者添加、修改樣式、配置交互:

 

⬆︎ 組件工具一覽

 

 

⬆︎ 地圖組件下鑽

 

⬆︎ 自定義建模的模型地圖

 

爲了減輕使用者的設計負擔,這些效果、風格,都是有設計師去一個個配置項調出來的。如果你基於這樣的基礎,再去做可視化設計,我想你可以有更多的精力去研究指標和數據、去構思整個可視化展示的故事結構,而不必總是去糾結某個樣式怎麼做纔好看、設計出來了能不能落地,項目壓力瞬間減輕很多有木有?對於有設計能力的設計師,我想這些已經設計過一遍的組件,一定能減少你很多重複工作,讓你有更多參考和靈感去配置設計自己風格的大屏。

好了,收!再不停就真被當成廣告了,有興趣的盆友去試用探索吧~ 所有設計師和讀者,注意咯🗣,Easy[V] 的免費試用申請網址:🔗 https://easyv.dtstack.com

你以爲打完廣告就結束了嗎?不!以下,是爲了證明本文是乾貨,但很可能大家都去申請試用 Easy[V] 而沒有被看到的更加精華的部分:

 

 

 

 

調研不積極,改稿到窒息

數據大屏的背後,是一個相對較新的行業,再加上面向企業的項目一般都會有保密要求,所以大家在做項目時都發現,找不到較成熟又對口的參考資料,這是數據可視化設計師的困境,也是機遇,因爲你在每一個項目中的探索,都是可視化行業的先驅事蹟啊 🙌 。基於這樣的背景,我想大家就要充分調研,仔細求證。

| 現場調研:體感是感受出來而不是聽出來的

一般情況下,大屏設計是針對一塊位置、大小固定的屏幕進行設計,當使用場景一定時,我們就必須把硬件、空間信息納入自己的設計考慮範疇,這方面,要像舞臺設計、PPT設計師一樣,充分考慮硬件和現場環境對屏幕內容的潛在影響。建議就是,如果硬件到位了(還有硬件沒到位的情況?是的,的確存在那種硬件都還沒定就被要求開始設計的情況),到現場出差,往那屏幕前一站,找找真實的體感。

其實,我剛開始也是很懼怕出差的,因爲公司派我出差的時候,我腦子裏是這樣的畫面:

 

 

對,我沒出差之前,我一直認爲,公司就是想讓我到客戶現場畫大屏!事實的真相是,讓設計師去和客戶增進感情,爲了避免之後因爲類似這樣的問題改稿:

 

出差多了,我得到了昇華 —— 現在的手機居然拍不出肉眼能看到的色差?客戶說的 12 米開外看大屏居然是這樣的觀感?原來客戶公司食堂的飯菜這麼好喫...

所以,我整理了一份自認爲對設計師很實用的現場調研清單,一切血淚教訓盡在表中:

 

當然,設計師能去現場最好,如果實在是條件不允許,讓項目經理或者前線同事代爲收集就好,但要提醒他們能用拍照解決的就不要口述,堅決貫徹落實可視化“一圖勝千言”的宗旨。

好,今天的分享先到這裏,因爲到這裏你已經讀了4000多個字了,你很棒但是你肯定累了!

 

 

 

希望各位設計師或者對可視化感興趣的朋友,能從我的文章裏收穫一些啓發,還有快樂。如果有疑問,歡迎後臺留言,我會在下一期裏一起爲大家解答。當然,如果你喜歡這次分享的內容,歡迎轉發~

 

作者:元 寶袋鼠雲數據可視化團隊專業可視化設計師 正式介紹:主導設計城市大腦、區域經濟大腦、金融大腦、政務大腦、交通大腦等優秀數據可視化項目案例。 非正式介紹:袋鼠雲可視化團隊裏最高(自封)的設計師,平時快樂地做大屏,定期快樂地寫文章。

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