編輯導語_相信大家對數據可視化這個概念已經很熟悉了_數據可視化能夠給人帶來直觀的感受_并且有利于我們更有效率地完成任務_同時起到交流與分享的作用。那么對于大屏數據可視化的具體流程你了解嗎？具體應該怎么做？作者總結了一套流程_供你參考。

一、什么是大屏數據可視化？

談論起數據可視化設計_許多人會產生一個疑問_什么是數據可視化？我們由此問題著手_來談論下數據可視化設計。

經研究表明_人類大腦對視覺信息的處理優于對文本的處理。因此_數據可視化是使用圖表、圖形和設計元素把數據進行可視化_把相對復雜、抽象的數據通過可視的方式以人們更易理解的形式展示出來的一系列手段。

數據可視化可以使人們更有效率的完成某些任務_我們可以理解為三點優勢_

美觀展示:_用數據展示企業特色_大會展臺_媒體現場展示等數據驅動_實時查看業務概況、監控預警、驅動內部快速響應發掘價值_可視化數據呈現后_帶來的視覺感受會幫助人發現新的因素

數據可視化除了“可視”_還有可交流、可互動的特點。

設計帶來的不僅是瞬息處理海量數據搭配酷炫的可視化樣式所引起的視覺震撼_更應注重為業務需求服務_設計出符合不同行業需求的個性定制可視化_利于企業做出正確的商業決策_以有根據的數據呈現而幫助企業進行更科學的判斷而避免決策的失誤。

二、設計流程介紹

1._從業務需求分定優先級

關鍵指標是一些概括性詞語_是對一組或者一系列數據的統稱。通過規定主_次_輔_三個指標的關鍵詞來概念性的清晰大屏的主要展示內容_例如我們做的一個照明的監測項目_我們可以歸類成這三種_

主_主要指標位于屏幕中央_為地圖展現照明區域使用數據。次_次要指標位于屏幕兩側以圖表的形式展現。輔_主要指標的補充信息鼠標點擊或懸停展示以及交互動效展示。

這樣就可以方便在腦海中確定大屏的整體構架_以便于我們接下來的細化。

2._通過指標分析維度確立可視化圖表類型

同一個指標的數據_從不同維度分析就有不同結果。如果分析的維度沒有找準或定義的比較混亂_就會使可視化圖表無法清晰的看清楚含義_使人困惑。這里我們引用Stephen_Few_的文章_《Visual_Business_Intelligence》的四項維度-比較_聯系_分布_構成_來分析數據的邏輯性。

在思考四項維度的時候我們要思考幾個問題_

數據之間的相關性？指標里的數據主要集中在什么范圍、表現出怎樣的規律？數據之間存在何種差異、差異主要體現在哪些方面？指標里的數據都由哪幾部分組成、每部分占比如何？

以上的示例圖表的樣式比較傳統_但是思考問題的邏輯性是相通的_值得借鑒使用。

3._根據大屏尺寸_規劃頁面布局_確立交互稿

確立圖表類型后_下一步要進入到布局具體的信息位置_確立交互稿的步驟。確立交互稿的第一步就是要確定大屏的尺寸。客戶的大屏尺寸不用會影響到整體的布局和效果_設計的時候也要考慮下是否有拼接大屏接縫的問題_盡量以拼接屏尺寸來確立柵格化布局。

尺寸確立后_接下來要對設計稿進行布局和頁面的劃分。

布局這里我們就要參考第一項的業務需求優先級來布局畫面分割面積。核心業務指標安排在中間位置、占較大面積；其余的指標按優先級依次在核心指標周圍展開。

一般把有關聯的指標讓其相鄰或靠近_把圖表類型相近的指標放一起_這樣能減少觀者認知上的負擔并提高信息傳遞的效率。視覺上要盡量規避文字羅列或圖表羅列_注意方圓圖表的面積比例問題等_也是布局期間需要注意的事項。

4._確定設計風格與設計進行

設計風格的選擇切勿追求效果炫酷而不符合業務需求_選擇最合適的而不是選擇最絢爛的尤為重要。因為設計中涉及的范圍比較廣_下面展示一些不同行業對應的不同構圖布局與元素的應用案例_

發動機的可視化以突出發電機產品為主_周圍_UI_以大圓角形式設計_使視覺由四周向中間包圍_集中于中心。

挖掘機的可視化采用了大地色進行設計_采用了色彩共情的原理_結合簡潔的線性UI_使大屏在接地氣的同時不失高端雅致的效果。

醫院的可視化設計以冷白色為主_突出醫院給人的干凈_嚴肅的感覺_仿佛能聞到消毒水的氣味。以模型展示為主_按鈕樣式也采用了以面為主的設計配合大面積色塊分布為主的模型設計。

地鐵站的可視化以寫實風格為主_再現了真實地鐵站的樣貌_以及身臨其境的動畫交互體驗。

5._溝通與修改

在做設計中一個很重要的點就是溝通_無論是設計師內部的溝通還是設計師與客戶的溝通都會對大屏最后的修改效果產生一個很大的影響。

設計師在內部溝通時要從專業角度吸取知識與建議_并從客戶那里吸取業務需求與客戶心理訴求。這時對于意見的篩選取舍就很重要_設計師可能會被復雜的審核流程和不同外行人士的不同喜好而干擾_這時設計師需要綜合意見_與項目經理一起把控設計的走向_在和客戶溝通中彼此商討相互學習與意見的妥協從而一步步優化設計方案。

當然設計沒有標準答案_也沒有完美的面面俱到的設計方案_最理想的標準就是達到客戶的理想訴求但對于自己做的設計一定要過了自己的這一關_能協調好自己的審美與客戶的需求兩贏的狀態才是一個好的設計。

同時在設計時因為使用的設備不同_大屏有她自己獨特的分辨率、屏幕組成、色彩顯示以及運行、展示環境_這里的很多問題只有設計稿投到大屏上才能夠被發現_所以這一步在樣圖溝通確認環節非常重要_有時候需要開發出demo_反復測試多次來修改協調最終上屏效果。

在測試時從設計上可以重點注重以下幾點_

之前確立的布局在放入設計內容后是否依然合適確立的圖表類型帶入數據后是否仍然客觀準確根據關鍵元素、色彩、結構、質感打造出的頁面風格是否基本傳達出了預期的氛圍和感受已有的樣式、數據內容、動效等在開發實現方面是否存在問題大屏是否存在色差、文字內容是否清晰可見、頁面是否存在變形拉伸等現象

6._開發與測試

將設計稿交與前端進行制作_與程序溝通交互切換效果_大屏動效等_一起實現把控大屏的最終效果。

三、總結

希望我們設計的每一張可視化大屏都可以回歸到行業里_體現出設計師所理解的數據做出的設計后為社會生活帶來的真實的價值。就算她可能不夠炫酷_不夠時尚_但是她的每一項數據的表現_每一個元素的繪制_都是經過細節的設計雕琢_細節決定成敗。

本文由_@汪仔4285_原創發布于人人都是產品經理。未經許可_禁止轉載。

題圖來自_Pexels_基于CC0協議