在可視化大屏業(yè)務(wù)中，設(shè)計師如何快速了解業(yè)務(wù)并產(chǎn)出合理的方案呢？我們把日常工作做了梳理，為了大家有更好的閱讀體驗，文章將拆分為需求理解與設(shè)計方案制定兩部分，本篇介紹可視化大屏業(yè)務(wù)需求理解與設(shè)計。

一、大屏數(shù)據(jù)可視化設(shè)計基礎(chǔ)

1. 概念以及特點

大屏數(shù)據(jù)可視化設(shè)計，是以大屏為顯示載體，用直觀形象的圖形語言表達抽象復雜的數(shù)據(jù)；讓用戶易看易懂，幫助他們輔助決策等等。

大屏數(shù)據(jù)可視化設(shè)計具有以下特點：硬件種類多且各家尺寸和比例不一，具有獨特性；業(yè)務(wù)涉及行業(yè)廣、場景多且空間有限、具有專業(yè)性；設(shè)計視覺要求炫酷，需掌握多種技能，并且運用設(shè)計語言準確的表達出來，具有綜合性。

2. 需要具備的知識體系

在大屏數(shù)據(jù)可視化設(shè)計，設(shè)計師需要具備哪些能力呢？本文將從大屏硬件環(huán)境、業(yè)務(wù)理解力、視覺表現(xiàn)力三個方面做陳述與說明。

大屏硬件環(huán)境，需要了解大屏顯示終端的硬件各種類型：DLP、LCD、LED 以及特性。針對不同物理硬件的特點，我們采取不同的設(shè)計方法；設(shè)計前必須了解大屏比例尺寸。例如：拼接屏單屏分辨率是 1920*1080。那么，大屏總分辨率寬是 1920*N，高是 1080*N（其中 N 代表橫向和豎向拼接屏個數(shù) ）；

除此之外，大屏的物理環(huán)境還受終端硬件特性、坐席最佳視距，室內(nèi)采光等因素的影響。因此，我們在設(shè)計的時候，會根據(jù)這些因素考慮字號的大小和整體屏幕的色彩明度。

業(yè)務(wù)理解：大屏數(shù)據(jù)可視化設(shè)計因為涉及的業(yè)務(wù)領(lǐng)域較為廣泛，所以需要設(shè)計師具備一定行業(yè)基礎(chǔ)知識和業(yè)務(wù)積累，再把這些業(yè)務(wù)知識應用到實際的大屏場景的設(shè)計中去，學會用合理的設(shè)計表達來講故事。

講好故事前提是需要對業(yè)務(wù)有深刻的理解，我們可以通過拆解業(yè)務(wù)目標、分析并重組業(yè)務(wù)模塊進行設(shè)計。正確的選擇合理的指標，準確的采用形象的圖表，用大數(shù)據(jù)之美來幫助用戶快速理解業(yè)務(wù)的核心內(nèi)容。

以筆者多年的設(shè)計經(jīng)驗，大屏數(shù)據(jù)可視化設(shè)計多應用在：企業(yè)展示、實時監(jiān)控、輔助決策、戰(zhàn)略指揮、城市運行、領(lǐng)導駕駛艙、運營匯報、展會中心等場景。所以，針對以上場景的應用，我們平時應該多多關(guān)注這些方面的信息，做好必要的知識沉淀。

除此，設(shè)計師還需要具備綜合的設(shè)計能力。不僅僅只是具備基本的界面設(shè)計能力，還需要具備三維建模、渲染動畫、動效設(shè)計等，數(shù)字孿生是未來的發(fā)展方向。因此就要求設(shè)計師必須熟悉地理信息和三維引擎等技術(shù)。

二、大屏數(shù)據(jù)可視化設(shè)計需求拆解

1. 初步溝通后，如何拆解需求

以下，我們通過一個具體的需求事例來具體說明

我們先看一段產(chǎn)品經(jīng)理和設(shè)計師之間的對話：

通過以上對話，我們可以針對需求中的關(guān)鍵字進行挖掘，獲取有用信息（隱藏需求）。

例如：

"某地"就可以考慮采用代表該地域特征物產(chǎn)或地標建筑，可準備相關(guān)地域問文化素材或矢量地圖；

"產(chǎn)業(yè)大腦"自帶行業(yè)屬性。設(shè)計師可以提前準備下與此相關(guān)的行業(yè)知識。

"大屏電腦都用"說明需要適配大屏端和 PC 端。所以，在設(shè)計時，需要考慮大屏尺寸比例與電腦尺寸比例是否一致；

" LED " 表明硬件終端類型，需要了解 LED 屏幕像素間距大小，設(shè)計時可考慮字體規(guī)范；

" 5.8m*3.2m " 有了物理尺寸可以換算像素以及比例，方便設(shè)計師確定界面尺寸大??；

" 緊急！明天要 " 說明任務(wù)緊急，設(shè)計需要快速，可考慮采用已有組件快速搭建；

通常我們拿到產(chǎn)品經(jīng)理的需求原型，先熟悉整體的業(yè)務(wù)由那些各個模塊構(gòu)成、各個模塊之間的主次關(guān)系以及交互行為等。

以上原型主要模塊有：

1. 頂部：主標題
2. 中間：地圖展示企業(yè)分布區(qū)域、預警企業(yè)以及預警詳情 （主場景）
   左右兩側(cè)和底部：圖表展示產(chǎn)業(yè)相關(guān)數(shù)據(jù)報表 （次要）
3. 模塊布局："回"字型布局
4. 層級方式：底圖為地圖，上層浮層為圖表

以上初步了解原型之后，我們可以通過參加產(chǎn)品原型評審會議進一步詳細了解需求，有問題可以再評審會上提問交流解惑。

我們對需求了解清楚了，需要進一步對各個模塊需求分析理解：

1. 標題：要言簡意賅，如冗余可進行優(yōu)化；
2. 指標：指標應考慮名稱、指標數(shù)據(jù)展示多情況下保障足夠的擴展空間；
3. 圖表：準確選用合理表達業(yè)務(wù)內(nèi)容的圖表；
4. 例如：全鏈營銷模塊
5. 標題：全鏈營銷
6. 指標：指標名稱，2~6 個字符，指標數(shù)值，1~6 位數(shù)；
7. 圖表：業(yè)務(wù)表達，近一年銷售量和訂單量的趨勢變化，選用兩條折
8. 線圖表達；維度：月份 1~12 月；度量：銷售額 1~4 位數(shù)，單位萬元；訂單量：1~4 位數(shù)，單位：件

通過分析理解，我們可以更深入的理解業(yè)務(wù)模塊的內(nèi)容，以便于我們著手開始設(shè)計：

在對業(yè)務(wù)理解中，我們先以講故事的方式，幫助用戶理解業(yè)務(wù)場景。比如：某市的領(lǐng)導駕駛艙大屏設(shè)計，哪部分數(shù)據(jù)是最重要的，用戶最關(guān)心的內(nèi)容是什么？在設(shè)計的時候，設(shè)計師會著重刻畫這部分數(shù)據(jù)內(nèi)容的展示。

我們可以通過行政區(qū)域的下鉆或者界面數(shù)據(jù)的聯(lián)動等交互分主次，分層級的讓用戶知曉業(yè)務(wù)重要數(shù)據(jù)指標和內(nèi)容；

在設(shè)計中我們運用對比等形式，圖表準確的表達，能夠讓用戶一目了然，易看易懂，從而提升用戶體驗。

在對需求理解的這個過程中，我們不斷的分析、拆分、重組各個業(yè)務(wù)的模塊，以便于我們更好的吃透整個大屏數(shù)據(jù)模塊，整理出對設(shè)計更有價值的信息來設(shè)計界面，以滿足客戶的需要。

另外也會有一些硬性需求植入。所以需要設(shè)計師整體整理大屏思路。例如，某屏需求最后分析輸出如下：

A. 需求側(cè)（客戶方&產(chǎn)品經(jīng)理）：大屏界面信息展示要有層次、突出核心指標、便于領(lǐng)導觀摩，并且要適配 PC 端；

B. 設(shè)計側(cè)：大屏硬件特點、尺寸比例、坐席環(huán)境以及設(shè)計目標

1. 指標卡清晰
2. 圖表表達準確、層次分明
3. 業(yè)務(wù)邏輯清晰
4. 設(shè)計組件快速搭建界面

C. 研發(fā)側(cè)：使用莫奈配置大屏，后臺接入指標系統(tǒng)；

以下五個方面講解可視化大屏從 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)先級更高?？梢詤⒖忌掀窒韮?nèi)容

三、設(shè)計風格

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

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

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)品原型存在的問題：

1. X 軸表示時間維度，Y 軸上數(shù)據(jù)缺失；
2. 懸浮層要表達 3 個維度的信息：該時間點下的訂單量和銷售額；
3. 該圖表沒有展示圖例信息；
4. ?；鶊D應用于數(shù)據(jù)維度趨勢比較復雜的情況下使用，而面積圖除了可以展示數(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)包含了可視化組件庫、中后臺組件庫以及相應的設(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è)計方案制定的流程：

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

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

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

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

作者：JDTDA