1.4.2　數據可視化設計四要素

由于大多數剛接觸可視化大屏的UI設計師通常都有其他產品類型的設計經驗，具備一定的產品設計功底，因此對數據可視化設計比較容易上手。

數據可視化設計的要素有四個：第一，設計師要有數據感，能夠通過設計表達數據；第二，能夠駕馭科技感、FUI等設計風格；第三，具備動效設計的能力，因為大屏強調動感體驗；第四，具備3D設計的能力，能夠直觀地展示數據可視化的真實場景，如圖1-12所示。

1. 數據感

當你拿到一組數據時，第一步要對數據進行正確的解讀，然后選用最適合的圖表進行表達，最后對圖表進行合理的設計。

要想培養數據感，建議大家把Echarts（可視化圖表組件）網站中的圖表全部研究一遍，再對其中不理解的圖表進行拆解并研究其中的數據結構。這樣，當工作中遇到同樣的數據結構時，就能夠高效、正確地選用圖表。如圖1-13所示，是拆解平行坐標圖數據的方法。

另外，設計師還要了解常用圖表的樣式和擴展性，比如分類過多的趨勢數據是如何呈現的，圖1-14中是可以使用滑塊的折線圖。同時，設計師還可以結合業務需求，通過在滑塊的縮略圖上增加數據高點或低點的預警提示等進行擴展設計。

2. 設計風格

大屏多數以科技感強、暗色系的風格為主，設計師要做的就是把產品需求與“科技”這個詞結合起來，并通過視覺設計的方式呈現出來，讓用戶產生共鳴。

在設計開始前，設計師需要先將與“科技”相關的關鍵詞進行提取，比如可能會想到太空、人工智能、全息投影、粒子、機器人、AR/VR、武器、科幻電影、科幻城市、宇宙飛船、FUI等，然后再結合產品自身的屬性對關鍵詞進行篩選，接著通過關鍵詞搜索相關圖片。如圖1-15所示，在Behance網站搜索HUD就有眾多具有科技感元素的圖片可供參考，之后再利用合適的圖片定義設計風格。另外，設計師也可以搜索相關產品并挖掘它們的設計共性作為設計參考。

3. 動效設計

產品動效通常分為兩種：交互動效和視覺動效。交互動效可以增加產品的操作體驗，如可預期性、連續性、關聯性等；顧名思義，視覺動效可以增強產品的視覺體驗，觀賞起來更具愉悅感。如果可視化大屏設計有動效的呈現，則數據就會顯得靈動，產品會表現得有活力。另外，動效還能夠渲染產品的風格和主題。

視覺動效需要結合業務場景進行設計，不能為了動而動，要有目的性，否則可能會適得其反。學習動效設計，要做到對軟件熟練運用。例如，After Effects（簡稱AE）就是非常出色的動效設計軟件，它的設計效果不僅強大，而且還能夠助力動效的落地，減少開發成本，這些在后面會進行詳細講解。

4. 3D設計

3D設計能夠直觀地展示數據可視化的真實場景，這也是目前數據可視化產品追求的效果，如3D場景的智慧城市、3D地球、3D人物等效果。以3D的視角還原真實的場景，能呈現一種更有沉浸感的視覺表現。

用于數據可視化3D設計的軟件非常多，如Cinema 4D（簡稱C4D），AE，Ventuz，Unity3D（簡稱U3D），Unreal Engine 4（簡稱UE4）等。其中，有的是做視覺呈現的，如C4D；有的本身就是開發軟件，如U3D，UE4，它們在運用和學習上有很大的區別，這些內容在第6章會詳細介紹。