視覺化大屏業務之設計方案制定（下）

上一篇我們瞭解了一些硬體基礎以及如何拆解產品需求。本期我們沿著上篇的思路繼續和大家分享如何根據拆解出的需求制定相應的設計方案。

本文將從以下五個方面講解視覺化大屏從0到1的設計過程：

首先，確定畫板大小；然後，合理安排模組佈局；其次，明確整體介面的設計風格；再次，對業務資料進行梳理、合理安排資訊層級以及選擇合適的圖表去精準的表達業務資料；最後，就是快速的搭建一塊 可視 化大屏。

 一   確定畫板 

前期與客戶、產品經理溝通後，得到的有用資訊如下：

(1) 大屏被安置於室內；

(2) 適配電腦1920*1080解析度，大屏原始尺寸：5.8*3.2米，採用直投形式；

(3) LED螢幕點間距1.2毫米。

通過以上資訊，我們總結出大屏的色彩明度不易過亮。電腦直投形式按照“投屏電腦的解析度為1920*1080”設計就可以保證投屏的清晰度，不會產生拉伸和變形。因為LED屏的點間距1.2毫米，屬於比較清晰的螢幕，所以我們把最小字號設定為12畫素。

 二   規劃佈局 

確定了畫板的大小，下一步需要根據產品原型優化頁面佈局。

一般中心的位置會放置地圖，其餘的指標按優先順序依次在地圖周圍展開。

首先搭建資訊分佈框架，根據這個框架往裡邊填充內容就更規整了。大屏是以資料展示為主，內外邊距的設定較小，希望能給資料展示留更多的空間。目前這張螢幕每個模組包括標題、資料指標以及資料分析圖表三個部分。

在設計時，首先要讓使用者獲取到有用資訊。所以需要考慮哪些資訊內容優先順序更高。可以參考上篇分享內容：《 視覺化大屏業務之「需求理解」（上） 》

 三   設計風格 

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

通過這些影響因素蒐集了相關詞彙，最終提取3個核心關鍵詞。

(1) 科技。 我們的業務需求是：玉環市泵閥（水暖閥門）產業大腦，產業大腦就是將產業數字化治理。以科技驅動產業升級，是我們業務的核心目標。所以第一個關鍵詞為科技。

(2) 機械。 本屏主要是展示機械裝置相關的企業資料，所以，機械被選入了第二個關鍵詞。

(3) 玉環。 此處結合了地域文化：“ 玉環市 ” 被譽為中國閥門之都，並且玉環市的命名也是源於當地獨特的自然現象 “ 晨霧繚繞，形如玉環 ”，我們可以把這種感覺設計在大屏中。

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

將情緒版落實到具體的設計細節有這五個方向：

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

(2) 質感： 運用科技、光感；

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

(4) 動效： 採用流光等光效效果。

(5) 字型： 首選擇現代、簡潔一點的字型，更符合產業工業的氣質；也要考慮後期開發實現。目前莫奈系統中字型有限，需要在這裡找到比較符合現代感的字型。標題選用-京東朗正；其他字型選用-思源黑體；數字字型為選用-京東正黑。

 四   業務設計 

(1)視覺 層級 劃分： 我們針對業務內容（資訊維度的優先順序）進行了梳理：

第一視覺層級是希望使用者能第一眼看到的內容 ：這裡包括：指標名稱、資料指標、圖表、業務興趣點。

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

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

(2) 圖表的正確使用： 在選定適合的圖表表達業務資料之前，首先要明確資料指標所要表達的維度，它是否符合業務場景？它是否合理表達了該資料業務屬性？

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

(3) 圖表結構

以上是圖表的解構圖。它包括：圖表標題、X\Y軸線、座標軸文字、網格線、圖例以及圖表背景。圖表的每一部分都是可以根據介面整體設計風格去重新設計。不過前期請和開發工程師溝通好實現機制。瞭解圖表的構成，還有另外一個好處就是在產品原型內容缺失或者表達不準確時候我們知道如何去調整它。

(4) 圖表選擇

案例分析

上圖表是對平臺銷售趨勢進行分析，根據之前的研究表示趨勢的圖表有折線圖、面 積圖、桑基圖。

我們再看下該圖表產品原型存在的問題：1、X軸表示時間維度，Y軸上資料缺失；2、懸浮層要表達3個維度的資訊：該時間點下的訂單量和銷售額；3、該圖表沒有展示圖例資訊；4、桑基圖應用於資料維度趨勢比較複雜的情況下使用，而面積圖除了可以展示資料趨勢以外，還可以通過面積對比不同的資料量，但是訂單量和銷售額不在同一個分析維度，因此不需要對比。

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

(5) 快速搭建

可以 分為以下兩步：

第一步：設計師用我們長期積累的設計元件快速搭建介面；

第二步：設計師/研發人員用京東城市的資料視覺化引擎—莫奈去快速實現介面效果。

上面這張屏正是採用了設計元件搭建而成。元件化不僅在提升設計師設計效率方面有著很重要的意義，還能夠在專案長期迭代和多人協同完成設計方案的情況下保證設計的一致性。從而節省了更多的時間讓我們去打磨設計細節。

以下附上我們還在不斷完善的Rainbow D（京東智慧城市設計語言系統）。本設計系統包含了視覺化元件庫、中後臺元件庫以及相應的設計規範供大家參考。

網址：http://dev-uc.urban-computing.cn/find-react/index-cn

如果有專案週期特別緊張的情況下，客戶想要快速看到線上效果，設計師也可以協助產品在莫奈系統上（京東城市資料視覺化引擎）快速搭建產品原型。以下為在莫奈系統中搭建的大屏。

在莫奈系統中可以自定義配置圖表、地圖、文字，也可以嵌入視訊、動態圖片等

 五   總結 

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

首先在明晰設計需求為前提的情況下，根據實際應用場景確定畫板大小、根據業務資料優先順序合理的規劃佈局和資訊層級；

再根據行業屬性、業務場景、客戶傾向性等因素確定適合大屏設計風格；

大屏風格確定之後，需要從資料分析維度，去選定最適合表達業務資料的圖表；

接著，就是採用設計元件庫和莫奈視覺化引擎去快速 搭建完 成視覺化大屏。

伸出你可愛的手指給我們 點個贊 和 在看 唄

如果能 分享 就更好了