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

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

1. 概念以及特點(diǎn)

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

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

2. 需要具備的知識(shí)體系

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

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

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

業(yè)務(wù)理解：大屏數(shù)據(jù)可視化設(shè)計(jì)因?yàn)樯婕暗臉I(yè)務(wù)領(lǐng)域較為廣泛，所以需要設(shè)計(jì)師具備一定行業(yè)基礎(chǔ)知識(shí)和業(yè)務(wù)積累，再把這些業(yè)務(wù)知識(shí)應(yīng)用到實(shí)際的大屏場(chǎng)景的設(shè)計(jì)中去，學(xué)會(huì)用合理的設(shè)計(jì)表達(dá)來(lái)講故事。

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

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

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

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

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

以下，我們通過(guò)一個(gè)具體的需求事例來(lái)具體說(shuō)明

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

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

例如：

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

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

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

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

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

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

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

以上原型主要模塊有：

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

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

我們對(duì)需求了解清楚了，需要進(jìn)一步對(duì)各個(gè)模塊需求分析理解：

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

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

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

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

在設(shè)計(jì)中我們運(yùn)用對(duì)比等形式，圖表準(zhǔn)確的表達(dá)，能夠讓用戶一目了然，易看易懂，從而提升用戶體驗(yàn)。

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

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

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

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

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

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

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

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

一、確定畫(huà)板

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

1. 大屏被安置于室內(nèi)；
2. 適配電腦 1920*1080 分辨率，大屏原始尺寸：5.8*3.2 米，采用直投形式；
3. LED 屏幕點(diǎn)間距 1.2 毫米。

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

二、規(guī)劃布局

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

一般中心的位置會(huì)放置地圖，其余的指標(biāo)按優(yōu)先級(jí)依次在地圖周?chē)归_(kāi)。

首先搭建信息分布框架，根據(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)容

三、設(shè)計(jì)風(fēng)格

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

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

① 科技。我們的業(yè)務(wù)需求是：玉環(huán)市泵閥（水暖閥門(mé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)鍵詞為科技。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 圖表選擇

案例分析

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

我們?cè)倏聪略搱D表產(chǎn)品原型存在的問(wèn)題：

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

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

5. 快速搭建

可以分為以下兩步：

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

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

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

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

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

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

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

五、總結(jié)

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

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

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

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

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

作者：JDTDA