2024-10-30 藍藍小助手
大數據時代大到來，推動可視化行業的蓬勃發展，如果繼續用傳統的形式來展現龐大的數據信息是不可能的，3D可視化的展現形式結合云計算數據分析、物聯網技術，建立交互式、吸引人視覺、承載大量數據并且簡單直觀的可視化界面就顯得尤為重要了。我通過以往的經驗總結了可視化大屏從0到1的設計方案制定同大家分享，希望給想接觸可視化大屏設計的朋友們一些幫助。
通過前期與客戶、產品的溝通提煉有用信息，從抽象的概念到實際落地的具象界面，本文將從以下五個方面講解可視化大屏從 0 到 1 的設計過程：
首先，確定畫板大小；然后，合理安排模塊布局；其次，明確整體界面的設計風格；再次，對業務數據進行梳理、合理安排信息層級以及選擇合適的圖表去精準的表達業務數據；最后，就是快速的搭建一塊可視化大屏。
前期與客戶、產品經理溝通后，得到的有用信息如下：
1.大屏被安置于室內；
2.配電腦 1920*1080 分辨率，大屏原始尺寸：5.8*3.2 米，采用直投形式；
3.LED 屏幕點間距 1.2 毫米。
通過以上信息，我們總結出大屏的色彩明度不易過亮。電腦直投形式按照“投屏電腦的分辨率為 1920*1080”設計就可以保證投屏的清晰度，不會產生拉伸和變形。因為 LED 屏的點間距 1.2 毫米，屬于比較清晰的屏幕，所以我們把最小字號設定為 12 像素。
確定了畫板的大小，下一步需要根據產品原型優化頁面布局。
一般中心的位置會放置地圖，其余的指標按優先級依次在地圖周圍展開。
首先搭建信息分布框架，根據這個框架往里邊填充內容就更規整了。大屏是以數據展示為主，內外邊距的設定較小，希望能給數據展示留更多的空間。目前這張屏幕每個模塊包括標題、數據指標以及數據分析圖表三個部分。
在設計時，首先要讓用戶獲取到有用信息。所以需要考慮哪些信息內容優先級更高。
風格定義主要依據上一篇文章分析得出的行業屬性、業務應用場景、地域文化背景以及前期與客戶溝通時提到的一些訴求以及審美傾向，甚至于時下流行時政熱點、天氣等因素都能成為影響整體設計風格的誘因。
通過這些影響因素搜集了相關詞匯，最終提取 3 個核心關鍵詞。
① 科技。我們的業務需求是：玉環市泵閥（水暖閥門）產業大腦，產業大腦就是將產業數字化治理。以科技驅動產業升級，是我們業務的核心目標。所以第一個關鍵詞為科技。
② 機械。本屏主要是展示機械設備相關的企業數據，所以，機械被選入了第二個關鍵詞。
③ 玉環。此處結合了地域文化：“ 玉環市 ” 被譽為中國閥門之都，并且玉環市的命名也是源于當地獨特的自然現象 “ 晨霧繚繞，形如玉環 ”，我們可以把這種感覺設計在大屏中。
看到這個情緒板后，大家是不是頭腦中已經描摹出一副大屏的初步模樣了？
將情緒版落實到具體的設計細節有這五個方向：
① 圖形：我們選用偏機甲風的造型。與機械硬朗的感覺相比，細節上我們采用圓角做融合；
② 質感：運用科技、光感；
③ 色彩：傾向于科技藍，并且這這塊客戶也有明確表示過藍色更符合他們企業的整體調性。為了豐富畫面整體效果，為此增加了黃色、綠為輔助色。
④ 動效：采用流光等光效效果。
⑤ 字體：首選擇現代、簡潔一點的字體，更符合產業工業的氣質；也要考慮后期開發實現。目前莫奈系統中字體有限，需要在這里找到比較符合現代感的字體。標題選用-京東朗正；其他字體選用-思源黑體；數字字體為選用-京東正黑。
1. 視覺層級劃分：我們針對業務內容（信息維度的優先級）進行了梳理：
第一視覺層級是希望用戶能第一眼看到的內容：這里包括：指標名稱、數據指標、圖表、業務興趣點。
第二視覺層級是指模塊背景層：包括模塊 UI-背景、裝飾元素、圖標、控件等。
第三層視覺級為基礎底圖層：包括行政區域-邊界、地面、地形、建筑、道路、水域、綠地等。
2. 圖表的正確使用：在選定適合的圖表表達業務數據之前，首先要明確數據指標所要表達的維度，它是否符合業務場景？它是否合理表達了該數據業務屬性？
在這里我對常用的圖表做了個歸類。在不同維度下，應該選擇什么類型的圖表，供大家參考。
3. 圖表結構
以上是圖表的解構圖。它包括：圖表標題、X\Y 軸線、坐標軸文本、網格線、圖例以及圖表背景。圖表的每一部分都是可以根據界面整體設計風格去重新設計。不過前期請和開發工程師溝通好實現機制。了解圖表的構成，還有另外一個好處就是在產品原型內容缺失或者表達不準確時候我們知道如何去調整它。
案例分析
上圖表是對平臺銷售趨勢進行分析，根據之前的研究表示趨勢的圖表有折線圖、面積圖、?；鶊D。
我們再看下該圖表產品原型存在的問題：
① X 軸表示時間維度，Y 軸上數據缺失；
② 懸浮層要表達 3 個維度的信息：該時間點下的訂單量和銷售額；
③該圖表沒有展示圖例信息；
?；鶊D應用于數據維度趨勢比較復雜的情況下使用，而面積圖除了可以展示數據趨勢以外，還可以通過面積對比不同的數據量，但是訂單量和銷售額不在同一個分析維度，因此不需要對比。
所以最后我們還是采用了更簡單易懂的折線圖。
5. 快速搭建
可以分為以下兩步：
第一步：設計師用我們長期積累的設計組件快速搭建界面；
第二步：設計師/研發人員用京東城市的數據可視化引擎—莫奈去快速實現界面效果，目前市面上可視化搭建平臺有很多大家都可以嘗試一下。
上面這張屏正是采用了設計組件搭建而成。組件化不僅在提升設計師設計效率方面有著很重要的意義，還能夠在項目長期迭代和多人協同完成設計方案的情況下保證設計的一致性。從而節省了更多的時間讓我們去打磨設計細節。
以下附上我們還在不斷完善的 Rainbow D（京東智能城市設計語言系統）。本設計系統包含了可視化組件庫、中后臺組件庫以及相應的設計規范供大家參考。
網址： http://dev-uc.urban-computing.cn/find-react/index-cn
如果有項目周期特別緊張的情況下，客戶想要快速看到線上效果，設計師也可以協助產品在莫奈系統上（京東城市數據可視化引擎）快速搭建產品原型。以下為在莫奈系統中搭建的大屏。
在莫奈系統中可以自定義配置圖表、地圖、文字，也可以嵌入視頻、動態圖片等
我們簡單回顧一下可視化大屏方案制定的流程：
首先在明晰設計需求為前提的情況下，根據實際應用場景確定畫板大小、根據業務數據優先級合理的規劃布局和信息層級；
再根據行業屬性、業務場景、客戶傾向性等因素確定適合大屏設計風格；
大屏風格確定之后，需要從數據分析維度，去選定最適合表達業務數據的圖表；
接著，就是采用設計組件庫和莫奈可視化引擎去快速搭建完成可視化大屏
藍藍設計(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發