從事互聯(lián)網(wǎng)行業(yè)的人，每天都在接收新知識(shí)，時(shí)常也會(huì)有迷惑的時(shí)候，尤其是數(shù)據(jù)大屏這樣比較少有人踏足的領(lǐng)域。本文作者以自身經(jīng)歷出發(fā)，對(duì)數(shù)據(jù)大屏設(shè)計(jì)提出了自己的一點(diǎn)思考，希望對(duì)你有幫助。

不知道大家作為數(shù)據(jù)大屏設(shè)計(jì)師，平時(shí)工作有沒有一些困惑。在去年畫了60多張大屏頁面之后，我失去了青春和頭發(fā)，化解了一些對(duì)于數(shù)據(jù)可視化工作的迷茫，我整理了其中的一些，希望能帶給大家一點(diǎn)啟發(fā)。

我將主要圍繞這幾個(gè)方面來寫：

Let’s go!

一、數(shù)據(jù)大屏究竟是什么東西

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

身為一個(gè)數(shù)據(jù)可視化產(chǎn)品的從業(yè)者，時(shí)常感到焦慮，因?yàn)檫@個(gè)行業(yè)一直都在發(fā)生著很快速的進(jìn)化。

前一兩年，人們更多地使用“數(shù)據(jù)大屏”這個(gè)詞，可是近些時(shí)候，你再去觀察這個(gè)行業(yè)里的優(yōu)秀企業(yè)和入局者，他們都不約而同地弱化了“大屏”這個(gè)概念，取而代之是“數(shù)字孿生”、“大數(shù)據(jù)可視化交互系統(tǒng)”之類的詞匯。

相應(yīng)的，產(chǎn)品形態(tài)也在發(fā)生著變化。從最開始“偏靜態(tài)的展示”，到現(xiàn)在的“強(qiáng)交互性”、“3D”、“影視級(jí)效果”、“游戲化”……也許人類的終極目標(biāo)就是像科幻電影里一樣自如地操控信息和數(shù)據(jù)吧。

關(guān)于大屏，希望我們“數(shù)據(jù)可視化設(shè)計(jì)師”，要有這樣的意識(shí)：大屏只是一個(gè)硬件載體，我們可以往大屏上投放任何內(nèi)容。

我們真正在設(shè)計(jì)的，是一個(gè)“數(shù)據(jù)可視化交互系統(tǒng)”，大屏、電腦、移動(dòng)設(shè)備、投影、VR……都可以成為這個(gè)“系統(tǒng)”的展示載體。而大屏，應(yīng)該是目前大多數(shù)使用情景（監(jiān)控、接待匯報(bào)）下最實(shí)用的。

當(dāng)然，我們現(xiàn)在交流時(shí)還是習(xí)慣說“數(shù)據(jù)大屏”。但在2020年，“數(shù)據(jù)大屏”這個(gè)詞面背后所代表的產(chǎn)品設(shè)計(jì)形態(tài)，一定和以前有了很大的差別，其背后所包含的東西越來越豐富，早已不是“信息圖表”這么簡單了，我們要時(shí)常提醒自己，保持對(duì)數(shù)據(jù)可視化產(chǎn)品的想象力。

最開始做數(shù)據(jù)大屏設(shè)計(jì)時(shí)，我經(jīng)常在內(nèi)心深處疑惑，為什么企業(yè)會(huì)對(duì)“一群人圍著一塊巨大屏幕觀看炫酷PPT”的事情如此熱衷?，F(xiàn)在的我“參悟”到，這件事情的本質(zhì)是，如何更好地進(jìn)行數(shù)字化建設(shè)成果的應(yīng)用和展示，也就是如何跑好網(wǎng)上流傳的“大數(shù)據(jù)的最后一公里”。

關(guān)于“為什么強(qiáng)烈地追求炫酷、科技感”，隨著業(yè)內(nèi)一些宏大的、領(lǐng)先的概念產(chǎn)生，我漸漸理解，數(shù)字時(shí)代下的產(chǎn)品設(shè)計(jì)，本身就有無限可能，追求感官和交互體驗(yàn)的升級(jí)沒有所謂的對(duì)錯(cuò)。

關(guān)于未來的數(shù)字產(chǎn)品，也許影視作品里早就為我們勾勒了輪廓。從某種意義上來說，我們?cè)O(shè)計(jì)師掉光頭發(fā)在畫的科技感界面，不過是在模仿“已有的想象”罷了。

回到數(shù)據(jù)大屏的內(nèi)容，當(dāng)下流行的設(shè)計(jì)范式是：一般以炫酷的地理空間數(shù)據(jù)可視化為主體，周圍輔助以常規(guī)的圖表圖文。常規(guī)圖表的設(shè)計(jì)已經(jīng)有了較為成熟的設(shè)計(jì)方法論和解決方案，目前各大廠商比拼得更多的是地理空間數(shù)據(jù)的可視化效果，追求對(duì)真實(shí)世界的3D數(shù)字化重建，也成了可視化大屏領(lǐng)域里的一個(gè)趨勢。

我總問自己，中間為什么總是地圖？

也許正如可視化領(lǐng)域流傳的那句話所說，“人類生活中所產(chǎn)生的數(shù)據(jù)，80%都和空間位置有關(guān)”，有了數(shù)字地圖，你就有了展示80%數(shù)據(jù)的載體。

另外，感性點(diǎn)地說，只要有數(shù)據(jù)，在一塊屏幕里，你可以從太空一直往下看地球，直到發(fā)現(xiàn)你小時(shí)候換下的扔在隔壁家房頂上的牙齒。這種一覽眾山小、世界盡在股掌之間的感覺，是不是很棒？這是用常規(guī)圖表做視覺主體不能達(dá)到的空間感的體驗(yàn)。

以上，便是我窺見的當(dāng)下數(shù)據(jù)大屏設(shè)計(jì)的一面。

二、數(shù)據(jù)大屏設(shè)計(jì)效果如何落地

大家看到炫酷的設(shè)計(jì)效果，都會(huì)好奇發(fā)問“這怎么開發(fā)落地啊”。我想說，其實(shí)天下設(shè)計(jì)師都是一樣的難，誰不是追著開發(fā)一起脫發(fā)，但總有（暫時(shí)）實(shí)現(xiàn)不了的效果。

有一些觀點(diǎn)想和大家分享，首先，這是一個(gè)可視化大屏項(xiàng)目的簡要流程：

其實(shí)，這就是普遍的互聯(lián)網(wǎng)產(chǎn)品的項(xiàng)目實(shí)施流程。簡單來說，就是產(chǎn)品經(jīng)理出原型、設(shè)計(jì)師做好界面效果，逼著讓開發(fā)同事技術(shù)還原。

對(duì)于普通的網(wǎng)頁應(yīng)用、APP，這個(gè)流程并沒有太大的問題，一般設(shè)計(jì)師的設(shè)計(jì)效果都有了相對(duì)成熟的技術(shù)落地方案。但在數(shù)據(jù)大屏追求3D、高視效的設(shè)計(jì)趨勢下，傳統(tǒng)的互聯(lián)網(wǎng)產(chǎn)品項(xiàng)目流程就會(huì)存在類似這樣的問題：

你知道什么叫做“黯然失色”嗎？這就是。

設(shè)計(jì)師和開發(fā)之前會(huì)針對(duì)一些細(xì)節(jié)效果，反反復(fù)復(fù)地撕扯。要承認(rèn)，每一個(gè)細(xì)致的效果，都需要時(shí)間去打磨，受限于技術(shù)手段、項(xiàng)目時(shí)間，我們往往對(duì)上線效果也有不少的無奈。有時(shí)候，也會(huì)用一些取巧的方式，例如，地圖部分不需要旋轉(zhuǎn)、縮放等交互時(shí)，對(duì)于一些流光、粒子的效果，會(huì)直接疊加圖片、視頻上去。但在今天強(qiáng)調(diào)交互、動(dòng)態(tài)地圖的行情下，這一招的弊端越來越大。

我想任何一個(gè)產(chǎn)品，從來都不只是設(shè)計(jì)的產(chǎn)物，而是市場、設(shè)計(jì)、技術(shù)、硬件等等因素綜合作用下的妥協(xié)產(chǎn)物。

造成設(shè)計(jì)效果難以百分百落地的原因，我想根本源自設(shè)計(jì)和開發(fā)的隔閡，設(shè)計(jì)效果和技術(shù)方案無法完全重合，不帶技術(shù)邊界意識(shí)的設(shè)計(jì)，自然會(huì)有落地難的困境，技術(shù)當(dāng)然可以探索突破，但項(xiàng)目是有時(shí)限的。

設(shè)計(jì)和開發(fā)合體全棧設(shè)計(jì)師，效果落地可能就事半功倍。

面對(duì)這樣的困境，業(yè)內(nèi)廠商的一個(gè)趨勢就是轉(zhuǎn)向游戲開發(fā)的模式，設(shè)計(jì)師把控模型，與開發(fā)共同調(diào)試把控渲染效果。在這種趨勢之下，廠商們開始研發(fā)自己的 3D 引擎或者啟用諸如Unity、Unreal等游戲引擎，這樣往往能獲得更高效、更優(yōu)質(zhì)、更流暢的3D輸出。

對(duì)大多數(shù)大屏設(shè)計(jì)師而言，這樣的落地困境并不會(huì)很快被解決，但也不必懊惱，我想我們能做的有三點(diǎn)：

1. 不斷精進(jìn)自己的3D和動(dòng)效設(shè)計(jì)技能來滿足行業(yè)要求。任何炫酷的效果，只有先設(shè)計(jì)出來，才有被開發(fā)還原的可能?？梢远嚓P(guān)注一些基于 Web 的 3D 工具網(wǎng)站和技術(shù)，諸如 sketchfab、Vectary，了解當(dāng)下 Web 端 3D 落地效果的行情，以此對(duì)設(shè)計(jì)軟件做出的效果和開發(fā)落地的效果有個(gè)差距感知。
2. 保持對(duì)業(yè)內(nèi)技術(shù)動(dòng)態(tài)、工具的關(guān)注和了解。例如webGL、three.js、3D 游戲引擎、Ventuz等等，緊跟時(shí)代獲取靈感，如此一來你還可以鞭策推動(dòng)開發(fā)同事 —— 我設(shè)計(jì)的這個(gè)效果，已經(jīng)有公司/人實(shí)現(xiàn)了哦 。
3. 為什么不借助第三方的數(shù)據(jù)可視化大屏制作工具呢？如果你在公司只是負(fù)責(zé)后臺(tái)UI設(shè)計(jì)、平面設(shè)計(jì)，甚至你都不是設(shè)計(jì)師，然后突然有一天公司來了個(gè)大屏需求，讓你一周搞出來上線，于是你加班補(bǔ)習(xí)數(shù)據(jù)大屏設(shè)計(jì)，但結(jié)果可能是效果勉強(qiáng)及格，開發(fā)實(shí)現(xiàn)也勉強(qiáng)及格。這樣偶爾一次的支持還好，但是你看見公司越來越多的地方出現(xiàn)了大屏、越來越多的部門說要要大屏，你感覺到了頭皮有點(diǎn)涼。

行業(yè)對(duì)可視化設(shè)計(jì)師的要求越來越高，你難我難大家都難，與其硬剛白手起家，不如站在別人設(shè)計(jì)開發(fā)好的基礎(chǔ)上去設(shè)計(jì)吧！

在這里推薦一個(gè)平臺(tái)，袋鼠云EasyV。平臺(tái)提供了一套已經(jīng)設(shè)計(jì)開發(fā)好的組件，直接供使用者添加、修改樣式、配置交互。

為了減輕使用者的設(shè)計(jì)負(fù)擔(dān)，效果、風(fēng)格，都是由設(shè)計(jì)師去一個(gè)個(gè)配置項(xiàng)調(diào)出來的。如果你基于這樣的基礎(chǔ)，再去做可視化設(shè)計(jì)，我想你可以有更多的精力去研究指標(biāo)和數(shù)據(jù)、去構(gòu)思整個(gè)可視化展示的故事結(jié)構(gòu)，而不必總是去糾結(jié)某個(gè)樣式怎么做才好看、設(shè)計(jì)出來了能不能落地，項(xiàng)目壓力瞬間減輕很多有木有？

對(duì)于有設(shè)計(jì)能力的設(shè)計(jì)師，我想這些已經(jīng)設(shè)計(jì)過一遍的組件，一定能減少你很多重復(fù)工作，讓你有更多參考和靈感去配置設(shè)計(jì)自己風(fēng)格的大屏。

三、調(diào)研不積極，改稿到窒息

數(shù)據(jù)大屏的背后，是一個(gè)相對(duì)較新的行業(yè)，再加上面向企業(yè)的項(xiàng)目一般都會(huì)有保密要求，所以大家在做項(xiàng)目時(shí)都發(fā)現(xiàn)，找不到較成熟又對(duì)口的參考資料，這是數(shù)據(jù)可視化設(shè)計(jì)師的困境，也是機(jī)遇，因?yàn)槟阍诿恳粋€(gè)項(xiàng)目中的探索，都是可視化行業(yè)的先驅(qū)事跡啊 ?；谶@樣的背景，我想大家就要充分調(diào)研，仔細(xì)求證。

現(xiàn)場調(diào)研：體感是感受出來而不是聽出來的。

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

其實(shí)，我剛開始也是很懼怕出差的，因?yàn)楣九晌页霾畹臅r(shí)候，我腦子里是這樣的畫面：

對(duì)，我沒出差之前，我一直認(rèn)為，公司就是想讓我到客戶現(xiàn)場畫大屏！事實(shí)的真相是，讓設(shè)計(jì)師去和客戶增進(jìn)感情，為了避免之后因?yàn)轭愃七@樣的問題改稿：

出差多了，我得到了升華 —— 現(xiàn)在的手機(jī)居然拍不出肉眼能看到的色差？客戶說的12米開外看大屏居然是這樣的觀感？原來客戶公司食堂的飯菜這么好吃！

所以，我整理了一份自認(rèn)為對(duì)設(shè)計(jì)師很實(shí)用的現(xiàn)場調(diào)研清單，一切血淚教訓(xùn)盡在表中：

當(dāng)然，設(shè)計(jì)師能去現(xiàn)場最好，如果實(shí)在是條件不允許，讓項(xiàng)目經(jīng)理或者前線同事代為收集就好。但要提醒他們能用拍照解決的就不要口述，堅(jiān)決貫徹落實(shí)可視化“一圖勝千言”的宗旨。

本文由 @EasyV 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議