大數(shù)據(jù)時代大到來，推動可視化行業(yè)的蓬勃發(fā)展，如果繼續(xù)用傳統(tǒng)的形式來展現(xiàn)龐大的數(shù)據(jù)信息是不可能的，3D可視化的展現(xiàn)形式結(jié)合云計算數(shù)據(jù)分析、物聯(lián)網(wǎng)技術(shù)，建立交互式、吸引人視覺、承載大量數(shù)據(jù)并且簡單直觀的可視化界面就顯得尤為重要了。我通過以往的經(jīng)驗總結(jié)了可視化大屏從0到1的設(shè)計方案制定同大家分享，希望給想接觸可視化大屏設(shè)計的朋友們一些幫助。

前期調(diào)研

為精準達到設(shè)計目標，我們前期要對需求進行梳理分析，將產(chǎn)品的業(yè)務(wù)目標與視覺設(shè)計目標相統(tǒng)一，才能更好的達成目標。以下拆解提煉出獲取的有用信息包括，客戶\產(chǎn)品需求、業(yè)務(wù)目標、硬件設(shè)備。

 

 

根據(jù)需求制定設(shè)計方案

通過前期與客戶、產(chǎn)品的溝通提煉有用信息，從抽象的概念到實際落地的具象界面，本文將從以下五個方面講解可視化大屏從 0 到 1 的設(shè)計過程：

 

 

 

首先，確定畫板大小；然后，合理安排模塊布局；其次，明確整體界面的設(shè)計風格；再次，對業(yè)務(wù)數(shù)據(jù)進行梳理、合理安排信息層級以及選擇合適的圖表去精準的表達業(yè)務(wù)數(shù)據(jù)；最后，就是快速的搭建一塊可視化大屏。

 

 

 

一、確定畫板

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

 

 

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

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

3.LED 屏幕點間距 1.2 毫米。

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

 

二、規(guī)劃布局

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

 

 

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

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

在設(shè)計時，首先要讓用戶獲取到有用信息。所以需要考慮哪些信息內(nèi)容優(yōu)先級更高。

 

三、設(shè)計風格

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

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

 

 

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

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

③ 玉環(huán)。此處結(jié)合了地域文化：“ 玉環(huán)市 ” 被譽為中國閥門之都，并且玉環(huán)市的命名也是源于當?shù)鬲毺氐淖匀滑F(xiàn)象 “ 晨霧繚繞，形如玉環(huán) ”，我們可以把這種感覺設(shè)計在大屏中。

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

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

 

 

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

② 質(zhì)感：運用科技、光感；

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

④ 動效：采用流光等光效效果。

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

 

四、業(yè)務(wù)設(shè)計

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

 

 

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

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

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

 

2. 圖表的正確使用：在選定適合的圖表表達業(yè)務(wù)數(shù)據(jù)之前，首先要明確數(shù)據(jù)指標所要表達的維度，它是否符合業(yè)務(wù)場景？它是否合理表達了該數(shù)據(jù)業(yè)務(wù)屬性？

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

 

 

 

3. 圖表結(jié)構(gòu)

 

 

以上是圖表的解構(gòu)圖。它包括：圖表標題、X\Y 軸線、坐標軸文本、網(wǎng)格線、圖例以及圖表背景。圖表的每一部分都是可以根據(jù)界面整體設(shè)計風格去重新設(shè)計。不過前期請和開發(fā)工程師溝通好實現(xiàn)機制。了解圖表的構(gòu)成，還有另外一個好處就是在產(chǎn)品原型內(nèi)容缺失或者表達不準確時候我們知道如何去調(diào)整它。

 

4. 圖表選擇

 

 

案例分析

上圖表是對平臺銷售趨勢進行分析，根據(jù)之前的研究表示趨勢的圖表有折線圖、面積圖、?；鶊D。

我們再看下該圖表產(chǎn)品原型存在的問題：

① X 軸表示時間維度，Y 軸上數(shù)據(jù)缺失；

② 懸浮層要表達 3 個維度的信息：該時間點下的訂單量和銷售額；

③該圖表沒有展示圖例信息；

桑基圖應(yīng)用于數(shù)據(jù)維度趨勢比較復(fù)雜的情況下使用，而面積圖除了可以展示數(shù)據(jù)趨勢以外，還可以通過面積對比不同的數(shù)據(jù)量，但是訂單量和銷售額不在同一個分析維度，因此不需要對比。

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

 

5. 快速搭建

可以分為以下兩步：

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

第二步：設(shè)計師/研發(fā)人員用京東城市的數(shù)據(jù)可視化引擎—莫奈去快速實現(xiàn)界面效果，目前市面上可視化搭建平臺有很多大家都可以嘗試一下。

 

 

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

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

網(wǎng)址： http://dev-uc.urban-computing.cn/find-react/index-cn

 

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

 

 

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

 

總結(jié)

我們簡單回顧一下可視化大屏方案制定的流程：

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

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

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

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

作者：Crystal克莉絲多
鏈接：https://www.zcool.com.cn/article/ZMTU0NDkyOA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

藍藍設(shè)計(m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)