本文將從以下五個(gè)方面講解可視化大屏從0到1的設(shè)計(jì)過程：

前期與客戶、產(chǎn)品經(jīng)理溝通后，得到的有用信息如下：

(1) 大屏被安置于室內(nèi)；

(2) 適配電腦1920*1080分辨率，大屏原始尺寸：5.8*3.2米，采用直投形式；

(3) LED屏幕點(diǎn)間距1.2毫米。

通過以上信息，我們總結(jié)出大屏的色彩明度不易過亮。電腦直投形式按照“投屏電腦的分辨率為1920*1080”設(shè)計(jì)就可以保證投屏的清晰度，不會(huì)產(chǎn)生拉伸和變形。因?yàn)長ED屏的點(diǎn)間距1.2毫米，屬于比較清晰的屏幕，所以我們把最小字號(hào)設(shè)定為12像素。

確定了畫板的大小，下一步需要根據(jù)產(chǎn)品原型優(yōu)化頁面布局。

一般中心的位置會(huì)放置地圖，其余的指標(biāo)按優(yōu)先級(jí)依次在地圖周圍展開。

首先搭建信息分布框架，根據(jù)這個(gè)框架往里邊填充內(nèi)容就更規(guī)整了。大屏是以數(shù)據(jù)展示為主，內(nèi)外邊距的設(shè)定較小，希望能給數(shù)據(jù)展示留更多的空間。目前這張屏幕每個(gè)模塊包括標(biāo)題、數(shù)據(jù)指標(biāo)以及數(shù)據(jù)分析圖表三個(gè)部分。

在設(shè)計(jì)時(shí)，首先要讓用戶獲取到有用信息。所以需要考慮哪些信息內(nèi)容優(yōu)先級(jí)更高?？梢詤⒖忌掀窒韮?nèi)容：《可視化大屏業(yè)務(wù)之「需求理解」（上）》

風(fēng)格定義主要依據(jù)上一篇文章分析得出的行業(yè)屬性、業(yè)務(wù)應(yīng)用場景、地域文化背景以及前期與客戶溝通時(shí)提到的一些訴求以及審美傾向，甚至于時(shí)下流行時(shí)政熱點(diǎn)、天氣等因素都能成為影響整體設(shè)計(jì)風(fēng)格的誘因。

通過這些影響因素搜集了相關(guān)詞匯，最終提取3個(gè)核心關(guān)鍵詞。

(1) 科技。我們的業(yè)務(wù)需求是：玉環(huán)市泵閥（水暖閥門）產(chǎn)業(yè)大腦，產(chǎn)業(yè)大腦就是將產(chǎn)業(yè)數(shù)字化治理。以科技驅(qū)動(dòng)產(chǎn)業(yè)升級(jí)，是我們業(yè)務(wù)的核心目標(biāo)。所以第一個(gè)關(guān)鍵詞為科技。

(2) 機(jī)械。本屏主要是展示機(jī)械設(shè)備相關(guān)的企業(yè)數(shù)據(jù)，所以，機(jī)械被選入了第二個(gè)關(guān)鍵詞。

(3) 玉環(huán)。此處結(jié)合了地域文化：“ 玉環(huán)市 ” 被譽(yù)為中國閥門之都，并且玉環(huán)市的命名也是源于當(dāng)?shù)鬲?dú)特的自然現(xiàn)象 “ 晨霧繚繞，形如玉環(huán) ”，我們可以把這種感覺設(shè)計(jì)在大屏中。

看到這個(gè)情緒板后，大家是不是頭腦中已經(jīng)描摹出一副大屏的初步模樣了？

將情緒版落實(shí)到具體的設(shè)計(jì)細(xì)節(jié)有這五個(gè)方向：

(1) 圖形：我們選用偏機(jī)甲風(fēng)的造型。與機(jī)械硬朗的感覺相比，細(xì)節(jié)上我們采用圓角做融合；

(2) 質(zhì)感：運(yùn)用科技、光感；

(3) 色彩：傾向于科技藍(lán)，并且這這塊客戶也有明確表示過藍(lán)色更符合他們企業(yè)的整體調(diào)性。為了豐富畫面整體效果，為此增加了黃色、綠為輔助色。

(4) 動(dòng)效：采用流光等光效效果。

(5) 字體：首選擇現(xiàn)代、簡潔一點(diǎn)的字體，更符合產(chǎn)業(yè)工業(yè)的氣質(zhì)；也要考慮后期開發(fā)實(shí)現(xiàn)。目前莫奈系統(tǒng)中字體有限，需要在這里找到比較符合現(xiàn)代感的字體。標(biāo)題選用-京東朗正；其他字體選用-思源黑體；數(shù)字字體為選用-京東正黑。

(1)視覺層級(jí)劃分：我們針對(duì)業(yè)務(wù)內(nèi)容（信息維度的優(yōu)先級(jí)）進(jìn)行了梳理：

第一視覺層級(jí)是希望用戶能第一眼看到的內(nèi)容：這里包括：指標(biāo)名稱、數(shù)據(jù)指標(biāo)、圖表、業(yè)務(wù)興趣點(diǎn)。

第二視覺層級(jí)是指模塊背景層：包括模塊UI-背景、裝飾元素、圖標(biāo)、控件等。

第三層視覺級(jí)為基礎(chǔ)底圖層：包括行政區(qū)域-邊界、地面、地形、建筑、道路、水域、綠地等。

在這里我對(duì)常用的圖表做了個(gè)歸類。在不同維度下，應(yīng)該選擇什么類型的圖表，供大家參考。

案例分析

上圖表是對(duì)平臺(tái)銷售趨勢(shì)進(jìn)行分析，根據(jù)之前的研究表示趨勢(shì)的圖表有折線圖、面積圖、桑基圖。

我們?cè)倏聪略搱D表產(chǎn)品原型存在的問題：1、X軸表示時(shí)間維度，Y軸上數(shù)據(jù)缺失；2、懸浮層要表達(dá)3個(gè)維度的信息：該時(shí)間點(diǎn)下的訂單量和銷售額；3、該圖表沒有展示圖例信息；4、桑基圖應(yīng)用于數(shù)據(jù)維度趨勢(shì)比較復(fù)雜的情況下使用，而面積圖除了可以展示數(shù)據(jù)趨勢(shì)以外，還可以通過面積對(duì)比不同的數(shù)據(jù)量，但是訂單量和銷售額不在同一個(gè)分析維度，因此不需要對(duì)比。

所以最后我們還是采用了更簡單易懂的折線圖。

(5) 快速搭建

可以分為以下兩步：

第一步：設(shè)計(jì)師用我們長期積累的設(shè)計(jì)組件快速搭建界面；

第二步：設(shè)計(jì)師/研發(fā)人員用京東城市的數(shù)據(jù)可視化引擎—莫奈去快速實(shí)現(xiàn)界面效果。

上面這張屏正是采用了設(shè)計(jì)組件搭建而成。組件化不僅在提升設(shè)計(jì)師設(shè)計(jì)效率方面有著很重要的意義，還能夠在項(xiàng)目長期迭代和多人協(xié)同完成設(shè)計(jì)方案的情況下保證設(shè)計(jì)的一致性。從而節(jié)省了更多的時(shí)間讓我們?nèi)ゴ蚰ピO(shè)計(jì)細(xì)節(jié)。

以下附上我們還在不斷完善的Rainbow D（京東智能城市設(shè)計(jì)語言系統(tǒng)）。本設(shè)計(jì)系統(tǒng)包含了可視化組件庫、中后臺(tái)組件庫以及相應(yīng)的設(shè)計(jì)規(guī)范供大家參考。

如果有項(xiàng)目周期特別緊張的情況下，客戶想要快速看到線上效果，設(shè)計(jì)師也可以協(xié)助產(chǎn)品在莫奈系統(tǒng)上（京東城市數(shù)據(jù)可視化引擎）快速搭建產(chǎn)品原型。以下為在莫奈系統(tǒng)中搭建的大屏。

在莫奈系統(tǒng)中可以自定義配置圖表、地圖、文字，也可以嵌入視頻、動(dòng)態(tài)圖片等

 五  總結(jié) 

我們簡單回顧一下可視化大屏設(shè)計(jì)方案制定的流程：

首先在明晰設(shè)計(jì)需求為前提的情況下，根據(jù)實(shí)際應(yīng)用場景確定畫板大小、根據(jù)業(yè)務(wù)數(shù)據(jù)優(yōu)先級(jí)合理的規(guī)劃布局和信息層級(jí)；

再根據(jù)行業(yè)屬性、業(yè)務(wù)場景、客戶傾向性等因素確定適合大屏設(shè)計(jì)風(fēng)格；

大屏風(fēng)格確定之后，需要從數(shù)據(jù)分析維度，去選定最適合表達(dá)業(yè)務(wù)數(shù)據(jù)的圖表；

接著，就是采用設(shè)計(jì)組件庫和莫奈可視化引擎去快速搭建完成可視化大屏。